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

fix(skin): add missing tooltip provider/group (#902)

Browse Source
This commit is contained in:
Sam Potts
2026-03-12 10:24:35 +11:00
committed by GitHub
parent 6cc4028f81
commit 1dbcd79e54
37 changed files with 1688 additions and 1753 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.css
+1
View File
@@ -1 +1,2 @@
@import "@videojs/skins/minimal/css/audio.css";
@import "../shared.css";
packages/html/src/define/audio/minimal-skin.tailwind.ts
+69 -66
View File
@@ -29,6 +29,7 @@ import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -39,79 +40,81 @@ function getTemplateHTML() {
<slot name="media"></slot>
<div class="${controls}">
<span class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, 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) })}
</media-play-button>
<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>
<media-tooltip-group class="contents">
<div class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, 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) })}
</media-play-button>
<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>
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<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)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<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)}">
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)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<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)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</div>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<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)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<div class="${time.controls}">
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
<media-time-separator class="${time.separator}"></media-time-separator>
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<span class="${time.controls}">
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
<media-time-separator class="${time.separator}"></media-time-separator>
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<media-time-slider class="${slider.root}">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
</media-time-slider>
</span>
<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.tooltip)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, 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) })}
</media-mute-button>
<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-time-slider class="${slider.root}">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
</span>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
</media-time-slider>
</div>
<div 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.tooltip)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, 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) })}
</media-mute-button>
<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>
</media-slider-track>
<media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
</div>
</media-tooltip-group>
</div>
</media-container>
`;
packages/html/src/define/audio/minimal-skin.ts
+67 -64
View File
@@ -13,6 +13,7 @@ import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -23,77 +24,79 @@ function getTemplateHTML() {
<slot name="media"></slot>
<div class="media-controls">
<span class="media-button-group">
<media-play-button commandfor="play-tooltip" class="media-button 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' })}
</media-play-button>
<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>
</media-tooltip>
<media-tooltip-group>
<div class="media-button-group">
<media-play-button commandfor="play-tooltip" class="media-button 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' })}
</media-play-button>
<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>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
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">
<span class="media-icon__container">
${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</div>
<span class="media-time-controls">
<media-time-group class="media-time">
<media-time type="current" class="media-time__value media-time__value--current"></media-time>
<media-time-separator class="media-time__separator"></media-time-separator>
<media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
</media-time-group>
<div class="media-time-controls">
<media-time-group class="media-time">
<media-time type="current" class="media-time__value media-time__value--current"></media-time>
<media-time-separator class="media-time__separator"></media-time-separator>
<media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
</media-time-group>
<media-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
</span>
<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-tooltip">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="media-button 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' })}
</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-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge">
<media-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
</span>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
</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-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">
${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' })}
</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-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>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
</div>
</media-tooltip-group>
</div>
</media-container>
`;
packages/html/src/define/audio/skin.css
+1
View File
@@ -1 +1,2 @@
@import "@videojs/skins/default/css/audio.css";
@import "../shared.css";
packages/html/src/define/audio/skin.tailwind.ts
+61 -58
View File
@@ -28,6 +28,7 @@ import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -38,70 +39,72 @@ function getTemplateHTML() {
<slot name="media"></slot>
<div class="${controls}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, 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) })}
</media-play-button>
<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>
<media-tooltip-group class="contents">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, 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) })}
</media-play-button>
<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>
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<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)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<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)}">
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)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<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)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<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)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
<media-time-slider class="${slider.root}">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
</media-time-slider>
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
<media-time-slider class="${slider.root}">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
</media-time-slider>
<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-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
Toggle playback rate
</media-tooltip>
<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.tooltip)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, 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) })}
</media-mute-button>
<media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, 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) })}
</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-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>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<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>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
</media-tooltip-group>
</div>
</media-container>
`;
packages/html/src/define/audio/skin.ts
+59 -56
View File
@@ -13,6 +13,7 @@ import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -23,68 +24,70 @@ function getTemplateHTML() {
<slot name="media"></slot>
<div class="media-surface media-controls">
<media-play-button commandfor="play-tooltip" class="media-button 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' })}
</media-play-button>
<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>
</media-tooltip>
<media-tooltip-group>
<media-play-button commandfor="play-tooltip" class="media-button 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' })}
</media-play-button>
<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>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
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">
<span class="media-icon__container">
${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
<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">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="media-time">
<media-time type="current" class="media-time__value"></media-time>
<media-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
<media-time type="duration" class="media-time__value"></media-time>
</media-time-group>
<media-time-group class="media-time">
<media-time type="current" class="media-time__value"></media-time>
<media-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
<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-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
Toggle playback rate
</media-tooltip>
<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-tooltip">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="audio-volume-popover" class="media-button 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' })}
</media-mute-button>
<media-mute-button commandfor="audio-volume-popover" class="media-button 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' })}
</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-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>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<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>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
</media-tooltip-group>
</div>
</media-container>
`;
packages/html/src/define/shared.css
+3
View File
@@ -0,0 +1,3 @@
media-tooltip-group {
display: contents;
}
packages/html/src/define/video/minimal-skin.css
+1
View File
@@ -1 +1,2 @@
@import "@videojs/skins/minimal/css/video.css";
@import "../shared.css";
packages/html/src/define/video/minimal-skin.tailwind.ts
+97 -94
View File
@@ -35,6 +35,7 @@ import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
import { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';
@@ -50,111 +51,113 @@ function getTemplateHTML() {
</media-buffering-indicator>
<media-controls data-controls="" class="${controls}">
<span class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, 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) })}
</media-play-button>
<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>
<media-tooltip-group class="contents">
<div class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, 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) })}
</media-play-button>
<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>
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<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)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<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)}">
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)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<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)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</div>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<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)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<div class="${time.controls}">
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
<media-time-separator class="${time.separator}"></media-time-separator>
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<span class="${time.controls}">
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
<media-time-separator class="${time.separator}"></media-time-separator>
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<media-time-slider class="${slider.root}">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
</media-time-slider>
</span>
<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.tooltip)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, 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) })}
</media-mute-button>
<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-time-slider class="${slider.root}">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
</media-time-slider>
</div>
<span class="${tooltipState.captions.wrapper}">
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, 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)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
<div 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.tooltip)}">
Toggle playback rate
</media-tooltip>
</span>
<span class="${tooltipState.pip.wrapper}">
<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.tooltip)}">
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
</media-tooltip>
</span>
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, 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) })}
</media-mute-button>
<span class="${tooltipState.fullscreen.wrapper}">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, 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>
<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>
</span>
</span>
<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>
</media-slider-track>
<media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<span class="${tooltipState.captions.wrapper}">
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, 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)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
</span>
<span class="${tooltipState.pip.wrapper}">
<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.tooltip)}">
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
</media-tooltip>
</span>
<span class="${tooltipState.fullscreen.wrapper}">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, 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>
<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>
</span>
</div>
</media-tooltip-group>
</media-controls>
<div class="${overlay}"></div>
packages/html/src/define/video/minimal-skin.ts
+88 -85
View File
@@ -17,6 +17,7 @@ import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -31,101 +32,103 @@ function getTemplateHTML() {
</media-buffering-indicator>
<media-controls class="media-controls">
<span class="media-button-group">
<media-play-button commandfor="play-tooltip" class="media-button 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' })}
</media-play-button>
<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>
</media-tooltip>
<media-tooltip-group>
<div class="media-button-group">
<media-play-button commandfor="play-tooltip" class="media-button 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' })}
</media-play-button>
<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>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
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">
<span class="media-icon__container">
${renderIcon('seek', { class: 'media-icon' })}
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<span class="media-icon__container">
${renderIcon('seek', { class: 'media-icon' })}
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</div>
<span class="media-time-controls">
<media-time-group class="media-time">
<media-time type="current" class="media-time__value media-time__value--current"></media-time>
<media-time-separator class="media-time__separator"></media-time-separator>
<media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
</media-time-group>
<div class="media-time-controls">
<media-time-group class="media-time">
<media-time type="current" class="media-time__value media-time__value--current"></media-time>
<media-time-separator class="media-time__separator"></media-time-separator>
<media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
</media-time-group>
<media-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
</span>
<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-tooltip">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="video-volume-popover" class="media-button 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' })}
</media-mute-button>
<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-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
</div>
<media-captions-button commandfor="captions-tooltip" class="media-button 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">
Toggle captions
</media-tooltip>
<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-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
Toggle playback rate
</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-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>
<media-mute-button commandfor="video-volume-popover" class="media-button 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' })}
</media-mute-button>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button 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>
<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>
</span>
<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>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="media-button 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">
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-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>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button 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>
<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>
</div>
</media-tooltip-group>
</media-controls>
<div class="media-overlay"></div>
packages/html/src/define/video/skin.css
+1
View File
@@ -1 +1,2 @@
@import "@videojs/skins/default/css/video.css";
@import "../shared.css";
packages/html/src/define/video/skin.tailwind.ts
+94 -91
View File
@@ -35,6 +35,7 @@ import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -51,102 +52,104 @@ function getTemplateHTML() {
</media-buffering-indicator>
<media-controls data-controls="" class="${controls}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, 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) })}
</media-play-button>
<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>
</media-tooltip>
</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
<media-tooltip-group class="contents">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, 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) })}
</media-play-button>
<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>
</media-tooltip>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
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)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: cn(icon, iconFlipped) })}
<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)}">
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)}">
<span class="${iconContainer}">
${renderIcon('seek', { class: icon })}
<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)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
<media-time-slider class="${slider.root}">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
</media-time-slider>
<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-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)}">
${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) })}
</media-mute-button>
<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>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<span class="${tooltipState.captions.wrapper}">
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, 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)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
<media-time-slider class="${slider.root}">
<media-slider-track class="${slider.track}">
<media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
</media-time-slider>
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<span class="${tooltipState.pip.wrapper}">
<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.tooltip)}">
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
</media-tooltip>
</span>
<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.tooltip)}">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="video-volume-popover" class="${cn(button.base, 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) })}
</media-mute-button>
<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>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<span class="${tooltipState.captions.wrapper}">
<media-captions-button commandfor="captions-tooltip" class="${cn(button.base, 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)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
</span>
<span class="${tooltipState.pip.wrapper}">
<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.tooltip)}">
<span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
<span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
</media-tooltip>
</span>
<span class="${tooltipState.fullscreen.wrapper}">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, 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>
<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>
</span>
<span class="${tooltipState.fullscreen.wrapper}">
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, 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>
<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>
</span>
</media-tooltip-group>
</media-controls>
<div class="${overlay}"></div>
packages/html/src/define/video/skin.ts
+82 -79
View File
@@ -18,6 +18,7 @@ import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -34,94 +35,96 @@ function getTemplateHTML() {
</media-buffering-indicator>
<media-controls class="media-surface media-controls">
<media-play-button commandfor="play-tooltip" class="media-button 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' })}
</media-play-button>
<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>
</media-tooltip>
<media-tooltip-group>
<media-play-button commandfor="play-tooltip" class="media-button 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' })}
</media-play-button>
<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>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button 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>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
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">
<span class="media-icon__container">
${renderIcon('seek', { class: 'media-icon' })}
<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">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<span class="media-icon__container">
${renderIcon('seek', { class: 'media-icon' })}
<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">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="media-time">
<media-time type="current" class="media-time__value"></media-time>
<media-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
<media-time type="duration" class="media-time__value"></media-time>
</media-time-group>
<media-time-group class="media-time">
<media-time type="current" class="media-time__value"></media-time>
<media-time-slider class="media-slider">
<media-slider-track class="media-slider__track">
<media-slider-fill class="media-slider__fill"></media-slider-fill>
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
</media-time-slider>
<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-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
Toggle playback rate
</media-tooltip>
<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-tooltip">
Toggle playback rate
</media-tooltip>
<media-mute-button commandfor="video-volume-popover" class="media-button 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' })}
</media-mute-button>
<media-mute-button commandfor="video-volume-popover" class="media-button 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' })}
</media-mute-button>
<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>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<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>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
</media-volume-slider>
</media-popover>
<media-captions-button commandfor="captions-tooltip" class="media-button 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">
<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>
<media-captions-button commandfor="captions-tooltip" class="media-button 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">
<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>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
${renderIcon('pip', { class: 'media-icon' })}
</media-pip-button>
<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>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
${renderIcon('pip', { class: 'media-icon' })}
</media-pip-button>
<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>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button 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>
<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>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button 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>
<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>
</media-tooltip-group>
</media-controls>
<div class="media-overlay"></div>