Video Player

1"use client";
2 
3import {
4  MediaControlBar,
5  MediaController,
6  MediaMuteButton,
7  MediaPlayButton,
8  MediaSeekBackwardButton,
9  MediaSeekForwardButton,
10  MediaTimeDisplay,
11  MediaTimeRange,
12  MediaVolumeRange,
13} from "media-chrome/react";
14import type * as React from "react";
15 
16import { cn } from "@/lib/utils";
17 
18type VideoPlayerVariables = React.CSSProperties & Record<`--${string}`, string>;
19type VideoPlayerContentProps = React.ComponentProps<"video"> & {
20  captionsSrc?: string;
21  captionsLabel?: string;
22  captionsSrcLang?: string;
23};
24 
25const videoPlayerVariables = {
26  "--media-primary-color": "var(--primary)",
27  "--media-secondary-color": "var(--background)",
28  "--media-text-color": "var(--foreground)",
29  "--media-background-color": "var(--background)",
30  "--media-control-hover-background": "var(--accent)",
31  "--media-font-family": "var(--font-sans)",
32  "--media-live-button-icon-color": "var(--muted-foreground)",
33  "--media-live-button-indicator-color": "var(--destructive)",
34  "--media-range-track-background": "var(--border)",
35} satisfies VideoPlayerVariables;
36const emptyCaptionsSrc = "data:text/vtt,WEBVTT%0A%0A";
37 
38function VideoPlayer({ style, ...props }: React.ComponentProps<typeof MediaController>) {
39  return <MediaController style={{ ...videoPlayerVariables, ...style }} {...props} />;
40}
41 
42function VideoPlayerControlBar(props: React.ComponentProps<typeof MediaControlBar>) {
43  return <MediaControlBar {...props} />;
44}
45 
46function VideoPlayerTimeRange({
47  className,
48  ...props
49}: React.ComponentProps<typeof MediaTimeRange>) {
50  return <MediaTimeRange className={cn("p-2.5", className)} {...props} />;
51}
52 
53function VideoPlayerTimeDisplay({
54  className,
55  ...props
56}: React.ComponentProps<typeof MediaTimeDisplay>) {
57  return <MediaTimeDisplay className={cn("p-2.5", className)} {...props} />;
58}
59 
60function VideoPlayerVolumeRange({
61  className,
62  ...props
63}: React.ComponentProps<typeof MediaVolumeRange>) {
64  return <MediaVolumeRange className={cn("p-2.5", className)} {...props} />;
65}
66 
67function VideoPlayerPlayButton({
68  className,
69  ...props
70}: React.ComponentProps<typeof MediaPlayButton>) {
71  return <MediaPlayButton aria-label="Play" className={cn("p-2.5", className)} {...props} />;
72}
73 
74function VideoPlayerSeekBackwardButton({
75  className,
76  ...props
77}: React.ComponentProps<typeof MediaSeekBackwardButton>) {
78  return (
79    <MediaSeekBackwardButton
80      aria-label="Seek backward"
81      className={cn("p-2.5", className)}
82      {...props}
83    />
84  );
85}
86 
87// … truncated