08776b17d0
Channel/account avatars come from Google's image CDNs (yt3.ggpht.com, lh3.googleusercontent.com). On a feed page dozens load at once; the CDN rate-limits the referrer-bearing burst (429), so a random subset rendered the browser's broken-image icon (the URLs themselves are valid — verified 200). Add a shared <Avatar> that sets referrerPolicy="no-referrer" (which the CDNs serve without throttling) and falls back to a neutral initial placeholder on error instead of the broken-image icon. Use it for video-card, player, channel manager, header and settings avatars.
534 lines
20 KiB
TypeScript
534 lines
20 KiB
TypeScript
import { useEffect, useRef, useState, type ReactNode } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { ArrowLeft, Check, CheckCheck, X } from "lucide-react";
|
|
import Avatar from "./Avatar";
|
|
import { api, type Video } from "../lib/api";
|
|
import { formatDuration, formatViews, relativeTime } from "../lib/format";
|
|
|
|
// Turn a description into clickable nodes:
|
|
// - bare timestamps (mm:ss / hh:mm:ss) → seek the inline player
|
|
// - a YouTube link to the *current* video → seek (to its t= if any)
|
|
// - a YouTube link to *another* video → load it in the inline player
|
|
// - emails → mailto:, hashtags → YouTube's hashtag page, other URLs → new tab
|
|
const URL_RE = /(https?:\/\/[^\s<>]+)/g;
|
|
// One pass over plain text for the three inline token kinds (email | hashtag | timestamp).
|
|
const INLINE_RE =
|
|
/([A-Za-z0-9._%+-]+@[A-Za-z0-9-]+\.[A-Za-z0-9.-]+)|(#[\p{L}\p{N}_]+)|(\b(?:\d{1,2}:)?\d{1,2}:\d{2}\b)/gu;
|
|
|
|
function tsToSeconds(ts: string): number {
|
|
const parts = ts.split(":").map((n) => parseInt(n, 10));
|
|
return parts.length === 3
|
|
? parts[0] * 3600 + parts[1] * 60 + parts[2]
|
|
: parts[0] * 60 + parts[1];
|
|
}
|
|
|
|
// Parse a YouTube `t`/`start` param: "90", "90s", or "1h2m3s".
|
|
function parseStart(t: string | null): number | null {
|
|
if (!t) return null;
|
|
if (/^\d+$/.test(t)) return parseInt(t, 10) || null;
|
|
const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/);
|
|
if (!m) return null;
|
|
const total =
|
|
parseInt(m[1] || "0", 10) * 3600 +
|
|
parseInt(m[2] || "0", 10) * 60 +
|
|
parseInt(m[3] || "0", 10);
|
|
return total || null;
|
|
}
|
|
|
|
// Extract a video id (+ optional start) from a YouTube URL, else null.
|
|
function parseYouTube(url: string): { id: string; start: number | null } | null {
|
|
let u: URL;
|
|
try {
|
|
u = new URL(url);
|
|
} catch {
|
|
return null;
|
|
}
|
|
const host = u.hostname.replace(/^www\./, "");
|
|
let id: string | null = null;
|
|
if (host === "youtu.be") {
|
|
id = u.pathname.slice(1) || null;
|
|
} else if (host === "youtube.com" || host === "m.youtube.com" || host === "music.youtube.com") {
|
|
if (u.pathname === "/watch") id = u.searchParams.get("v");
|
|
else {
|
|
const m = u.pathname.match(/^\/(?:shorts|embed|live)\/([^/?#]+)/);
|
|
if (m) id = m[1];
|
|
}
|
|
}
|
|
if (!id) return null;
|
|
return { id, start: parseStart(u.searchParams.get("t") || u.searchParams.get("start")) };
|
|
}
|
|
|
|
function renderDescription(
|
|
text: string,
|
|
opts: {
|
|
currentId: string;
|
|
onSeek: (seconds: number) => void;
|
|
onLoadVideo: (id: string, start: number | null) => void;
|
|
}
|
|
): ReactNode[] {
|
|
const out: ReactNode[] = [];
|
|
let key = 0;
|
|
const linkCls = "text-accent hover:underline break-all";
|
|
// Tidy YouTube descriptions: drop trailing spaces and remove blank lines entirely
|
|
// (they're just noise in the popover), keeping single line breaks.
|
|
const clean = text.replace(/[ \t]+\n/g, "\n").replace(/\n{2,}/g, "\n").trim();
|
|
for (const chunk of clean.split(URL_RE)) {
|
|
if (/^https?:\/\//.test(chunk)) {
|
|
const href = chunk.replace(/[.,;:!?)\]]+$/, "");
|
|
const yt = parseYouTube(href);
|
|
if (yt) {
|
|
const sameVideo = yt.id === opts.currentId;
|
|
out.push(
|
|
<button
|
|
key={key++}
|
|
onClick={() =>
|
|
sameVideo ? opts.onSeek(yt.start ?? 0) : opts.onLoadVideo(yt.id, yt.start)
|
|
}
|
|
className={linkCls}
|
|
title={sameVideo ? "Jump to this time" : "Play in the in-app player"}
|
|
>
|
|
{href}
|
|
</button>
|
|
);
|
|
} else {
|
|
out.push(
|
|
<a key={key++} href={href} target="_blank" rel="noreferrer" className={linkCls}>
|
|
{href}
|
|
</a>
|
|
);
|
|
}
|
|
continue;
|
|
}
|
|
// Plain text: pull out emails, hashtags and bare timestamps.
|
|
INLINE_RE.lastIndex = 0;
|
|
let last = 0;
|
|
let m: RegExpExecArray | null;
|
|
while ((m = INLINE_RE.exec(chunk))) {
|
|
if (m.index > last) out.push(<span key={key++}>{chunk.slice(last, m.index)}</span>);
|
|
if (m[1]) {
|
|
// Email — trim trailing punctuation the domain rule may have swallowed.
|
|
const email = m[1].replace(/[.,;:]+$/, "");
|
|
out.push(
|
|
<a key={key++} href={`mailto:${email}`} className={linkCls}>
|
|
{email}
|
|
</a>
|
|
);
|
|
if (m[1].length > email.length) out.push(<span key={key++}>{m[1].slice(email.length)}</span>);
|
|
} else if (m[2]) {
|
|
// Hashtag → YouTube's hashtag feed (mirrors native YouTube behavior).
|
|
const tag = m[2].slice(1);
|
|
out.push(
|
|
<a
|
|
key={key++}
|
|
href={`https://www.youtube.com/hashtag/${encodeURIComponent(tag)}`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={linkCls}
|
|
>
|
|
{m[2]}
|
|
</a>
|
|
);
|
|
} else {
|
|
const ts = m[3];
|
|
out.push(
|
|
<button
|
|
key={key++}
|
|
onClick={() => opts.onSeek(tsToSeconds(ts))}
|
|
className="text-accent hover:underline"
|
|
>
|
|
{ts}
|
|
</button>
|
|
);
|
|
}
|
|
last = m.index + m[0].length;
|
|
}
|
|
if (last < chunk.length) out.push(<span key={key++}>{chunk.slice(last)}</span>);
|
|
}
|
|
return out;
|
|
}
|
|
|
|
// 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 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;
|
|
function loadYouTubeApi(): Promise<any> {
|
|
if (apiPromise) return apiPromise;
|
|
apiPromise = new Promise((resolve) => {
|
|
const w = window as any;
|
|
if (w.YT && w.YT.Player) return resolve(w.YT);
|
|
const prev = w.onYouTubeIframeAPIReady;
|
|
w.onYouTubeIframeAPIReady = () => {
|
|
if (typeof prev === "function") prev();
|
|
resolve(w.YT);
|
|
};
|
|
const tag = document.createElement("script");
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
document.head.appendChild(tag);
|
|
});
|
|
return apiPromise;
|
|
}
|
|
|
|
// --- Per-video resume position, persisted in localStorage so it survives a refresh ---
|
|
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 - FINISH_MARGIN)) {
|
|
localStorage.removeItem(posKey(id));
|
|
return;
|
|
}
|
|
localStorage.setItem(posKey(id), String(Math.floor(seconds)));
|
|
}
|
|
function loadPos(id: string): number {
|
|
const v = localStorage.getItem(posKey(id));
|
|
const n = v ? parseInt(v, 10) : 0;
|
|
return Number.isFinite(n) && n > 0 ? n : 0;
|
|
}
|
|
|
|
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);
|
|
|
|
// The player can navigate to other videos (YouTube links in a description). The
|
|
// currently-playing id may differ from the feed video we opened with.
|
|
const [currentVideoId, setCurrentVideoId] = useState(video.id);
|
|
const currentIdRef = useRef(video.id);
|
|
const navigated = currentVideoId !== video.id;
|
|
// Title/author of a navigated-to video, read from the player (free, no API call).
|
|
const [liveData, setLiveData] = useState<{ title?: string; author?: string } | null>(null);
|
|
|
|
const loadVideo = (id: string, start: number | null) => {
|
|
const p = playerRef.current;
|
|
if (!p || typeof p.loadVideoById !== "function") return;
|
|
const startSeconds = start != null ? start : loadPos(id);
|
|
p.loadVideoById({ videoId: id, startSeconds: startSeconds || 0 });
|
|
currentIdRef.current = id;
|
|
setCurrentVideoId(id);
|
|
setLiveData(null);
|
|
};
|
|
|
|
// 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);
|
|
};
|
|
|
|
const seekTo = (seconds: number) => {
|
|
const p = playerRef.current;
|
|
if (p && typeof p.seekTo === "function") {
|
|
p.seekTo(seconds, true);
|
|
p.playVideo?.();
|
|
}
|
|
};
|
|
|
|
// Lazy description (fetched only when the title is hovered). The popover is
|
|
// portaled to <body> with fixed positioning so the modal card's overflow-y-auto
|
|
// can't clip it. A small close grace lets the mouse travel title → popover.
|
|
const [showDesc, setShowDesc] = useState(false);
|
|
// `bottom` anchors the popover just above the title so it grows upward (over the
|
|
// player) instead of downward off-screen / behind the OS taskbar.
|
|
const [descRect, setDescRect] = useState<{ left: number; bottom: number; width: number } | null>(
|
|
null
|
|
);
|
|
const titleRef = useRef<HTMLSpanElement | null>(null);
|
|
const closeTimer = useRef<number | undefined>(undefined);
|
|
const openDesc = () => {
|
|
window.clearTimeout(closeTimer.current);
|
|
const el = titleRef.current;
|
|
if (el) {
|
|
const r = el.getBoundingClientRect();
|
|
const width = Math.min(560, window.innerWidth - 32);
|
|
const left = Math.max(16, Math.min(r.left, window.innerWidth - width - 16));
|
|
setDescRect({ left, bottom: window.innerHeight - r.top + 8, width });
|
|
}
|
|
setShowDesc(true);
|
|
};
|
|
const scheduleCloseDesc = () => {
|
|
closeTimer.current = window.setTimeout(() => setShowDesc(false), 150);
|
|
};
|
|
const detail = useQuery({
|
|
queryKey: ["video-detail", currentVideoId],
|
|
queryFn: () => api.videoDetail(currentVideoId),
|
|
// On hover (for the description) and eagerly when navigated, so we can link the
|
|
// linked video's channel. Both share the one cached result.
|
|
enabled: showDesc || navigated,
|
|
staleTime: 5 * 60_000,
|
|
});
|
|
|
|
// ESC + background scroll lock.
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onClose();
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
const prevOverflow = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
window.removeEventListener("keydown", onKey);
|
|
document.body.style.overflow = prevOverflow;
|
|
window.clearTimeout(closeTimer.current);
|
|
};
|
|
}, [onClose]);
|
|
|
|
// 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;
|
|
|
|
// Auto-watch only applies to the feed video we opened with — not to other
|
|
// videos the player navigated to via description links.
|
|
const maybeAutoWatch = (current: number, duration: number) => {
|
|
if (autoMarkedRef.current || duration <= 0 || currentIdRef.current !== id) 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 {
|
|
const cur = p.getCurrentTime();
|
|
const dur = typeof p.getDuration === "function" ? p.getDuration() : 0;
|
|
maybeAutoWatch(cur, dur);
|
|
savePos(currentIdRef.current, cur, dur); // key progress by what's actually playing
|
|
} catch {
|
|
/* player may be tearing down */
|
|
}
|
|
};
|
|
|
|
loadYouTubeApi().then((YT) => {
|
|
if (cancelled || !mountRef.current) return;
|
|
playerRef.current = new YT.Player(mountRef.current, {
|
|
width: "100%",
|
|
height: "100%",
|
|
videoId: id,
|
|
playerVars: {
|
|
autoplay: 1,
|
|
start: loadPos(id) || undefined,
|
|
rel: 0, // limit "related" to the same channel (full removal is no longer possible)
|
|
enablejsapi: 1,
|
|
origin: window.location.origin,
|
|
playsinline: 1,
|
|
},
|
|
events: {
|
|
onStateChange: (e: any) => {
|
|
// 1 === playing → sync the navigated-to video's title/author for display.
|
|
if (e?.data === 1) {
|
|
const p = playerRef.current;
|
|
const d = p && typeof p.getVideoData === "function" ? p.getVideoData() : null;
|
|
if (d) setLiveData({ title: d.title, author: d.author });
|
|
}
|
|
// 0 === ended → mark watched (guarded to the feed video inside maybeAutoWatch).
|
|
if (e?.data === 0 && !autoMarkedRef.current && currentIdRef.current === id) {
|
|
autoMarkedRef.current = true;
|
|
setWatched(true);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
// Periodic checkpoint so progress (and auto-watch) survive a crash/refresh.
|
|
const timer = window.setInterval(persist, 5000);
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
window.clearInterval(timer);
|
|
persist();
|
|
const p = playerRef.current;
|
|
if (p && typeof p.destroy === "function") {
|
|
try {
|
|
p.destroy();
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
}
|
|
playerRef.current = null;
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [video.id]);
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div
|
|
className="glass-card relative w-full max-w-4xl max-h-full overflow-y-auto rounded-2xl shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<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">
|
|
{/* Title row — title (with hover description) on the left, Close on the right. */}
|
|
<div className="flex items-start gap-3">
|
|
<h2 className="min-w-0 flex-1 text-lg font-semibold leading-snug">
|
|
{/* Hover target is the text itself (inline), not the whole row. */}
|
|
<span
|
|
ref={titleRef}
|
|
className="cursor-default"
|
|
onMouseEnter={openDesc}
|
|
onMouseLeave={scheduleCloseDesc}
|
|
>
|
|
{navigated ? liveData?.title ?? "Loading…" : video.title}
|
|
</span>
|
|
</h2>
|
|
{navigated && (
|
|
<button
|
|
onClick={() => loadVideo(video.id, null)}
|
|
title="Back to the original video"
|
|
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"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Back
|
|
</button>
|
|
)}
|
|
{showDesc &&
|
|
descRect &&
|
|
createPortal(
|
|
<div
|
|
className="fixed z-[60] bg-surface border border-border rounded-xl shadow-2xl p-4"
|
|
style={{
|
|
left: descRect.left,
|
|
bottom: descRect.bottom,
|
|
width: descRect.width,
|
|
}}
|
|
onMouseEnter={openDesc}
|
|
onMouseLeave={scheduleCloseDesc}
|
|
>
|
|
<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 break-words max-h-64 overflow-y-auto leading-relaxed">
|
|
{renderDescription(detail.data.description, {
|
|
currentId: currentVideoId,
|
|
onSeek: seekTo,
|
|
onLoadVideo: loadVideo,
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-muted">No description.</div>
|
|
)}
|
|
</div>,
|
|
document.body
|
|
)}
|
|
<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.
|
|
When navigated to a linked video we only have its author (from the player),
|
|
so we show that as plain text and hide feed-video-specific bits. */}
|
|
<div className="flex items-center gap-3 mt-3">
|
|
{!navigated && (
|
|
<Avatar
|
|
src={video.channel_thumbnail}
|
|
fallback={video.channel_title ?? ""}
|
|
className="w-9 h-9 rounded-full shrink-0"
|
|
/>
|
|
)}
|
|
{navigated ? (
|
|
detail.data?.channel_id ? (
|
|
<a
|
|
href={`https://www.youtube.com/channel/${detail.data.channel_id}`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="font-medium hover:text-accent shrink-0"
|
|
>
|
|
{liveData?.author ?? detail.data.channel_title ?? "Channel"}
|
|
</a>
|
|
) : (
|
|
<span className="font-medium shrink-0">{liveData?.author ?? ""}</span>
|
|
)
|
|
) : (
|
|
<a
|
|
href={video.channel_url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="font-medium hover:text-accent shrink-0"
|
|
>
|
|
{video.channel_title}
|
|
</a>
|
|
)}
|
|
{!navigated ? (
|
|
<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>
|
|
) : (
|
|
// Linked video's stats come from the (already-fetched) video detail.
|
|
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted min-w-0">
|
|
{detail.data?.view_count != null && (
|
|
<span>· {formatViews(detail.data.view_count)} views</span>
|
|
)}
|
|
{detail.data?.published_at && <span>· {relativeTime(detail.data.published_at)}</span>}
|
|
{detail.data?.duration_seconds != null && (
|
|
<span>· {formatDuration(detail.data.duration_seconds)}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{!navigated && (
|
|
<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")
|
|
}
|
|
>
|
|
{watched ? <CheckCheck className="w-4 h-4" /> : <Check className="w-4 h-4" />}
|
|
{watched ? "Watched" : "Mark watched"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|