Migrate to app router (#2254)

components/Video/Video.module.css

@@ -0,0 +1,18 @@
+.player {
+  margin: 0 auto;
+}
+
+.player video {
+  border-radius: var(--radii-corner);
+}
+
+.wrapper.responsive {
+  position: relative;
+  padding-top: 56.25%; /* ratio of 1280x720 */
+}
+
+.wrapper.responsive .player {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

components/Video/Video.tsx

@@ -1,40 +1,9 @@
-import ReactPlayer from "react-player/file";
-import useHasMounted from "../../hooks/useHasMounted";
-import { styled, theme } from "../../lib/styles/stitches.config";
-import type { SourceProps } from "react-player/base";
-import type { FilePlayerProps } from "react-player/file";
+import clsx from "clsx";
+import type { ComponentPropsWithoutRef } from "react";
 
-const Player = styled(ReactPlayer, {
-  "& video": {
-    borderRadius: theme.radii.corner,
-  },
-});
+import styles from "./Video.module.css";
 
-const Wrapper = styled("div", {
-  variants: {
-    // determines placement of the player. true expands to full width while keeping the aspect ratio, false retains the
-    // video's native dimensions (but still shrinks if the parent is narrower than the video).
-    responsive: {
-      true: {
-        position: "relative",
-        paddingTop: "56.25%", // ratio of 1280x720
-
-        [`& ${Player}`]: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-        },
-      },
-      false: {
-        [`& ${Player}`]: {
-          margin: "0 auto",
-        },
-      },
-    },
-  },
-});
-
-export type VideoProps = Partial<FilePlayerProps> & {
+export type VideoProps = Omit<Partial<ComponentPropsWithoutRef<"video">>, "src"> & {
   src: {
     // at least one is required:
     webm?: string;
@@ -43,63 +12,36 @@ export type VideoProps = Partial<FilePlayerProps> & {
     vtt?: string;
     image?: string;
   };
-  title?: string;
   autoplay?: boolean;
   responsive?: boolean;
   className?: string;
 };
 
-const Video = ({ src, title, autoplay = false, responsive = true, className, ...rest }: VideoProps) => {
-  // fix hydration issues: https://github.com/cookpete/react-player/issues/1428
-  const hasMounted = useHasMounted();
-
-  const playerProps: Required<Pick<FilePlayerProps, "config">> & { url: SourceProps[] } = {
-    url: [],
-    config: {
-      attributes: {
-        controlsList: "nodownload",
-        preload: "metadata",
-        poster: src.image, // thumbnail
-        title: title,
-        autoPlay: autoplay,
-        loop: autoplay,
-        muted: autoplay, // no sound when autoplaying
-        controls: !autoplay, // only show controls when not autoplaying
-      },
-      tracks: [],
-    },
-  };
-
+const Video = ({ src, autoplay = false, responsive = true, className, ...rest }: VideoProps) => {
   if (!src || (!src.mp4 && !src.webm)) {
     throw new Error("'src' prop must include either 'mp4' or 'webm' URL.");
   }
 
-  if (src.webm) {
-    playerProps.url.push({
-      src: src.webm,
-      type: "video/webm",
-    });
-  }
-  if (src.mp4) {
-    playerProps.url.push({
-      src: src.mp4,
-      type: "video/mp4",
-    });
-  }
-  if (src.vtt) {
-    playerProps.config.tracks?.push({
-      kind: "subtitles",
-      src: src.vtt,
-      srcLang: "en",
-      label: "English",
-      default: true,
-    });
-  }
-
   return (
-    <Wrapper responsive={responsive} className={className}>
-      {hasMounted && <Player width="100%" height="100%" {...playerProps} {...rest} />}
-    </Wrapper>
+    <div className={clsx(styles.wrapper, responsive && styles.responsive, className)}>
+      <video
+        width="100%"
+        height="100%"
+        className={styles.player}
+        preload={autoplay ? "auto" : "metadata"}
+        controls={!autoplay}
+        autoPlay={autoplay || undefined}
+        playsInline={autoplay} // safari autoplay workaround
+        loop={autoplay || undefined}
+        muted={autoplay || undefined}
+        poster={src.image}
+        {...rest}
+      >
+        {src.webm && <source key={src.webm} src={src.webm} type="video/webm" />}
+        {src.mp4 && <source key={src.mp4} src={src.mp4} type="video/mp4" />}
+        {src.vtt && <track key={src.vtt} kind="subtitles" src={src.vtt} srcLang="en" label="English" default />}
+      </video>
+    </div>
   );
 };