added close button to video pop up, updated watch now button, updated…

… css styling for home page for close btn
waynemorphic · Aug 16, 2023 · ece2916 · ece2916
1 parent 285ef30
commit ece2916
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/pages/home/Home.css b/src/pages/home/Home.css
@@ -124,6 +124,12 @@
     height: 0;
 }
 
+.responsive-video .btn-close {
+    width: 1.5em;
+    height: 1.5em;
+    background-size: contain;
+}
+
 /* media queries */
 @media screen and (max-width: 600px) {
     .home {
@@ -205,5 +211,11 @@
         margin-left: 10px;
         padding-bottom: 10px;
         height: 1%;
+        flex-direction: column-reverse;
+    }
+
+    .responsive-video .btn-close {
+        margin: 1em 0;
+        width: 100%;
     }
 }
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
@@ -30,18 +30,24 @@ const Index = ({ handleWatchVideo, clicked }) => {
             </button>
           </Link>
           <button
+            id='watchBtn'
             className="booking-button"
             type="click"
             onClick={handleWatchVideo}
             src="https://www.youtube.com/watch?v=Gg4wtsWgw5k"
           >
-            Watch Video
+            {clicked ? "Close Video" : "Watch Video"}
           </button>
-          {clicked && (
+          {clicked ? (
             <div className="responsive-video">
-              <ReactPlayer url="https://www.youtube.com/watch?v=Gg4wtsWgw5k" controls={true} playsinline={true}/>
+              <ReactPlayer url="https://www.youtube.com/watch?v=Gg4wtsWgw5k" controls={true} playsinline={true} />
+              <button type="button" className="btn-close mx-2" aria-label="Close" onClick={handleWatchVideo}></button>
             </div>
-          )}
+          ) :
+            <div className="responsive-video">
+
+            </div>
+          }
         </div>
 
         <div className="details">
@@ -65,7 +71,17 @@ export default function Home() {
   // handle watch video
   const [clicked, isClicked] = useState(false);
 
-  const handleWatchVideo = () => isClicked(true);
+  const handleWatchVideo = () => isClicked(prevValue => !prevValue);
+
+  const responsiveVideoDiv = document.querySelector('.responsive-video')
+  const watchBtn = document.querySelector('#watchBtn')
+  document.addEventListener('click', e => {
+    if (clicked && e.target !== watchBtn) {
+      if (e.target !== responsiveVideoDiv) {
+        isClicked(false)
+      }
+    }
+  })
 
   return (
     <div>