media-player

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { Slider as SliderPrimitive } from "@base-ui/react/slider";
5import { useRender } from "@base-ui/react/use-render";
6import {
7  AlertTriangleIcon,
8  CaptionsOffIcon,
9  CheckIcon,
10  DownloadIcon,
11  FastForwardIcon,
12  Loader2Icon,
13  Maximize2Icon,
14  Minimize2Icon,
15  PauseIcon,
16  PictureInPicture2Icon,
17  PictureInPictureIcon,
18  PlayIcon,
19  RefreshCcwIcon,
20  RepeatIcon,
21  RewindIcon,
22  RotateCcwIcon,
23  SettingsIcon,
24  SubtitlesIcon,
25  Volume1Icon,
26  Volume2Icon,
27  VolumeXIcon,
28} from "lucide-react";
29import {
30  MediaActionTypes,
31  MediaProvider,
32  timeUtils,
33  useMediaDispatch,
34  useMediaFullscreenRef,
35  useMediaRef,
36  useMediaSelector,
37} from "media-chrome/react/media-store";
38import * as React from "react";
39import * as ReactDOM from "react-dom";
40import { cn } from "@/lib/utils";
41import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
42import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
43import { Badge } from "@/registry/bases/base/ui/badge";
44import { Button } from "@/registry/bases/base/ui/button";
45import { useDirection } from "@/registry/bases/base/ui/direction";
46import {
47  DropdownMenu,
48  DropdownMenuContent,
49  DropdownMenuItem,
50  DropdownMenuLabel,
51  DropdownMenuSub,
52  DropdownMenuSubContent,
53  DropdownMenuSubTrigger,
54  DropdownMenuTrigger,
55} from "@/registry/bases/base/ui/dropdown-menu";
56import {
57  Tooltip,
58  TooltipContent,
59  TooltipProvider,
60  TooltipTrigger,
61} from "@/registry/bases/base/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 
72type ButtonClickHandler = NonNullable<
73  React.ComponentProps<typeof Button>["onClick"]
74>;
75 
76const SEEK_STEP_SHORT = 5;
77const SEEK_STEP_LONG = 10;
78const SEEK_COLLISION_PADDING = 10;
79const SEEK_TOOLTIP_WIDTH_FALLBACK = 240;
80 
81const SEEK_HOVER_PERCENT = "--seek-hover-percent";
82const SEEK_TOOLTIP_X = "--seek-tooltip-x";
83const SEEK_TOOLTIP_Y = "--seek-tooltip-y";
84 
85const SPRITE_CONTAINER_WIDTH = 224;
86const SPRITE_CONTAINER_HEIGHT = 128;
87 
88interface DivProps
89  extends React.ComponentProps<"div">,
90    useRender.ComponentProps<"div"> {}
91 
92type RootElement = HTMLDivElement;
93 
94type Direction = "ltr" | "rtl";
95 
96interface StoreState {
97  controlsVisible: boolean;
98// … truncated