media-player

1"use client";
2 
3import {
4  AlertTriangleIcon,
5  CaptionsOffIcon,
6  CheckIcon,
7  DownloadIcon,
8  FastForwardIcon,
9  Loader2Icon,
10  Maximize2Icon,
11  Minimize2Icon,
12  PauseIcon,
13  PictureInPicture2Icon,
14  PictureInPictureIcon,
15  PlayIcon,
16  RefreshCcwIcon,
17  RepeatIcon,
18  RewindIcon,
19  RotateCcwIcon,
20  SettingsIcon,
21  SubtitlesIcon,
22  Volume1Icon,
23  Volume2Icon,
24  VolumeXIcon,
25} from "lucide-react";
26import {
27  MediaActionTypes,
28  MediaProvider,
29  timeUtils,
30  useMediaDispatch,
31  useMediaFullscreenRef,
32  useMediaRef,
33  useMediaSelector,
34} from "media-chrome/react/media-store";
35import {
36  Direction as DirectionPrimitive,
37  Slider as SliderPrimitive,
38  Slot as SlotPrimitive,
39} from "radix-ui";
40import * as React from "react";
41import * as ReactDOM from "react-dom";
42import { useComposedRefs } from "@/lib/compose-refs";
43import { cn } from "@/lib/utils";
44import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
45import { Badge } from "@/registry/bases/radix/ui/badge";
46import { Button } from "@/registry/bases/radix/ui/button";
47import {
48  DropdownMenu,
49  DropdownMenuContent,
50  DropdownMenuItem,
51  DropdownMenuLabel,
52  DropdownMenuSub,
53  DropdownMenuSubContent,
54  DropdownMenuSubTrigger,
55  DropdownMenuTrigger,
56} from "@/registry/bases/radix/ui/dropdown-menu";
57import {
58  Tooltip,
59  TooltipContent,
60  TooltipTrigger,
61} from "@/registry/bases/radix/ui/tooltip";
62 
63const ROOT_NAME = "MediaPlayer";
64const SEEK_NAME = "MediaPlayerSeek";
65const SETTINGS_NAME = "MediaPlayerSettings";
66const VOLUME_NAME = "MediaPlayerVolume";
67const PLAYBACK_SPEED_NAME = "MediaPlayerPlaybackSpeed";
68 
69const FLOATING_MENU_SIDE_OFFSET = 10;
70const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
71 
72const SEEK_STEP_SHORT = 5;
73const SEEK_STEP_LONG = 10;
74const SEEK_COLLISION_PADDING = 10;
75const SEEK_TOOLTIP_WIDTH_FALLBACK = 240;
76 
77const SEEK_HOVER_PERCENT = "--seek-hover-percent";
78const SEEK_TOOLTIP_X = "--seek-tooltip-x";
79const SEEK_TOOLTIP_Y = "--seek-tooltip-y";
80 
81const SPRITE_CONTAINER_WIDTH = 224;
82const SPRITE_CONTAINER_HEIGHT = 128;
83 
84interface DivProps extends React.ComponentProps<"div"> {
85  asChild?: boolean;
86}
87 
88type RootElement = React.ComponentRef<typeof MediaPlayer>;
89 
90type Direction = "ltr" | "rtl";
91 
92interface StoreState {
93  controlsVisible: boolean;
94  dragging: boolean;
95  menuOpen: boolean;
96  volumeIndicatorVisible: boolean;
97}
98 
99interface Store {
100  subscribe: (cb: () => void) => () => void;
101  getState: () => StoreState;
102  setState: (
103    key: keyof StoreState,
104// … truncated