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:
npeter83
parent
99dfa7691c
commit
fcb77ac2e1
5 changed files with 161 additions and 60 deletions
|
|
@ -1,13 +1,17 @@
|
|||
import { useEffect, useRef } from "react";
|
||||
import { ExternalLink, X } from "lucide-react";
|
||||
import type { Video } from "../lib/api";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Check, CheckCheck, X } from "lucide-react";
|
||||
import { api, type Video } from "../lib/api";
|
||||
import { formatDuration, formatViews, relativeTime } from "../lib/format";
|
||||
|
||||
// Experiment (branch experiment/inline-player): play the video in-app via the
|
||||
// YouTube IFrame Player API (not a bare embed) so we can read playback position
|
||||
// and resume where the user left off. The modal closes via the header X button,
|
||||
// the backdrop, or ESC (ESC only while focus is on our page, not inside the
|
||||
// cross-origin player iframe — a browser security boundary we can't cross).
|
||||
// and resume where the user left off. The modal closes via the in-card Close
|
||||
// button, the backdrop, or ESC (ESC only while focus is on our page, not inside
|
||||
// the cross-origin player iframe — a browser security boundary we can't cross).
|
||||
|
||||
// How close to the end (seconds) counts as "finished" → auto-mark watched.
|
||||
const FINISH_MARGIN = 10;
|
||||
|
||||
// --- IFrame Player API loader (singleton) ---
|
||||
let apiPromise: Promise<any> | null = null;
|
||||
|
|
@ -32,7 +36,7 @@ function loadYouTubeApi(): Promise<any> {
|
|||
const posKey = (id: string) => `subfeed:player-pos:${id}`;
|
||||
function savePos(id: string, seconds: number, duration: number): void {
|
||||
// Don't store trivially-early or near-finished positions (start fresh next time).
|
||||
if (!Number.isFinite(seconds) || seconds < 5 || (duration > 0 && seconds > duration - 10)) {
|
||||
if (!Number.isFinite(seconds) || seconds < 5 || (duration > 0 && seconds > duration - FINISH_MARGIN)) {
|
||||
localStorage.removeItem(posKey(id));
|
||||
return;
|
||||
}
|
||||
|
|
@ -47,12 +51,34 @@ function loadPos(id: string): number {
|
|||
export default function PlayerModal({
|
||||
video,
|
||||
onClose,
|
||||
onState,
|
||||
}: {
|
||||
video: Video;
|
||||
onClose: () => void;
|
||||
onState: (id: string, status: string) => void;
|
||||
}) {
|
||||
const mountRef = useRef<HTMLDivElement | null>(null);
|
||||
const playerRef = useRef<any>(null);
|
||||
const autoMarkedRef = useRef(false);
|
||||
|
||||
// Local mirror of watch status so the toggle reacts instantly; changes are
|
||||
// propagated to the feed (and server) via onState.
|
||||
const [status, setStatus] = useState(video.status);
|
||||
const watched = status === "watched";
|
||||
const setWatched = (on: boolean) => {
|
||||
const next = on ? "watched" : "new";
|
||||
setStatus(next);
|
||||
onState(video.id, next);
|
||||
};
|
||||
|
||||
// Lazy description (fetched only when the title is hovered).
|
||||
const [showDesc, setShowDesc] = useState(false);
|
||||
const detail = useQuery({
|
||||
queryKey: ["video-detail", video.id],
|
||||
queryFn: () => api.videoDetail(video.id),
|
||||
enabled: showDesc,
|
||||
staleTime: 5 * 60_000,
|
||||
});
|
||||
|
||||
// ESC + background scroll lock.
|
||||
useEffect(() => {
|
||||
|
|
@ -68,15 +94,27 @@ export default function PlayerModal({
|
|||
};
|
||||
}, [onClose]);
|
||||
|
||||
// Create the player, resume from the saved position, and persist progress.
|
||||
// Create the player, resume from the saved position, persist progress, and
|
||||
// auto-mark watched once playback reaches the end.
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const id = video.id;
|
||||
|
||||
const maybeAutoWatch = (current: number, duration: number) => {
|
||||
if (autoMarkedRef.current || duration <= 0) return;
|
||||
if (current > duration - FINISH_MARGIN) {
|
||||
autoMarkedRef.current = true;
|
||||
setWatched(true);
|
||||
}
|
||||
};
|
||||
const persist = () => {
|
||||
const p = playerRef.current;
|
||||
if (!p || typeof p.getCurrentTime !== "function") return;
|
||||
try {
|
||||
savePos(id, p.getCurrentTime(), typeof p.getDuration === "function" ? p.getDuration() : 0);
|
||||
const cur = p.getCurrentTime();
|
||||
const dur = typeof p.getDuration === "function" ? p.getDuration() : 0;
|
||||
maybeAutoWatch(cur, dur);
|
||||
savePos(id, cur, dur);
|
||||
} catch {
|
||||
/* player may be tearing down */
|
||||
}
|
||||
|
|
@ -96,10 +134,19 @@ export default function PlayerModal({
|
|||
origin: window.location.origin,
|
||||
playsinline: 1,
|
||||
},
|
||||
events: {
|
||||
onStateChange: (e: any) => {
|
||||
// 0 === ended → mark watched even if the timer hasn't fired yet.
|
||||
if (e?.data === 0 && !autoMarkedRef.current) {
|
||||
autoMarkedRef.current = true;
|
||||
setWatched(true);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Periodic checkpoint so progress survives a crash/refresh, not just a clean close.
|
||||
// Periodic checkpoint so progress (and auto-watch) survive a crash/refresh.
|
||||
const timer = window.setInterval(persist, 5000);
|
||||
|
||||
return () => {
|
||||
|
|
@ -116,6 +163,7 @@ export default function PlayerModal({
|
|||
}
|
||||
playerRef.current = null;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [video.id]);
|
||||
|
||||
return (
|
||||
|
|
@ -129,71 +177,91 @@ export default function PlayerModal({
|
|||
className="glass-card relative w-full max-w-4xl max-h-full overflow-y-auto rounded-2xl shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header bar — keeps our close button off the player's own top-right controls. */}
|
||||
<div className="flex items-center justify-between gap-3 px-4 h-12 border-b border-border">
|
||||
<span className="truncate text-sm font-medium text-muted">{video.title}</span>
|
||||
<button
|
||||
onClick={onClose}
|
||||
title="Close (Esc)"
|
||||
aria-label="Close"
|
||||
className="shrink-0 p-2 -mr-2 rounded-full text-muted hover:text-fg hover:bg-surface transition"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="aspect-video w-full bg-black">
|
||||
<div className="aspect-video w-full bg-black rounded-t-2xl overflow-hidden">
|
||||
<div ref={mountRef} className="w-full h-full" />
|
||||
</div>
|
||||
|
||||
<div className="p-4 sm:p-5">
|
||||
<h2 className="text-lg font-semibold leading-snug">{video.title}</h2>
|
||||
{/* Title row — title (with hover description) on the left, Close on the right. */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className="relative min-w-0 flex-1"
|
||||
onMouseEnter={() => setShowDesc(true)}
|
||||
onMouseLeave={() => setShowDesc(false)}
|
||||
>
|
||||
<h2 className="text-lg font-semibold leading-snug cursor-default">
|
||||
{video.title}
|
||||
</h2>
|
||||
{showDesc && (
|
||||
<div className="absolute left-0 top-full mt-2 z-10 w-full max-w-2xl glass-card rounded-xl shadow-2xl p-4">
|
||||
<div className="text-xs uppercase tracking-wide text-muted mb-2">
|
||||
Description
|
||||
</div>
|
||||
{detail.isLoading ? (
|
||||
<div className="text-sm text-muted">Loading…</div>
|
||||
) : detail.data?.description ? (
|
||||
<div className="text-sm whitespace-pre-wrap max-h-64 overflow-y-auto leading-relaxed">
|
||||
{detail.data.description}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted">No description.</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
title="Close (Esc)"
|
||||
className="shrink-0 inline-flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition"
|
||||
>
|
||||
Close
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Channel + meta on one line, with the watched toggle pushed to the right. */}
|
||||
<div className="flex items-center gap-3 mt-3">
|
||||
{video.channel_thumbnail && (
|
||||
<img
|
||||
src={video.channel_thumbnail}
|
||||
alt=""
|
||||
className="w-10 h-10 rounded-full shrink-0"
|
||||
className="w-9 h-9 rounded-full shrink-0"
|
||||
/>
|
||||
)}
|
||||
<a
|
||||
href={video.channel_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="font-medium hover:text-accent truncate"
|
||||
className="font-medium hover:text-accent shrink-0"
|
||||
>
|
||||
{video.channel_title}
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted min-w-0">
|
||||
{video.view_count != null && <span>· {formatViews(video.view_count)} views</span>}
|
||||
<span>· {relativeTime(video.published_at)}</span>
|
||||
{video.duration_seconds != null && (
|
||||
<span>· {formatDuration(video.duration_seconds)}</span>
|
||||
)}
|
||||
{video.live_status === "was_live" && (
|
||||
<span className="bg-accent text-accent-fg text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded">
|
||||
stream
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted mt-3">
|
||||
{video.view_count != null && <span>{formatViews(video.view_count)} views</span>}
|
||||
{video.view_count != null && <span>·</span>}
|
||||
<span>{relativeTime(video.published_at)}</span>
|
||||
{video.duration_seconds != null && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{formatDuration(video.duration_seconds)}</span>
|
||||
</>
|
||||
)}
|
||||
{video.live_status === "was_live" && (
|
||||
<span className="bg-accent text-accent-fg text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded">
|
||||
stream
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<a
|
||||
href={video.watch_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-2 text-sm px-3 py-2 rounded-lg bg-accent text-accent-fg shadow-sm hover:opacity-90 transition"
|
||||
<button
|
||||
onClick={() => setWatched(!watched)}
|
||||
title={watched ? "Watched — click to unmark" : "Mark watched"}
|
||||
className={
|
||||
"ml-auto shrink-0 inline-flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg transition " +
|
||||
(watched
|
||||
? "bg-accent text-accent-fg shadow-sm hover:opacity-90"
|
||||
: "text-muted hover:text-fg hover:bg-surface border border-border")
|
||||
}
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
Open on YouTube
|
||||
</a>
|
||||
{watched ? <CheckCheck className="w-4 h-4" /> : <Check className="w-4 h-4" />}
|
||||
{watched ? "Watched" : "Mark watched"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue