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

feat: add skip segment editor UI

Browse Source
This commit is contained in:
mkelvers
2026-05-19 11:02:59 +02:00
parent 1a9e1d60bc
commit 5d21f6f4de
3 changed files with 238 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
templates/watch.gohtml
View File

@@ -53,6 +53,73 @@
{{template "video_player" dict "WatchData" .WatchData "TotalEpisodes" $totalEpisodes}}
</div>
<div class="mt-3 flex justify-end" data-segment-editor-root>
<div class="relative">
<button type="button" data-segment-editor-toggle class="inline-flex items-center gap-2 px-4 py-2 bg-background-surface hover:bg-surface-hover text-sm text-foreground-muted transition-colors ring-1 ring-border">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
Add missing segment
</button>
<div data-segment-editor class="hidden absolute right-0 bottom-full mb-2 z-50 w-[520px] max-w-[calc(100vw-2rem)] max-h-[min(420px,60vh)] overflow-auto bg-background-surface ring-1 ring-border shadow-soft">
<div class="flex items-center justify-between px-4 py-3 border-b border-border">
<div class="flex flex-col">
<span class="text-sm font-semibold text-foreground">Segment capture</span>
<span class="text-xs text-foreground-muted">Mark start (position 1), then end (position 2), then save.</span>
</div>
<button type="button" data-segment-editor-close class="text-sm text-foreground-muted hover:text-foreground transition-colors">Close</button>
</div>
<div class="px-4 py-4 flex flex-col gap-4">
<div class="flex items-center gap-3">
<label class="text-xs text-foreground-muted w-12">Type</label>
<input type="hidden" data-segment-type-value value="ed" />
<ui-dropdown class="relative block flex-1" data-align="left" data-width="w-full">
<div data-trigger>
<button type="button" data-segment-type-trigger class="w-full flex items-center justify-between px-3 py-2 bg-background-button border border-border text-sm text-foreground hover:bg-surface-hover transition-colors">
<span data-segment-type-label>Ending (ED)</span>
<svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button shadow-soft ring-1 ring-border">
<div class="flex flex-col py-1">
<button type="button" data-segment-type-option data-value="ed" class="flex w-full items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-surface-hover">
<span class="text-sm text-foreground">Ending (ED)</span>
</button>
<button type="button" data-segment-type-option data-value="op" class="flex w-full items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-surface-hover">
<span class="text-sm text-foreground">Opening (OP)</span>
</button>
</div>
</div>
</ui-dropdown>
</div>
<div class="grid grid-cols-2 gap-3">
<button type="button" data-segment-mark-start class="px-3 py-2 bg-accent/15 hover:bg-accent/20 text-sm text-accent transition-colors ring-1 ring-accent/30">Mark start</button>
<button type="button" data-segment-mark-end class="px-3 py-2 bg-accent/15 hover:bg-accent/20 text-sm text-accent transition-colors ring-1 ring-accent/30">Mark end</button>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="flex items-center justify-between px-3 py-2 bg-background-button ring-1 ring-border">
<span class="text-xs text-foreground-muted">Start</span>
<span data-segment-start class="text-sm tabular-nums text-foreground">—</span>
</div>
<div class="flex items-center justify-between px-3 py-2 bg-background-button ring-1 ring-border">
<span class="text-xs text-foreground-muted">End</span>
<span data-segment-end class="text-sm tabular-nums text-foreground">—</span>
</div>
</div>
<div class="flex items-center justify-between">
<button type="button" data-segment-reset class="text-sm text-foreground-muted hover:text-foreground transition-colors">Reset</button>
<button type="button" data-segment-save class="px-4 py-2 bg-accent text-black text-sm font-semibold hover:opacity-90 transition-opacity">Save</button>
</div>
<div data-segment-error class="hidden text-sm text-red-400"></div>
</div>
</div>
</div>
</div>
<div class="flex items-center mt-4">
<div class="flex gap-2">
{{$prevEp := sub (int $currentEpID) 1}}