fix(access-page): Handle access video non-loading on mobile devices

ITurres · Feb 8, 2025 · be79ce9 · be79ce9
1 parent 3abd4d1
commit be79ce9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/components/animations/AccessPageVideo.tsx b/src/components/animations/AccessPageVideo.tsx
@@ -16,6 +16,7 @@ function AccessPageVideo(props: AccessPageVideoProps): React.ReactElement {
       ref={$videoElement}
       className="accessPage-video"
       width="100%"
+      muted
     >
       <source src={webmVideo} type="video/webm" />
       <source src={mp4Video} type="video/mp4" />

diff --git a/src/components/pages/AccessPage.tsx b/src/components/pages/AccessPage.tsx
@@ -45,12 +45,32 @@ function AccessPage(): React.ReactElement {
       setTimeout(() => {
         if ($videoElement.current) {
           $videoElement.current.style.display = 'block';
-          $videoElement.current.play();
-          setPageTitle('🚀..........');
+          $videoElement.current.muted = true;
+
+          const playPromise = $videoElement.current.play();
+          if (playPromise !== undefined) {
+            playPromise
+              .then(() => {
+                // eslint-disable-next-line
+                console.log(
+                  '/iturres-reactive-portfolio/ Video started successfully',
+                );
+                setPageTitle('🚀..........');
+              })
+              .catch((error) => {
+                // eslint-disable-next-line
+                console.error('Video play failed:', error);
+                navigate('/homepage');
+              });
+          } else {
+            navigate('/homepage');
+          }
         }
       }, 200);
 
       $videoElement.current.addEventListener('ended', () => navigate('/homepage'));
+    } else {
+      navigate('/homepage');
     }
   };