Add Popular tab to channel page
- YouTube sort=p fetch: indexes top 100 most-viewed videos from a channel, storing view_count in the DB - Popular tab on channel page shows videos sorted by view_count DESC - Videos/Popular tab switcher with context-appropriate fetch buttons - Expose view_count in VideoOut; add 'popular' sort to channel videos endpoint Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,12 +3,17 @@ import { useParams } from "react-router-dom";
|
||||
import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
getChannel, getChannelVideos, searchChannelYoutube,
|
||||
followChannel, unfollowChannel, indexChannel, indexChannelFull, exploreChannelOlder, downloadChannel,
|
||||
followChannel, unfollowChannel, indexChannel, indexChannelFull, exploreChannelOlder, fetchPopularVideos, downloadChannel,
|
||||
} from "../api";
|
||||
import VideoCard from "../components/VideoCard";
|
||||
|
||||
const LIMIT = 60;
|
||||
|
||||
const TABS = [
|
||||
{ value: "videos", label: "Videos" },
|
||||
{ value: "popular", label: "Popular" },
|
||||
];
|
||||
|
||||
const SORTS = [
|
||||
{ value: "newest", label: "Newest" },
|
||||
{ value: "oldest", label: "Oldest" },
|
||||
@@ -26,6 +31,7 @@ function formatSubs(n) {
|
||||
export default function ChannelPage() {
|
||||
const { id } = useParams();
|
||||
const qc = useQueryClient();
|
||||
const [tab, setTab] = useState("videos");
|
||||
const [sort, setSort] = useState("newest");
|
||||
const [search, setSearch] = useState("");
|
||||
const [activeQ, setActiveQ] = useState("");
|
||||
@@ -38,6 +44,8 @@ export default function ChannelPage() {
|
||||
queryFn: () => getChannel(id).then((r) => r.data),
|
||||
});
|
||||
|
||||
const effectiveSort = tab === "popular" ? "popular" : sort;
|
||||
|
||||
const {
|
||||
data: videosData,
|
||||
isLoading: loadingVideos,
|
||||
@@ -45,9 +53,9 @@ export default function ChannelPage() {
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ["channel-videos", id, sort, activeQ],
|
||||
queryKey: ["channel-videos", id, effectiveSort, activeQ],
|
||||
queryFn: ({ pageParam = 0 }) =>
|
||||
getChannelVideos(id, sort, pageParam, LIMIT, activeQ).then((r) => r.data),
|
||||
getChannelVideos(id, effectiveSort, pageParam, LIMIT, activeQ).then((r) => r.data),
|
||||
getNextPageParam: (lastPage, pages) =>
|
||||
lastPage.length === LIMIT ? pages.length * LIMIT : undefined,
|
||||
enabled: !!id,
|
||||
@@ -103,6 +111,11 @@ export default function ChannelPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const popularMut = useMutation({
|
||||
mutationFn: () => fetchPopularVideos(id),
|
||||
onSuccess: () => scheduleRefetch(20000),
|
||||
});
|
||||
|
||||
const deepSearchMut = useMutation({
|
||||
mutationFn: () => searchChannelYoutube(id, activeQ || search),
|
||||
onSuccess: () => scheduleRefetch(20000),
|
||||
@@ -139,7 +152,7 @@ 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 || exploreMut.isPending || indexing;
|
||||
const isPending = indexMut.isPending || fullIndexMut.isPending || deepSearchMut.isPending || exploreMut.isPending || popularMut.isPending || indexing;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
@@ -240,15 +253,15 @@ export default function ChannelPage() {
|
||||
)}
|
||||
</form>
|
||||
|
||||
{/* Sort + index controls */}
|
||||
<div className="flex items-center justify-between gap-3 -mt-1">
|
||||
{/* Tabs + controls */}
|
||||
<div className="flex items-center justify-between gap-3 -mt-1 border-b border-zinc-800/60 pb-3">
|
||||
<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"
|
||||
{TABS.map(t => (
|
||||
<button key={t.value} onClick={() => setTab(t.value)}
|
||||
className={`text-sm px-3 py-1 rounded-md transition-colors font-medium ${
|
||||
tab === t.value ? "text-zinc-100" : "text-zinc-500 hover:text-zinc-300"
|
||||
}`}>
|
||||
{s.label}
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -260,20 +273,43 @@ export default function ChannelPage() {
|
||||
<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…
|
||||
Fetching…
|
||||
</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>
|
||||
{tab === "popular" ? (
|
||||
<button onClick={() => popularMut.mutate()} disabled={isPending}
|
||||
className="text-xs text-zinc-400 hover:text-zinc-100 font-medium transition-colors disabled:opacity-40">
|
||||
Fetch popular
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
|
||||
{/* Sort bar — videos tab only */}
|
||||
{tab === "videos" && (
|
||||
<div className="flex items-center gap-0.5 -mt-1">
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Video list */}
|
||||
{loadingVideos ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
@@ -290,7 +326,7 @@ export default function ChannelPage() {
|
||||
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 && (
|
||||
) : !activeQ && tab === "videos" && (
|
||||
<div className="mt-4 flex flex-col items-center gap-3 py-4 border-t border-zinc-800/50">
|
||||
<p className="text-xs text-zinc-600">{videos.length} videos indexed</p>
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -310,13 +346,22 @@ export default function ChannelPage() {
|
||||
) : (
|
||||
<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."}
|
||||
{activeQ
|
||||
? `No indexed videos match "${activeQ}"`
|
||||
: tab === "popular"
|
||||
? "No popular videos fetched yet."
|
||||
: "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>
|
||||
) : tab === "popular" ? (
|
||||
<button onClick={() => popularMut.mutate()} disabled={isPending}
|
||||
className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors disabled:opacity-40 underline">
|
||||
Fetch popular videos from YouTube
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => fullIndexMut.mutate()} disabled={isPending}
|
||||
className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors disabled:opacity-40 underline">
|
||||
|
||||
Reference in New Issue
Block a user