Skip to content

fix(skins): slightly more idiomatic Tailwind, added custom properties #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sampotts merged 1 commit into from
Nov 10, 2025
Merged

fix(skins): slightly more idiomatic Tailwind, added custom properties #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions examples/html-demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VJS HTML Demo</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<style>
body {
font-family:
InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
<h1>Video.js 10 HTML Demos</h1>
Expand Down
2 changes: 1 addition & 1 deletion examples/html-demo/minimal-eject.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h1>Minimal Skin (ejected)</h1>
display: block;
width: 100%;
height: 100%;
border-radius: 2rem;
border-radius: 0.75rem;
max-width: 960px;
margin: 2rem auto;
aspect-ratio: 16/9;
Expand Down
7 changes: 4 additions & 3 deletions examples/html-demo/src/frosted-eject.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ media-container {
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-size: 0.8125rem;
line-height: 1.5;
border-radius: inherit;
background: oklab(0 0 0);
}
media-container::before,
media-container::after {
Expand Down Expand Up @@ -204,8 +205,8 @@ media-mute-button .icon {
}
media-mute-button:not([data-volume-level]) .volume-low-icon,
media-mute-button[data-volume-level='high'] .volume-high-icon,
media-mute-button[data-volume-level='medium'] .volume-high-icon,
media-mute-button[data-volume-level='low'] .volume-low-icon,
media-mute-button[data-volume-level='medium'] .volume-low-icon,
media-mute-button[data-volume-level='off'] .volume-off-icon {
display: inline;
}
Expand Down
11 changes: 6 additions & 5 deletions examples/html-demo/src/minimal-eject.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ media-container {
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-size: 0.8125rem;
line-height: 1.5;
border-radius: inherit;
background: oklab(0 0 0);
}
media-container::after {
content: '';
Expand All @@ -19,11 +20,11 @@ media-container::after {
border-radius: inherit;
z-index: 10;
inset: 0;
box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);
box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.15);
}
@media (prefers-color-scheme: dark) {
media-container::after {
box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);
box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);
}
}

