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

chore(skin): refactor tooltip/popover styles/classnames (#801)

Browse Source
This commit is contained in:
Sam Potts
2026-03-10 14:22:29 +11:00
committed by GitHub
parent afe149f8de
commit f98ddc97bc
32 changed files with 207 additions and 184 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
@@ -46,7 +46,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.base, popup.tooltip)}">
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.play.replay}">Replay</span>
<span class="${tooltipState.play.play}">Play</span>
<span class="${tooltipState.play.pause}">Pause</span>
@@ -59,7 +59,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.base, popup.tooltip)}">
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
@@ -69,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.base, popup.tooltip)}">
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
@@ -93,7 +93,7 @@ function getTemplateHTML() {
<span class="${buttonGroup}">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}">
</media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.base, popup.tooltip)}">
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
Toggle playback rate
</media-tooltip>
@@ -103,7 +103,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.base, popup.volume)}">
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" 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
+5 -5
View File
@@ -29,7 +29,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-popup media-popup--tooltip">
<media-tooltip id="play-tooltip" side="top" class="media-tooltip">
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
@@ -41,7 +41,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-popup media-popup--tooltip">
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
@@ -51,7 +51,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-popup media-popup--tooltip">
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
@@ -75,7 +75,7 @@ function getTemplateHTML() {
<span 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-tooltip id="playback-rate-tooltip" side="top" class="media-popup media-popup--tooltip">
<media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
Toggle playback rate
</media-tooltip>
@@ -85,7 +85,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-popup media-popup--popover media-popup--volume">
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" 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/skin.tailwind.ts
+5 -5
View File
@@ -44,7 +44,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.base, popup.tooltip)}">
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.play.replay}">Replay</span>
<span class="${tooltipState.play.play}">Play</span>
<span class="${tooltipState.play.pause}">Pause</span>
@@ -57,7 +57,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.base, popup.tooltip)}">
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
@@ -67,7 +67,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.base, popup.tooltip)}">
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
@@ -84,7 +84,7 @@ function getTemplateHTML() {
</media-time-group>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.base, popup.tooltip)}">
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
Toggle playback rate
</media-tooltip>
@@ -94,7 +94,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.base, popup.popover, popup.volume)}">
<media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" 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
+5 -5
View File
@@ -28,7 +28,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-popup media-popup--tooltip">
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
@@ -40,7 +40,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-popup media-popup--tooltip">
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
@@ -50,7 +50,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-popup media-popup--tooltip">
<media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
@@ -67,7 +67,7 @@ function getTemplateHTML() {
</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-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-popup media-popup--tooltip">
<media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
Toggle playback rate
</media-tooltip>
@@ -77,7 +77,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-popup media-popup--popover media-popup--volume">
<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-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/video/minimal-skin.tailwind.ts
+8 -8
View File
@@ -70,7 +70,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.base, popup.tooltip)}">
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.play.replay}">Replay</span>
<span class="${tooltipState.play.play}">Play</span>
<span class="${tooltipState.play.pause}">Pause</span>
@@ -83,7 +83,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.base, popup.tooltip)}">
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
@@ -93,7 +93,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.base, popup.tooltip)}">
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
@@ -117,7 +117,7 @@ function getTemplateHTML() {
<span class="${buttonGroup}">
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}">
</media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.base, popup.tooltip)}">
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
Toggle playback rate
</media-tooltip>
@@ -127,7 +127,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
</media-mute-button>
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.base, popup.volume)}">
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(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>
@@ -141,7 +141,7 @@ function getTemplateHTML() {
${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.base, popup.tooltip)}">
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
@@ -151,7 +151,7 @@ function getTemplateHTML() {
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
${renderIcon('pip', { class: icon })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.base, popup.tooltip)}">
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
</media-tooltip>
@@ -162,7 +162,7 @@ function getTemplateHTML() {
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.base, popup.tooltip)}">
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
<span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
</media-tooltip>
packages/html/src/define/video/minimal-skin.ts
+8 -8
View File
@@ -49,7 +49,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-popup media-popup--tooltip">
<media-tooltip id="play-tooltip" side="top" class="media-tooltip">
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
@@ -61,7 +61,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-popup media-popup--tooltip">
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
@@ -71,7 +71,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-popup media-popup--tooltip">
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
@@ -94,7 +94,7 @@ function getTemplateHTML() {
<span 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-tooltip id="playback-rate-tooltip" side="top" class="media-popup media-popup--tooltip">
<media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
Toggle playback rate
</media-tooltip>
@@ -104,7 +104,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
</media-mute-button>
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popup media-popup--popover media-popup--volume">
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="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>
@@ -117,14 +117,14 @@ function getTemplateHTML() {
${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-popup media-popup--tooltip">
<media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
Toggle captions
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
${renderIcon('pip', { class: 'media-icon' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-popup media-popup--tooltip">
<media-tooltip id="pip-tooltip" side="top" class="media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
<span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
</media-tooltip>
@@ -133,7 +133,7 @@ function getTemplateHTML() {
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-popup media-popup--tooltip">
<media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
<span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
</media-tooltip>
packages/html/src/define/video/skin.tailwind.ts
+8 -8
View File
@@ -70,7 +70,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.base, popup.tooltip)}">
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.play.replay}">Replay</span>
<span class="${tooltipState.play.play}">Play</span>
<span class="${tooltipState.play.pause}">Pause</span>
@@ -83,7 +83,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.base, popup.tooltip)}">
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
@@ -93,7 +93,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.base, popup.tooltip)}">
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
@@ -110,7 +110,7 @@ function getTemplateHTML() {
</media-time-group>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.base, popup.tooltip)}">
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
Toggle playback rate
</media-tooltip>
@@ -120,7 +120,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
</media-mute-button>
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.base, popup.popover, popup.volume)}">
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" 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>
@@ -134,7 +134,7 @@ function getTemplateHTML() {
${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.base, popup.tooltip)}">
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
@@ -144,7 +144,7 @@ function getTemplateHTML() {
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
${renderIcon('pip', { class: icon })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.base, popup.tooltip)}">
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
</media-tooltip>
@@ -155,7 +155,7 @@ function getTemplateHTML() {
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.base, popup.tooltip)}">
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
<span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
</media-tooltip>
packages/html/src/define/video/skin.ts
+8 -8
View File
@@ -51,7 +51,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-popup media-popup--tooltip">
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
<span class="media-tooltip-label media-tooltip-label--play">Play</span>
<span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
@@ -63,7 +63,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-popup media-popup--tooltip">
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
@@ -73,7 +73,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-popup media-popup--tooltip">
<media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
@@ -90,7 +90,7 @@ function getTemplateHTML() {
</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-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-popup media-popup--tooltip">
<media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
Toggle playback rate
</media-tooltip>
@@ -100,7 +100,7 @@ function getTemplateHTML() {
${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
</media-mute-button>
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popup media-popup--popover media-popup--volume">
<media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" 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>
@@ -113,7 +113,7 @@ function getTemplateHTML() {
${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-popup media-popup--tooltip">
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
<span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
</media-tooltip>
@@ -121,7 +121,7 @@ function getTemplateHTML() {
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
${renderIcon('pip', { class: 'media-icon' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-popup media-popup--tooltip">
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
<span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
</media-tooltip>
@@ -130,7 +130,7 @@ function getTemplateHTML() {
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-popup media-popup--tooltip">
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
<span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
<span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
</media-tooltip>