Skip to content

Commit b753915

Browse files
BetrixDevBetrixDev
committed
update video player
1 parent f4d3e8f commit b753915

File tree

3 files changed

+161
-32
lines changed

3 files changed

+161
-32
lines changed

‎app/plyr.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.plyr {
2+
--plyr-color-main: oklch(0.637 0.237 25.331);
3+
--plyr-border-radius: 10px;
4+
5+
--plyr-font-family: inherit;
6+
--plyr-font-weight-regular: 400;
7+
--plyr-font-size-small: 13px;
8+
--plyr-font-size-base: 15px;
9+
--plyr-font-size-large: 18px;
10+
--plyr-font-size-xlarge: 21px;
11+
--plyr-line-height: 1.7;
12+
13+
--plyr-audio-border: 1px solid #edecec;
14+
15+
--plyr-video-controls-background: linear-gradient(
16+
rgba(0, 0, 0, 0),
17+
rgba(0, 0, 0, 0.75)
18+
);
19+
20+
/* Focus */
21+
--plyr-focus-visible-color: var(--plyr-color-main);
22+
23+
/* Control */
24+
--plyr-control-spacing: 10px;
25+
--plyr-control-radius: 4px;
26+
--plyr-control-icon-size: 18px;
27+
--plyr-control-toggle-checked-background: var(--plyr-color-main);
28+
29+
--plyr-audio-controls-background: #fff;
30+
--plyr-audio-control-background-hover: var(--plyr-color-main);
31+
--plyr-audio-control-color: oklch(0.141 0.005 285.823);
32+
--plyr-audio-control-color-hover: #fff;
33+
34+
--plyr-video-control-color: #fff;
35+
--plyr-video-control-color-hover: #fff;
36+
--plyr-video-control-background-hover: var(--plyr-color-main);
37+
38+
/* Badge */
39+
--plyr-font-size-badge: 9px;
40+
41+
--plyr-badge-background: oklch(0.141 0.005 285.823);
42+
--plyr-badge-border-radius: 2px;
43+
--plyr-badge-text-color: #fff;
44+
45+
/* Captions */
46+
--plyr-captions-background: rgba(0, 0, 0, 0.8);
47+
--plyr-captions-text-color: #fff;
48+
49+
/* Menu */
50+
--plyr-font-size-menu: var(--plyr-font-size-small, 13px);
51+
52+
--plyr-menu-background: rgba(255, 255, 255, 0.9);
53+
--plyr-menu-color: oklch(0.141 0.005 285.823);
54+
--plyr-menu-radius: 8px;
55+
--plyr-menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
56+
57+
--plyr-menu-arrow-size: 4px;
58+
--plyr-menu-arrow-color: hsl(216, 15%, 52%);
59+
--plyr-menu-item-arrow-size: 4px;
60+
61+
--plyr-menu-back-border-color: hsl(216, 15%, 88%);
62+
--plyr-menu-back-border-shadow-color: #fff;
63+
64+
/* Range */
65+
--plyr-range-track-height: 5px;
66+
--plyr-range-fill-background: var(--plyr-color-main);
67+
68+
--plyr-range-thumb-height: 13px;
69+
--plyr-range-thumb-active-shadow-width: 3px;
70+
--plyr-range-thumb-background: #fff;
71+
--plyr-range-thumb-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px
72+
rgba(35, 40, 47, 0.2);
73+
74+
--plyr-audio-range-track-background: var(
75+
--plyr-audio-progress-buffered-background
76+
);
77+
--plyr-audio-range-thumb-active-shadow-color: rgba(35, 40, 47, 0.1);
78+
79+
--plyr-video-range-track-background: var(
80+
--plyr-video-progress-buffered-background,
81+
rgba(255, 255, 255, 0.25)
82+
);
83+
84+
/* Progress */
85+
--plyr-font-size-progress-marker: var(--plyr-font-size-small, 13px);
86+
87+
--plyr-progress-loading-background: rgba(35, 40, 47, 0.6);
88+
--plyr-progress-loading-size: 25px;
89+
90+
--plyr-progress-marker-width: 3px;
91+
--plyr-progress-marker-background: #fff;
92+
93+
--plyr-progress-live-color: white;
94+
--plyr-progress-live-edge-color: var(--plyr-color-main);
95+
96+
--plyr-audio-progress-buffered-background: rgba(193, 200, 209, 0.6);
97+
98+
--plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.25);
99+
100+
/* Time */
101+
--plyr-font-size-time: var(--plyr-font-size-small, 13px);
102+
103+
--plyr-time-radius: 5px;
104+
105+
/* Tooltip */
106+
--plyr-tooltip-background: #fff;
107+
--plyr-tooltip-radius: 5px;
108+
--plyr-tooltip-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
109+
--plyr-tooltip-color: oklch(0.141 0.005 285.823);
110+
--plyr-tooltip-arrow-size: 4px;
111+
112+
/* Thumbnail */
113+
--plyr-thumbnail-aspect-ratio: 16 / 9;
114+
115+
--plyr-thumbnail-min-width: 140px;
116+
--plyr-thumbnail-min-height: calc(var(--min-width) / var(--aspect-ratio));
117+
118+
--plyr-thumbnail-max-width: 180px;
119+
--plyr-thumbnail-max-height: calc(var(--max-width) / var(--aspect-ratio));
120+
}

