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

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/html/src/define/audio/minimal-skin.css
-1
View File
@@ -1,3 +1,2 @@
@import "../global.css";
@import "../shared.css";
@import "@videojs/skins/minimal/css/audio.css";
packages/html/src/define/audio/minimal-skin.tailwind.ts
+12 -11
View File
@@ -2,16 +2,17 @@ import { renderIcon } from '@videojs/icons/render/minimal';
import {
button,
buttonGroup,
container,
controls,
error,
icon,
iconContainer,
iconFlipped,
iconState,
menu,
muteIcon,
playbackRate,
playIcon,
popup,
root,
seek,
slider,
time,
@@ -28,7 +29,7 @@ const SEEK_TIME = 10;
function getTemplateHTML() {
return /*html*/ `
<media-container class="${root}">
<media-container class="${container}">
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
<slot name="media"></slot>
<slot></slot>
@@ -48,10 +49,10 @@ function getTemplateHTML() {
<div class="${controls}">
<media-tooltip-group>
<div class="${buttonGroup}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
${renderIcon('play', { class: cn(icon, playIcon.play) })}
${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
@@ -116,10 +117,10 @@ function getTemplateHTML() {
</media-playback-rate-radio-group>
</media-menu>
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
</media-mute-button>
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="${cn(popup.volume)}">
packages/html/src/define/audio/minimal-skin.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { renderIcon } from '@videojs/icons/render/minimal';
import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
import { createTemplate } from '@videojs/utils/dom';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './minimal-skin.css?inline';
@@ -121,7 +121,7 @@ function getTemplateHTML() {
export class MinimalAudioSkinElement extends SkinElement {
static readonly tagName = 'audio-minimal-skin';
static styles = createShadowStyle(styles);
static styles = styles;
static template = createTemplate(getTemplateHTML());
}
packages/html/src/define/audio/skin.css
-1
View File
@@ -1,3 +1,2 @@
@import "../global.css";
@import "../shared.css";
@import "@videojs/skins/default/css/audio.css";
packages/html/src/define/audio/skin.tailwind.ts
+12 -11
View File
@@ -2,16 +2,17 @@ import { renderIcon } from '@videojs/icons/render';
import {
button,
buttonGroup,
container,
controls,
error,
icon,
iconContainer,
iconFlipped,
iconState,
menu,
muteIcon,
playbackRate,
playIcon,
popup,
root,
seek,
slider,
time,
@@ -28,7 +29,7 @@ const SEEK_TIME = 10;
function getTemplateHTML() {
return /*html*/ `
<media-container class="${root}">
<media-container class="${container}">
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
<slot name="media"></slot>
<slot></slot>
@@ -48,10 +49,10 @@ function getTemplateHTML() {
<div class="${controls}">
<media-tooltip-group>
<div class="${buttonGroup}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
${renderIcon('play', { class: cn(icon, playIcon.play) })}
${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
@@ -111,10 +112,10 @@ function getTemplateHTML() {
</media-playback-rate-radio-group>
</media-menu>
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
</media-mute-button>
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="${cn(popup.popover, popup.volume)}">
packages/html/src/define/audio/skin.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { renderIcon } from '@videojs/icons/render';
import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
import { createTemplate } from '@videojs/utils/dom';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './skin.css?inline';
@@ -133,7 +133,7 @@ function getTemplateHTML() {
export class AudioSkinElement extends SkinElement {
static readonly tagName = 'audio-skin';
static styles = createShadowStyle(styles);
static styles = styles;
static template = createTemplate(getTemplateHTML());
}
packages/html/src/define/live-audio/minimal-skin.css
-1
View File
@@ -1,3 +1,2 @@
@import "../global.css";
@import "../shared.css";
@import "@videojs/skins/minimal/css/audio.css";
packages/html/src/define/live-audio/minimal-skin.tailwind.ts
+12 -11
View File
@@ -2,12 +2,13 @@ import { renderIcon } from '@videojs/icons/render/minimal';
import {
button,
buttonGroup,
container,
controls,
error,
icon,
iconState,
muteIcon,
playIcon,
popup,
root,
slider,
} from '@videojs/skins/minimal/tailwind/audio.tailwind';
import { createTemplate } from '@videojs/utils/dom';
@@ -20,7 +21,7 @@ import './minimal-ui';
function getTemplateHTML() {
return /*html*/ `
<media-container class="${root}">
<media-container class="${container}">
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
<slot name="media"></slot>
<slot></slot>
@@ -40,10 +41,10 @@ function getTemplateHTML() {
<div class="${controls}">
<media-tooltip-group>
<div class="${buttonGroup}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
${renderIcon('play', { class: cn(icon, playIcon.play) })}
${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
@@ -56,10 +57,10 @@ function getTemplateHTML() {
<div class="grow" aria-hidden="true"></div>
<div class="${buttonGroup}">
<media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
<media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
</media-mute-button>
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="${cn(popup.volume)}">
packages/html/src/define/live-audio/minimal-skin.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { renderIcon } from '@videojs/icons/render/minimal';
import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
import { createTemplate } from '@videojs/utils/dom';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './minimal-skin.css?inline';
@@ -68,7 +68,7 @@ function getTemplateHTML() {
export class MinimalLiveAudioSkinElement extends SkinElement {
static readonly tagName = 'live-audio-minimal-skin';
static styles = createShadowStyle(styles);
static styles = styles;
static template = createTemplate(getTemplateHTML());
}
packages/html/src/define/live-audio/skin.css
-1
View File
@@ -1,3 +1,2 @@
@import "../global.css";
@import "../shared.css";
@import "@videojs/skins/default/css/audio.css";
packages/html/src/define/live-audio/skin.tailwind.ts
+12 -11
View File
@@ -2,12 +2,13 @@ import { renderIcon } from '@videojs/icons/render';
import {
button,
buttonGroup,
container,
controls,
error,
icon,
iconState,
muteIcon,
playIcon,
popup,
root,
slider,
} from '@videojs/skins/default/tailwind/audio.tailwind';
import { createTemplate } from '@videojs/utils/dom';
@@ -20,7 +21,7 @@ import './ui';
function getTemplateHTML() {
return /*html*/ `
<media-container class="${root}">
<media-container class="${container}">
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
<slot name="media"></slot>
<slot></slot>
@@ -40,10 +41,10 @@ function getTemplateHTML() {
<div class="${controls}">
<media-tooltip-group>
<div class="${buttonGroup}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
${renderIcon('play', { class: cn(icon, playIcon.play) })}
${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
@@ -56,10 +57,10 @@ function getTemplateHTML() {
<div class="grow" aria-hidden="true"></div>
<div class="${buttonGroup}">
<media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
<media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
</media-mute-button>
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="${cn(popup.popover, popup.volume)}">
packages/html/src/define/live-audio/skin.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { renderIcon } from '@videojs/icons/render';
import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
import { createTemplate } from '@videojs/utils/dom';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './skin.css?inline';
@@ -75,7 +75,7 @@ function getTemplateHTML() {
export class LiveAudioSkinElement extends SkinElement {
static readonly tagName = 'live-audio-skin';
static styles = createShadowStyle(styles);
static styles = styles;
static template = createTemplate(getTemplateHTML());
}
packages/html/src/define/live-video/minimal-skin.css
-1
View File
@@ -1,3 +1,2 @@
@import "../global.css";
@import "../shared.css";
@import "@videojs/skins/minimal/css/video.css";
packages/html/src/define/live-video/minimal-skin.tailwind.ts
+33 -27
View File
@@ -1,19 +1,25 @@
import { renderIcon } from '@videojs/icons/render/minimal';
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 { createTemplate } from '@videojs/utils/dom';
@@ -26,12 +32,12 @@ import './minimal-ui';
function getTemplateHTML() {
return /*html*/ `
<media-container class="${root(true)}">
<media-container class="${container}">
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
<slot name="media"></slot>
<slot></slot>
<media-poster class="${poster(true)}">
<media-poster class="${poster}">
<slot name="poster"></slot>
</media-poster>
@@ -54,10 +60,10 @@ function getTemplateHTML() {
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<div class="${buttonGroupStart}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
${renderIcon('play', { class: cn(icon, playIcon.play) })}
${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
@@ -70,10 +76,10 @@ function getTemplateHTML() {
<div class="grow" aria-hidden="true"></div>
<div class="${buttonGroupEnd}">
<media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
<media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
</media-mute-button>
<media-popover id="live-video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.volume)}">
@@ -84,9 +90,9 @@ function getTemplateHTML() {
<media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
<media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, captionsIcon.button)}">
${renderIcon('captions-off', { class: cn(icon, captionsIcon.off) })}
${renderIcon('captions-on', { class: cn(icon, captionsIcon.on) })}
</media-captions-button>
<media-menu id="captions-menu" side="top" align="center" class="${cn(popup.popover, menu.root, 'media-menu--captions')}">
<media-captions-radio-group class="${menu.group}">
@@ -104,33 +110,33 @@ function getTemplateHTML() {
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, castIcon.button)}">
${renderIcon('cast-enter', { class: cn(icon, castIcon.enter) })}
${renderIcon('cast-exit', { class: cn(icon, castIcon.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, airplayIcon.button)}">
${renderIcon('airplay-enter', { class: cn(icon, airplayIcon.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, airplayIcon.exit) })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, pipIcon.button)}">
${renderIcon('pip-enter', { class: cn(icon, pipIcon.off) })}
${renderIcon('pip-exit', { class: cn(icon, pipIcon.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, fullscreenIcon.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, fullscreenIcon.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, fullscreenIcon.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
packages/html/src/define/live-video/minimal-skin.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { renderIcon } from '@videojs/icons/render/minimal';
import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
import { createTemplate } from '@videojs/utils/dom';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './minimal-skin.css?inline';
@@ -183,7 +183,7 @@ function getTemplateHTML() {
export class MinimalLiveVideoSkinElement extends SkinElement {
static readonly tagName = 'live-video-minimal-skin';
static styles = createShadowStyle(styles);
static styles = styles;
static template = createTemplate(getTemplateHTML());
}
packages/html/src/define/live-video/skin.css
-1
View File
@@ -1,3 +1,2 @@
@import "../global.css";
@import "../shared.css";
@import "@videojs/skins/default/css/video.css";
packages/html/src/define/live-video/skin.tailwind.ts
+33 -27
View File
@@ -1,19 +1,25 @@
import { renderIcon } from '@videojs/icons/render';
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 { createTemplate } from '@videojs/utils/dom';
@@ -26,12 +32,12 @@ import './ui';
function getTemplateHTML() {
return /*html*/ `
<media-container class="${root(true)}">
<media-container class="${container}">
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
<slot name="media"></slot>
<slot></slot>
<media-poster class="${poster(true)}">
<media-poster class="${poster}">
<slot name="poster"></slot>
</media-poster>
@@ -56,10 +62,10 @@ function getTemplateHTML() {
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<div class="${buttonGroupStart}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
${renderIcon('play', { class: cn(icon, playIcon.play) })}
${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
@@ -72,10 +78,10 @@ function getTemplateHTML() {
<div class="grow" aria-hidden="true"></div>
<div class="${buttonGroupEnd}">
<media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
<media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
</media-mute-button>
<media-popover id="live-video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
@@ -86,9 +92,9 @@ function getTemplateHTML() {
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
<media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, captionsIcon.button)}">
${renderIcon('captions-off', { class: cn(icon, captionsIcon.off) })}
${renderIcon('captions-on', { class: cn(icon, captionsIcon.on) })}
</media-captions-button>
<media-menu id="captions-menu" side="top" align="center" class="${cn(popup.popover, menu.root, 'media-menu--captions')}">
<media-captions-radio-group class="${menu.group}">
@@ -106,33 +112,33 @@ function getTemplateHTML() {
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, castIcon.button)}">
${renderIcon('cast-enter', { class: cn(icon, castIcon.enter) })}
${renderIcon('cast-exit', { class: cn(icon, castIcon.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, airplayIcon.button)}">
${renderIcon('airplay-enter', { class: cn(icon, airplayIcon.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, airplayIcon.exit) })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, pipIcon.button)}">
${renderIcon('pip-enter', { class: cn(icon, pipIcon.off) })}
${renderIcon('pip-exit', { class: cn(icon, pipIcon.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, fullscreenIcon.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, fullscreenIcon.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, fullscreenIcon.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
packages/html/src/define/live-video/skin.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { renderIcon } from '@videojs/icons/render';
import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
import { createTemplate } from '@videojs/utils/dom';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './skin.css?inline';
@@ -184,7 +184,7 @@ function getTemplateHTML() {
export class LiveVideoSkinElement extends SkinElement {
static readonly tagName = 'live-video-skin';
static styles = createShadowStyle(styles);
static styles = styles;
static template = createTemplate(getTemplateHTML());
}
packages/html/src/define/skin-element.ts
+1 -2
View File
@@ -14,8 +14,7 @@ const sharedSheet = createShadowStyle(sharedStyles);
/**
* Base element for skin definitions. Attaches a shadow root, clones
* `static template` into it, and applies shared + per-skin styles
* via `adoptedStyleSheets` (or `<style>` fallback).
* `static template` into it, and applies shared + per-skin styles.
*/
export class SkinElement extends ReactiveElement {
static shadowRootOptions: ShadowRootInit = { mode: 'open' };
packages/html/src/define/video/minimal-skin.css
-1
View File
@@ -1,3 +1,2 @@
@import "../global.css";
@import "../shared.css";
@import "@videojs/skins/minimal/css/video.css";
packages/html/src/define/video/minimal-skin.tailwind.ts
+29 -24
View File
@@ -1,22 +1,27 @@
import { renderIcon } from '@videojs/icons/render/minimal';
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,
@@ -34,12 +39,12 @@ const SEEK_TIME = 10;
function getTemplateHTML() {
return /*html*/ `
<media-container class="${root(true)}">
<media-container class="${container}">
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
<slot name="media"></slot>
<slot></slot>
<media-poster class="${poster(true)}">
<media-poster class="${poster}">
<slot name="poster"></slot>
</media-poster>
@@ -62,10 +67,10 @@ function getTemplateHTML() {
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<div class="${buttonGroupStart}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
${renderIcon('play', { class: cn(icon, playIcon.play) })}
${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
@@ -123,10 +128,10 @@ function getTemplateHTML() {
</div>
<div class="${cn(buttonGroupEnd, menu.settingsGroup)}">
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
</media-mute-button>
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.volume)}">
@@ -230,33 +235,33 @@ function getTemplateHTML() {
</media-menu>
</media-menu>
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, castIcon.button)}">
${renderIcon('cast-enter', { class: cn(icon, castIcon.enter) })}
${renderIcon('cast-exit', { class: cn(icon, castIcon.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, airplayIcon.button)}">
${renderIcon('airplay-enter', { class: cn(icon, airplayIcon.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, airplayIcon.exit) })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, pipIcon.button)}">
${renderIcon('pip-enter', { class: cn(icon, pipIcon.off) })}
${renderIcon('pip-exit', { class: cn(icon, pipIcon.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, fullscreenIcon.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, fullscreenIcon.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, fullscreenIcon.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
packages/html/src/define/video/minimal-skin.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { renderIcon } from '@videojs/icons/render/minimal';
import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
import { createTemplate } from '@videojs/utils/dom';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './minimal-skin.css?inline';
@@ -316,7 +316,7 @@ function getTemplateHTML() {
export class MinimalVideoSkinElement extends SkinElement {
static readonly tagName = 'video-minimal-skin';
static styles = createShadowStyle(styles);
static styles = styles;
static template = createTemplate(getTemplateHTML());
}
packages/html/src/define/video/skin.css
-1
View File
@@ -1,3 +1,2 @@
@import "../global.css";
@import "../shared.css";
@import "@videojs/skins/default/css/video.css";
packages/html/src/define/video/skin.tailwind.ts
+29 -24
View File
@@ -1,22 +1,27 @@
import { renderIcon } from '@videojs/icons/render';
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,
@@ -34,12 +39,12 @@ const SEEK_TIME = 10;
function getTemplateHTML() {
return /*html*/ `
<media-container class="${root(true)}">
<media-container class="${container}">
<!-- @deprecated slot="media" is no longer required, use the default slot instead -->
<slot name="media"></slot>
<slot></slot>
<media-poster class="${poster(true)}">
<media-poster class="${poster}">
<slot name="poster"></slot>
</media-poster>
@@ -64,10 +69,10 @@ function getTemplateHTML() {
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<div class="${buttonGroupStart}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
${renderIcon('play', { class: cn(icon, playIcon.play) })}
${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
@@ -119,10 +124,10 @@ function getTemplateHTML() {
</div>
<div class="${cn(buttonGroupEnd, menu.settingsGroup)}">
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
</media-mute-button>
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
@@ -226,33 +231,33 @@ function getTemplateHTML() {
</media-menu>
</media-menu>
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, castIcon.button)}">
${renderIcon('cast-enter', { class: cn(icon, castIcon.enter) })}
${renderIcon('cast-exit', { class: cn(icon, castIcon.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, airplayIcon.button)}">
${renderIcon('airplay-enter', { class: cn(icon, airplayIcon.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, airplayIcon.exit) })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, pipIcon.button)}">
${renderIcon('pip-enter', { class: cn(icon, pipIcon.off) })}
${renderIcon('pip-exit', { class: cn(icon, pipIcon.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, fullscreenIcon.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, fullscreenIcon.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, fullscreenIcon.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
packages/html/src/define/video/skin.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { renderIcon } from '@videojs/icons/render';
import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
import { createTemplate } from '@videojs/utils/dom';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './skin.css?inline';
@@ -312,7 +312,7 @@ function getTemplateHTML() {
export class VideoSkinElement extends SkinElement {
static readonly tagName = 'video-skin';
static styles = createShadowStyle(styles);
static styles = styles;
static template = createTemplate(getTemplateHTML());
}