From be79ce9d13cd168f4d24bad081f3c701d52a38a3 Mon Sep 17 00:00:00 2001
From: ITurres <emanueliturres.co@gmail.com>
Date: Sat, 8 Feb 2025 11:12:21 -0300
Subject: [PATCH] fix(access-page): Handle access video non-loading on mobile
 devices

---
 src/components/animations/AccessPageVideo.tsx |  1 +
 src/components/pages/AccessPage.tsx           | 24 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/animations/AccessPageVideo.tsx b/src/components/animations/AccessPageVideo.tsx
index 5070f16..e3aaf5f 100644
--- 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
index 215d84c..4732f0a 100644
--- 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');
     }
   };