feat(responsive-video): check reduced motion preferences, ignore abortError on the video element

components/shared/ResponsiveVideo/ResponsiveVideo.stories.tsx

@@ -14,6 +14,12 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const autoPlayFallback = (
+  <h3 className="font-bold text-lg text-light bg-primary px-4 py-2">
+    Auto play failed. I am a fallback element
+  </h3>
+);
+
 export const ResponsiveVideo: Story = {
   args: {
     src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
@@ -23,6 +29,7 @@ export const ResponsiveVideo: Story = {
         media: '(min-width: 640px)'
       }
     ],
+    autoPlayFallback,
     autoPlay: true,
     controls: true,
     muted: true
@@ -33,10 +40,6 @@ export const AutoPlayFailed: Story = {
   args: {
     src: 'broken.mp4',
     autoPlay: true,
-    autoPlayFallback: (
-      <h3 className="font-bold text-lg text-light bg-primary px-4 py-2">
-        Auto play failed. I am a fallback element
-      </h3>
-    )
+    autoPlayFallback
   }
 };

components/shared/ResponsiveVideo/ResponsiveVideo.tsx

@@ -33,28 +33,52 @@ const ResponsiveVideo = ({
   const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    async function play() {
-      try {
-        autoPlay && (await videoRef?.current?.play());
-      } catch (err) {
-        setIsAutoPlayFailed(true);
-      }
-    }
-    play();
-  }, [autoPlay, currentSrc]);
-
-  useEffect(() => {
     const handleResize = () => {
+      /** find the set that matches current media query */
       const matchedSet = srcSet?.find(
         ({ media }) => window.matchMedia(breakpoints[media] || media).matches
       );
+      /* set the current src to the matched set or the default src */
       setCurrentSrc(matchedSet?.src || src);
     };
-    window.addEventListener('resize', handleResize);
+    /* call handleResize on mount */
     handleResize();
+    /* add resize event listener to window */
+    window.addEventListener('resize', handleResize);
+    /* remove event listener on unmount */
     return () => window.removeEventListener('resize', handleResize);
   }, [src, srcSet]);
 
+  useEffect(() => {
+    async function play() {
+      try {
+        /** If user prefers reduced motion,
+         * throw an error and stop autoplay
+         */
+        const prefersReducedMotion = window.matchMedia(
+          '(prefers-reduced-motion: reduce)'
+        );
+
+        if (prefersReducedMotion.matches) {
+          throw new Error('User prefers reduced motion');
+        } else {
+          /* if autoplay is true, play the video */
+          autoPlay && (await videoRef?.current?.play());
+        }
+      } catch (error: any) {
+        /* AbortError happens when source is changed in runtime,
+         if error is not AbortError, mark autoPlay as failed
+         */
+        if (error.name !== 'AbortError') {
+          console.error(error);
+          /* if play failed, report that autoplay has failed */
+          setIsAutoPlayFailed(true);
+        }
+      }
+    }
+    play();
+  }, [autoPlay, currentSrc]);
+
   return isAutoPlayFailed && autoPlayFallback ? (
     autoPlayFallback
   ) : (