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(skin): add audio skins for HTML and React presets (#772)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
2026-03-09 12:12:49 +11:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 038ad8b4f5
commit d751fdabea
125 changed files with 4174 additions and 2264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/skin.ts
+75 -10
View File
@@ -1,20 +1,85 @@
import { ReactiveElement } from '@videojs/element';
import { renderIcon } from '@videojs/icons/render';
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/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/volume-slider';
const SEEK_TIME = 10;
function getTemplateHTML() {
return /*html*/ `<div></div>`;
return /*html*/ `
<media-container class="media-default-skin media-default-skin--audio">
<slot name="media"></slot>
<div class="media-surface media-controls">
<media-play-button class="media-button media-button--icon media-button--play">
${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-seek-button seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<span class="media-icon__container">
${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-seek-button seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<span class="media-icon__container">
${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-time-group class="media-time">
<media-time type="current" class="media-time__value"></media-time>
<media-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
<media-time type="duration" class="media-time__value"></media-time>
</media-time-group>
<media-playback-rate-button class="media-button media-button--icon media-button--playback-rate">
</media-playback-rate-button>
<media-mute-button commandfor="audio-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="audio-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>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
</div>
</media-container>
`;
}
export class AudioSkinElement extends ReactiveElement {
export class AudioSkinElement extends SkinMixin(ReactiveElement) {
static readonly tagName = 'audio-skin';
static styles = createStyles(styles);
static getTemplateHTML = getTemplateHTML;
constructor() {
super();
const children = [...this.childNodes];
this.innerHTML = getTemplateHTML();
const container = this.firstElementChild;
if (container) for (const child of children) container.append(child);
}
}
customElements.define(AudioSkinElement.tagName, AudioSkinElement);