Overhaul channel page: search, pagination, fetch all history
- Search bar filters indexed videos server-side; "Search YouTube" button
triggers a deep channel search and indexes matching results
- Server-side sort (newest/oldest/A-Z/unwatched) + infinite scroll (60/page)
- "Fetch recent" indexes last 30, "Fetch all" indexes full history
- Auto-reindex on page visit if stale (>1h), refetches at 8s
- Add /channels/{id}/index-full endpoint (max_videos=0)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -41,10 +41,13 @@ export const getChannels = () => api.get("/channels");
|
||||
export const getChannelFeed = (offset = 0) => api.get("/channels/feed", { params: { offset, limit: 24 } });
|
||||
export const getChannel = (id) => api.get(`/channels/${id}`);
|
||||
export const syncAllChannels = () => api.post("/channels/sync-all");
|
||||
export const getChannelVideos = (id) => api.get(`/channels/${id}/videos`);
|
||||
export const getChannelVideos = (id, sort = "newest", offset = 0, limit = 60, q = "") =>
|
||||
api.get(`/channels/${id}/videos`, { params: { sort, offset, limit, ...(q ? { q } : {}) } });
|
||||
export const searchChannelYoutube = (id, q) => api.post(`/channels/${id}/search`, null, { params: { q } });
|
||||
export const followChannel = (id) => api.post(`/channels/${id}/follow`);
|
||||
export const unfollowChannel = (id) => api.delete(`/channels/${id}/follow`);
|
||||
export const indexChannel = (id) => api.post(`/channels/${id}/index`);
|
||||
export const indexChannelFull = (id) => api.post(`/channels/${id}/index-full`);
|
||||
export const followChannelByUrl = (data) => api.post("/channels/follow-by-url", data);
|
||||
export const setChannelAutoDownload = (id, value) => api.patch(`/channels/${id}/auto-download`, { auto_download: value });
|
||||
export const markChannelsSeen = () => api.post("/channels/mark-seen");
|
||||
|
||||
@@ -1,9 +1,20 @@
|
||||
import { useState, useMemo, useEffect, useRef } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { getChannel, getChannelVideos, followChannel, unfollowChannel, indexChannel, downloadChannel } from "../api";
|
||||
import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
getChannel, getChannelVideos, searchChannelYoutube,
|
||||
followChannel, unfollowChannel, indexChannel, indexChannelFull, downloadChannel,
|
||||
} from "../api";
|
||||
import VideoCard from "../components/VideoCard";
|
||||
import SortPicker from "../components/SortPicker";
|
||||
|
||||
const LIMIT = 60;
|
||||
|
||||
const SORTS = [
|
||||
{ value: "newest", label: "Newest" },
|
||||
{ value: "oldest", label: "Oldest" },
|
||||
{ value: "title", label: "A–Z" },
|
||||
{ value: "unwatched", label: "Unwatched" },
|
||||
];
|
||||
|
||||
function formatSubs(n) {
|
||||
if (!n) return null;
|
||||
@@ -12,36 +23,38 @@ function formatSubs(n) {
|
||||
return String(n);
|
||||
}
|
||||
|
||||
const VIDEO_SORTS = [
|
||||
{ value: "newest", label: "Newest" },
|
||||
{ value: "oldest", label: "Oldest" },
|
||||
{ value: "title", label: "Title A–Z" },
|
||||
{ value: "unwatched", label: "Unwatched first" },
|
||||
];
|
||||
|
||||
function sortVideos(items, sort) {
|
||||
const arr = [...items];
|
||||
if (sort === "oldest") return arr.sort((a, b) => new Date(a.published_at ?? 0) - new Date(b.published_at ?? 0));
|
||||
if (sort === "title") return arr.sort((a, b) => (a.title ?? "").localeCompare(b.title ?? ""));
|
||||
if (sort === "unwatched") return arr.sort((a, b) => Number(a.is_watched) - Number(b.is_watched));
|
||||
return arr.sort((a, b) => new Date(b.published_at ?? 0) - new Date(a.published_at ?? 0));
|
||||
}
|
||||
|
||||
export default function ChannelPage() {
|
||||
const { id } = useParams();
|
||||
const qc = useQueryClient();
|
||||
const [sort, setSort] = useState("newest");
|
||||
const [search, setSearch] = useState("");
|
||||
const [activeQ, setActiveQ] = useState("");
|
||||
const [indexing, setIndexing] = useState(false);
|
||||
const searchInputRef = useRef(null);
|
||||
|
||||
const { data: channel, isLoading: loadingChannel } = useQuery({
|
||||
queryKey: ["channel", id],
|
||||
queryFn: () => getChannel(id).then((r) => r.data),
|
||||
});
|
||||
|
||||
const { data: videos, isLoading: loadingVideos } = useQuery({
|
||||
queryKey: ["channel-videos", id],
|
||||
queryFn: () => getChannelVideos(id).then((r) => r.data),
|
||||
const {
|
||||
data: videosData,
|
||||
isLoading: loadingVideos,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ["channel-videos", id, sort, activeQ],
|
||||
queryFn: ({ pageParam = 0 }) =>
|
||||
getChannelVideos(id, sort, pageParam, LIMIT, activeQ).then((r) => r.data),
|
||||
getNextPageParam: (lastPage, pages) =>
|
||||
lastPage.length === LIMIT ? pages.length * LIMIT : undefined,
|
||||
enabled: !!id,
|
||||
});
|
||||
|
||||
// Refetch after the background re-index has had time to run
|
||||
const videos = videosData?.pages.flat() ?? [];
|
||||
|
||||
// Refetch after background re-index
|
||||
const refetchedRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (!id || refetchedRef.current) return;
|
||||
@@ -62,13 +75,31 @@ export default function ChannelPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const scheduleRefetch = (delayMs) => {
|
||||
setIndexing(true);
|
||||
setTimeout(() => {
|
||||
qc.invalidateQueries({ queryKey: ["channel-videos", id] });
|
||||
qc.invalidateQueries({ queryKey: ["channel", id] });
|
||||
setIndexing(false);
|
||||
}, delayMs);
|
||||
};
|
||||
|
||||
const indexMut = useMutation({
|
||||
mutationFn: () => indexChannel(id),
|
||||
onSuccess: () => setTimeout(() => qc.invalidateQueries({ queryKey: ["channel-videos", id] }), 4000),
|
||||
onSuccess: () => scheduleRefetch(6000),
|
||||
});
|
||||
|
||||
const fullIndexMut = useMutation({
|
||||
mutationFn: () => indexChannelFull(id),
|
||||
onSuccess: () => scheduleRefetch(45000),
|
||||
});
|
||||
|
||||
const deepSearchMut = useMutation({
|
||||
mutationFn: () => searchChannelYoutube(id, activeQ || search),
|
||||
onSuccess: () => scheduleRefetch(20000),
|
||||
});
|
||||
|
||||
const [dlResult, setDlResult] = useState(null);
|
||||
const [videoSort, setVideoSort] = useState("newest");
|
||||
const dlMut = useMutation({
|
||||
mutationFn: () => downloadChannel(id),
|
||||
onSuccess: (res) => {
|
||||
@@ -77,6 +108,17 @@ export default function ChannelPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const handleSearch = (e) => {
|
||||
e.preventDefault();
|
||||
setActiveQ(search.trim());
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearch("");
|
||||
setActiveQ("");
|
||||
searchInputRef.current?.focus();
|
||||
};
|
||||
|
||||
if (loadingChannel) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
@@ -88,9 +130,10 @@ export default function ChannelPage() {
|
||||
if (!channel) return <p className="text-zinc-500">Channel not found.</p>;
|
||||
|
||||
const isFollowed = channel.status === "followed";
|
||||
const isPending = indexMut.isPending || fullIndexMut.isPending || deepSearchMut.isPending || indexing;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-5">
|
||||
{/* Banner */}
|
||||
<div className={`-mx-4 -mt-6 relative ${channel.banner_url ? "" : "bg-zinc-900"} rounded-b-2xl overflow-hidden`}>
|
||||
{channel.banner_url && (
|
||||
@@ -98,7 +141,6 @@ export default function ChannelPage() {
|
||||
)}
|
||||
<div className={channel.banner_url ? "absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" : ""} />
|
||||
|
||||
{/* Avatar + name — always in the banner overlay */}
|
||||
<div className={`${channel.banner_url ? "absolute bottom-0 inset-x-0" : ""} px-4 pb-4 pt-3 flex items-end gap-3`}>
|
||||
{channel.thumbnail_url ? (
|
||||
<img src={channel.thumbnail_url} alt={channel.name}
|
||||
@@ -113,11 +155,11 @@ export default function ChannelPage() {
|
||||
<p className="text-xs text-zinc-400 mt-0.5 drop-shadow">
|
||||
{[
|
||||
formatSubs(channel.subscriber_count) && `${formatSubs(channel.subscriber_count)} subs`,
|
||||
channel.video_count && `${channel.video_count} videos`,
|
||||
channel.video_count && `${channel.video_count} indexed`,
|
||||
].filter(Boolean).join(" · ")}
|
||||
</p>
|
||||
</div>
|
||||
{/* Desktop action buttons inline */}
|
||||
|
||||
<div className="hidden sm:flex items-center gap-2 shrink-0">
|
||||
<button onClick={() => followMut.mutate()} disabled={followMut.isPending}
|
||||
className={`text-sm font-medium px-4 py-1.5 rounded-lg transition-colors ${isFollowed ? "bg-zinc-700/80 text-zinc-300 hover:bg-zinc-600" : "bg-zinc-800/80 text-zinc-300 hover:bg-zinc-700"}`}>
|
||||
@@ -127,59 +169,145 @@ export default function ChannelPage() {
|
||||
className="text-sm font-medium px-4 py-1.5 rounded-lg bg-accent text-black hover:bg-zinc-100 transition-colors disabled:opacity-60">
|
||||
{dlMut.isPending ? "Queuing…" : "Download all"}
|
||||
</button>
|
||||
<button onClick={() => indexMut.mutate()} disabled={indexMut.isPending || indexMut.isSuccess}
|
||||
className="text-sm font-medium px-4 py-1.5 rounded-lg bg-zinc-800/80 text-zinc-300 hover:bg-zinc-700 transition-colors disabled:opacity-60">
|
||||
{indexMut.isPending ? "Indexing…" : indexMut.isSuccess ? "Done ✓" : "Re-index"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile action row — below banner */}
|
||||
<div className="sm:hidden flex items-center gap-2 -mt-2">
|
||||
{/* Mobile actions */}
|
||||
<div className="sm:hidden flex items-center gap-2 -mt-1">
|
||||
<button onClick={() => followMut.mutate()} disabled={followMut.isPending}
|
||||
className={`flex-1 text-sm font-medium py-2 rounded-lg transition-colors ${isFollowed ? "bg-zinc-800 text-zinc-300 hover:bg-zinc-700" : "bg-zinc-800 text-zinc-300 hover:bg-zinc-700"}`}>
|
||||
className="flex-1 text-sm font-medium py-2 rounded-lg bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors">
|
||||
{isFollowed ? "Following ✓" : "Follow"}
|
||||
</button>
|
||||
<button onClick={() => dlMut.mutate()} disabled={dlMut.isPending}
|
||||
className="flex-1 text-sm font-medium py-2 rounded-lg bg-accent text-black hover:bg-zinc-100 transition-colors disabled:opacity-60">
|
||||
{dlMut.isPending ? "Queuing…" : "Download all"}
|
||||
</button>
|
||||
<button onClick={() => indexMut.mutate()} disabled={indexMut.isPending || indexMut.isSuccess}
|
||||
className="text-sm font-medium px-3 py-2 rounded-lg bg-zinc-800 text-zinc-500 hover:bg-zinc-700 transition-colors disabled:opacity-60">
|
||||
{indexMut.isPending ? "…" : indexMut.isSuccess ? "✓" : "Re-index"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{dlResult != null && (
|
||||
<p className="text-xs text-accent font-mono -mt-2">
|
||||
<p className="text-xs text-zinc-400 font-mono -mt-2">
|
||||
{dlResult === 0 ? "Already up to date" : `${dlResult} downloads queued`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{channel.description && (
|
||||
<p className="text-xs text-zinc-500 line-clamp-2 -mt-2">{channel.description}</p>
|
||||
<p className="text-xs text-zinc-500 line-clamp-2 -mt-1">{channel.description}</p>
|
||||
)}
|
||||
|
||||
{/* Video grid */}
|
||||
{/* Search bar */}
|
||||
<form onSubmit={handleSearch} className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search videos…"
|
||||
className="w-full bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-1.5 text-sm text-zinc-200 placeholder-zinc-600 focus:outline-none focus:border-zinc-600 transition-colors"
|
||||
/>
|
||||
{search && (
|
||||
<button type="button" onClick={clearSearch}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400">
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button type="submit"
|
||||
className="text-sm px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors shrink-0">
|
||||
Filter
|
||||
</button>
|
||||
{activeQ && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deepSearchMut.mutate()}
|
||||
disabled={deepSearchMut.isPending || indexing}
|
||||
className="text-sm px-3 py-1.5 rounded-lg text-zinc-400 hover:text-zinc-100 transition-colors shrink-0 disabled:opacity-40"
|
||||
>
|
||||
Search YouTube
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{/* Sort + index controls */}
|
||||
<div className="flex items-center justify-between gap-3 -mt-1">
|
||||
<div className="flex items-center gap-0.5">
|
||||
{SORTS.map(s => (
|
||||
<button key={s.value} onClick={() => setSort(s.value)}
|
||||
className={`text-xs px-2.5 py-1 rounded-md transition-colors ${
|
||||
sort === s.value ? "bg-zinc-700 text-zinc-100" : "text-zinc-500 hover:text-zinc-300"
|
||||
}`}>
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{isPending && (
|
||||
<span className="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||
<svg className="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
|
||||
</svg>
|
||||
Indexing…
|
||||
</span>
|
||||
)}
|
||||
<button onClick={() => indexMut.mutate()} disabled={isPending}
|
||||
className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-40">
|
||||
Fetch recent
|
||||
</button>
|
||||
<button onClick={() => fullIndexMut.mutate()} disabled={isPending}
|
||||
className="text-xs text-zinc-400 hover:text-zinc-100 font-medium transition-colors disabled:opacity-40">
|
||||
Fetch all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video list */}
|
||||
{loadingVideos ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : videos?.length ? (
|
||||
<>
|
||||
<div className="flex justify-end">
|
||||
<SortPicker value={videoSort} onChange={setVideoSort} options={VIDEO_SORTS} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{sortVideos(videos, videoSort).map((v) => (
|
||||
) : videos.length ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{videos.map((v) => (
|
||||
<VideoCard key={v.youtube_video_id} video={{ ...v, channel_name: channel.name }} variant="list" />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
|
||||
{hasNextPage ? (
|
||||
<button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}
|
||||
className="mt-4 self-center text-sm text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-40 py-2 px-4">
|
||||
{isFetchingNextPage ? "Loading…" : "Load more"}
|
||||
</button>
|
||||
) : !activeQ && (
|
||||
<div className="mt-4 flex flex-col items-center gap-2 py-4 border-t border-zinc-800/50">
|
||||
<p className="text-xs text-zinc-600">All {videos.length} indexed videos shown</p>
|
||||
<button onClick={() => fullIndexMut.mutate()} disabled={isPending}
|
||||
className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-40">
|
||||
Fetch full history from YouTube
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-zinc-500 text-sm">No videos indexed yet. Hit Re-index to fetch them.</p>
|
||||
<div className="py-8 flex flex-col items-center gap-3">
|
||||
<p className="text-zinc-500 text-sm">
|
||||
{activeQ ? `No indexed videos match "${activeQ}"` : "No videos indexed yet."}
|
||||
</p>
|
||||
{activeQ ? (
|
||||
<button onClick={() => deepSearchMut.mutate()} disabled={isPending}
|
||||
className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors disabled:opacity-40 underline">
|
||||
Search YouTube for "{activeQ}"
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => fullIndexMut.mutate()} disabled={isPending}
|
||||
className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors disabled:opacity-40 underline">
|
||||
Fetch all videos
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user