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

feat(packages): compound tooltips with label and shortcut parts (#1494)

Browse Source
This commit is contained in:
Sam Potts
2026-06-18 08:12:16 +10:00
committed by GitHub
parent 9275f93504
commit 035b509c7a
82 changed files with 1509 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+12 -3
View File
@@ -53,7 +53,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -61,7 +64,10 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -69,7 +75,10 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
</div>
<div class="${time.controls}">
packages/html/src/define/audio/minimal-skin.ts
+12 -3
View File
@@ -36,7 +36,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -44,7 +47,10 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="media-tooltip"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -52,7 +58,10 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="media-tooltip"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
</div>
<div class="media-time-controls">
packages/html/src/define/audio/minimal-ui.ts
+6
View File
@@ -2,6 +2,7 @@
// used by the minimal skin without creating a skin element. Use this entry
// when building an ejected (light DOM) player layout.
import { MediaContainerElement } from '../../media/container-element';
import { HotkeyElement } from '../../ui/hotkey/hotkey-element';
import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
import { PlayButtonElement } from '../../ui/play-button/play-button-element';
import { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';
@@ -10,6 +11,8 @@ import { PopoverElement } from '../../ui/popover/popover-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { TooltipLabelElement } from '../../ui/tooltip/tooltip-label-element';
import { TooltipShortcutElement } from '../../ui/tooltip/tooltip-shortcut-element';
import { safeDefine } from '../safe-define';
import { defineErrorDialog, defineMenu, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
@@ -29,11 +32,14 @@ defineTime();
defineMenu();
// Standalone elements.
safeDefine(HotkeyElement);
safeDefine(MuteButtonElement);
safeDefine(PlayButtonElement);
safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateRadioGroupElement);
safeDefine(PopoverElement);
safeDefine(SeekButtonElement);
safeDefine(TooltipLabelElement);
safeDefine(TooltipShortcutElement);
safeDefine(TooltipElement);
safeDefine(TooltipGroupElement);
packages/html/src/define/audio/skin.tailwind.ts
+12 -3
View File
@@ -53,7 +53,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -61,7 +64,10 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -69,7 +75,10 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
</div>
<div class="${time.group}">
packages/html/src/define/audio/skin.ts
+12 -3
View File
@@ -36,7 +36,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -44,7 +47,10 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -52,7 +58,10 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
</div>
<div class="media-time-controls">
packages/html/src/define/audio/ui.ts
+4
View File
@@ -13,6 +13,8 @@ import { PopoverElement } from '../../ui/popover/popover-element';
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { TooltipLabelElement } from '../../ui/tooltip/tooltip-label-element';
import { TooltipShortcutElement } from '../../ui/tooltip/tooltip-shortcut-element';
import { safeDefine } from '../safe-define';
import { defineErrorDialog, defineMenu, defineSliders, defineTime } from '../ui/compounds';
@@ -40,5 +42,7 @@ safeDefine(PlaybackRateButtonElement);
safeDefine(PlaybackRateRadioGroupElement);
safeDefine(PopoverElement);
safeDefine(SeekButtonElement);
safeDefine(TooltipLabelElement);
safeDefine(TooltipShortcutElement);
safeDefine(TooltipElement);
safeDefine(TooltipGroupElement);
packages/html/src/define/live-audio/minimal-skin.tailwind.ts
+4 -1
View File
@@ -45,7 +45,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
</div>
packages/html/src/define/live-audio/minimal-skin.ts
+4 -1
View File
@@ -34,7 +34,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
</div>
packages/html/src/define/live-audio/skin.tailwind.ts
+4 -1
View File
@@ -45,7 +45,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
</div>
packages/html/src/define/live-audio/skin.ts
+4 -1
View File
@@ -34,7 +34,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
</div>
packages/html/src/define/live-video/minimal-skin.tailwind.ts
+24 -6
View File
@@ -59,7 +59,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
</div>
@@ -97,27 +100,42 @@ function getTemplateHTML() {
</template>
</media-captions-radio-group>
</media-menu>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/live-video/minimal-skin.ts
+24 -6
View File
@@ -42,7 +42,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
</div>
@@ -81,31 +84,46 @@ function getTemplateHTML() {
</template>
</media-captions-radio-group>
</media-menu>
<media-tooltip id="captions-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="cast-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="media-button media-button--subtle media-button--icon media-button--airplay">
${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}
${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="airplay-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/live-video/skin.tailwind.ts
+24 -6
View File
@@ -61,7 +61,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
</div>
@@ -99,27 +102,42 @@ function getTemplateHTML() {
</template>
</media-captions-radio-group>
</media-menu>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/live-video/skin.ts
+24 -6
View File
@@ -44,7 +44,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
</div>
@@ -83,31 +86,46 @@ function getTemplateHTML() {
</template>
</media-captions-radio-group>
</media-menu>
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="media-button media-button--subtle media-button--icon media-button--airplay">
${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}
${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="airplay-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/ui/tooltip.ts
+6
View File
@@ -1,10 +1,16 @@
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipLabelElement } from '../../ui/tooltip/tooltip-label-element';
import { TooltipShortcutElement } from '../../ui/tooltip/tooltip-shortcut-element';
import { safeDefine } from '../safe-define';
safeDefine(TooltipLabelElement);
safeDefine(TooltipShortcutElement);
safeDefine(TooltipElement);
declare global {
interface HTMLElementTagNameMap {
[TooltipLabelElement.tagName]: TooltipLabelElement;
[TooltipShortcutElement.tagName]: TooltipShortcutElement;
[TooltipElement.tagName]: TooltipElement;
}
}
packages/html/src/define/video/minimal-skin.tailwind.ts
+28 -7
View File
@@ -67,7 +67,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -75,7 +78,10 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -83,7 +89,10 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
</div>
<div class="${time.controls}">
@@ -225,22 +234,34 @@ function getTemplateHTML() {
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/video/minimal-skin.ts
+28 -7
View File
@@ -44,7 +44,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -52,7 +55,10 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -60,7 +66,10 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
</div>
<div class="media-time-controls">
@@ -203,25 +212,37 @@ function getTemplateHTML() {
${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="cast-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="media-button media-button--subtle media-button--icon media-button--airplay">
${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}
${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="airplay-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/video/minimal-ui.ts
+4
View File
@@ -22,6 +22,8 @@ import { QualityRadioGroupElement } from '../../ui/quality-radio-group/quality-r
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { TooltipLabelElement } from '../../ui/tooltip/tooltip-label-element';
import { TooltipShortcutElement } from '../../ui/tooltip/tooltip-shortcut-element';
import { safeDefine } from '../safe-define';
import {
defineControls,
@@ -68,5 +70,7 @@ safeDefine(PopoverElement);
safeDefine(PosterElement);
safeDefine(QualityRadioGroupElement);
safeDefine(SeekButtonElement);
safeDefine(TooltipLabelElement);
safeDefine(TooltipShortcutElement);
safeDefine(TooltipElement);
safeDefine(TooltipGroupElement);
packages/html/src/define/video/skin.tailwind.ts
+28 -7
View File
@@ -69,7 +69,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: cn(icon, iconState.play.play) })}
${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -77,7 +80,10 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
<span class="${iconContainer}">
@@ -85,7 +91,10 @@ function getTemplateHTML() {
<span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
</div>
<div class="${time.group}">
@@ -221,22 +230,34 @@ function getTemplateHTML() {
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
</media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/video/skin.ts
+28 -7
View File
@@ -46,7 +46,10 @@ function getTemplateHTML() {
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -54,7 +57,10 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
<span class="media-icon__container">
@@ -62,7 +68,10 @@ function getTemplateHTML() {
<span class="media-icon__label">${SEEK_TIME}</span>
</span>
</media-seek-button>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
</div>
<div class="media-time-controls">
@@ -199,25 +208,37 @@ function getTemplateHTML() {
${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-airplay-button commandfor="airplay-tooltip" class="media-button media-button--subtle media-button--icon media-button--airplay">
${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}
${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}
</media-airplay-button>
<media-tooltip id="airplay-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="airplay-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
</media-fullscreen-button>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
<media-tooltip-label></media-tooltip-label>
<media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
</media-tooltip>
</div>
</media-tooltip-group>
</media-controls>
packages/html/src/define/video/ui.ts
+4
View File
@@ -22,6 +22,8 @@ import { QualityRadioGroupElement } from '../../ui/quality-radio-group/quality-r
import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { TooltipLabelElement } from '../../ui/tooltip/tooltip-label-element';
import { TooltipShortcutElement } from '../../ui/tooltip/tooltip-shortcut-element';
import { safeDefine } from '../safe-define';
import {
defineControls,
@@ -67,5 +69,7 @@ safeDefine(PopoverElement);
safeDefine(PosterElement);
safeDefine(QualityRadioGroupElement);
safeDefine(SeekButtonElement);
safeDefine(TooltipLabelElement);
safeDefine(TooltipShortcutElement);
safeDefine(TooltipElement);
safeDefine(TooltipGroupElement);