Merge pull request #33 from Refugee-Aid-Capstone/skip-link-problem

fix: Add solution to jumping transition to play video after implement…
Refugee-Aid-Capstone · Oct 22, 2023 · 354fdd3 · 354fdd3
2 parents 7e87bf2 + 048af35
commit 354fdd3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/Components/Homepage/Homepage.js b/src/Components/Homepage/Homepage.js
@@ -1,9 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import refugeesImage from '../../images/refugees.png';
 import '../Homepage/Homepage.scss';
 
 function Homepage() {
   const [showVideo, setShowVideo] = useState(false);
+  const videoRef = useRef(null);
+
+  const handlePlayVideo = () => {
+    setShowVideo(true);
+    setTimeout(() => {
+      videoRef.current.focus();
+    }, 300); 
+  };
 
   return (
     <header className="home-header">
@@ -13,13 +21,13 @@ function Homepage() {
           <div className="media-side">
             <div className="media-content">
               {showVideo ? (
-                <div className="video-container">
+                <div className={`video-container ${showVideo ? 'active' : ''}`}>
                   <iframe
+                    ref={videoRef}
                     width="560"
                     height="315"
                     src="https://www.youtube.com/embed/Jzg842IC5e0?si=kj0WxGYPqjOZRywf"
                     title="YouTube video player"
-                    style={{border: "none"}}
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                     allowFullScreen
                   ></iframe>
@@ -54,7 +62,7 @@ function Homepage() {
               <div className="video-controls">
                 <button 
                   className="play-video" 
-                  onClick={() => setShowVideo(true)}
+                  onClick={handlePlayVideo}
                   aria-expanded={showVideo}
                 >
                   Play Video

diff --git a/src/Components/Homepage/Homepage.scss b/src/Components/Homepage/Homepage.scss
@@ -9,7 +9,11 @@ $netflix-red: #E50914;
   box-sizing: border-box;
 }
 
-//A11y
+body {
+  overflow-y: scroll;
+}
+
+// A11y
 .skip-link {
   position: absolute;
   top: -40px;
@@ -168,15 +172,22 @@ $netflix-red: #E50914;
 }
 
 .video-container {
+  opacity: 0;
+  transition: opacity 0.3s ease;
   margin-top: 30px;
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+
+  &.active {
+    opacity: 1;
+  }
 }
 
+
 iframe {
   position: absolute;
   top: 0;