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

feat(react): implement default and minimal video skins (#550)

Browse Source
This commit is contained in:
Sam Potts
2026-02-19 07:43:44 +11:00
committed by GitHub
parent b3a31a335a
commit 7d3be367f5
44 changed files with 1332 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx
+13 -12
View File
@@ -1,9 +1,13 @@
import { FrostedSkin, Video, VideoProvider } from '@videojs/react-preview';
import { VJS8_DEMO_VIDEO } from '@/consts';
import '@videojs/react-preview/skins/frosted.css';
import { createPlayer, features, Poster } from '@videojs/react';
import { VideoSkin, Video } from '@videojs/react/video';
import '@videojs/react/video/skin.css';
const Player = createPlayer({ features: [...features.video] });
/**
* Live demo of the FrostedSkin design.
* Live demo of the (default) frosted video skin design.
*
* Features demonstrated:
* - Glassmorphic controls with backdrop blur
@@ -14,14 +18,11 @@ import '@videojs/react-preview/skins/frosted.css';
*/
export function FrostedSkinDemo() {
return (
<VideoProvider>
<FrostedSkin className="w-full aspect-video rounded-3xl">
<Video
src={VJS8_DEMO_VIDEO.mp4}
poster={VJS8_DEMO_VIDEO.poster}
playsInline
/>
</FrostedSkin>
</VideoProvider>
<Player.Provider>
<VideoSkin className="w-full aspect-video">
<Video src={VJS8_DEMO_VIDEO.mp4} playsInline />
<Poster src={VJS8_DEMO_VIDEO.poster} />
</VideoSkin>
</Player.Provider>
);
}
site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx
+12 -12
View File
@@ -1,9 +1,12 @@
import { MinimalSkin, Video, VideoProvider } from '@videojs/react-preview';
import { VJS8_DEMO_VIDEO } from '@/consts';
import '@videojs/react-preview/skins/minimal.css';
import { createPlayer, features, Poster } from '@videojs/react';
import { MinimalVideoSkin, Video } from '@videojs/react/video';
import '@videojs/react/video/minimal-skin.css';
const Player = createPlayer({ features: [...features.video] });
/**
* Live demo of the MinimalSkin design.
* Live demo of the minimal video skin design.
*
* Features demonstrated:
* - Clean, uncluttered interface
@@ -13,14 +16,11 @@ import '@videojs/react-preview/skins/minimal.css';
*/
export function MinimalSkinDemo() {
return (
<VideoProvider>
<MinimalSkin className="w-full aspect-video">
<Video
src={VJS8_DEMO_VIDEO.mp4}
poster={VJS8_DEMO_VIDEO.poster}
playsInline
/>
</MinimalSkin>
</VideoProvider>
<Player.Provider>
<MinimalVideoSkin className="w-full aspect-video">
<Video src={VJS8_DEMO_VIDEO.mp4} playsInline />
<Poster src={VJS8_DEMO_VIDEO.poster} />
</MinimalVideoSkin>
</Player.Provider>
);
}