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: update html tooltip API / use command attr (#151)

Browse Source
This commit is contained in:
Wesley Luyten
2025-10-31 14:50:48 -05:00
committed by GitHub
parent a4c2a375f6
commit 1e7c8ae82e
12 changed files with 448 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/html-eject-minimal/index.html
+51 -52
View File
@@ -52,21 +52,22 @@
<div class="control-bar">
<!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
<media-tooltip delay="500" close-delay="0">
<media-tooltip-trigger>
<media-play-button class="button">
<media-play-icon class="icon play-icon"></media-play-icon>
<media-pause-icon class="icon pause-icon"></media-pause-icon>
</media-play-button>
</media-tooltip-trigger>
<media-tooltip-portal>
<media-tooltip-positioner side="top" side-offset="6" collision-padding="12">
<media-tooltip-popup class="popup-animation">
<span class="tooltip play-tooltip">Play</span>
<span class="tooltip pause-tooltip">Pause</span>
</media-tooltip-popup>
</media-tooltip-positioner>
</media-tooltip-portal>
<media-play-button commandfor="play-tooltip" class="button">
<media-play-icon class="icon play-icon"></media-play-icon>
<media-pause-icon class="icon pause-icon"></media-pause-icon>
</media-play-button>
<media-tooltip
id="play-tooltip"
class="popup-animation"
popover="manual"
delay="500"
side="top"
side-offset="6"
collision-padding="12"
>
<span class="tooltip play-tooltip">Play</span>
<span class="tooltip pause-tooltip">Pause</span>
</media-tooltip>
<div class="time-display-group">
@@ -79,27 +80,27 @@
</span>
</div>
<media-tooltip track-cursor-axis="x">
<media-tooltip-trigger>
<media-time-slider class="slider">
<media-time-slider-track class="slider-track">
<media-time-slider-progress class="slider-progress"></media-time-slider-progress>
<media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
</media-time-slider-track>
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
</media-time-slider>
</media-tooltip-trigger>
<media-tooltip-portal>
<media-tooltip-positioner side="top" side-offset="12" collision-padding="12">
<media-tooltip-popup class="popup-animation">
<media-preview-time-display></media-preview-time-display>
</media-tooltip-popup>
</media-tooltip-positioner>
</media-tooltip-portal>
<media-time-slider commandfor="time-slider-tooltip" class="slider">
<media-time-slider-track class="slider-track">
<media-time-slider-progress class="slider-progress"></media-time-slider-progress>
<media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
</media-time-slider-track>
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
</media-time-slider>
<media-tooltip
id="time-slider-tooltip"
class="popup-animation"
popover="manual"
track-cursor-axis="x"
side="top"
side-offset="12"
collision-padding="12"
>
<media-preview-time-display></media-preview-time-display>
</media-tooltip>
<div class="button-group">
<media-mute-button popovertarget="volume-slider-popover" class="button">
<media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
<media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
@@ -107,7 +108,7 @@
<media-popover
id="volume-slider-popover"
class="popup-animation"
popover
popover="manual"
open-on-hover
delay="200"
close-delay="100"
@@ -117,29 +118,27 @@
>
<media-volume-slider class="slider" orientation="vertical">
<media-volume-slider-track class="slider-track">
<media-volume-slider-progress class="slider-progress"></media-volume-slider-progress>
<media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
</media-volume-slider-track>
<media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
</media-volume-slider>
</media-popover>
<media-tooltip delay="500" close-delay="0">
<media-tooltip-trigger>
<media-fullscreen-button class="button">
<media-fullscreen-enter-alt-icon
class="icon fullscreen-enter-icon"
></media-fullscreen-enter-alt-icon>
<media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-alt-icon>
</media-fullscreen-button>
</media-tooltip-trigger>
<media-tooltip-portal>
<media-tooltip-positioner side="top" side-offset="6" collision-padding="12">
<media-tooltip-popup class="popup-animation">
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
</media-tooltip-popup>
</media-tooltip-positioner>
</media-tooltip-portal>
<media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
<media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
<media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-alt-icon>
</media-fullscreen-button>
<media-tooltip
id="fullscreen-tooltip"
class="popup-animation"
popover="manual"
delay="500"
side="top"
side-offset="6"
collision-padding="12"
>
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
</media-tooltip>
</div>
</div>