zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-13 09:30:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add aspect-ratio to demos (#136)

Browse Source
This commit is contained in:
Sam Potts
2025-10-25 17:11:00 +11:00
committed by GitHub
parent 3bd50ebac8
commit e0a46de0ab
5 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/html-demo/src/main.ts
+2 -2
View File
@@ -7,8 +7,8 @@ defineVjsPlayer();
document.body.innerHTML = /* html */ `
<media-provider>
<div style="display: grid; place-items: center; min-height: 100vh;">
<media-skin-frosted style="border-radius: 2rem; width: 100%; max-width: 800px; margin: 2rem auto;">
<video slot="media" src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4" muted></video>
<media-skin-frosted style="border-radius: 2rem; width: 100%; max-width: 960px; margin: 2rem auto; aspect-ratio: 16/9">
<video slot="media" src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4" muted playsinline poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"></video>
</media-skin-frosted>
</div>
</media-provider>
examples/react-demo/src/App.tsx
+3 -3
View File
@@ -111,9 +111,9 @@ export default function App(): JSX.Element {
const skinClassName = useMemo(() => {
switch (skinKey) {
case 'frosted':
return 'rounded-4xl shadow shadow-lg shadow-black/15';
return 'aspect-video rounded-4xl shadow shadow-lg shadow-black/15';
case 'minimal':
return 'rounded-2xl shadow shadow-lg shadow-black/15';
return 'aspect-video rounded-2xl shadow shadow-lg shadow-black/15';
default:
return '';
}
@@ -185,7 +185,7 @@ export default function App(): JSX.Element {
<MediaProvider key={key}>
<Skin className={skinClassName}>
{/* @ts-expect-error -- types are incorrect */}
<Video src={mediaSource} poster={poster} />
<Video src={mediaSource} poster={poster} playsinline />
</Skin>
</MediaProvider>
</div>
packages/html/src/skins/frosted/styles.css
+1
View File
@@ -10,6 +10,7 @@ media-container {
font-size: 0.8125rem;
line-height: 1.5;
border-radius: inherit;
background: oklab(0 0 0);
}
media-container::before,
media-container::after {
packages/react/src/skins/frosted/styles.ts
+2 -2
View File
@@ -12,7 +12,7 @@ function cn(...classes: (string | undefined)[]): string {
const styles: FrostedSkinStyles = {
MediaContainer: cn(
'vjs', // Scope preflight
'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip',
'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black',
// Base typography
'vjs:text-[0.8125rem]', // 13px
// Prevent rounded corners in fullscreen.
@@ -21,7 +21,7 @@ const styles: FrostedSkinStyles = {
'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',
'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',
// Ensure the nested video inherits the radius.
'vjs:[&_video]:rounded-[inherit] vjs:[&_video]:w-full vjs:[&_video]:h-auto',
'vjs:[&_video]:w-full vjs:[&_video]:h-full',
),
Overlay: cn(
'vjs:opacity-0 vjs:delay-500 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-gradient-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',
packages/react/src/skins/minimal/styles.ts
+1 -1
View File
@@ -20,7 +20,7 @@ const styles: MinimalSkinStyles = {
// Prevent rounded corners in fullscreen.
'vjs:[&:fullscreen]:rounded-none vjs:[&:fullscreen]:[&_video]:h-full vjs:[&:fullscreen]:[&_video]:w-full',
// Ensure the nested video inherits the radius.
'vjs:[&_video]:rounded-[inherit] vjs:[&_video]:w-full vjs:[&_video]:h-auto',
'vjs:[&_video]:w-full vjs:[&_video]:h-full',
),
Overlay: cn(
'vjs:absolute vjs:inset-0 vjs:rounded-[inherit] vjs:pointer-events-none',