Video

1"use client";
2 
3import * as React from "react";
4import { ExternalLink, Play } from "lucide-react";
5import { cn, Button } from "./_adapter";
6 
7import {
8  formatDuration,
9  getFitClass,
10  openSafeNavigationHref,
11  OVERLAY_GRADIENT,
12  RATIO_CLASS_MAP,
13} from "../shared/media";
14import { VideoProvider, useVideo } from "./context";
15import type { SerializableVideo } from "./schema";
16import {
17  getMuteMediaEvent,
18  normalizeVideoDataForCallback,
19  resolveVideoNavigation,
20} from "./video-helpers";
21 
22const FALLBACK_LOCALE = "en-US";
23 
24export interface VideoProps extends SerializableVideo {
25  className?: string;
26  // Keep behavior flags intentionally minimal; prefer explicit variants over more booleans.
27  autoPlay?: boolean;
28  defaultMuted?: boolean;
29  onNavigate?: (href: string, video: SerializableVideo) => void;
30  onMediaEvent?: (type: "play" | "pause" | "mute" | "unmute") => void;
31}
32 
33function VideoRoot(props: VideoProps) {
34  const { defaultMuted = true, ...rest } = props;
35 
36  return (
37    <VideoProvider defaultState={{ muted: defaultMuted }}>
38      <VideoInner {...rest} />
39    </VideoProvider>
40  );
41}
42 
43function VideoInner(props: Omit<VideoProps, "defaultMuted">) {
44  const {
45    className,
46    autoPlay = true,
47    onNavigate,
48    onMediaEvent,
49    ...serializable
50  } = props;
51 
52  const {
53    id,
54    src,
55    poster,
56    title,
57    description,
58    href: rawHref,
59    domain,
60    durationMs,
61    ratio = "16:9",
62    fit = "cover",
63    createdAt,
64    source,
65    locale: providedLocale,
66  } = serializable;
67 
68  const locale = providedLocale ?? FALLBACK_LOCALE;
69  const { sanitizedHref, sanitizedSourceUrl, primaryHref } =
70    resolveVideoNavigation(rawHref, source?.url);
71 
72  const videoData: SerializableVideo = normalizeVideoDataForCallback(
73    serializable,
74    {
75      ratio,
76      fit,
77      locale,
78      sanitizedHref,
79      sanitizedSourceUrl,
80    },
81  );
82 
83  const { state, setState, setVideoElement } = useVideo();
84  const videoRef = React.useRef<HTMLVideoElement | null>(null);
85  const previousMutedRef = React.useRef(state.muted);
86 
87  React.useEffect(() => {
88    setVideoElement(videoRef.current);
89    return () => setVideoElement(null);
90  }, [setVideoElement]);
91 
92  React.useEffect(() => {
93    const video = videoRef.current;
94    if (!video) return;
95    if (video.muted !== state.muted) {
96      video.muted = state.muted;
97    }
98  }, [state.muted]);
99 
100  React.useEffect(() => {
101    const video = videoRef.current;
102    if (!video) return;
103    if (state.playing && video.paused) {
104// … truncated