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 playback rate menu (#1527)

Browse Source
This commit is contained in:
Sam Potts
2026-05-14 08:37:52 +10:00
committed by GitHub
parent ad515d3a24
commit ad831d25f0
141 changed files with 3990 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+20 -8
View File
@@ -1,5 +1,4 @@
import { renderIcon } from '@videojs/icons/render/minimal';
import { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';
import {
button,
buttonGroup,
@@ -9,6 +8,8 @@ import {
iconContainer,
iconFlipped,
iconState,
menu,
playbackRate,
popup,
root,
seek,
@@ -52,7 +53,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -60,7 +61,7 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -68,7 +69,7 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
</div>
<div class="${time.controls}">
@@ -88,9 +89,20 @@ function getTemplateHTML() {
</div>
<div class="${buttonGroup}">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
</media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<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}">
<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>
<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) })}
@@ -98,7 +110,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
</media-mute-button>
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}">
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="${cn(popup.volume)}">
<media-volume-slider class="${slider.root}" orientation="horizontal" thumb-alignment="edge">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
packages/html/src/define/audio/minimal-skin.ts
+17 -7
View File
@@ -36,7 +36,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-tooltip"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -44,7 +44,7 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="media-tooltip"></media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -52,7 +52,7 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="media-tooltip"></media-tooltip>
</div>
<div class="media-time-controls">
@@ -72,9 +72,19 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate">
</media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip"></media-tooltip>
<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">
<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="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' })}
@@ -82,7 +92,7 @@ function getTemplateHTML() {
${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="left" class="media-popover media-popover--volume">
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="media-popover media-popover--volume">
<media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
packages/html/src/define/audio/minimal-ui.ts
+8 -3
View File
@@ -4,13 +4,15 @@
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 { 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 { PopoverElement } from '../../ui/popover/popover-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { safeDefine } from '../safe-define';
import { defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
import { defineErrorDialog, defineMenu, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
// Value import — player.ts body runs before this module's body.
import { AudioPlayerElement } from './player';
@@ -25,11 +27,14 @@ defineErrorDialog();
defineTimeSlider();
defineVolumeSlider();
defineTime();
defineMenu();
// Standalone elements.
safeDefine(MuteButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
safeDefine(PopoverElement);
safeDefine(SeekButtonElement);
safeDefine(TooltipElement);
packages/html/src/define/audio/skin.tailwind.ts
+18 -6
View File
@@ -8,6 +8,7 @@ import {
iconContainer,
iconFlipped,
iconState,
menu,
playbackRate,
popup,
root,
@@ -52,7 +53,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -60,7 +61,7 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -68,7 +69,7 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
</div>
<div class="${time.group}">
@@ -84,8 +85,19 @@ function getTemplateHTML() {
</div>
<div class="${buttonGroup}">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<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}">
<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>
<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) })}
@@ -93,7 +105,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
</media-mute-button>
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="${cn(popup.popover, 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>
packages/html/src/define/audio/skin.ts
+17 -6
View File
@@ -36,7 +36,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -44,7 +44,7 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -52,7 +52,7 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip>
</div>
<div class="media-time-controls">
@@ -68,8 +68,19 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<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">
<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="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' })}
@@ -77,7 +88,7 @@ function getTemplateHTML() {
${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-popover media-popover--volume">
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="media-surface media-popover media-popover--volume">
<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>
packages/html/src/define/audio/ui.ts
+8 -1
View File
@@ -8,12 +8,15 @@ 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 { PopoverElement } from '../../ui/popover/popover-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { safeDefine } from '../safe-define';
import { defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
import { defineErrorDialog, defineMenu, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
// Value import — player.ts body runs before this module's body.
import { AudioPlayerElement } from './player';
@@ -28,6 +31,7 @@ defineErrorDialog();
defineTimeSlider();
defineVolumeSlider();
defineTime();
defineMenu();
// Standalone elements.
safeDefine(GestureElement);
@@ -36,6 +40,9 @@ safeDefine(LiveButtonElement);
safeDefine(MuteButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
safeDefine(PopoverElement);
safeDefine(SeekButtonElement);
safeDefine(TooltipElement);
packages/html/src/define/live-audio/minimal-skin.tailwind.ts
+2 -2
View File
@@ -45,7 +45,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
</div>
@@ -59,7 +59,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
</media-mute-button>
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}">
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="${cn(popup.volume)}">
<media-volume-slider class="${slider.root}" orientation="horizontal" thumb-alignment="edge">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
packages/html/src/define/live-audio/minimal-skin.ts
+2 -2
View File
@@ -34,7 +34,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-tooltip"></media-tooltip>
<media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
</div>
@@ -48,7 +48,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
</media-mute-button>
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="media-popover media-popover--volume">
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" boundary="viewport" class="media-popover media-popover--volume">
<media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
packages/html/src/define/live-audio/skin.tailwind.ts
+2 -2
View File
@@ -45,7 +45,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
</div>
@@ -59,7 +59,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
</media-mute-button>
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="${cn(popup.popover, 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>
packages/html/src/define/live-audio/skin.ts
+2 -2
View File
@@ -34,7 +34,7 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip>
<media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
</div>
@@ -48,7 +48,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
</media-mute-button>
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
<media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="media-surface media-popover media-popover--volume">
<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>
packages/html/src/define/ui/playback-rate-menu.ts
+18
View File
@@ -0,0 +1,18 @@
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/video/minimal-skin.tailwind.ts
+15 -3
View File
@@ -11,6 +11,7 @@ import {
iconFlipped,
iconState,
inputFeedback,
menu,
overlay,
playbackRate,
popup,
@@ -110,9 +111,20 @@ function getTemplateHTML() {
</div>
<div class="${buttonGroupEnd}">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
</media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<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>
<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) })}
packages/html/src/define/video/minimal-skin.ts
+13 -2
View File
@@ -88,8 +88,19 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip"></media-tooltip>
<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' })}
packages/html/src/define/video/minimal-ui.ts
+8 -2
View File
@@ -11,7 +11,9 @@ 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 { 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 { PopoverElement } from '../../ui/popover/popover-element';
import { PosterElement } from '../../ui/poster/poster-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
@@ -22,6 +24,7 @@ import {
defineControls,
defineErrorDialog,
defineInputIndicators,
defineMenu,
defineTime,
defineTimeSlider,
defineVolumeSlider,
@@ -42,6 +45,7 @@ defineInputIndicators();
defineTimeSlider();
defineVolumeSlider();
defineTime();
defineMenu();
// Standalone elements.
safeDefine(BufferingIndicatorElement);
@@ -53,7 +57,9 @@ safeDefine(HotkeyElement);
safeDefine(MuteButtonElement);
safeDefine(PiPButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
safeDefine(PopoverElement);
safeDefine(PosterElement);
safeDefine(SeekButtonElement);
packages/html/src/define/video/skin.tailwind.ts
+14 -2
View File
@@ -11,6 +11,7 @@ import {
iconFlipped,
iconState,
inputFeedback,
menu,
overlay,
playbackRate,
popup,
@@ -106,8 +107,19 @@ function getTemplateHTML() {
</div>
<div class="${buttonGroupEnd}">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<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>
<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) })}
packages/html/src/define/video/skin.ts
+13 -2
View File
@@ -84,8 +84,19 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<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' })}
packages/html/src/define/video/ui.ts
+8
View File
@@ -13,6 +13,9 @@ 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 { PopoverElement } from '../../ui/popover/popover-element';
import { PosterElement } from '../../ui/poster/poster-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
@@ -23,6 +26,7 @@ import {
defineControls,
defineErrorDialog,
defineInputIndicators,
defineMenu,
defineTime,
defineTimeSlider,
defineVolumeSlider,
@@ -43,6 +47,7 @@ defineInputIndicators();
defineTimeSlider();
defineVolumeSlider();
defineTime();
defineMenu();
// Standalone elements.
safeDefine(BufferingIndicatorElement);
@@ -56,6 +61,9 @@ safeDefine(MuteButtonElement);
safeDefine(PiPButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateOptionsElement);
safeDefine(PlaybackRateMenuTriggerElement);
safeDefine(PlaybackRateMenuElement);
safeDefine(PopoverElement);
safeDefine(PosterElement);
safeDefine(SeekButtonElement);