feat(player): watched controls, compact layout, description popover
- Watched: an explicit toggle in the modal (Mark watched / Watched→unmark) plus
auto-mark when playback reaches the end (within 10s, or on the ended event).
- Compact layout: drop the header bar and the redundant 'Open on YouTube' button
(the embed's own YouTube logo already jumps out); Close moves to the title row,
channel + meta share one line — fits without a scrollbar at higher zoom.
- Card actions reflect status: watched shows a double-check, saved a filled
bookmark, with matching tooltips.
- Description: new GET /api/videos/{id} exposes the already-stored description,
shown in a popover when hovering the modal title (fetched lazily).
This commit is contained in:
parent
99dfa7691c
commit
fcb77ac2e1
5 changed files with 161 additions and 60 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { Bookmark, Check, Eye, EyeOff, ListFilter } from "lucide-react";
|
||||
import { Bookmark, Check, CheckCheck, Eye, EyeOff, ListFilter } from "lucide-react";
|
||||
import clsx from "clsx";
|
||||
import type { Video } from "../lib/api";
|
||||
import { formatDuration, formatViews, relativeTime } from "../lib/format";
|
||||
|
|
@ -21,20 +21,24 @@ function Actions({
|
|||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition">
|
||||
<button
|
||||
onClick={act("watched")}
|
||||
title="Mark watched"
|
||||
title={video.status === "watched" ? "Watched — click to unmark" : "Mark watched"}
|
||||
className={clsx(
|
||||
"p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg",
|
||||
video.status === "watched" && "text-accent"
|
||||
)}
|
||||
>
|
||||
<Check className="w-4 h-4" />
|
||||
{video.status === "watched" ? (
|
||||
<CheckCheck className="w-4 h-4" />
|
||||
) : (
|
||||
<Check className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={act("saved")}
|
||||
title="Save for later"
|
||||
title={video.status === "saved" ? "Saved — click to remove" : "Save for later"}
|
||||
className={clsx(
|
||||
"p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg",
|
||||
video.status === "saved" && "text-accent"
|
||||
video.status === "saved" && "fill-current text-accent"
|
||||
)}
|
||||
>
|
||||
<Bookmark className="w-4 h-4" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue