Migrate to app router (#2254)

components/YouTubeEmbed/YouTubeEmbed.module.css

@@ -0,0 +1,15 @@
+.wrapper {
+  position: relative;
+  padding-top: 56.25%; /* ratio of 1280x720 */
+}
+
+.player {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.player .react-player__preview,
+.player iframe {
+  border-radius: var(--radii-corner);
+}

components/YouTubeEmbed/YouTubeEmbed.tsx

@@ -1,46 +1,26 @@
-import ReactPlayer from "react-player/youtube";
-import useHasMounted from "../../hooks/useHasMounted";
-import { styled, theme } from "../../lib/styles/stitches.config";
-import type { YouTubePlayerProps } from "react-player/youtube";
+import clsx from "clsx";
+import type { ComponentPropsWithoutRef } from "react";
 
-const Wrapper = styled("div", {
-  position: "relative",
-  paddingTop: "56.25%",
-});
+import styles from "./YouTubeEmbed.module.css";
 
-const Player = styled(ReactPlayer, {
-  position: "absolute",
-  top: 0,
-  left: 0,
-
-  // target both the lazy thumbnail preview *and* the actual YouTube embed
-  "& .react-player__preview, & iframe": {
-    borderRadius: theme.radii.corner,
-  },
-});
-
-export type YouTubeEmbedProps = Partial<YouTubePlayerProps> & {
+export type YouTubeEmbedProps = ComponentPropsWithoutRef<"div"> & {
   id: string;
-  className?: string;
 };
 
 const YouTubeEmbed = ({ id, className, ...rest }: YouTubeEmbedProps) => {
-  // fix hydration issues: https://github.com/cookpete/react-player/issues/1428
-  const hasMounted = useHasMounted();
-
   return (
-    <Wrapper className={className}>
-      {hasMounted && (
-        <Player
-          width="100%"
-          height="100%"
-          url={`https://www.youtube-nocookie.com/watch?v=${id}`}
-          light={`https://i.ytimg.com/vi/${id}/hqdefault.jpg`}
-          controls
-          {...rest}
-        />
-      )}
-    </Wrapper>
+    <div className={clsx(styles.wrapper, className)} {...rest}>
+      <iframe
+        src={`https://www.youtube-nocookie.com/embed/${id}`}
+        className={styles.player}
+        width="100%"
+        height="100%"
+        frameBorder="0"
+        loading="lazy"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      ></iframe>
+    </div>
   );
 };