mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(skin): add audio skins for HTML and React presets (#772)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
038ad8b4f5
commit
d751fdabea
@@ -1 +1 @@
|
||||
@import "@videojs/skins/video/minimal.css";
|
||||
@import "@videojs/skins/minimal/css/video.css";
|
||||
|
||||
@@ -16,13 +16,14 @@ import {
|
||||
seek,
|
||||
slider,
|
||||
time,
|
||||
} from '@videojs/skins/video/minimal.tailwind';
|
||||
} from '@videojs/skins/minimal/tailwind/video.tailwind';
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { SkinMixin } from '../skin-mixin';
|
||||
|
||||
// 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/fullscreen-button';
|
||||
import '../ui/mute-button';
|
||||
@@ -34,18 +35,20 @@ import '../ui/seek-button';
|
||||
import '../ui/time';
|
||||
import '../ui/time-slider';
|
||||
import '../ui/volume-slider';
|
||||
import { playbackRate } from '@videojs/skins/video/default.tailwind';
|
||||
import { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';
|
||||
|
||||
const SEEK_TIME = 10;
|
||||
|
||||
function getTemplateHTML() {
|
||||
return /*html*/ `
|
||||
<media-container class="${root}">
|
||||
<media-container class="${root(true)}">
|
||||
<slot name="media"></slot>
|
||||
|
||||
<media-buffering-indicator class="${bufferingIndicator}">
|
||||
${renderIcon('spinner')}
|
||||
</media-buffering-indicator>
|
||||
|
||||
<div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
|
||||
<!--<div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
|
||||
<div class="${error.dialog}">
|
||||
<div class="${error.content}">
|
||||
<p id="media-error-title" class="${error.title}">Something went wrong.</p>
|
||||
@@ -55,7 +58,7 @@ function getTemplateHTML() {
|
||||
<button type="button" class="${cn(button.base, button.default)}">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<media-controls data-controls="" class="${controls}">
|
||||
<span class="${buttonGroup}">
|
||||
@@ -100,13 +103,13 @@ function getTemplateHTML() {
|
||||
<media-playback-rate-button class="${cn(button.base, button.icon, playbackRate.button)}">
|
||||
</media-playback-rate-button>
|
||||
|
||||
<media-mute-button commandfor="volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
|
||||
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, 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>
|
||||
|
||||
<media-popover id="volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.base, popup.volume)}">
|
||||
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.base, popup.volume)}">
|
||||
<media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
|
||||
<media-slider-track class="${slider.track}">
|
||||
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
|
||||
@@ -115,10 +118,10 @@ function getTemplateHTML() {
|
||||
</media-volume-slider>
|
||||
</media-popover>
|
||||
|
||||
<!--<button type="button" class="${cn(button.base, button.icon)}" aria-label="Captions">
|
||||
${renderIcon('captions-off', { class: icon })}
|
||||
${renderIcon('captions-on', { class: icon })}
|
||||
</button>-->
|
||||
<media-captions-button class="${cn(button.base, 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>
|
||||
|
||||
<media-pip-button class="${cn(button.base, button.icon)}">
|
||||
${renderIcon('pip', { class: icon })}
|
||||
@@ -132,8 +135,6 @@ function getTemplateHTML() {
|
||||
</media-controls>
|
||||
|
||||
<div class="${overlay}"></div>
|
||||
|
||||
<slot name="media"></slot>
|
||||
</media-container>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ReactiveElement } from '@videojs/element';
|
||||
import { renderIcon } from '@videojs/icons/render/minimal';
|
||||
import { SkinMixin } from '../skin-mixin';
|
||||
import { createStyles, SkinMixin } from '../skin-mixin';
|
||||
import styles from './minimal-skin.css?inline';
|
||||
|
||||
// Side-effect imports: register all custom elements used in the template.
|
||||
import '../media/container';
|
||||
@@ -21,12 +22,14 @@ const SEEK_TIME = 10;
|
||||
|
||||
function getTemplateHTML() {
|
||||
return /*html*/ `
|
||||
<media-container class="media-minimal-skin">
|
||||
<media-container class="media-minimal-skin media-minimal-skin--video">
|
||||
<slot name="media"></slot>
|
||||
|
||||
<media-buffering-indicator class="media-buffering-indicator">
|
||||
${renderIcon('spinner', { class: 'media-icon' })}
|
||||
</media-buffering-indicator>
|
||||
|
||||
<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
|
||||
<!--<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
|
||||
<div class="media-error__dialog">
|
||||
<div class="media-error__content">
|
||||
<p id="media-error-title" class="media-error__title">Something went wrong.</p>
|
||||
@@ -36,7 +39,7 @@ function getTemplateHTML() {
|
||||
<button type="button" class="media-button">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<media-controls class="media-controls">
|
||||
<span class="media-button-group">
|
||||
@@ -81,13 +84,13 @@ function getTemplateHTML() {
|
||||
<media-playback-rate-button class="media-button media-button--icon media-button--playback-rate">
|
||||
</media-playback-rate-button>
|
||||
|
||||
<media-mute-button commandfor="volume-popover" class="media-button media-button--icon media-button--mute">
|
||||
<media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
|
||||
${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
|
||||
${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
|
||||
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
|
||||
</media-mute-button>
|
||||
|
||||
<media-popover id="volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popup media-popup--volume media-popup-animation">
|
||||
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popup media-popup--volume media-popup-animation">
|
||||
<media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
|
||||
<media-slider-track class="media-slider__track">
|
||||
<media-slider-fill class="media-slider__fill"></media-slider-fill>
|
||||
@@ -113,14 +116,13 @@ function getTemplateHTML() {
|
||||
</media-controls>
|
||||
|
||||
<div class="media-overlay"></div>
|
||||
|
||||
<slot name="media"></slot>
|
||||
</media-container>
|
||||
`;
|
||||
}
|
||||
|
||||
export class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {
|
||||
static readonly tagName = 'video-minimal-skin';
|
||||
static styles = createStyles(styles);
|
||||
static getTemplateHTML = getTemplateHTML;
|
||||
}
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import "@videojs/skins/video/default.css";
|
||||
@import "@videojs/skins/default/css/video.css";
|
||||
|
||||
@@ -16,13 +16,14 @@ import {
|
||||
seek,
|
||||
slider,
|
||||
time,
|
||||
} from '@videojs/skins/video/default.tailwind';
|
||||
} from '@videojs/skins/default/tailwind/video.tailwind';
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { SkinMixin } from '../skin-mixin';
|
||||
|
||||
// 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/fullscreen-button';
|
||||
import '../ui/mute-button';
|
||||
@@ -39,14 +40,16 @@ const SEEK_TIME = 10;
|
||||
|
||||
function getTemplateHTML() {
|
||||
return /*html*/ `
|
||||
<media-container class="${root}">
|
||||
<media-container class="${root(true)}">
|
||||
<slot name="media"></slot>
|
||||
|
||||
<media-buffering-indicator class="${bufferingIndicator.root}">
|
||||
<div class="${bufferingIndicator.container}">
|
||||
${renderIcon('spinner')}
|
||||
</div>
|
||||
</media-buffering-indicator>
|
||||
|
||||
<div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
|
||||
<!--<div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
|
||||
<div class="${error.dialog}">
|
||||
<div class="${error.content}">
|
||||
<p id="media-error-title" class="${error.title}">Something went wrong.</p>
|
||||
@@ -56,7 +59,7 @@ function getTemplateHTML() {
|
||||
<button type="button" class="${cn(button.base, button.default)}">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<media-controls data-controls="" class="${controls}">
|
||||
<media-play-button class="${cn(button.base, button.icon, iconState.play.button)}">
|
||||
@@ -94,13 +97,13 @@ function getTemplateHTML() {
|
||||
<media-playback-rate-button class="${cn(button.base, button.icon, playbackRate.button)}">
|
||||
</media-playback-rate-button>
|
||||
|
||||
<media-mute-button commandfor="volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
|
||||
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, 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>
|
||||
|
||||
<media-popover id="volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.base, popup.volume)}">
|
||||
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.base, popup.volume)}">
|
||||
<media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
|
||||
<media-slider-track class="${slider.track}">
|
||||
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
|
||||
@@ -109,10 +112,10 @@ function getTemplateHTML() {
|
||||
</media-volume-slider>
|
||||
</media-popover>
|
||||
|
||||
<!--<button type="button" class="${cn(button.base, button.icon)}" aria-label="Captions">
|
||||
${renderIcon('captions-off', { class: icon })}
|
||||
${renderIcon('captions-on', { class: icon })}
|
||||
</button>-->
|
||||
<media-captions-button class="${cn(button.base, 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>
|
||||
|
||||
<media-pip-button class="${cn(button.base, button.icon)}">
|
||||
${renderIcon('pip', { class: icon })}
|
||||
@@ -125,8 +128,6 @@ function getTemplateHTML() {
|
||||
</media-controls>
|
||||
|
||||
<div class="${overlay}"></div>
|
||||
|
||||
<slot name="media"></slot>
|
||||
</media-container>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { ReactiveElement } from '@videojs/element';
|
||||
import { renderIcon } from '@videojs/icons/render';
|
||||
import { SkinMixin } from '../skin-mixin';
|
||||
import { createStyles, SkinMixin } from '../skin-mixin';
|
||||
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/controls';
|
||||
import '../ui/fullscreen-button';
|
||||
import '../ui/mute-button';
|
||||
@@ -21,7 +23,9 @@ const SEEK_TIME = 10;
|
||||
|
||||
function getTemplateHTML() {
|
||||
return /*html*/ `
|
||||
<media-container class="media-default-skin">
|
||||
<media-container class="media-default-skin media-default-skin--video">
|
||||
<slot name="media"></slot>
|
||||
|
||||
<media-buffering-indicator class="media-buffering-indicator">
|
||||
<div class="media-surface">
|
||||
${renderIcon('spinner', { class: 'media-icon' })}
|
||||
@@ -76,13 +80,13 @@ function getTemplateHTML() {
|
||||
<media-playback-rate-button class="media-button media-button--icon media-button--playback-rate">
|
||||
</media-playback-rate-button>
|
||||
|
||||
<media-mute-button commandfor="volume-popover" class="media-button media-button--icon media-button--mute">
|
||||
<media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
|
||||
${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
|
||||
${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
|
||||
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
|
||||
</media-mute-button>
|
||||
|
||||
<media-popover id="volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popup media-popup--volume media-popup-animation">
|
||||
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popup media-popup--volume media-popup-animation">
|
||||
<media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
|
||||
<media-slider-track class="media-slider__track">
|
||||
<media-slider-fill class="media-slider__fill"></media-slider-fill>
|
||||
@@ -91,10 +95,10 @@ function getTemplateHTML() {
|
||||
</media-volume-slider>
|
||||
</media-popover>
|
||||
|
||||
<!--<button type="button" class="media-button media-button--icon media-button--captions" aria-label="Captions">
|
||||
<media-captions-button class="media-button media-button--icon media-button--captions">
|
||||
${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
|
||||
${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
|
||||
</button>-->
|
||||
</media-captions-button>
|
||||
|
||||
<media-pip-button class="media-button media-button--icon">
|
||||
${renderIcon('pip', { class: 'media-icon' })}
|
||||
@@ -107,14 +111,13 @@ function getTemplateHTML() {
|
||||
</media-controls>
|
||||
|
||||
<div class="media-overlay"></div>
|
||||
|
||||
<slot name="media"></slot>
|
||||
</media-container>
|
||||
`;
|
||||
}
|
||||
|
||||
export class VideoSkinElement extends SkinMixin(ReactiveElement) {
|
||||
static readonly tagName = 'video-skin';
|
||||
static styles = createStyles(styles);
|
||||
static getTemplateHTML = getTemplateHTML;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user