‎app/routes/p.$videoId.tsx‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import { Button } from "@/components/ui/button";
22
import { Card, CardContent } from "@/components/ui/card";
33
import { useUser } from "@clerk/tanstack-start";
44
import { Link, createFileRoute } from "@tanstack/react-router";
5-
import { MediaPlayer, MediaProvider } from "@vidstack/react";
5+
import { MediaPlayer, MediaProvider, Poster } from "@vidstack/react";
66
import {
7-
DefaultVideoLayout,
8-
defaultLayoutIcons,
9-
} from "@vidstack/react/player/layouts/default";
10-
import audioCss from "@vidstack/react/player/styles/default/layouts/audio.css?url";
11-
import videoCss from "@vidstack/react/player/styles/default/layouts/video.css?url";
12-
import themeCss from "@vidstack/react/player/styles/default/theme.css?url";
7+
PlyrLayout,
8+
plyrLayoutIcons,
9+
} from "@vidstack/react/player/layouts/plyr";
10+
import playerBaseCss from "@vidstack/react/player/styles/base.css?url";
11+
import playerThemeCss from "@vidstack/react/player/styles/plyr/theme.css?url";
12+
import plyrCss from "../plyr.css?url";
1313
import {
1414
EyeIcon,
1515
Loader2Icon,
@@ -22,7 +22,7 @@ import { WordyDate } from "../components/wordy-date";
2222
import { seo } from "@/lib/seo";
2323
import { Footer } from "@/components/footer";
2424
import { queryClient } from "./__root";
25-
import { videoQueryOptions } from "@/lib/query-utils";
25+
import { type VideoData, videoQueryOptions } from "@/lib/query-utils";
2626
import { useQuery } from "@tanstack/react-query";
2727

2828
export const Route = createFileRoute("/p/$videoId")({
@@ -48,9 +48,9 @@ export const Route = createFileRoute("/p/$videoId")({
4848

4949
return {
5050
links: [
51-
{ rel: "stylesheet", href: themeCss },
52-
{ rel: "stylesheet", href: audioCss },
53-
{ rel: "stylesheet", href: videoCss },
51+
{ rel: "stylesheet", href: playerBaseCss },
52+
{ rel: "stylesheet", href: playerThemeCss },
53+
{ rel: "stylesheet", href: plyrCss },
5454
],
5555
meta: seo({
5656
title: loaderData.videoData.title,
@@ -116,26 +116,9 @@ function RouteComponent() {
116116
</Link>
117117
</header>
118118
<div className="flex gap-4 p-4 max-w-full overflow-x-hidden h-full flex-col xl:flex-row">
119-
<MediaPlayer
120-
className="w-full rounded-lg overflow-hidden"
121-
// biome-ignore lint/suspicious/noExplicitAny: types are fine
122-
src={videoData?.playbackData?.videoSources as any}
123-
viewType="video"
124-
streamType="on-demand"
125-
playsInline
126-
title={videoData?.videoData.title}
127-
poster={videoData?.playbackData?.largeThumbnailUrl ?? undefined}
128-
duration={videoData?.videoData.videoLengthSeconds ?? undefined}
129-
storage="player"
130-
controlsDelay={500}
131-
posterLoad="eager"
132-
>
133-
<MediaProvider />
134-
<DefaultVideoLayout
135-
icons={defaultLayoutIcons}
136-
thumbnails={videoData?.playbackData?.storyboard}
137-
/>
138-
</MediaPlayer>
119+
<div className="w-full">
120+
{videoData && <VideoPlayer video={videoData} />}
121+
</div>
139122
<div className="flex flex-col gap-4 min-w-96 w-96 grow">
140123
<Card className="border-none shadow-none bg-transparent">
141124
<CardContent className="p-0 space-y-4">
@@ -175,3 +158,28 @@ function RouteComponent() {
175158
</div>
176159
);
177160
}
161+
162+
type VideoPlayerProps = {
163+
video: VideoData;
164+
};
165+
166+
function VideoPlayer({ video }: VideoPlayerProps) {
167+
if (!video.playbackData) {
168+
return null;
169+
}
170+
171+
return (
172+
<MediaPlayer
173+
title={video.videoData.title}
174+
// biome-ignore lint/suspicious/noExplicitAny: types are fine
175+
src={video.playbackData.videoSources as any}
176+
poster={video.playbackData.largeThumbnailUrl ?? undefined}
177+
>
178+
<MediaProvider />
179+
<PlyrLayout
180+
thumbnails={video.playbackData.storyboard}
181+
icons={plyrLayoutIcons}
182+
/>
183+
</MediaPlayer>
184+
);
185+
}

‎biome.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"noChildrenProp": "off"
3232
},
3333
"a11y": {
34-
"useKeyWithClickEvents": "off"
34+
"useKeyWithClickEvents": "off",
35+
"useMediaCaption": "off"
3536
},
3637
"performance": {
3738
"noDelete": "off"

0 commit comments

Comments
 (0)