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

refactor(compiler)!: move component generation to core

Browse Source
This commit is contained in:
Rahim
2026-06-19 19:37:09 -07:00
parent b2c6b3489f
commit f64acdfd15
158 changed files with 2849 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/presets/audio/minimal-skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/minimal/css/audio.css";
packages/react/src/presets/audio/minimal-skin.tailwind.tsx
+12 -11
View File
@@ -1,16 +1,17 @@
import {
button,
buttonGroup,
container,
controls,
error,
icon,
iconContainer,
iconFlipped,
iconState,
menu,
muteIcon,
playbackRate,
playIcon,
popup,
root,
seek,
slider,
time,
@@ -97,10 +98,10 @@ function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
const muteButton = (
<MuteButton className={iconState.mute.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
<VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
<VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
<MuteButton className={muteIcon.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
<VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
<VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
</MuteButton>
);
@@ -159,7 +160,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
const { children, className, ...rest } = props;
return (
<Container className={cn(root, className)} {...rest}>
<Container className={cn(container, className)} {...rest}>
{children}
<ErrorDialog.Root>
@@ -182,10 +183,10 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
<Tooltip.Root side="top" boundary="viewport">
<Tooltip.Trigger
render={
<PlayButton className={iconState.play.button} render={<Button />}>
<RestartIcon className={cn(icon, iconState.play.restart)} />
<PlayIcon className={cn(icon, iconState.play.play)} />
<PauseIcon className={cn(icon, iconState.play.pause)} />
<PlayButton className={playIcon.button} render={<Button />}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
</PlayButton>
}
/>
packages/react/src/presets/audio/skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/default/css/audio.css";
packages/react/src/presets/audio/skin.tailwind.tsx
+12 -11
View File
@@ -1,16 +1,17 @@
import {
button,
buttonGroup,
container,
controls,
error,
icon,
iconContainer,
iconFlipped,
iconState,
menu,
muteIcon,
playbackRate,
playIcon,
popup,
root,
seek,
slider,
time,
@@ -99,10 +100,10 @@ function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
const muteButton = (
<MuteButton className={iconState.mute.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
<VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
<VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
<MuteButton className={muteIcon.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
<VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
<VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
</MuteButton>
);
@@ -161,7 +162,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
const { children, className, ...rest } = props;
return (
<Container className={cn(root, className)} {...rest}>
<Container className={cn(container, className)} {...rest}>
{children}
<ErrorDialog.Root>
@@ -184,10 +185,10 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
<Tooltip.Root side="top" boundary="viewport">
<Tooltip.Trigger
render={
<PlayButton className={iconState.play.button} render={<Button />}>
<RestartIcon className={cn(icon, iconState.play.restart)} />
<PlayIcon className={cn(icon, iconState.play.play)} />
<PauseIcon className={cn(icon, iconState.play.pause)} />
<PlayButton className={playIcon.button} render={<Button />}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
</PlayButton>
}
/>
packages/react/src/presets/background/skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/default/css/background.css";
packages/react/src/presets/live-audio/minimal-skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/minimal/css/audio.css";
packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
+12 -11
View File
@@ -1,12 +1,13 @@
import {
button,
buttonGroup,
container,
controls,
error,
icon,
iconState,
muteIcon,
playIcon,
popup,
root,
slider,
} from '@videojs/skins/minimal/tailwind/audio.tailwind';
import { cn } from '@videojs/utils/style';
@@ -71,10 +72,10 @@ function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
const muteButton = (
<MuteButton className={iconState.mute.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
<VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
<VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
<MuteButton className={muteIcon.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
<VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
<VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
</MuteButton>
);
@@ -99,7 +100,7 @@ export function MinimalLiveAudioSkinTailwind(props: MinimalLiveAudioSkinProps):
const { children, className, ...rest } = props;
return (
<Container className={cn(root, className)} {...rest}>
<Container className={cn(container, className)} {...rest}>
{children}
<ErrorDialog.Root>
@@ -122,10 +123,10 @@ export function MinimalLiveAudioSkinTailwind(props: MinimalLiveAudioSkinProps):
<Tooltip.Root side="top" boundary="viewport">
<Tooltip.Trigger
render={
<PlayButton className={iconState.play.button} render={<Button />}>
<RestartIcon className={cn(icon, iconState.play.restart)} />
<PlayIcon className={cn(icon, iconState.play.play)} />
<PauseIcon className={cn(icon, iconState.play.pause)} />
<PlayButton className={playIcon.button} render={<Button />}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
</PlayButton>
}
/>
packages/react/src/presets/live-audio/skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/default/css/audio.css";
packages/react/src/presets/live-audio/skin.tailwind.tsx
+12 -11
View File
@@ -1,12 +1,13 @@
import {
button,
buttonGroup,
container,
controls,
error,
icon,
iconState,
muteIcon,
playIcon,
popup,
root,
slider,
} from '@videojs/skins/default/tailwind/audio.tailwind';
import { cn } from '@videojs/utils/style';
@@ -71,10 +72,10 @@ function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
const muteButton = (
<MuteButton className={iconState.mute.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
<VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
<VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
<MuteButton className={muteIcon.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
<VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
<VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
</MuteButton>
);
@@ -99,7 +100,7 @@ export function LiveAudioSkinTailwind(props: LiveAudioSkinProps): ReactNode {
const { children, className, ...rest } = props;
return (
<Container className={cn(root, className)} {...rest}>
<Container className={cn(container, className)} {...rest}>
{children}
<ErrorDialog.Root>
@@ -122,10 +123,10 @@ export function LiveAudioSkinTailwind(props: LiveAudioSkinProps): ReactNode {
<Tooltip.Root side="top" boundary="viewport">
<Tooltip.Trigger
render={
<PlayButton className={iconState.play.button} render={<Button />}>
<RestartIcon className={cn(icon, iconState.play.restart)} />
<PlayIcon className={cn(icon, iconState.play.play)} />
<PauseIcon className={cn(icon, iconState.play.pause)} />
<PlayButton className={playIcon.button} render={<Button />}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
</PlayButton>
}
/>
packages/react/src/presets/live-video/minimal-skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/minimal/css/video.css";
packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
+36 -30
View File
@@ -1,18 +1,24 @@
import {
airplayIcon,
bufferingIndicator,
button,
buttonGroupEnd,
buttonGroupStart,
captionsIcon,
castIcon,
container,
controls,
error,
fullscreenIcon,
icon,
iconState,
inputFeedback,
menu,
muteIcon,
overlay,
pipIcon,
playIcon,
popup,
poster,
root,
slider,
} from '@videojs/skins/minimal/tailwind/video.tailwind';
import { isString } from '@videojs/utils/predicate';
@@ -114,10 +120,10 @@ function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
const muteButton = (
<MuteButton className={iconState.mute.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
<VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
<VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
<MuteButton className={muteIcon.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
<VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
<VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
</MuteButton>
);
@@ -149,9 +155,9 @@ function CaptionsTrigger(): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<CaptionsButton className={iconState.captions.button} render={<Button />}>
<CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
<CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
<CaptionsButton className={captionsIcon.button} render={<Button />}>
<CaptionsOffIcon className={cn(icon, captionsIcon.off)} />
<CaptionsOnIcon className={cn(icon, captionsIcon.on)} />
</CaptionsButton>
}
/>
@@ -168,9 +174,9 @@ function CaptionsTrigger(): ReactNode {
<Menu.Trigger
disabled={disabled}
render={
<CaptionsButton className={iconState.captions.button} render={<Button />}>
<CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
<CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
<CaptionsButton className={captionsIcon.button} render={<Button />}>
<CaptionsOffIcon className={cn(icon, captionsIcon.off)} />
<CaptionsOnIcon className={cn(icon, captionsIcon.on)} />
</CaptionsButton>
}
/>
@@ -199,14 +205,14 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
const { children, className, poster: posterProp, ...rest } = props;
return (
<Container className={cn(root(false), className)} {...rest}>
<Container className={cn(container, className)} {...rest}>
{children}
{posterProp && (
<Poster
src={isString(posterProp) ? posterProp : undefined}
render={isRenderProp(posterProp) ? posterProp : undefined}
className={poster(false)}
className={poster}
/>
)}
@@ -241,10 +247,10 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<PlayButton className={iconState.play.button} render={<Button />}>
<RestartIcon className={cn(icon, iconState.play.restart)} />
<PlayIcon className={cn(icon, iconState.play.play)} />
<PauseIcon className={cn(icon, iconState.play.pause)} />
<PlayButton className={playIcon.button} render={<Button />}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
</PlayButton>
}
/>
@@ -267,9 +273,9 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<CastButton className={iconState.cast.button} render={<Button />}>
<CastEnterIcon className={cn(icon, iconState.cast.enter)} />
<CastExitIcon className={cn(icon, iconState.cast.exit)} />
<CastButton className={castIcon.button} render={<Button />}>
<CastEnterIcon className={cn(icon, castIcon.enter)} />
<CastExitIcon className={cn(icon, castIcon.exit)} />
</CastButton>
}
/>
@@ -282,9 +288,9 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<AirPlayButton className={iconState.airplay.button} render={<Button />}>
<AirPlayEnterIcon className={cn(icon, iconState.airplay.enter)} />
<AirPlayExitIcon className={cn(icon, iconState.airplay.exit)} />
<AirPlayButton className={airplayIcon.button} render={<Button />}>
<AirPlayEnterIcon className={cn(icon, airplayIcon.enter)} />
<AirPlayExitIcon className={cn(icon, airplayIcon.exit)} />
</AirPlayButton>
}
/>
@@ -297,9 +303,9 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<PiPButton className={iconState.pip.button} render={<Button />}>
<PipEnterIcon className={cn(icon, iconState.pip.off)} />
<PipExitIcon className={cn(icon, iconState.pip.on)} />
<PiPButton className={pipIcon.button} render={<Button />}>
<PipEnterIcon className={cn(icon, pipIcon.off)} />
<PipExitIcon className={cn(icon, pipIcon.on)} />
</PiPButton>
}
/>
@@ -312,9 +318,9 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<FullscreenButton className={iconState.fullscreen.button} render={<Button />}>
<FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
<FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
<FullscreenButton className={fullscreenIcon.button} render={<Button />}>
<FullscreenEnterIcon className={cn(icon, fullscreenIcon.enter)} />
<FullscreenExitIcon className={cn(icon, fullscreenIcon.exit)} />
</FullscreenButton>
}
/>
packages/react/src/presets/live-video/skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/default/css/video.css";
packages/react/src/presets/live-video/skin.tailwind.tsx
+36 -30
View File
@@ -1,18 +1,24 @@
import {
airplayIcon,
bufferingIndicator,
button,
buttonGroupEnd,
buttonGroupStart,
captionsIcon,
castIcon,
container,
controls,
error,
fullscreenIcon,
icon,
iconState,
inputFeedback,
menu,
muteIcon,
overlay,
pipIcon,
playIcon,
popup,
poster,
root,
slider,
} from '@videojs/skins/default/tailwind/video.tailwind';
import { isString } from '@videojs/utils/predicate';
@@ -114,10 +120,10 @@ function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
const muteButton = (
<MuteButton className={iconState.mute.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
<VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
<VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
<MuteButton className={muteIcon.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
<VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
<VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
</MuteButton>
);
@@ -149,9 +155,9 @@ function CaptionsTrigger(): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<CaptionsButton className={iconState.captions.button} render={<Button />}>
<CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
<CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
<CaptionsButton className={captionsIcon.button} render={<Button />}>
<CaptionsOffIcon className={cn(icon, captionsIcon.off)} />
<CaptionsOnIcon className={cn(icon, captionsIcon.on)} />
</CaptionsButton>
}
/>
@@ -168,9 +174,9 @@ function CaptionsTrigger(): ReactNode {
<Menu.Trigger
disabled={disabled}
render={
<CaptionsButton className={iconState.captions.button} render={<Button />}>
<CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
<CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
<CaptionsButton className={captionsIcon.button} render={<Button />}>
<CaptionsOffIcon className={cn(icon, captionsIcon.off)} />
<CaptionsOnIcon className={cn(icon, captionsIcon.on)} />
</CaptionsButton>
}
/>
@@ -199,14 +205,14 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
const { children, className, poster: posterProp, ...rest } = props;
return (
<Container className={cn(root(false), className)} {...rest}>
<Container className={cn(container, className)} {...rest}>
{children}
{posterProp && (
<Poster
src={isString(posterProp) ? posterProp : undefined}
render={isRenderProp(posterProp) ? posterProp : undefined}
className={poster(false)}
className={poster}
/>
)}
@@ -243,10 +249,10 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<PlayButton className={iconState.play.button} render={<Button />}>
<RestartIcon className={cn(icon, iconState.play.restart)} />
<PlayIcon className={cn(icon, iconState.play.play)} />
<PauseIcon className={cn(icon, iconState.play.pause)} />
<PlayButton className={playIcon.button} render={<Button />}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
</PlayButton>
}
/>
@@ -269,9 +275,9 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<CastButton className={iconState.cast.button} render={<Button />}>
<CastEnterIcon className={cn(icon, iconState.cast.enter)} />
<CastExitIcon className={cn(icon, iconState.cast.exit)} />
<CastButton className={castIcon.button} render={<Button />}>
<CastEnterIcon className={cn(icon, castIcon.enter)} />
<CastExitIcon className={cn(icon, castIcon.exit)} />
</CastButton>
}
/>
@@ -284,9 +290,9 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<AirPlayButton className={iconState.airplay.button} render={<Button />}>
<AirPlayEnterIcon className={cn(icon, iconState.airplay.enter)} />
<AirPlayExitIcon className={cn(icon, iconState.airplay.exit)} />
<AirPlayButton className={airplayIcon.button} render={<Button />}>
<AirPlayEnterIcon className={cn(icon, airplayIcon.enter)} />
<AirPlayExitIcon className={cn(icon, airplayIcon.exit)} />
</AirPlayButton>
}
/>
@@ -299,9 +305,9 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<PiPButton className={iconState.pip.button} render={<Button />}>
<PipEnterIcon className={cn(icon, iconState.pip.off)} />
<PipExitIcon className={cn(icon, iconState.pip.on)} />
<PiPButton className={pipIcon.button} render={<Button />}>
<PipEnterIcon className={cn(icon, pipIcon.off)} />
<PipExitIcon className={cn(icon, pipIcon.on)} />
</PiPButton>
}
/>
@@ -314,9 +320,9 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<FullscreenButton className={iconState.fullscreen.button} render={<Button />}>
<FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
<FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
<FullscreenButton className={fullscreenIcon.button} render={<Button />}>
<FullscreenEnterIcon className={cn(icon, fullscreenIcon.enter)} />
<FullscreenExitIcon className={cn(icon, fullscreenIcon.exit)} />
</FullscreenButton>
}
/>
packages/react/src/presets/video/minimal-skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/minimal/css/video.css";
packages/react/src/presets/video/minimal-skin.tailwind.tsx
+29 -24
View File
@@ -1,21 +1,26 @@
import {
airplayIcon,
badge,
bufferingIndicator,
button,
buttonGroupEnd,
buttonGroupStart,
castIcon,
container,
controls,
error,
fullscreenIcon,
icon,
iconContainer,
iconFlipped,
iconState,
inputFeedback,
menu,
muteIcon,
overlay,
pipIcon,
playIcon,
popup,
poster,
root,
seek,
slider,
thumbnail,
@@ -137,10 +142,10 @@ function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
const muteButton = (
<MuteButton className={iconState.mute.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
<VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
<VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
<MuteButton className={muteIcon.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
<VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
<VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
</MuteButton>
);
@@ -349,14 +354,14 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
const { children, className, poster: posterProp, ...rest } = props;
return (
<Container className={cn(root(false), className)} {...rest}>
<Container className={cn(container, className)} {...rest}>
{children}
{posterProp && (
<Poster
src={isString(posterProp) ? posterProp : undefined}
render={isRenderProp(posterProp) ? posterProp : undefined}
className={poster(false)}
className={poster}
/>
)}
@@ -391,10 +396,10 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<PlayButton className={iconState.play.button} render={<Button />}>
<RestartIcon className={cn(icon, iconState.play.restart)} />
<PlayIcon className={cn(icon, iconState.play.play)} />
<PauseIcon className={cn(icon, iconState.play.pause)} />
<PlayButton className={playIcon.button} render={<Button />}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
</PlayButton>
}
/>
@@ -473,9 +478,9 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<CastButton className={iconState.cast.button} render={<Button />}>
<CastEnterIcon className={cn(icon, iconState.cast.enter)} />
<CastExitIcon className={cn(icon, iconState.cast.exit)} />
<CastButton className={castIcon.button} render={<Button />}>
<CastEnterIcon className={cn(icon, castIcon.enter)} />
<CastExitIcon className={cn(icon, castIcon.exit)} />
</CastButton>
}
/>
@@ -488,9 +493,9 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<AirPlayButton className={iconState.airplay.button} render={<Button />}>
<AirPlayEnterIcon className={cn(icon, iconState.airplay.enter)} />
<AirPlayExitIcon className={cn(icon, iconState.airplay.exit)} />
<AirPlayButton className={airplayIcon.button} render={<Button />}>
<AirPlayEnterIcon className={cn(icon, airplayIcon.enter)} />
<AirPlayExitIcon className={cn(icon, airplayIcon.exit)} />
</AirPlayButton>
}
/>
@@ -503,9 +508,9 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<PiPButton className={iconState.pip.button} render={<Button />}>
<PipEnterIcon className={cn(icon, iconState.pip.off)} />
<PipExitIcon className={cn(icon, iconState.pip.on)} />
<PiPButton className={pipIcon.button} render={<Button />}>
<PipEnterIcon className={cn(icon, pipIcon.off)} />
<PipExitIcon className={cn(icon, pipIcon.on)} />
</PiPButton>
}
/>
@@ -518,9 +523,9 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<FullscreenButton className={iconState.fullscreen.button} render={<Button />}>
<FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
<FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
<FullscreenButton className={fullscreenIcon.button} render={<Button />}>
<FullscreenEnterIcon className={cn(icon, fullscreenIcon.enter)} />
<FullscreenExitIcon className={cn(icon, fullscreenIcon.exit)} />
</FullscreenButton>
}
/>
packages/react/src/presets/video/skin.css
-1
View File
@@ -1 +0,0 @@
@import "@videojs/skins/default/css/video.css";
packages/react/src/presets/video/skin.tailwind.tsx
+29 -24
View File
@@ -1,21 +1,26 @@
import {
airplayIcon,
badge,
bufferingIndicator,
button,
buttonGroupEnd,
buttonGroupStart,
castIcon,
container,
controls,
error,
fullscreenIcon,
icon,
iconContainer,
iconFlipped,
iconState,
inputFeedback,
menu,
muteIcon,
overlay,
pipIcon,
playIcon,
popup,
poster,
root,
seek,
slider,
thumbnail,
@@ -137,10 +142,10 @@ function VolumePopover(): ReactNode {
const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
const muteButton = (
<MuteButton className={iconState.mute.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
<VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
<VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
<MuteButton className={muteIcon.button} render={<Button />}>
<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
<VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
<VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
</MuteButton>
);
@@ -349,14 +354,14 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
const { children, className, poster: posterProp, ...rest } = props;
return (
<Container className={cn(root(false), className)} {...rest}>
<Container className={cn(container, className)} {...rest}>
{children}
{posterProp && (
<Poster
src={isString(posterProp) ? posterProp : undefined}
render={isRenderProp(posterProp) ? posterProp : undefined}
className={poster(false)}
className={poster}
/>
)}
@@ -393,10 +398,10 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<PlayButton className={iconState.play.button} render={<Button />}>
<RestartIcon className={cn(icon, iconState.play.restart)} />
<PlayIcon className={cn(icon, iconState.play.play)} />
<PauseIcon className={cn(icon, iconState.play.pause)} />
<PlayButton className={playIcon.button} render={<Button />}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
</PlayButton>
}
/>
@@ -469,9 +474,9 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<CastButton className={iconState.cast.button} render={<Button />}>
<CastEnterIcon className={cn(icon, iconState.cast.enter)} />
<CastExitIcon className={cn(icon, iconState.cast.exit)} />
<CastButton className={castIcon.button} render={<Button />}>
<CastEnterIcon className={cn(icon, castIcon.enter)} />
<CastExitIcon className={cn(icon, castIcon.exit)} />
</CastButton>
}
/>
@@ -484,9 +489,9 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<AirPlayButton className={iconState.airplay.button} render={<Button />}>
<AirPlayEnterIcon className={cn(icon, iconState.airplay.enter)} />
<AirPlayExitIcon className={cn(icon, iconState.airplay.exit)} />
<AirPlayButton className={airplayIcon.button} render={<Button />}>
<AirPlayEnterIcon className={cn(icon, airplayIcon.enter)} />
<AirPlayExitIcon className={cn(icon, airplayIcon.exit)} />
</AirPlayButton>
}
/>
@@ -499,9 +504,9 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<PiPButton className={iconState.pip.button} render={<Button />}>
<PipEnterIcon className={cn(icon, iconState.pip.off)} />
<PipExitIcon className={cn(icon, iconState.pip.on)} />
<PiPButton className={pipIcon.button} render={<Button />}>
<PipEnterIcon className={cn(icon, pipIcon.off)} />
<PipExitIcon className={cn(icon, pipIcon.on)} />
</PiPButton>
}
/>
@@ -514,9 +519,9 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<FullscreenButton className={iconState.fullscreen.button} render={<Button />}>
<FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
<FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
<FullscreenButton className={fullscreenIcon.button} render={<Button />}>
<FullscreenEnterIcon className={cn(icon, fullscreenIcon.enter)} />
<FullscreenExitIcon className={cn(icon, fullscreenIcon.exit)} />
</FullscreenButton>
}
/>