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(compiler): add skin project compilation

Browse Source
This commit is contained in:
Rahim
2026-06-21 17:36:49 -07:00
parent e0a5710c66
commit fcee71e1eb
31 changed files with 1693 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/video.skin.tsx
+24 -27
View File
@@ -1,5 +1,3 @@
/** @jsxImportSource @videojs/core */
import {
AirPlayButton,
CastButton,
@@ -30,7 +28,6 @@ import {
RestartIcon,
SeekIcon,
} from '@videojs/icons/components';
import { cn } from '@videojs/utils/style';
import {
airplayIcon,
button,
@@ -59,7 +56,7 @@ export interface DefaultVideoSkinProps {
export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps) {
return (
<Container className={cn(container, className)}>
<Container className={[container, className]}>
{children}
<Controls.Root className={controls}>
@@ -67,10 +64,10 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Controls.Group className={buttonGroupStart}>
<Tooltip.Root side="top">
<Tooltip.Trigger>
<PlayButton className={cn(button.base, button.subtle, button.icon, playIcon.button)}>
<RestartIcon className={cn(icon, playIcon.restart)} />
<PlayIcon className={cn(icon, playIcon.play)} />
<PauseIcon className={cn(icon, playIcon.pause)} />
<PlayButton className={[button.base, button.subtle, button.icon, playIcon.button]}>
<RestartIcon className={[icon, playIcon.restart]} />
<PlayIcon className={[icon, playIcon.play]} />
<PauseIcon className={[icon, playIcon.pause]} />
</PlayButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>
@@ -81,8 +78,8 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Tooltip.Root side="top">
<Tooltip.Trigger>
<SeekButton seconds={-SEEK_TIME} className={cn(button.base, button.subtle, button.icon)}>
<SeekIcon className={cn(icon, iconContainer, iconFlipped)} />
<SeekButton seconds={-SEEK_TIME} className={[button.base, button.subtle, button.icon]}>
<SeekIcon className={[icon, iconContainer, iconFlipped]} />
</SeekButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>
@@ -93,8 +90,8 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Tooltip.Root side="top">
<Tooltip.Trigger>
<SeekButton seconds={SEEK_TIME} className={cn(button.base, button.subtle, button.icon)}>
<SeekIcon className={cn(icon, iconContainer)} />
<SeekButton seconds={SEEK_TIME} className={[button.base, button.subtle, button.icon]}>
<SeekIcon className={[icon, iconContainer]} />
</SeekButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>
@@ -108,10 +105,10 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Time.Value type="current" className={time.current} />
<TimeSlider.Root className={slider.root}>
<TimeSlider.Track className={slider.track}>
<TimeSlider.Fill className={cn(slider.fill.base, slider.fill.fill)} />
<TimeSlider.Buffer className={cn(slider.fill.base, slider.fill.buffer)} />
<TimeSlider.Fill className={[slider.fill.base, slider.fill.fill]} />
<TimeSlider.Buffer className={[slider.fill.base, slider.fill.buffer]} />
</TimeSlider.Track>
<TimeSlider.Thumb className={cn(slider.thumb.base, slider.thumb.interactive)} />
<TimeSlider.Thumb className={[slider.thumb.base, slider.thumb.interactive]} />
<TimeSlider.Preview className={slider.preview}>
<TimeSlider.Value type="pointer" className={slider.value} />
</TimeSlider.Preview>
@@ -122,9 +119,9 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Controls.Group className={buttonGroupEnd}>
<Tooltip.Root side="top">
<Tooltip.Trigger>
<CastButton className={cn(button.base, button.subtle, button.icon, castIcon.button)}>
<CastEnterIcon className={cn(icon, castIcon.enter)} />
<CastExitIcon className={cn(icon, castIcon.exit)} />
<CastButton className={[button.base, button.subtle, button.icon, castIcon.button]}>
<CastEnterIcon className={[icon, castIcon.enter]} />
<CastExitIcon className={[icon, castIcon.exit]} />
</CastButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>
@@ -135,9 +132,9 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Tooltip.Root side="top">
<Tooltip.Trigger>
<AirPlayButton className={cn(button.base, button.subtle, button.icon, airplayIcon.button)}>
<AirPlayEnterIcon className={cn(icon, airplayIcon.enter)} />
<AirPlayExitIcon className={cn(icon, airplayIcon.exit)} />
<AirPlayButton className={[button.base, button.subtle, button.icon, airplayIcon.button]}>
<AirPlayEnterIcon className={[icon, airplayIcon.enter]} />
<AirPlayExitIcon className={[icon, airplayIcon.exit]} />
</AirPlayButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>
@@ -148,9 +145,9 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Tooltip.Root side="top">
<Tooltip.Trigger>
<PiPButton className={cn(button.base, button.subtle, button.icon, pipIcon.button)}>
<PipEnterIcon className={cn(icon, pipIcon.off)} />
<PipExitIcon className={cn(icon, pipIcon.on)} />
<PiPButton className={[button.base, button.subtle, button.icon, pipIcon.button]}>
<PipEnterIcon className={[icon, pipIcon.off]} />
<PipExitIcon className={[icon, pipIcon.on]} />
</PiPButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>
@@ -161,9 +158,9 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Tooltip.Root side="top">
<Tooltip.Trigger>
<FullscreenButton className={cn(button.base, button.subtle, button.icon, fullscreenIcon.button)}>
<FullscreenEnterIcon className={cn(icon, fullscreenIcon.enter)} />
<FullscreenExitIcon className={cn(icon, fullscreenIcon.exit)} />
<FullscreenButton className={[button.base, button.subtle, button.icon, fullscreenIcon.button]}>
<FullscreenEnterIcon className={[icon, fullscreenIcon.enter]} />
<FullscreenExitIcon className={[icon, fullscreenIcon.exit]} />
</FullscreenButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>