zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-15 10:23:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(packages): add audio tracks menu (#1714)

Browse Source
This commit is contained in:
Sam Potts
2026-06-30 13:40:24 +10:00
committed by GitHub
parent f3652bd90b
commit 5d44c4debf
41 changed files with 1550 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/ui/audio-track-radio-group.ts
+10
View File
@@ -0,0 +1,10 @@
import { AudioTrackRadioGroupElement } from '../../ui/audio-track-radio-group/audio-track-radio-group-element';
import { safeDefine } from '../safe-define';
safeDefine(AudioTrackRadioGroupElement);
declare global {
interface HTMLElementTagNameMap {
[AudioTrackRadioGroupElement.tagName]: AudioTrackRadioGroupElement;
}
}
packages/html/src/define/video/minimal-skin.tailwind.ts
+26
View File
@@ -152,6 +152,14 @@ function getTemplateHTML() {
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-audio-menu" type="audio-track" data-setting="audio-track" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('speech', { class: icon })}
<span>Audio</span>
<span class="${menu.hint}">
<media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('speed', { class: cn(icon, menu.icon) })}
<span>Speed</span>
@@ -193,6 +201,24 @@ function getTemplateHTML() {
</media-quality-radio-group>
</media-menu>
<media-menu id="settings-audio-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
Audio
</media-menu-back>
<div class="${menu.separator}"></div>
<media-audio-track-radio-group class="${menu.group}">
<template>
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
</media-audio-track-radio-group>
</media-menu>
<media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
packages/html/src/define/video/minimal-skin.ts
+26
View File
@@ -130,6 +130,14 @@ function getTemplateHTML() {
${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-audio-menu" type="audio-track" data-setting="audio-track" class="media-menu__item media-menu__item--submenu">
${renderIcon('speech', { class: 'media-icon' })}
<span>Audio</span>
<span class="media-menu__hint">
<media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="media-menu__item media-menu__item--submenu">
${renderIcon('speed', { class: 'media-icon' })}
<span>Speed</span>
@@ -171,6 +179,24 @@ function getTemplateHTML() {
</media-quality-radio-group>
</media-menu>
<media-menu id="settings-audio-menu" class="media-menu__panel">
<media-menu-back class="media-menu__back">
${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
Audio
</media-menu-back>
<div class="media-menu__separator"></div>
<media-audio-track-radio-group class="media-menu__group">
<template>
<media-menu-radio-item class="media-menu__item">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="media-menu__indicator">
${renderIcon('check', { class: 'media-icon' })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
</media-audio-track-radio-group>
</media-menu>
<media-menu id="settings-speed-menu" class="media-menu__panel">
<media-menu-back class="media-menu__back">
${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
packages/html/src/define/video/minimal-ui.ts
+2
View File
@@ -4,6 +4,7 @@
import { MediaContainerElement } from '../../media/container-element';
import { AirPlayButtonElement } from '../../ui/airplay-button/airplay-button-element';
import { AudioTrackRadioGroupElement } from '../../ui/audio-track-radio-group/audio-track-radio-group-element';
import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';
import { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';
import { CaptionsRadioGroupElement } from '../../ui/captions-radio-group/captions-radio-group-element';
@@ -54,6 +55,7 @@ defineMenu();
// Standalone elements.
safeDefine(AirPlayButtonElement);
safeDefine(AudioTrackRadioGroupElement);
safeDefine(BufferingIndicatorElement);
safeDefine(CaptionsButtonElement);
safeDefine(CastButtonElement);
packages/html/src/define/video/skin.tailwind.ts
+26
View File
@@ -148,6 +148,14 @@ function getTemplateHTML() {
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-audio-menu" type="audio-track" data-setting="audio-track" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('speech', { class: icon })}
<span>Audio</span>
<span class="${menu.hint}">
<media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
${renderIcon('speed', { class: cn(icon, menu.icon) })}
<span>Speed</span>
@@ -189,6 +197,24 @@ function getTemplateHTML() {
</media-quality-radio-group>
</media-menu>
<media-menu id="settings-audio-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
Audio
</media-menu-back>
<div class="${menu.separator}"></div>
<media-audio-track-radio-group class="${menu.group}">
<template>
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="${menu.indicator}">
${renderIcon('check', { class: icon })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
</media-audio-track-radio-group>
</media-menu>
<media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
packages/html/src/define/video/skin.ts
+26
View File
@@ -126,6 +126,14 @@ function getTemplateHTML() {
${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-audio-menu" type="audio-track" data-setting="audio-track" class="media-menu__item media-menu__item--submenu">
${renderIcon('speech', { class: 'media-icon' })}
<span>Audio</span>
<span class="media-menu__hint">
<media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
</span>
</media-menu-item>
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="media-menu__item media-menu__item--submenu">
${renderIcon('speed', { class: 'media-icon' })}
<span>Speed</span>
@@ -167,6 +175,24 @@ function getTemplateHTML() {
</media-quality-radio-group>
</media-menu>
<media-menu id="settings-audio-menu" class="media-menu__panel">
<media-menu-back class="media-menu__back">
${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
Audio
</media-menu-back>
<div class="media-menu__separator"></div>
<media-audio-track-radio-group class="media-menu__group">
<template>
<media-menu-radio-item class="media-menu__item">
<span data-part="label"></span>
<media-menu-item-indicator force-mount class="media-menu__indicator">
${renderIcon('check', { class: 'media-icon' })}
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
</media-audio-track-radio-group>
</media-menu>
<media-menu id="settings-speed-menu" class="media-menu__panel">
<media-menu-back class="media-menu__back">
${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
packages/html/src/define/video/ui.ts
+2
View File
@@ -3,6 +3,7 @@
// (light DOM) player layout.
import { MediaContainerElement } from '../../media/container-element';
import { AirPlayButtonElement } from '../../ui/airplay-button/airplay-button-element';
import { AudioTrackRadioGroupElement } from '../../ui/audio-track-radio-group/audio-track-radio-group-element';
import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';
import { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';
import { CaptionsRadioGroupElement } from '../../ui/captions-radio-group/captions-radio-group-element';
@@ -52,6 +53,7 @@ defineMenu();
// Standalone elements.
safeDefine(AirPlayButtonElement);
safeDefine(AudioTrackRadioGroupElement);
safeDefine(BufferingIndicatorElement);
safeDefine(CaptionsButtonElement);
safeDefine(CastButtonElement);