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 error handling for audio players (#1048)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
2026-03-23 09:33:55 +11:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 559d5169b5
commit df927f67fc
43 changed files with 648 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+5 -5
View File
@@ -45,7 +45,7 @@ function getTemplateHTML() {
<media-tooltip-group>
<div class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
@@ -57,7 +57,7 @@ function getTemplateHTML() {
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
@@ -67,7 +67,7 @@ function getTemplateHTML() {
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
@@ -95,13 +95,13 @@ function getTemplateHTML() {
</div>
<div class="${buttonGroup}">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}">
<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)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
<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) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
packages/html/src/define/audio/minimal-skin.ts
+5 -5
View File
@@ -28,7 +28,7 @@ function getTemplateHTML() {
<div class="media-controls">
<media-tooltip-group>
<div class="media-button-group">
<media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
<media-play-button commandfor="play-tooltip" class="media-button media-button--subtle 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' })}
@@ -39,7 +39,7 @@ function getTemplateHTML() {
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<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">
${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
<span class="media-icon__label">${SEEK_TIME}</span>
@@ -49,7 +49,7 @@ function getTemplateHTML() {
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<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">
${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
<span class="media-icon__label">${SEEK_TIME}</span>
@@ -77,13 +77,13 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate">
<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">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
<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' })}
${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
packages/html/src/define/audio/skin.tailwind.ts
+5 -5
View File
@@ -43,7 +43,7 @@ function getTemplateHTML() {
<div class="${controls}">
<media-tooltip-group>
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
@@ -55,7 +55,7 @@ function getTemplateHTML() {
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
@@ -65,7 +65,7 @@ function getTemplateHTML() {
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
@@ -87,12 +87,12 @@ function getTemplateHTML() {
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
<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)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
<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) })}
${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
packages/html/src/define/audio/skin.ts
+5 -5
View File
@@ -27,7 +27,7 @@ function getTemplateHTML() {
<div class="media-surface media-controls">
<media-tooltip-group>
<media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
<media-play-button commandfor="play-tooltip" class="media-button media-button--subtle 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' })}
@@ -38,7 +38,7 @@ function getTemplateHTML() {
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<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">
${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
<span class="media-icon__label">${SEEK_TIME}</span>
@@ -48,7 +48,7 @@ function getTemplateHTML() {
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<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">
${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
<span class="media-icon__label">${SEEK_TIME}</span>
@@ -70,12 +70,12 @@ function getTemplateHTML() {
<media-time type="duration" class="media-time__value"></media-time>
</media-time-group>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
<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">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
<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' })}
${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
packages/html/src/define/video/minimal-skin.tailwind.ts
+8 -8
View File
@@ -63,7 +63,7 @@ function getTemplateHTML() {
<media-tooltip-group>
<div class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
@@ -75,7 +75,7 @@ function getTemplateHTML() {
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
@@ -85,7 +85,7 @@ function getTemplateHTML() {
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
@@ -121,13 +121,13 @@ function getTemplateHTML() {
</div>
<div class="${buttonGroup}">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}">
<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)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
<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) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
@@ -143,7 +143,7 @@ function getTemplateHTML() {
</media-popover>
<span class="${tooltipState.captions.wrapper}">
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
<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>
@@ -154,7 +154,7 @@ function getTemplateHTML() {
</span>
<span class="${tooltipState.pip.wrapper}">
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon, iconState.pip.button)}">
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
</media-pip-button>
@@ -165,7 +165,7 @@ function getTemplateHTML() {
</span>
<span class="${tooltipState.fullscreen.wrapper}">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
packages/html/src/define/video/minimal-skin.ts
+8 -8
View File
@@ -41,7 +41,7 @@ function getTemplateHTML() {
<media-controls class="media-controls">
<media-tooltip-group>
<div class="media-button-group">
<media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
<media-play-button commandfor="play-tooltip" class="media-button media-button--subtle 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' })}
@@ -52,7 +52,7 @@ function getTemplateHTML() {
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<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">
${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}
<span class="media-icon__label">${SEEK_TIME}</span>
@@ -62,7 +62,7 @@ function getTemplateHTML() {
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<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">
${renderIcon('seek', { class: 'media-icon' })}
<span class="media-icon__label">${SEEK_TIME}</span>
@@ -98,12 +98,12 @@ function getTemplateHTML() {
</div>
<div class="media-button-group">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
<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">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
<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' })}
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
@@ -118,7 +118,7 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
<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>
@@ -126,7 +126,7 @@ function getTemplateHTML() {
Toggle captions
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
</media-pip-button>
@@ -135,7 +135,7 @@ function getTemplateHTML() {
<span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
packages/html/src/define/video/skin.tailwind.ts
+8 -8
View File
@@ -63,7 +63,7 @@ function getTemplateHTML() {
<media-controls data-controls="" class="${controls}">
<media-tooltip-group>
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
@@ -75,7 +75,7 @@ function getTemplateHTML() {
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
@@ -85,7 +85,7 @@ function getTemplateHTML() {
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
@@ -113,12 +113,12 @@ function getTemplateHTML() {
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
<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)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
<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) })}
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
@@ -134,7 +134,7 @@ function getTemplateHTML() {
</media-popover>
<span class="${tooltipState.captions.wrapper}">
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
<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>
@@ -145,7 +145,7 @@ function getTemplateHTML() {
</span>
<span class="${tooltipState.pip.wrapper}">
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon, iconState.pip.button)}">
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
</media-pip-button>
@@ -156,7 +156,7 @@ function getTemplateHTML() {
</span>
<span class="${tooltipState.fullscreen.wrapper}">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
packages/html/src/define/video/skin.ts
+8 -8
View File
@@ -43,7 +43,7 @@ function getTemplateHTML() {
<media-controls class="media-surface media-controls">
<media-tooltip-group>
<media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
<media-play-button commandfor="play-tooltip" class="media-button media-button--subtle 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' })}
@@ -54,7 +54,7 @@ function getTemplateHTML() {
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<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">
${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}
<span class="media-icon__label">${SEEK_TIME}</span>
@@ -64,7 +64,7 @@ function getTemplateHTML() {
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<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">
${renderIcon('seek', { class: 'media-icon' })}
<span class="media-icon__label">${SEEK_TIME}</span>
@@ -92,12 +92,12 @@ function getTemplateHTML() {
<media-time type="duration" class="media-time__value"></media-time>
</media-time-group>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
<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">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
<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' })}
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
@@ -112,7 +112,7 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
<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>
@@ -121,7 +121,7 @@ function getTemplateHTML() {
<span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
</media-pip-button>
@@ -130,7 +130,7 @@ function getTemplateHTML() {
<span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>