Merge pull request #212 from RandomStudio/autoplay-issues

adjust autoplay
RandomStudio · Aug 29, 2023 · b892d18 · b892d18
2 parents 2b0f59f + 3430e69
commit b892d18
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 27 deletions.
diff --git a/src/components/HomeVideo/HomeVideo.module.css b/src/components/HomeVideo/HomeVideo.module.css
@@ -8,14 +8,12 @@
 
 .videoWrapper {
   width: 100%;
+  max-height: 100vh;
+  min-height: 60vh;
 
   & video {
     width: 100%;
-    height: auto;
-    min-height: 60vh;
-    min-height: 60svh;
-    max-height: 100vh;
-    max-height: 100svh;
+    height: 100%;
   }
 }
 

diff --git a/src/components/LazyLoad/LazyLoad.tsx b/src/components/LazyLoad/LazyLoad.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 type LazyLoadProps = {
-  children: React.ReactNode;
+  children: JSX.Element;
   onIntersect?: () => void;
 };
 

diff --git a/src/components/Video/Controls/Controls.tsx b/src/components/Video/Controls/Controls.tsx
@@ -36,7 +36,11 @@ const Controls = ({
 
   useEffect(() => {
     if (isPlaying) {
-      videoRef.current?.play();
+      videoRef.current
+        .play()
+        .catch(e =>
+          console.warn('Unable to autoplay without user interaction', e),
+        );
     } else {
       videoRef.current?.pause();
     }

diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
@@ -52,14 +52,15 @@ const Video = forwardRef<HTMLVideoElement, VideoProps>(
 
     const handleVideoReady = useCallback(() => {
       setHasLoaded(true);
-    }, []);
+      onReady();
+    }, [onReady]);
 
     const aspectRatioStyle = { aspectRatio: `${width} / ${height}` };
 
     useHlsVideo({
       isAutoplaying,
       isMounted,
-      onReady,
+      onReady: handleVideoReady,
       videoRef,
       src: hls,
     });
@@ -94,10 +95,9 @@ const Video = forwardRef<HTMLVideoElement, VideoProps>(
                 loop={isLooping}
                 muted
                 onClick={handleClick}
-                onPlaying={handleVideoReady}
                 playsInline
                 ref={videoRef}
-                src=""
+                src={hls}
                 style={aspectRatioStyle}
               />
 

diff --git a/src/components/Video/useHlsVideo.ts b/src/components/Video/useHlsVideo.ts
@@ -15,21 +15,21 @@ const useHlsVideo = ({
   videoRef: MutableRefObject<HTMLVideoElement>;
 }) => {
   useEffect(() => {
-    if (!isMounted || !videoRef.current || !Hls.isSupported()) {
+    if (!isMounted || !videoRef.current) {
       return;
     }
 
+    // if HLS is natively supported, we don't have to do anything
     if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
-      // eslint-disable-next-line no-param-reassign
-      videoRef.current.src = src;
-
-      videoRef.current.addEventListener('canplay', () => {
-        if (isAutoplaying) {
-          videoRef.current.play();
-        }
+      onReady();
 
-        onReady();
-      });
+      if (isAutoplaying) {
+        videoRef.current
+          .play()
+          .catch(e =>
+            console.warn('Unable to autoplay without user interaction', e),
+          );
+      }
 
       return;
     }
@@ -38,15 +38,22 @@ const useHlsVideo = ({
       startLevel: window.innerWidth > 1280 ? 4 : 2,
     });
 
-    hls.loadSource(src);
     hls.attachMedia(videoRef.current);
 
     hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-      if (isAutoplaying) {
-        videoRef.current.play();
-      }
+      hls.loadSource(src);
 
-      onReady();
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        if (isAutoplaying) {
+          try {
+            videoRef.current.play();
+          } catch (e) {
+            console.warn('Unable to autoplay without user interaction');
+          }
+        }
+
+        onReady();
+      });
     });
   }, [isMounted, videoRef, onReady, isAutoplaying, src]);
 };

diff --git a/src/pages/video/[id]/index.tsx b/src/pages/video/[id]/index.tsx
@@ -60,7 +60,11 @@ const VideoFocusModePage = ({ video }: VideoFocusModePageProps) => {
 
   const handleClick = useCallback(() => {
     if (videoRef.current?.paused) {
-      videoRef.current?.play();
+      videoRef.current
+        .play()
+        .catch(e =>
+          console.warn('Unable to autoplay without user interaction', e),
+        );
     } else {
       videoRef.current?.pause();
     }