melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add timeline preview hover

Browse Source
This commit is contained in:
mkelvers
2026-04-18 07:38:59 +02:00
parent 54ba5eda2d
commit 89c8a41c68
2 changed files with 231 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
internal/templates/watch.templ
View File

@@ -194,6 +194,8 @@ templ VideoPlayer(data WatchPageData) {
class="flex flex-col gap-4 w-full"
data-video-player
data-stream-url="/watch/proxy/stream"
data-preview-map-url="/watch/proxy/preview-map"
data-current-episode={ data.CurrentEpisode }
data-initial-mode={ data.InitialMode }
data-available-modes={ toJSON(data.AvailableModes) }
data-mode-sources={ toJSON(data.ModeSources) }
@@ -216,6 +218,12 @@ templ VideoPlayer(data WatchPageData) {
</button>
<div class="absolute inset-x-0 bottom-0 from-black/90 to-transparent bg-gradient-to-t px-4 pb-4 pt-12 opacity-0 transition-opacity group-hover:opacity-100 group-[.show-controls]:opacity-100">
<div data-progress-wrap class="group/progress relative mb-5 h-1 cursor-pointer bg-white/30">
<div data-preview-popover class="pointer-events-none absolute bottom-[calc(100%+10px)] left-0 z-40 hidden -translate-x-1/2">
<div class="overflow-hidden border border-white/20 bg-black shadow-xl">
<div data-preview-frame class="h-[90px] w-[160px] bg-black"></div>
<div data-preview-time class="bg-white px-2 py-1 text-center text-xs font-semibold text-black tabular-nums">00:00</div>
</div>
</div>
<div data-segments class="pointer-events-none absolute inset-0 z-20"></div>
<div data-progress class="pointer-events-none absolute inset-y-0 left-0 z-10 bg-blue-500"></div>
<div data-scrubber class="pointer-events-none absolute -top-1.5 z-30 h-5 w-5 rounded-full -translate-x-1/2 bg-white opacity-0 transition-opacity group-hover/progress:opacity-100" style="left: 0%"></div>