modal works

client/components/App.jsx

@@ -5,6 +5,7 @@ function App () {
   return (
     <>
       <GetVid/>
+
     </>
   )
 }

client/components/Backdrop.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+// import { stateLogger } from '../../stateLogger'
+import { motion } from 'framer-motion'
+
+const Backdrop = ({ children, onClick }) => {
+  return (
+    <motion.div
+      className="backdrop"
+      onClick={onClick}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export default Backdrop

client/components/GetVid.jsx

@@ -55,7 +55,6 @@ function GetVid () {
 
   return (
     <>
-
       <VideoPlayer id={vidId[index]} setToggle={setToggle} toggle={toggle} minView={minView}/>
     </>
   )

client/components/Modal.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+
+import Backdrop from './Backdrop'
+
+function Modal ({ handleClose, text }) {
+  const dropIn = {
+    initial: {
+      y: '0',
+      opacity: 1
+    },
+    visible: {
+      y: '100vh',
+      opacity: 1,
+      transition: {
+        duration: 0.1,
+        type: 'spring',
+        damping: 25,
+        stiffness: 500
+      }
+    },
+    exit: {
+      y: '-100vh',
+      opacity: 0
+    }
+  }
+  return (
+    <Backdrop onClick={handleClose}>
+      <motion.div
+        onClick={(e) => e.stopPropagation()}
+        className='modal'
+        variants={dropIn}
+        initial='initial'
+        animate='visble'
+        exit='exit'
+      >
+        <h3>{text}</h3>
+        {/* <button onClick={handleClose}>Begin</button> */}
+      </motion.div>
+    </Backdrop>
+  )
+}
+
+export default Modal

client/components/VideoPlayer.jsx

@@ -1,8 +1,15 @@
 import React, { useState } from 'react'
 import YouTube from 'react-youtube'
+import Modal from './Modal'
+import { AnimatePresence } from 'framer-motion'
 
 function VideoPlayer ({ id, toggle, setToggle, minView }) {
   const [player, setPlayer] = useState(null)
+  const [modalOpen, setModalOpen] = useState(true)
+  function close () {
+    setModalOpen(false)
+    player.playVideo()
+  }
 
   const opts = {
     height: '390',
@@ -18,10 +25,6 @@ function VideoPlayer ({ id, toggle, setToggle, minView }) {
     setPlayer(event.target)
   }
 
-  function handleClick () {
-    player.playVideo()
-    console.log(player.isMuted())
-  }
   function onPlay () {
     player.unMute()
   }
@@ -36,8 +39,13 @@ function VideoPlayer ({ id, toggle, setToggle, minView }) {
 
   return (
     <>
-      {/* <h1 className='viewCount'>View Count: {minView}</h1> */}
-      <button className='pageEntrance' onClick={handleClick}>Go</button>
+      <AnimatePresence
+        initial={false}
+        exitBeforeEnter={true}
+      >
+        {modalOpen && <Modal modalOpen={modalOpen} handleClose={close} text={'begin'}/>}
+      </AnimatePresence>
+
       <div className='yt-player'>
         <YouTube
           videoId={id}

client/components/useModal.jsx

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+
+// Centralizes modal control
+const useModal = () => {
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const close = () => setModalOpen(false)
+  const open = () => setModalOpen(true)
+
+  return { modalOpen, close, open }
+}
+
+export default useModal