zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(skin): port tooltip styling from tech preview (#800)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
2026-03-10 13:48:23 +11:00
committed by GitHub
co-authored by Claude Opus 4.6
parent c605df50f6
commit 6b6566e254
34 changed files with 1315 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+26 -8
View File
@@ -14,6 +14,7 @@ import {
seek,
slider,
time,
tooltipState,
} from '@videojs/skins/minimal/tailwind/audio.tailwind';
import { cn } from '@videojs/utils/style';
import { SkinMixin } from '../skin-mixin';
@@ -27,6 +28,7 @@ import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -38,25 +40,38 @@ function getTemplateHTML() {
<div class="${controls}">
<span class="${buttonGroup}">
<media-play-button 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>
<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.base, 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 seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.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.base, popup.tooltip)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.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.base, popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<span class="${time.controls}">
@@ -76,8 +91,11 @@ function getTemplateHTML() {
</span>
<span class="${buttonGroup}">
<media-playback-rate-button class="${cn(button.base, button.icon, playbackRate.button)}">
<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)}">
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) })}
packages/html/src/define/audio/minimal-skin.ts
+20 -5
View File
@@ -12,6 +12,7 @@ import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -23,25 +24,36 @@ function getTemplateHTML() {
<div class="media-controls">
<span class="media-button-group">
<media-play-button class="media-button media-button--icon media-button--play">
<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-popup media-popup--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 seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--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-popup media-popup--tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--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-popup media-popup--tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<span class="media-time-controls">
@@ -61,8 +73,11 @@ function getTemplateHTML() {
</span>
<span class="media-button-group">
<media-playback-rate-button class="media-button media-button--icon media-button--playback-rate">
<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">
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' })}
@@ -70,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-surface media-popup media-popup--volume media-popup-animation">
<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-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
+27 -10
View File
@@ -13,6 +13,7 @@ import {
seek,
slider,
time,
tooltipState,
} from '@videojs/skins/default/tailwind/audio.tailwind';
import { cn } from '@videojs/utils/style';
import { SkinMixin } from '../skin-mixin';
@@ -26,6 +27,7 @@ import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -36,25 +38,38 @@ function getTemplateHTML() {
<slot name="media"></slot>
<div class="${controls}">
<media-play-button 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>
<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.base, 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 seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.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.base, popup.tooltip)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.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.base, popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
@@ -68,8 +83,10 @@ function getTemplateHTML() {
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<media-playback-rate-button class="${cn(button.base, button.icon, playbackRate.button)}">
</media-playback-rate-button>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.base, 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) })}
@@ -77,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.volume)}">
<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-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
+20 -6
View File
@@ -12,6 +12,7 @@ import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -22,25 +23,36 @@ function getTemplateHTML() {
<slot name="media"></slot>
<div class="media-surface media-controls">
<media-play-button class="media-button media-button--icon media-button--play">
<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-popup media-popup--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 seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--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-popup media-popup--tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--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-popup media-popup--tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="media-time">
<media-time type="current" class="media-time__value"></media-time>
@@ -54,8 +66,10 @@ function getTemplateHTML() {
<media-time type="duration" class="media-time__value"></media-time>
</media-time-group>
<media-playback-rate-button class="media-button media-button--icon media-button--playback-rate">
</media-playback-rate-button>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--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">
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' })}
@@ -63,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--volume media-popup-animation">
<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-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
+55 -19
View File
@@ -16,6 +16,7 @@ import {
seek,
slider,
time,
tooltipState,
} from '@videojs/skins/minimal/tailwind/video.tailwind';
import { cn } from '@videojs/utils/style';
import { SkinMixin } from '../skin-mixin';
@@ -34,6 +35,7 @@ import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/volume-slider';
import { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';
@@ -62,25 +64,38 @@ function getTemplateHTML() {
<media-controls data-controls="" class="${controls}">
<span class="${buttonGroup}">
<media-play-button 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>
<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.base, 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 seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.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.base, popup.tooltip)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.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.base, popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<span class="${time.controls}">
@@ -100,8 +115,11 @@ function getTemplateHTML() {
</span>
<span class="${buttonGroup}">
<media-playback-rate-button class="${cn(button.base, button.icon, playbackRate.button)}">
<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)}">
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) })}
@@ -118,19 +136,37 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button 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>
<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.base, popup.tooltip)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
</span>
<media-pip-button class="${cn(button.base, button.icon)}">
${renderIcon('pip', { class: icon })}
</media-pip-button>
<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.base, 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-fullscreen-button 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>
<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.base, popup.tooltip)}">
<span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
<span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
</media-tooltip>
</span>
</span>
</media-controls>
packages/html/src/define/video/minimal-skin.ts
+35 -10
View File
@@ -16,6 +16,7 @@ import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -43,25 +44,36 @@ function getTemplateHTML() {
<media-controls class="media-controls">
<span class="media-button-group">
<media-play-button class="media-button media-button--icon media-button--play">
<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-popup media-popup--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 seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--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-popup media-popup--tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--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-popup media-popup--tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
</span>
<span class="media-time-controls">
@@ -81,8 +93,10 @@ function getTemplateHTML() {
</span>
<span class="media-button-group">
<media-playback-rate-button class="media-button media-button--icon media-button--playback-rate">
</media-playback-rate-button>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="media-popup media-popup--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' })}
@@ -90,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-surface media-popup media-popup--volume media-popup-animation">
<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-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>
@@ -99,19 +113,30 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<!-- <button type="button" class="media-button media-button--icon media-button--captions" aria-label="Captions">
<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' })}
</button> -->
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="media-popup media-popup--tooltip">
Toggle captions
</media-tooltip>
<media-pip-button class="media-button media-button--icon">
<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">
<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 class="media-button media-button--icon media-button--fullscreen">
<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-popup media-popup--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-controls>
packages/html/src/define/video/skin.tailwind.ts
+56 -21
View File
@@ -16,6 +16,7 @@ import {
seek,
slider,
time,
tooltipState,
} from '@videojs/skins/default/tailwind/video.tailwind';
import { cn } from '@videojs/utils/style';
import { SkinMixin } from '../skin-mixin';
@@ -34,6 +35,7 @@ import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -62,25 +64,38 @@ function getTemplateHTML() {
</div>-->
<media-controls data-controls="" class="${controls}">
<media-play-button 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>
<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.base, 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 seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.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.base, popup.tooltip)}">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.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.base, popup.tooltip)}">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="${time.group}">
<media-time type="current" class="${time.current}"></media-time>
@@ -94,8 +109,10 @@ function getTemplateHTML() {
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
<media-playback-rate-button class="${cn(button.base, button.icon, playbackRate.button)}">
</media-playback-rate-button>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
<media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.base, 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) })}
@@ -103,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.volume)}">
<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-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>
@@ -112,19 +129,37 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button 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>
<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.base, popup.tooltip)}">
<span class="${tooltipState.captions.enable}">Enable captions</span>
<span class="${tooltipState.captions.disable}">Disable captions</span>
</media-tooltip>
</span>
<media-pip-button class="${cn(button.base, button.icon)}">
${renderIcon('pip', { class: icon })}
</media-pip-button>
<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.base, 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-fullscreen-button 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>
<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.base, popup.tooltip)}">
<span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
<span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
</media-tooltip>
</span>
</media-controls>
<div class="${overlay}"></div>
packages/html/src/define/video/skin.ts
+35 -9
View File
@@ -17,6 +17,7 @@ import '../ui/popover';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/volume-slider';
const SEEK_TIME = 10;
@@ -45,25 +46,36 @@ function getTemplateHTML() {
</div>-->
<media-controls class="media-surface media-controls">
<media-play-button class="media-button media-button--icon media-button--play">
<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-popup media-popup--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 seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--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-popup media-popup--tooltip">
Seek backward ${SEEK_TIME} seconds
</media-tooltip>
<media-seek-button seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--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-popup media-popup--tooltip">
Seek forward ${SEEK_TIME} seconds
</media-tooltip>
<media-time-group class="media-time">
<media-time type="current" class="media-time__value"></media-time>
@@ -77,8 +89,10 @@ function getTemplateHTML() {
<media-time type="duration" class="media-time__value"></media-time>
</media-time-group>
<media-playback-rate-button class="media-button media-button--icon media-button--playback-rate">
</media-playback-rate-button>
<media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--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">
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' })}
@@ -86,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--volume media-popup-animation">
<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-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>
@@ -95,19 +109,31 @@ function getTemplateHTML() {
</media-volume-slider>
</media-popover>
<media-captions-button class="media-button media-button--icon media-button--captions">
<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-popup media-popup--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 class="media-button media-button--icon">
<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">
<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 class="media-button media-button--icon media-button--fullscreen">
<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-popup media-popup--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-controls>
<div class="media-overlay"></div>