Expand Down Expand Up @@ -183,8 +184,8 @@ media-mute-button .icon {
}
media-mute-button:not([data-volume-level]) .volume-low-icon,
media-mute-button[data-volume-level='high'] .volume-high-icon,
media-mute-button[data-volume-level='medium'] .volume-high-icon,
media-mute-button[data-volume-level='low'] .volume-low-icon,
media-mute-button[data-volume-level='medium'] .volume-low-icon,
media-mute-button[data-volume-level='off'] .volume-off-icon {
display: inline;
}
Expand Down
1 change: 0 additions & 1 deletion examples/react-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"clsx": "^2.1.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"screenfull": "^6.0.2",
"tailwindcss": "^4.1.13"
},
"devDependencies": {
Expand Down
58 changes: 9 additions & 49 deletions examples/react-demo/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import type { ChangeEventHandler } from 'react';

import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react';
import { FullscreenEnterAltIcon, FullscreenExitAltIcon } from '@videojs/react/icons';
import clsx from 'clsx';
import { useCallback, useMemo, useRef, useState } from 'react';
import { useFullscreen } from './hooks/useFullscreen';
import { useCallback, useMemo, useState } from 'react';

// NOTE: Commented out imports are for testing locally/externally defined skins.
// import { VideoProvider, Video } from '@videojs/react';
Expand Down Expand Up @@ -45,22 +42,22 @@ type SkinKey = (typeof skins)[number]['key'];
const mediaSources = [
{
key: '1',
name: 'Mux 1',
name: 'Mux 1 (HLS)',
value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8',
},
{
key: '2',
name: 'Mux 2',
name: 'Mux 2 (HLS)',
value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8',
},
{
key: '3',
name: 'Mux 3',
name: 'Mux 3 (MP4)',
value: 'https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4',
},
{
key: '4',
name: 'Mux 4',
name: 'Mux 4 (HLS)',
value: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8',
},
] as const;
Expand All @@ -85,8 +82,6 @@ const DEFAULT_MEDIA_SOURCE: MediaSourceKey = '1';
export default function App(): JSX.Element {
const [skinKey, setSkinKey] = useState<SkinKey>(() => getParam('skin', DEFAULT_SKIN));
const [mediaSourceKey, setMediaSourceKey] = useState<MediaSourceKey>(() => getParam('source', DEFAULT_MEDIA_SOURCE));
const containerRef = useRef<HTMLDivElement>(null);
const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(containerRef);

const mediaSource = useMemo(() => {
let match = mediaSources.find(m => m.key === mediaSourceKey);
Expand Down Expand Up @@ -120,37 +115,12 @@ export default function App(): JSX.Element {
// Force a re-render on changes.
const key = `${skinKey}-${mediaSourceKey}`;

const skinClassName = useMemo(() => {
switch (skinKey) {
case 'frosted':
case 'frosted-eject':
return 'aspect-video !rounded-4xl shadow shadow-lg shadow-black/15';
case 'minimal':
case 'minimal-eject':
return 'aspect-video !rounded-2xl shadow shadow-lg shadow-black/15';
default:
return '';
}
}, [skinKey]);

const playbackId = mediaSource.match(/stream\.mux\.com\/([^./]+)/)?.[1];
const poster = playbackId ? `https://image.mux.com/${playbackId}/thumbnail.webp` : undefined;

return (
<div
ref={containerRef}
className={clsx('', {
'bg-black text-stone-200 h-screen': isFullscreen,
'min-h-screen bg-white text-stone-700 dark:bg-black dark:text-stone-200': !isFullscreen,
})}
>
<header className={clsx(
'fixed top-0 z-10 inset-x-0 bg-white dark:bg-stone-800 shadow shadow-black/10 after:h-px after:absolute after:inset-x-0 after:top-full after:bg-black/5 transition-transform',
{
'-translate-y-full': isFullscreen,
},
)}
>
<div className="min-h-screen bg-white text-stone-700 dark:bg-stone-900 dark:text-stone-200">
<header className="fixed top-0 z-10 inset-x-0 bg-white dark:bg-stone-800 shadow shadow-black/10 after:h-px after:absolute after:inset-x-0 after:top-full after:bg-black/5 transition-transform">
<div className="grid grid-cols-5 h-2" aria-hidden="true">
<div className="bg-yellow-500"></div>
<div className="bg-orange-500"></div>
Expand Down Expand Up @@ -180,24 +150,14 @@ export default function App(): JSX.Element {
</option>
))}
</select>
<button type="button" className="p-2" onClick={toggleFullscreen}>
{isFullscreen ? <FullscreenExitAltIcon /> : <FullscreenEnterAltIcon />}
<span className="sr-only">Toggle fullscreen</span>
</button>
</nav>
</div>
</header>

<main className={clsx(
'min-h-screen flex justify-center items-center',
{
'bg-radial bg-size-[16px_16px] from-stone-300 dark:from-stone-700 via-10% via-transparent to-transparent': !isFullscreen,
},
)}
>
<main className="min-h-screen flex justify-center items-center bg-radial bg-size-[16px_16px] from-stone-300 dark:from-stone-700 via-10% via-transparent to-transparent">
<div className="w-full max-w-5xl mx-auto p-6">
<VideoProvider key={key}>
<Skin className={skinClassName}>
<Skin className="aspect-video shadow-lg shadow-black/15">
{/* @ts-expect-error -- types are incorrect */}
<HlsVideo src={mediaSource} poster={poster} playsInline />
</Skin>
Expand Down
132 changes: 0 additions & 132 deletions examples/react-demo/src/hooks/useFullscreen.ts
View file
Open in desktop

This file was deleted.

7 changes: 4 additions & 3 deletions examples/react-demo/src/skins/frosted-eject/frosted.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@
isolation: isolate;
container: root / inline-size;
overflow: clip;
border-radius: var(--vjs-border-radius, 2rem);
background: oklab(0 0 0);
font-family: var(--vjs-font-family, InterVariable, Inter, ui-sans-serif, system-ui, sans-serif);
font-size: 0.8125rem;
line-height: 1.5;
border-radius: inherit;
background: oklab(0 0 0);
}
.vjs-frosted-skin::before,
.vjs-frosted-skin::after {
Expand Down Expand Up @@ -201,8 +202,8 @@
}
.vjs-frosted-skin .mute-button:not([data-volume-level]) .volume-low-icon,
.vjs-frosted-skin .mute-button[data-volume-level='high'] .volume-high-icon,
.vjs-frosted-skin .mute-button[data-volume-level='medium'] .volume-high-icon,
.vjs-frosted-skin .mute-button[data-volume-level='low'] .volume-low-icon,
.vjs-frosted-skin .mute-button[data-volume-level='medium'] .volume-low-icon,
.vjs-frosted-skin .mute-button[data-volume-level='off'] .volume-off-icon {
display: inline;
}
Expand Down
Loading