feat(feed): resume progress bar, play/continue/restart, in-progress filter
Video cards show a resume progress bar for started-but-unfinished videos and a hover overlay: Play on every card, Continue + Restart on in-progress ones. The in-app player now resumes from (and checkpoints to) the server position instead of localStorage, accepts an explicit startAt (Restart -> 0), and refreshes the feed on close so the card bar reflects the session. Sidebar gains an 'In progress' show filter.
This commit is contained in:
npeter83
parent
686c40cbb9
commit
04c971f623
5 changed files with 114 additions and 30 deletions
|
|
@ -16,6 +16,9 @@ function matchesView(status: string, show: string): boolean {
|
|||
case "saved":
|
||||
return status === "saved";
|
||||
case "unwatched":
|
||||
case "in_progress":
|
||||
// (in_progress is further narrowed server-side by resume position; here we only
|
||||
// need to drop a card once it's optimistically marked watched/hidden.)
|
||||
return status !== "watched" && status !== "hidden";
|
||||
default:
|
||||
return status !== "hidden"; // all
|
||||
|
|
@ -36,9 +39,17 @@ export default function Feed({
|
|||
onOpenWizard: () => void;
|
||||
}) {
|
||||
const [overrides, setOverrides] = useState<Record<string, string>>({});
|
||||
const [activeVideo, setActiveVideo] = useState<Video | null>(null);
|
||||
// The open player: which video and where to start (null = resume from saved position).
|
||||
const [activeVideo, setActiveVideo] = useState<{ video: Video; startAt: number | null } | null>(
|
||||
null
|
||||
);
|
||||
const qc = useQueryClient();
|
||||
|
||||
const openVideo = useCallback(
|
||||
(video: Video, startAt: number | null = null) => setActiveVideo({ video, startAt }),
|
||||
[]
|
||||
);
|
||||
|
||||
const query = useInfiniteQuery({
|
||||
queryKey: ["feed", filters],
|
||||
queryFn: ({ pageParam }) => api.feed(filters, pageParam as number, PAGE),
|
||||
|
|
@ -166,7 +177,7 @@ export default function Feed({
|
|||
view="grid"
|
||||
onState={onState}
|
||||
onChannelFilter={onChannelFilter}
|
||||
onOpen={setActiveVideo}
|
||||
onOpen={openVideo}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -179,14 +190,15 @@ export default function Feed({
|
|||
view="list"
|
||||
onState={onState}
|
||||
onChannelFilter={onChannelFilter}
|
||||
onOpen={setActiveVideo}
|
||||
onOpen={openVideo}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{activeVideo && (
|
||||
<PlayerModal
|
||||
video={activeVideo}
|
||||
video={activeVideo.video}
|
||||
startAt={activeVideo.startAt}
|
||||
onClose={() => setActiveVideo(null)}
|
||||
onState={onState}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { ArrowLeft, Check, CheckCheck, X } from "lucide-react";
|
||||
import Avatar from "./Avatar";
|
||||
import { api, type Video } from "../lib/api";
|
||||
|
|
@ -176,31 +176,22 @@ function loadYouTubeApi(): Promise<any> {
|
|||
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,
|
||||
startAt,
|
||||
onClose,
|
||||
onState,
|
||||
}: {
|
||||
video: Video;
|
||||
// Where to start the opened video: a number of seconds (0 = Restart), or null/undefined
|
||||
// to resume from the server-saved position carried on the video.
|
||||
startAt?: number | null;
|
||||
onClose: () => void;
|
||||
onState: (id: string, status: string) => void;
|
||||
}) {
|
||||
const qc = useQueryClient();
|
||||
// Resume point for the video we opened with.
|
||||
const resumeAt = startAt != null ? startAt : video.position_seconds || 0;
|
||||
const mountRef = useRef<HTMLDivElement | null>(null);
|
||||
const playerRef = useRef<any>(null);
|
||||
const autoMarkedRef = useRef(false);
|
||||
|
|
@ -216,7 +207,8 @@ export default function PlayerModal({
|
|||
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);
|
||||
// Explicit start wins; otherwise resume the opened video, start others at 0.
|
||||
const startSeconds = start != null ? start : id === video.id ? resumeAt : 0;
|
||||
p.loadVideoById({ videoId: id, startSeconds: startSeconds || 0 });
|
||||
currentIdRef.current = id;
|
||||
setCurrentVideoId(id);
|
||||
|
|
@ -305,14 +297,18 @@ export default function PlayerModal({
|
|||
setWatched(true);
|
||||
}
|
||||
};
|
||||
const persist = () => {
|
||||
const persist = (): Promise<unknown> | void => {
|
||||
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
|
||||
// Only checkpoint the feed video we opened with — a navigated-to video may not
|
||||
// be in this user's library, so the server would 404 on it.
|
||||
if (currentIdRef.current === id) {
|
||||
return api.saveProgress(id, cur, dur).catch(() => {});
|
||||
}
|
||||
} catch {
|
||||
/* player may be tearing down */
|
||||
}
|
||||
|
|
@ -326,7 +322,7 @@ export default function PlayerModal({
|
|||
videoId: id,
|
||||
playerVars: {
|
||||
autoplay: 1,
|
||||
start: loadPos(id) || undefined,
|
||||
start: resumeAt || undefined,
|
||||
rel: 0, // limit "related" to the same channel (full removal is no longer possible)
|
||||
enablejsapi: 1,
|
||||
origin: window.location.origin,
|
||||
|
|
@ -356,7 +352,10 @@ export default function PlayerModal({
|
|||
return () => {
|
||||
cancelled = true;
|
||||
window.clearInterval(timer);
|
||||
persist();
|
||||
// Final flush, then refresh the feed so the card's resume bar reflects this session.
|
||||
Promise.resolve(persist()).finally(() =>
|
||||
qc.invalidateQueries({ queryKey: ["feed"] })
|
||||
);
|
||||
const p = playerRef.current;
|
||||
if (p && typeof p.destroy === "function") {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ const SORTS = [
|
|||
|
||||
const SHOWS = [
|
||||
{ id: "unwatched", label: "Unwatched" },
|
||||
{ id: "in_progress", label: "In progress" },
|
||||
{ id: "all", label: "All" },
|
||||
{ id: "watched", label: "Watched" },
|
||||
{ id: "saved", label: "Saved" },
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
import { memo } from "react";
|
||||
import { Bookmark, Check, CheckCheck, Eye, EyeOff, ListFilter } from "lucide-react";
|
||||
import {
|
||||
Bookmark,
|
||||
Check,
|
||||
CheckCheck,
|
||||
Eye,
|
||||
EyeOff,
|
||||
ListFilter,
|
||||
Play,
|
||||
RotateCcw,
|
||||
} from "lucide-react";
|
||||
import Avatar from "./Avatar";
|
||||
import clsx from "clsx";
|
||||
import type { Video } from "../lib/api";
|
||||
|
|
@ -81,7 +90,7 @@ function Actions({
|
|||
function openInApp(
|
||||
e: React.MouseEvent,
|
||||
video: Video,
|
||||
onOpen?: (v: Video) => void
|
||||
onOpen?: (v: Video, startAt?: number | null) => void
|
||||
): void {
|
||||
if (!onOpen || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
|
||||
e.preventDefault();
|
||||
|
|
@ -95,8 +104,23 @@ function Thumb({
|
|||
}: {
|
||||
video: Video;
|
||||
className?: string;
|
||||
onOpen?: (v: Video) => void;
|
||||
onOpen?: (v: Video, startAt?: number | null) => void;
|
||||
}) {
|
||||
// A non-zero saved position on an unfinished video = "in progress": show a resume
|
||||
// progress bar and offer Continue / Restart instead of a plain Play.
|
||||
const inProgress = video.position_seconds > 0 && video.status !== "watched";
|
||||
const pct =
|
||||
inProgress && video.duration_seconds
|
||||
? Math.min(99, Math.max(2, (video.position_seconds / video.duration_seconds) * 100))
|
||||
: 0;
|
||||
|
||||
// Open in the in-app player at an explicit position (null = resume from saved).
|
||||
const open = (startAt: number | null) => (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onOpen?.(video, startAt);
|
||||
};
|
||||
|
||||
return (
|
||||
<a
|
||||
href={video.watch_url}
|
||||
|
|
@ -133,6 +157,45 @@ function Thumb({
|
|||
<Bookmark className="w-3.5 h-3.5" />
|
||||
</span>
|
||||
)}
|
||||
{/* Hover overlay: Play everywhere; Continue + Restart once the video is in progress. */}
|
||||
{onOpen && (
|
||||
<div className="absolute inset-0 flex items-center justify-center gap-2 bg-black/45 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{inProgress ? (
|
||||
<>
|
||||
<button
|
||||
onClick={open(null)}
|
||||
title="Continue where you left off"
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-semibold bg-accent text-accent-fg shadow-lg hover:opacity-90 transition"
|
||||
>
|
||||
<Play className="w-4 h-4 fill-current" />
|
||||
Continue
|
||||
</button>
|
||||
<button
|
||||
onClick={open(0)}
|
||||
title="Play from the beginning"
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-white/15 text-white backdrop-blur-sm hover:bg-white/25 transition"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
Restart
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={open(null)}
|
||||
title="Play"
|
||||
className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent text-accent-fg shadow-lg hover:scale-105 transition"
|
||||
>
|
||||
<Play className="w-5 h-5 fill-current translate-x-[1px]" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* Resume progress bar (sits at the very bottom, under the duration badge). */}
|
||||
{pct > 0 && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-black/40">
|
||||
<div className="h-full bg-accent" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
@ -148,7 +211,7 @@ function VideoCard({
|
|||
view: "grid" | "list";
|
||||
onState: (id: string, status: string) => void;
|
||||
onChannelFilter?: (channelId: string, channelName: string) => void;
|
||||
onOpen?: (v: Video) => void;
|
||||
onOpen?: (v: Video, startAt?: number | null) => void;
|
||||
}) {
|
||||
const watched = video.status === "watched";
|
||||
const meta = (
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ export interface Video {
|
|||
is_short: boolean;
|
||||
live_status: string;
|
||||
status: string;
|
||||
position_seconds: number;
|
||||
watch_url: string;
|
||||
}
|
||||
|
||||
|
|
@ -227,6 +228,14 @@ export const api = {
|
|||
req(`/api/feed/count?${feedQuery(f, 0, 0)}`),
|
||||
setState: (id: string, status: string) =>
|
||||
req(`/api/videos/${id}/state`, { method: "POST", body: JSON.stringify({ status }) }),
|
||||
saveProgress: (id: string, positionSeconds: number, durationSeconds: number) =>
|
||||
req(`/api/videos/${id}/progress`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
position_seconds: Math.floor(positionSeconds),
|
||||
duration_seconds: Math.floor(durationSeconds),
|
||||
}),
|
||||
}),
|
||||
videoDetail: (id: string): Promise<VideoDetail> => req(`/api/videos/${id}`),
|
||||
pauseSync: () => req("/api/sync/pause", { method: "POST" }),
|
||||
resumeSync: () => req("/api/sync/resume", { method: "POST" }),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue