zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-05 05:37:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(html): add ui bundles for eject (#1206)

Browse Source
This commit is contained in:
rahim
2026-04-02 17:11:41 -07:00
committed by GitHub
parent 86cf3e8977
commit 0ed7bf0653
24 changed files with 116 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/cdn/audio-minimal-ui.ts
+1
View File
@@ -0,0 +1 @@
import '../define/audio/minimal-ui';
packages/html/src/cdn/audio-minimal.ts
-1
View File
@@ -1,2 +1 @@
import '../define/audio/player';
import '../define/audio/minimal-skin';
packages/html/src/cdn/audio-ui.ts
+1
View File
@@ -0,0 +1 @@
import '../define/audio/ui';
packages/html/src/cdn/audio.ts
-1
View File
@@ -1,2 +1 @@
import '../define/audio/player';
import '../define/audio/skin';
packages/html/src/cdn/video-minimal-ui.ts
+1
View File
@@ -0,0 +1 @@
import '../define/video/minimal-ui';
packages/html/src/cdn/video-minimal.ts
-1
View File
@@ -1,2 +1 @@
import '../define/video/player';
import '../define/video/minimal-skin';
packages/html/src/cdn/video-ui.ts
+1
View File
@@ -0,0 +1 @@
import '../define/video/ui';
packages/html/src/cdn/video.ts
-1
View File
@@ -1,2 +1 @@
import '../define/video/player';
import '../define/video/skin';
packages/html/src/define/audio/minimal-skin.tailwind.ts
+2 -13
View File
@@ -20,19 +20,8 @@ import { cn } from '@videojs/utils/style';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
// Register the player, container, and all UI custom elements.
import './minimal-ui';
const SEEK_TIME = 10;
packages/html/src/define/audio/minimal-skin.ts
+2 -13
View File
@@ -4,19 +4,8 @@ import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './minimal-skin.css?inline';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
// Register the player, container, and all UI custom elements.
import './minimal-ui';
const SEEK_TIME = 10;
packages/html/src/define/audio/minimal-ui.ts
+16
View File
@@ -0,0 +1,16 @@
// Side-effect-only module: registers the audio player, container, and all
// audio UI custom elements used by the minimal skin without creating a skin
// element. Use this entry when building an ejected (light DOM) player layout.
import './player';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
packages/html/src/define/audio/skin.tailwind.ts
+2 -13
View File
@@ -20,19 +20,8 @@ import { cn } from '@videojs/utils/style';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
// Register the player, container, and all UI custom elements.
import './ui';
const SEEK_TIME = 10;
packages/html/src/define/audio/skin.ts
+2 -13
View File
@@ -4,19 +4,8 @@ import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './skin.css?inline';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
// Register the player, container, and all UI custom elements.
import './ui';
const SEEK_TIME = 10;
packages/html/src/define/audio/ui.ts
+16
View File
@@ -0,0 +1,16 @@
// Side-effect-only module: registers the audio player, container, and all
// audio UI custom elements without creating a skin element. Use this entry
// when building an ejected (light DOM) player layout.
import './player';
import '../ui/error-dialog';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
packages/html/src/define/video/minimal-skin.tailwind.ts
+2 -19
View File
@@ -25,25 +25,8 @@ import { cn } from '@videojs/utils/style';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/buffering-indicator';
import '../ui/captions-button';
import '../ui/controls';
import '../ui/error-dialog';
import '../ui/fullscreen-button';
import '../ui/mute-button';
import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
// Register the player, container, and all UI custom elements.
import './minimal-ui';
const SEEK_TIME = 10;
packages/html/src/define/video/minimal-skin.ts
+2 -18
View File
@@ -4,24 +4,8 @@ import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './minimal-skin.css?inline';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/buffering-indicator';
import '../ui/controls';
import '../ui/error-dialog';
import '../ui/fullscreen-button';
import '../ui/mute-button';
import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
// Register the player, container, and all UI custom elements.
import './minimal-ui';
const SEEK_TIME = 10;
packages/html/src/define/video/minimal-ui.ts
+22
View File
@@ -0,0 +1,22 @@
// Side-effect-only module: registers the video player, container, and all
// video UI custom elements used by the minimal skin without creating a skin
// element. Use this entry when building an ejected (light DOM) player layout.
import './player';
import '../ui/buffering-indicator';
import '../ui/captions-button';
import '../ui/controls';
import '../ui/error-dialog';
import '../ui/fullscreen-button';
import '../ui/mute-button';
import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
packages/html/src/define/video/skin.tailwind.ts
+2 -19
View File
@@ -25,25 +25,8 @@ import { cn } from '@videojs/utils/style';
import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/buffering-indicator';
import '../ui/captions-button';
import '../ui/error-dialog';
import '../ui/controls';
import '../ui/fullscreen-button';
import '../ui/mute-button';
import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
// Register the player, container, and all UI custom elements.
import './ui';
const SEEK_TIME = 10;
packages/html/src/define/video/skin.ts
+2 -19
View File
@@ -4,25 +4,8 @@ import { safeDefine } from '../safe-define';
import { SkinElement } from '../skin-element';
import styles from './skin.css?inline';
// Side-effect imports: register all custom elements used in the template.
import '../media/container';
import '../ui/buffering-indicator';
import '../ui/captions-button';
import '../ui/error-dialog';
import '../ui/controls';
import '../ui/fullscreen-button';
import '../ui/mute-button';
import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
// Register the player, container, and all UI custom elements.
import './ui';
const SEEK_TIME = 10;
packages/html/src/define/video/ui.ts
+22
View File
@@ -0,0 +1,22 @@
// Side-effect-only module: registers the video player, container, and all
// video UI custom elements without creating a skin element. Use this entry
// when building an ejected (light DOM) player layout.
import './player';
import '../ui/buffering-indicator';
import '../ui/captions-button';
import '../ui/controls';
import '../ui/error-dialog';
import '../ui/fullscreen-button';
import '../ui/mute-button';
import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
packages/html/tsdown.cdn.config.ts
+11 -1
View File
@@ -12,7 +12,17 @@ const skinsDir = resolve(dirname(fileURLToPath(import.meta.url)), '../skins/src'
const buildModes: BuildMode[] = ['dev', 'prod'];
const presets = ['video', 'video-minimal', 'audio', 'audio-minimal', 'background'];
const presets = [
'video',
'video-minimal',
'video-ui',
'video-minimal-ui',
'audio',
'audio-minimal',
'audio-ui',
'audio-minimal-ui',
'background',
];
const media = ['hls-video', 'mux-video', 'simple-hls-video', 'dash-video'];
const entries = [
packages/skins/src/default/css/components/poster.css
+3 -1
View File
@@ -15,7 +15,8 @@
.media-default-skin > img:not([data-visible]) {
opacity: 0;
}
.media-default-skin media-poster ::slotted(img) {
.media-default-skin media-poster ::slotted(img),
.media-default-skin media-poster img {
position: absolute;
inset: 0;
width: 100%;
@@ -31,6 +32,7 @@
}
.media-default-skin:fullscreen media-poster ::slotted(img),
.media-default-skin:fullscreen media-poster img,
.media-default-skin:fullscreen > img {
object-fit: contain;
}
packages/skins/src/minimal/css/components/poster.css
+3 -1
View File
@@ -15,7 +15,8 @@
.media-minimal-skin > img:not([data-visible]) {
opacity: 0;
}
.media-minimal-skin media-poster ::slotted(img) {
.media-minimal-skin media-poster ::slotted(img),
.media-minimal-skin media-poster img {
position: absolute;
inset: 0;
width: 100%;
@@ -31,6 +32,7 @@
}
.media-minimal-skin:fullscreen media-poster ::slotted(img),
.media-minimal-skin:fullscreen media-poster img,
.media-minimal-skin:fullscreen > img {
object-fit: contain;
}
site/scripts/build-ejected-skins.ts
+3 -12
View File
@@ -679,19 +679,10 @@ function resolveCss(cssPath: string): string {
}
function getHtmlSkinCdnFileName(skin: HtmlSkinDef): string {
if (skin.id.includes('minimal-video')) {
return 'video-minimal';
}
const isMinimal = skin.id.includes('minimal');
const prefix = skin.id.includes('video') ? 'video' : 'audio';
if (skin.id.includes('minimal-audio')) {
return 'audio-minimal';
}
if (skin.id.includes('video')) {
return 'video';
}
return 'audio';
return isMinimal ? `${prefix}-minimal-ui` : `${prefix}-ui`;
}
function prependHtmlSkinScripts(html: string, skin: HtmlSkinDef): string {