feat: video component

components/resource/content/Content.tsx

@@ -14,6 +14,7 @@ import { Image } from "./components/image/Image";
 import { Pre } from "./components/pre/Pre";
 import { Quote } from "./components/quote/Quote";
 import { Sandbox } from "./components/sandbox/Sandbox";
+import { Video } from "./components/video/Video";
 
 interface ContentProps {
   readonly content: MDXRemoteSerializeResult;
@@ -32,6 +33,7 @@ const customMdxComponents = {
   Image,
   Link,
   Quote,
+  Video,
   Highlight,
   Sandbox: ({ id }: { id: string }) => <Sandbox id={id} />,
   pre: Pre,

components/resource/content/components/video/Video.tsx

@@ -0,0 +1,57 @@
+import clsx from "clsx";
+import { memo, useRef, useState } from "react";
+
+import PauseIcon from "public/svg/pause.svg";
+import PlayIcon from "public/svg/play.svg";
+
+import styles from "./video.module.scss";
+
+type VideoProps = { readonly alt?: string } & JSX.IntrinsicElements["video"];
+
+export const Video = memo<VideoProps>(({ alt, ...props }: VideoProps) => {
+  const [paused, setPaused] = useState(!props.autoPlay);
+  const [controlsVisible, setControlsVisible] = useState(false);
+  const ref = useRef<HTMLVideoElement>(null);
+
+  const togglePlay = () => {
+    if (ref.current) {
+      if (ref.current.paused) {
+        setControlsVisible(false);
+        setPaused(false);
+        void ref.current.play();
+      } else {
+        setControlsVisible(true);
+        setPaused(true);
+        ref.current.pause();
+      }
+    }
+  };
+
+  return (
+    <figure className={styles.wrapper}>
+      <div className={styles.videoWrapper}>
+        <video
+          className={clsx(styles.video, props.className)}
+          {...props}
+          ref={ref}
+          onClick={togglePlay}
+          onMouseLeave={() => setControlsVisible(false)}
+          onMouseEnter={() => setControlsVisible(true)}
+        />
+        <button
+          className={clsx(
+            styles.control,
+            styles.visible && {
+              [styles.visible]: controlsVisible,
+            },
+          )}
+        >
+          {paused ? <PlayIcon className={styles.icon} /> : <PauseIcon className={styles.icon} />}
+        </button>
+      </div>
+      {alt ? <figcaption className={styles.caption}>{alt}</figcaption> : null}
+    </figure>
+  );
+});
+
+Video.displayName = "Video";

components/resource/content/components/video/video.module.scss

@@ -0,0 +1,57 @@
+@use "styles/_mixins";
+
+.wrapper {
+  width: auto;
+  height: auto;
+  margin: 4rem -1.2rem;
+  position: relative;
+  @include mixins.flex;
+  flex-flow: column wrap;
+  gap: 1.4rem;
+
+  @include mixins.mediaquery("sm") {
+    margin: 4rem -2rem;
+  }
+
+  .videoWrapper {
+    position: relative;
+
+    .video {
+      max-width: 100%;
+      border-radius: 2rem;
+      cursor: pointer;
+    }
+
+    .control {
+      position: absolute;
+      inset: 0;
+      width: 6.5rem;
+      height: 6.5rem;
+      border-radius: 50%;
+      border: 0 none;
+      transition: opacity 500ms ease;
+      background-color: rgba(0, 0, 0, 0.5);
+      margin: auto;
+      pointer-events: none;
+      opacity: 0;
+      color: var(--white-200);
+      @include mixins.flex;
+
+      &.visible {
+        opacity: 1;
+      }
+
+      .icon {
+        width: 50%;
+      }
+    }
+  }
+
+  .caption {
+    font-size: 1.4rem;
+    font-style: italic;
+    opacity: 0.6;
+    padding: 0 1rem;
+    text-align: center;
+  }
+}