Video

1"use client";
2
3import * as MenuPrimitive from "@base-ui/react/menu";
4import * as SliderPrimitive from "@base-ui/react/slider";
5import * as React from "react";
6
7import { Button } from "@/components/ui/button";
8import {
9  DropdownMenu,
10  DropdownMenuItem,
11  DropdownMenuTrigger,
12} from "@/components/ui/dropdown-menu";
13import { Slider } from "@/components/ui/slider";
14import { useIsMobile } from "@/hooks/use-mobile";
15import { cn } from "@/lib/utils";
16import {
17  Check,
18  Gauge,
19  Maximize,
20  Minimize,
21  Pause,
22  Play,
23  Repeat,
24  Repeat1,
25  Volume,
26  Volume1,
27  Volume2,
28  VolumeX,
29} from "lucide-react";
30
31type VideoContext = {
32  videoRef: React.RefObject<HTMLVideoElement | null>;
33  containerRef: React.RefObject<HTMLDivElement | null>;
34  paused: boolean;
35  setPaused: React.Dispatch<React.SetStateAction<boolean>>;
36  progress: number;
37  setProgress: React.Dispatch<React.SetStateAction<number>>;
38  volume: number;
39  setVolume: React.Dispatch<React.SetStateAction<number>>;
40  loop: boolean;
41  setLoop: React.Dispatch<React.SetStateAction<boolean>>;
42  muted: boolean;
43  setMuted: React.Dispatch<React.SetStateAction<boolean>>;
44  fullscreen: boolean;
45  setFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
46  playbackRate: number;
47  setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
48  duration: number;
49  setDuration: React.Dispatch<React.SetStateAction<number>>;
50  currentTime: number;
51  setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
52};
53
54const DefaultVideoContext: VideoContext = {
55  videoRef: { current: null },
56  containerRef: { current: null },
57  paused: true,
58  setPaused: () => {},
59  progress: 0,
60  setProgress: () => {},
61  volume: 1,
62  setVolume: () => {},
63  loop: false,
64  setLoop: () => {},
65  muted: false,
66  setMuted: () => {},
67  fullscreen: false,
68  setFullscreen: () => {},
69  playbackRate: 1,
70  setPlaybackRate: () => {},
71  duration: 0,
72  setDuration: () => {},
73  currentTime: 0,
74  setCurrentTime: () => {},
75};
76
77if (typeof window !== "undefined") {
78  const _error = console.error.bind(console);
79  console.error = (...args) => {
80    if (typeof args[0] === "string" && args[0].includes("script")) return;
81    _error(...args);
82  };
83}
84
85const Context = React.createContext<VideoContext>(DefaultVideoContext);
86
87type VideoProviderProps = {
88  defaultVolume?: number;
89  defaultMuted?: boolean;
90  defaultLoop?: boolean;
91  defaultRate?: number;
92// … truncated