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-frosted/index.html
+50 -50
View File
@@ -51,50 +51,50 @@
<div class="overlay"></div>
<div class="control-bar surface">
<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="12" collision-padding="12">
<media-tooltip-popup class="surface 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="surface popup-animation"
popover="manual"
delay="500"
side="top"
side-offset="12"
collision-padding="12"
>
<span class="tooltip play-tooltip">Play</span>
<span class="tooltip pause-tooltip">Pause</span>
</media-tooltip>
<div class="time-controls">
<!-- Use the show-remaining attribute to show count down/remaining time -->
<media-current-time-display></media-current-time-display>
<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="18" collision-padding="12">
<media-tooltip-popup class="surface 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="surface popup-animation"
popover="manual"
track-cursor-axis="x"
side="top"
side-offset="18"
collision-padding="12"
>
<media-preview-time-display></media-preview-time-display>
</media-tooltip>
<media-duration-display></media-duration-display>
</div>
<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>
@@ -102,7 +102,7 @@
<media-popover
id="volume-slider-popover"
class="surface popup-animation"
popover
popover="manual"
open-on-hover
delay="200"
close-delay="100"
@@ -112,27 +112,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-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
<media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
</media-fullscreen-button>
</media-tooltip-trigger>
<media-tooltip-portal>
<media-tooltip-positioner side="top" side-offset="12" collision-padding="12">
<media-tooltip-popup class="surface 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-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
<media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
</media-fullscreen-button>
<media-tooltip
id="fullscreen-tooltip"
class="surface popup-animation"
popover="manual"
delay="500"
side="top"
side-offset="12"
collision-padding="12"
>
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
</media-tooltip>
</div>
</media-container>