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(packages): add settings menu (#1615)

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Sam Potts
2026-06-10 13:54:45 +10:00
committed by GitHub
co-authored by Cursor
parent 62d0524b83
commit 00b6f0be1d
117 changed files with 4246 additions and 1208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+6 -6
View File
@@ -92,10 +92,10 @@ function getTemplateHTML() {
</div>
<div class="${buttonGroup}">
<media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
</media-playback-rate-menu-trigger>
<media-playback-rate-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
<media-playback-rate-options class="${menu.group}">
<media-playback-rate-button commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
</media-playback-rate-button>
<media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
<media-playback-rate-radio-group class="${menu.group}">
<template>
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
@@ -104,8 +104,8 @@ function getTemplateHTML() {
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
</media-playback-rate-options>
</media-playback-rate-menu>
</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) })}
packages/html/src/define/audio/minimal-skin.ts
+5 -5
View File
@@ -75,9 +75,9 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-menu-trigger>
<media-playback-rate-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-popover media-menu media-menu--playback-rate">
<media-playback-rate-options class="media-menu__group">
<media-playback-rate-button commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
<media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-popover media-menu">
<media-playback-rate-radio-group class="media-menu__group">
<template>
<media-menu-radio-item class="media-menu__item">
<span data-part="label"></span>
@@ -86,8 +86,8 @@ function getTemplateHTML() {
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
</media-playback-rate-options>
</media-playback-rate-menu>
</media-playback-rate-radio-group>
</media-menu>
<media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
packages/html/src/define/audio/minimal-ui.ts
+4 -6
View File
@@ -4,9 +4,8 @@
import { MediaContainerElement } from '../../media/container-element';
import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
import { PlayButtonElement } from '../../ui/play-button/play-button-element';
import { PlaybackRateMenuElement } from '../../ui/playback-rate-menu/playback-rate-menu-element';
import { PlaybackRateMenuTriggerElement } from '../../ui/playback-rate-menu/playback-rate-menu-trigger-element';
import { PlaybackRateOptionsElement } from '../../ui/playback-rate-menu/playback-rate-options-element';
import { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';
import { PlaybackRateRadioGroupElement } from '../../ui/playback-rate-radio-group/playback-rate-radio-group-element';
import { PopoverElement } from '../../ui/popover/popover-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
@@ -32,9 +31,8 @@ defineMenu();
// Standalone elements.
safeDefine(MuteButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateRadioGroupElement);
safeDefine(PopoverElement);
safeDefine(SeekButtonElement);
safeDefine(TooltipElement);
packages/html/src/define/audio/skin.tailwind.ts
+5 -5
View File
@@ -88,9 +88,9 @@ function getTemplateHTML() {
</div>
<div class="${buttonGroup}">
<media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-menu-trigger>
<media-playback-rate-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
<media-playback-rate-options class="${menu.group}">
<media-playback-rate-button commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
<media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
<media-playback-rate-radio-group class="${menu.group}">
<template>
<media-menu-radio-item class="${menu.item}">
<span data-part="label"></span>
@@ -99,8 +99,8 @@ function getTemplateHTML() {
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
</media-playback-rate-options>
</media-playback-rate-menu>
</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) })}
packages/html/src/define/audio/skin.ts
+5 -5
View File
@@ -71,9 +71,9 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-menu-trigger>
<media-playback-rate-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-surface media-popover media-menu media-menu--playback-rate">
<media-playback-rate-options class="media-menu__group">
<media-playback-rate-button commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
<media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-surface media-popover media-menu">
<media-playback-rate-radio-group class="media-menu__group">
<template>
<media-menu-radio-item class="media-menu__item">
<span data-part="label"></span>
@@ -82,8 +82,8 @@ function getTemplateHTML() {
</media-menu-item-indicator>
</media-menu-radio-item>
</template>
</media-playback-rate-options>
</media-playback-rate-menu>
</media-playback-rate-radio-group>
</media-menu>
<media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
packages/html/src/define/audio/ui.ts
+2 -6
View File
@@ -8,9 +8,7 @@ import { LiveButtonElement } from '../../ui/live-button/live-button-element';
import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
import { PlayButtonElement } from '../../ui/play-button/play-button-element';
import { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';
import { PlaybackRateMenuElement } from '../../ui/playback-rate-menu/playback-rate-menu-element';
import { PlaybackRateMenuTriggerElement } from '../../ui/playback-rate-menu/playback-rate-menu-trigger-element';
import { PlaybackRateOptionsElement } from '../../ui/playback-rate-menu/playback-rate-options-element';
import { PlaybackRateRadioGroupElement } from '../../ui/playback-rate-radio-group/playback-rate-radio-group-element';
import { PopoverElement } from '../../ui/popover/popover-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
@@ -39,9 +37,7 @@ safeDefine(LiveButtonElement);
safeDefine(MuteButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
safeDefine(PlaybackRateRadioGroupElement);
safeDefine(PopoverElement);
safeDefine(SeekButtonElement);
safeDefine(TooltipElement);
packages/html/src/define/live-video/minimal-skin.tailwind.ts
+14 -1
View File
@@ -9,6 +9,7 @@ import {
icon,
iconState,
inputFeedback,
menu,
overlay,
popup,
poster,
@@ -80,10 +81,22 @@ function getTemplateHTML() {
<media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
<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>
<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}">
<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-captions-radio-group>
</media-menu>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></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) })}
packages/html/src/define/live-video/minimal-skin.ts
+13 -1
View File
@@ -65,10 +65,22 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
<media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="media-button media-button--subtle 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' })}
</media-captions-button>
<media-menu id="captions-menu" side="top" align="center" class="media-popover media-menu media-menu--captions">
<media-captions-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-captions-radio-group>
</media-menu>
<media-tooltip id="captions-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
packages/html/src/define/live-video/minimal-ui.ts
+4
View File
@@ -6,6 +6,7 @@ import { AirPlayButtonElement } from '@/ui/airplay-button/airplay-button-element
import { MediaContainerElement } from '../../media/container-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';
import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
import { GestureElement } from '../../ui/gesture/gesture-element';
@@ -23,6 +24,7 @@ import {
defineControls,
defineErrorDialog,
defineInputIndicators,
defineMenu,
defineTime,
defineTimeSlider,
defineVolumeSlider,
@@ -43,11 +45,13 @@ defineInputIndicators();
defineTimeSlider();
defineVolumeSlider();
defineTime();
defineMenu();
// Standalone elements.
safeDefine(AirPlayButtonElement);
safeDefine(BufferingIndicatorElement);
safeDefine(CaptionsButtonElement);
safeDefine(CaptionsRadioGroupElement);
safeDefine(CastButtonElement);
safeDefine(FullscreenButtonElement);
safeDefine(GestureElement);
packages/html/src/define/live-video/skin.tailwind.ts
+14 -1
View File
@@ -9,6 +9,7 @@ import {
icon,
iconState,
inputFeedback,
menu,
overlay,
popup,
poster,
@@ -82,10 +83,22 @@ function getTemplateHTML() {
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
<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>
<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}">
<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-captions-radio-group>
</media-menu>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></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) })}
packages/html/src/define/live-video/skin.ts
+13 -1
View File
@@ -67,10 +67,22 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
<media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="media-button media-button--subtle 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' })}
</media-captions-button>
<media-menu id="captions-menu" side="top" align="center" class="media-surface media-popover media-menu media-menu--captions">
<media-captions-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-captions-radio-group>
</media-menu>
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
packages/html/src/define/live-video/ui.ts
+11 -1
View File
@@ -5,6 +5,7 @@ import { AirPlayButtonElement } from '@/ui/airplay-button/airplay-button-element
import { MediaContainerElement } from '../../media/container-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';
import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
import { GestureElement } from '../../ui/gesture/gesture-element';
@@ -18,7 +19,14 @@ import { PosterElement } from '../../ui/poster/poster-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { safeDefine } from '../safe-define';
import { defineControls, defineErrorDialog, defineInputIndicators, defineSliders, defineTime } from '../ui/compounds';
import {
defineControls,
defineErrorDialog,
defineInputIndicators,
defineMenu,
defineSliders,
defineTime,
} from '../ui/compounds';
// Value import — player.ts body runs before this module's body.
import { LiveVideoPlayerElement } from './player';
@@ -34,11 +42,13 @@ defineErrorDialog();
defineInputIndicators();
defineSliders();
defineTime();
defineMenu();
// Standalone elements.
safeDefine(AirPlayButtonElement);
safeDefine(BufferingIndicatorElement);
safeDefine(CaptionsButtonElement);
safeDefine(CaptionsRadioGroupElement);
safeDefine(CastButtonElement);
safeDefine(FullscreenButtonElement);
safeDefine(GestureElement);
packages/html/src/define/ui/captions-radio-group.ts
+10
View File
@@ -0,0 +1,10 @@
import { CaptionsRadioGroupElement } from '../../ui/captions-radio-group/captions-radio-group-element';
import { safeDefine } from '../safe-define';
safeDefine(CaptionsRadioGroupElement);
declare global {
interface HTMLElementTagNameMap {
[CaptionsRadioGroupElement.tagName]: CaptionsRadioGroupElement;
}
}
packages/html/src/define/ui/compounds.ts
+2
View File
@@ -11,6 +11,7 @@ import { MenuGroupElement } from '../../ui/menu/menu-group-element';
import { MenuGroupLabelElement } from '../../ui/menu/menu-group-label-element';
import { MenuItemElement } from '../../ui/menu/menu-item-element';
import { MenuItemIndicatorElement } from '../../ui/menu/menu-item-indicator-element';
import { MenuItemValueElement } from '../../ui/menu/menu-item-value-element';
import { MenuRadioGroupElement } from '../../ui/menu/menu-radio-group-element';
import { MenuRadioItemElement } from '../../ui/menu/menu-radio-item-element';
import { MenuSeparatorElement } from '../../ui/menu/menu-separator-element';
@@ -46,6 +47,7 @@ export function defineMenu(): void {
safeDefine(MenuBackElement);
safeDefine(MenuItemElement);
safeDefine(MenuGroupLabelElement);
safeDefine(MenuItemValueElement);
safeDefine(MenuSeparatorElement);
safeDefine(MenuGroupElement);
safeDefine(MenuRadioGroupElement);
packages/html/src/define/ui/menu.ts
+2
View File
@@ -5,6 +5,7 @@ import { MenuGroupElement } from '../../ui/menu/menu-group-element';
import { MenuGroupLabelElement } from '../../ui/menu/menu-group-label-element';
import { MenuItemElement } from '../../ui/menu/menu-item-element';
import { MenuItemIndicatorElement } from '../../ui/menu/menu-item-indicator-element';
import { MenuItemValueElement } from '../../ui/menu/menu-item-value-element';
import { MenuRadioGroupElement } from '../../ui/menu/menu-radio-group-element';
import { MenuRadioItemElement } from '../../ui/menu/menu-radio-item-element';
import { MenuSeparatorElement } from '../../ui/menu/menu-separator-element';
@@ -19,6 +20,7 @@ declare global {
[MenuBackElement.tagName]: MenuBackElement;
[MenuItemElement.tagName]: MenuItemElement;
[MenuGroupLabelElement.tagName]: MenuGroupLabelElement;
[MenuItemValueElement.tagName]: MenuItemValueElement;
[MenuSeparatorElement.tagName]: MenuSeparatorElement;
[MenuGroupElement.tagName]: MenuGroupElement;
[MenuRadioGroupElement.tagName]: MenuRadioGroupElement;
packages/html/src/define/ui/playback-rate-menu.ts
-18
View File
@@ -1,18 +0,0 @@
import { PlaybackRateMenuElement } from '../../ui/playback-rate-menu/playback-rate-menu-element';
import { PlaybackRateMenuTriggerElement } from '../../ui/playback-rate-menu/playback-rate-menu-trigger-element';
import { PlaybackRateOptionsElement } from '../../ui/playback-rate-menu/playback-rate-options-element';
import { safeDefine } from '../safe-define';
import { defineMenu } from './compounds';
defineMenu();
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
declare global {
interface HTMLElementTagNameMap {
[PlaybackRateMenuElement.tagName]: PlaybackRateMenuElement;
[PlaybackRateMenuTriggerElement.tagName]: PlaybackRateMenuTriggerElement;
[PlaybackRateOptionsElement.tagName]: PlaybackRateOptionsElement;
}
}
packages/html/src/define/ui/playback-rate-radio-group.ts
+10
View File
@@ -0,0 +1,10 @@
import { PlaybackRateRadioGroupElement } from '../../ui/playback-rate-radio-group/playback-rate-radio-group-element';
import { safeDefine } from '../safe-define';
safeDefine(PlaybackRateRadioGroupElement);
declare global {
interface HTMLElementTagNameMap {
[PlaybackRateRadioGroupElement.tagName]: PlaybackRateRadioGroupElement;
}
}
packages/html/src/define/video/minimal-skin.tailwind.ts
+60 -22
View File
@@ -13,7 +13,6 @@ import {
inputFeedback,
menu,
overlay,
playbackRate,
popup,
poster,
root,
@@ -113,22 +112,7 @@ function getTemplateHTML() {
</media-time-slider>
</div>
<div class="${buttonGroupEnd}">
<media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
</media-playback-rate-menu-trigger>
<media-playback-rate-menu id="playback-rate-menu" side="top" align="center" class="${cn(popup.popover, menu.root)}">
<media-playback-rate-options 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-playback-rate-options>
</media-playback-rate-menu>
<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) })}
@@ -143,11 +127,65 @@ function getTemplateHTML() {
<media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-captions-button 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>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<button commandfor="settings-menu" aria-label="Settings" class="${cn(button.base, button.subtle, button.icon, menu.settingsTrigger, 'media-button--settings')}">
${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}
</button>
<media-menu id="settings-menu" side="top" align="center" class="${menu.settings}">
<media-menu-view class="${menu.rootView}">
<div class="${menu.group}">
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
<span>Speed</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-captions-menu" type="captions" data-setting="captions" class="${cn(menu.item, 'media-menu__item--submenu')}">
<span>Captions</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>
</div>
</media-menu-view>
<media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
Speed
</media-menu-back>
<media-playback-rate-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-playback-rate-radio-group>
</media-menu>
<media-menu id="settings-captions-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
Captions
</media-menu-back>
<media-captions-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-captions-radio-group>
</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) })}
packages/html/src/define/video/minimal-skin.ts
+57 -19
View File
@@ -92,20 +92,6 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-menu-trigger>
<media-playback-rate-menu id="playback-rate-menu" side="top" align="center" class="media-popover media-menu media-menu--playback-rate">
<media-playback-rate-options 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-playback-rate-options>
</media-playback-rate-menu>
<media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle 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' })}
@@ -121,11 +107,63 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle 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' })}
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="media-tooltip"></media-tooltip>
<button commandfor="settings-menu" aria-label="Settings" class="media-button media-button--subtle media-button--icon media-button--settings">
${renderIcon('gear', { class: 'media-icon media-icon--settings' })}
</button>
<media-menu id="settings-menu" side="top" align="center" class="media-popover media-menu media-menu--settings">
<media-menu-view class="media-menu__panel">
<div class="media-menu__group">
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="media-menu__item media-menu__item--submenu">
<span>Speed</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-captions-menu" type="captions" data-setting="captions" class="media-menu__item media-menu__item--submenu">
<span>Captions</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>
</div>
</media-menu-view>
<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' })}
Speed
</media-menu-back>
<media-playback-rate-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-playback-rate-radio-group>
</media-menu>
<media-menu id="settings-captions-menu" class="media-menu__panel">
<media-menu-back class="media-menu__back">
${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
Captions
</media-menu-back>
<media-captions-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-captions-radio-group>
</media-menu>
</media-menu>
<media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
packages/html/src/define/video/minimal-ui.ts
+6 -6
View File
@@ -6,6 +6,7 @@ import { MediaContainerElement } from '../../media/container-element';
import { AirPlayButtonElement } from '../../ui/airplay-button/airplay-button-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';
import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
import { GestureElement } from '../../ui/gesture/gesture-element';
@@ -13,9 +14,8 @@ import { HotkeyElement } from '../../ui/hotkey/hotkey-element';
import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';
import { PlayButtonElement } from '../../ui/play-button/play-button-element';
import { PlaybackRateMenuElement } from '../../ui/playback-rate-menu/playback-rate-menu-element';
import { PlaybackRateMenuTriggerElement } from '../../ui/playback-rate-menu/playback-rate-menu-trigger-element';
import { PlaybackRateOptionsElement } from '../../ui/playback-rate-menu/playback-rate-options-element';
import { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';
import { PlaybackRateRadioGroupElement } from '../../ui/playback-rate-radio-group/playback-rate-radio-group-element';
import { PopoverElement } from '../../ui/popover/popover-element';
import { PosterElement } from '../../ui/poster/poster-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
@@ -60,9 +60,9 @@ safeDefine(HotkeyElement);
safeDefine(MuteButtonElement);
safeDefine(PiPButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateRadioGroupElement);
safeDefine(CaptionsRadioGroupElement);
safeDefine(PopoverElement);
safeDefine(PosterElement);
safeDefine(SeekButtonElement);
packages/html/src/define/video/skin.tailwind.ts
+60 -21
View File
@@ -13,7 +13,6 @@ import {
inputFeedback,
menu,
overlay,
playbackRate,
popup,
poster,
root,
@@ -109,21 +108,7 @@ function getTemplateHTML() {
<media-time type="duration" class="${time.duration}"></media-time>
</div>
<div class="${buttonGroupEnd}">
<media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-menu-trigger>
<media-playback-rate-menu id="playback-rate-menu" side="top" align="center" class="${cn(popup.popover, menu.root)}">
<media-playback-rate-options 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-playback-rate-options>
</media-playback-rate-menu>
<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) })}
@@ -138,11 +123,65 @@ function getTemplateHTML() {
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-captions-button 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>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<button commandfor="settings-menu" aria-label="Settings" class="${cn(button.base, button.subtle, button.icon, menu.settingsTrigger, 'media-button--settings')}">
${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}
</button>
<media-menu id="settings-menu" side="top" align="center" class="${menu.settings}">
<media-menu-view class="${menu.rootView}">
<div class="${menu.group}">
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
<span>Speed</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-captions-menu" type="captions" data-setting="captions" class="${cn(menu.item, 'media-menu__item--submenu')}">
<span>Captions</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>
</div>
</media-menu-view>
<media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
Speed
</media-menu-back>
<media-playback-rate-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-playback-rate-radio-group>
</media-menu>
<media-menu id="settings-captions-menu" class="${menu.submenuPanel}">
<media-menu-back class="${menu.back}">
${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
Captions
</media-menu-back>
<media-captions-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-captions-radio-group>
</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) })}
packages/html/src/define/video/skin.ts
+57 -19
View File
@@ -88,20 +88,6 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-menu-trigger>
<media-playback-rate-menu id="playback-rate-menu" side="top" align="center" class="media-surface media-popover media-menu media-menu--playback-rate">
<media-playback-rate-options 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-playback-rate-options>
</media-playback-rate-menu>
<media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle 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' })}
@@ -117,11 +103,63 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle 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' })}
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<button commandfor="settings-menu" aria-label="Settings" class="media-button media-button--subtle media-button--icon media-button--settings">
${renderIcon('gear', { class: 'media-icon media-icon--settings' })}
</button>
<media-menu id="settings-menu" side="top" align="center" class="media-surface media-popover media-menu media-menu--settings">
<media-menu-view class="media-menu__panel">
<div class="media-menu__group">
<media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="media-menu__item media-menu__item--submenu">
<span>Speed</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-captions-menu" type="captions" data-setting="captions" class="media-menu__item media-menu__item--submenu">
<span>Captions</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>
</div>
</media-menu-view>
<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' })}
Speed
</media-menu-back>
<media-playback-rate-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-playback-rate-radio-group>
</media-menu>
<media-menu id="settings-captions-menu" class="media-menu__panel">
<media-menu-back class="media-menu__back">
${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
Captions
</media-menu-back>
<media-captions-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-captions-radio-group>
</media-menu>
</media-menu>
<media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
packages/html/src/define/video/ui.ts
+4 -6
View File
@@ -5,6 +5,7 @@ import { MediaContainerElement } from '../../media/container-element';
import { AirPlayButtonElement } from '../../ui/airplay-button/airplay-button-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';
import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
import { GestureElement } from '../../ui/gesture/gesture-element';
@@ -14,9 +15,7 @@ import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';
import { PlayButtonElement } from '../../ui/play-button/play-button-element';
import { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';
import { PlaybackRateMenuElement } from '../../ui/playback-rate-menu/playback-rate-menu-element';
import { PlaybackRateMenuTriggerElement } from '../../ui/playback-rate-menu/playback-rate-menu-trigger-element';
import { PlaybackRateOptionsElement } from '../../ui/playback-rate-menu/playback-rate-options-element';
import { PlaybackRateRadioGroupElement } from '../../ui/playback-rate-radio-group/playback-rate-radio-group-element';
import { PopoverElement } from '../../ui/popover/popover-element';
import { PosterElement } from '../../ui/poster/poster-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
@@ -61,9 +60,8 @@ safeDefine(MuteButtonElement);
safeDefine(PiPButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
safeDefine(PlaybackRateRadioGroupElement);
safeDefine(CaptionsRadioGroupElement);
safeDefine(PopoverElement);
safeDefine(PosterElement);
safeDefine(SeekButtonElement);