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 { ComponentProps, CSSProperties } from "react";
15import { cn } from "@/lib/utils";
16 
17export type VideoPlayerProps = ComponentProps<typeof MediaController>;
18 
19const variables = {
20  "--media-primary-color": "var(--primary)",
21  "--media-secondary-color": "var(--background)",
22  "--media-text-color": "var(--foreground)",
23  "--media-background-color": "var(--background)",
24  "--media-control-hover-background": "var(--accent)",
25  "--media-font-family": "var(--font-sans)",
26  "--media-live-button-icon-color": "var(--muted-foreground)",
27  "--media-live-button-indicator-color": "var(--destructive)",
28  "--media-range-track-background": "var(--border)",
29} as CSSProperties;
30 
31export const VideoPlayer = ({ style, ...props }: VideoPlayerProps) => (
32  <MediaController
33    style={{
34      ...variables,
35      ...style,
36    }}
37    {...props}
38  />
39);
40 
41export type VideoPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;
42 
43export const VideoPlayerControlBar = (props: VideoPlayerControlBarProps) => (
44  <MediaControlBar {...props} />
45);
46 
47export type VideoPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;
48 
49export const VideoPlayerTimeRange = ({
50  className,
51  ...props
52}: VideoPlayerTimeRangeProps) => (
53  <MediaTimeRange className={cn("p-2.5", className)} {...props} />
54);
55 
56export type VideoPlayerTimeDisplayProps = ComponentProps<
57  typeof MediaTimeDisplay
58>;
59 
60export const VideoPlayerTimeDisplay = ({
61  className,
62  ...props
63}: VideoPlayerTimeDisplayProps) => (
64  <MediaTimeDisplay className={cn("p-2.5", className)} {...props} />
65);
66 
67export type VideoPlayerVolumeRangeProps = ComponentProps<
68  typeof MediaVolumeRange
69>;
70 
71export const VideoPlayerVolumeRange = ({
72  className,
73  ...props
74}: VideoPlayerVolumeRangeProps) => (
75  <MediaVolumeRange className={cn("p-2.5", className)} {...props} />
76);
77 
78export type VideoPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;
79 
80export const VideoPlayerPlayButton = ({
81  className,
82  ...props
83}: VideoPlayerPlayButtonProps) => (
84  <MediaPlayButton className={cn("p-2.5", className)} {...props} />
85);
86 
87export type VideoPlayerSeekBackwardButtonProps = ComponentProps<
88  typeof MediaSeekBackwardButton
89>;
90 
91export const VideoPlayerSeekBackwardButton = ({
92  className,
93  ...props
94// … truncated