From 048af354d4cd2285f5fec70e05b652e2dae58f8c Mon Sep 17 00:00:00 2001
From: Parvin Sattorova <nanajon66@gmail.com>
Date: Sun, 22 Oct 2023 14:52:37 -0600
Subject: [PATCH] fix: Add solution to jumping transition to play video after
 implimenting the A11y scip-link

---
 src/Components/Homepage/Homepage.js   | 16 ++++++++++++----
 src/Components/Homepage/Homepage.scss | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/Components/Homepage/Homepage.js b/src/Components/Homepage/Homepage.js
index 60f816f..fb4d827 100644
--- 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
index 9cf4fa2..21f1ffd 100644
--- 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,6 +172,8 @@ $netflix-red: #E50914;
 }
 
 .video-container {
+  opacity: 0;
+  transition: opacity 0.3s ease;
   margin-top: 30px;
   position: relative;
   width: 100%;
@@ -175,8 +181,13 @@ $netflix-red: #E50914;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+  
+  &.active {
+    opacity: 1;
+  }
 }
 
+
 iframe {
   position: absolute;
   top: 0;