Initial commit — YT Hub
Self-hosted personal YouTube management app. FastAPI + SQLite backend, React + Vite + Tailwind frontend. Dockerfiles and compose included for Portainer deployment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
inputnoise
162
frontend/src/pages/Channel.jsx
Normal file
162
frontend/src/pages/Channel.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import { useState, useMemo } 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 VideoCard from "../components/VideoCard";
|
||||
import SortPicker from "../components/SortPicker";
|
||||
|
||||
function formatSubs(n) {
|
||||
if (!n) return null;
|
||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1)}M`;
|
||||
if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
|
||||
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 { 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 followMut = useMutation({
|
||||
mutationFn: () =>
|
||||
channel?.status === "followed" ? unfollowChannel(id) : followChannel(id),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["channel", id] });
|
||||
qc.invalidateQueries({ queryKey: ["channels"] });
|
||||
},
|
||||
});
|
||||
|
||||
const indexMut = useMutation({
|
||||
mutationFn: () => indexChannel(id),
|
||||
onSuccess: () => setTimeout(() => qc.invalidateQueries({ queryKey: ["channel-videos", id] }), 4000),
|
||||
});
|
||||
|
||||
const [dlResult, setDlResult] = useState(null);
|
||||
const [videoSort, setVideoSort] = useState("newest");
|
||||
const dlMut = useMutation({
|
||||
mutationFn: () => downloadChannel(id),
|
||||
onSuccess: (res) => {
|
||||
setDlResult(res.data.queued);
|
||||
qc.invalidateQueries({ queryKey: ["downloads"] });
|
||||
},
|
||||
});
|
||||
|
||||
if (loadingChannel) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!channel) return <p className="text-zinc-500">Channel not found.</p>;
|
||||
|
||||
const isFollowed = channel.status === "followed";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
{/* Channel header */}
|
||||
<div className="flex items-start gap-5">
|
||||
{channel.thumbnail_url ? (
|
||||
<img
|
||||
src={channel.thumbnail_url}
|
||||
alt={channel.name}
|
||||
className="w-20 h-20 rounded-full object-cover shrink-0"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-20 h-20 rounded-full bg-zinc-800 flex items-center justify-center text-3xl font-display font-bold text-zinc-400 shrink-0">
|
||||
{channel.name?.[0]?.toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="font-display font-bold text-2xl text-zinc-100">{channel.name}</h1>
|
||||
<p className="text-sm text-zinc-500 mt-1">
|
||||
{[
|
||||
formatSubs(channel.subscriber_count) && `${formatSubs(channel.subscriber_count)} subscribers`,
|
||||
`${channel.video_count} videos indexed`,
|
||||
].filter(Boolean).join(" · ")}
|
||||
</p>
|
||||
{channel.description && (
|
||||
<p className="text-sm text-zinc-400 mt-2 line-clamp-2">{channel.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0 flex-wrap justify-end">
|
||||
{dlResult != null && (
|
||||
<span className="text-sm text-accent font-mono">
|
||||
{dlResult === 0 ? "Already up to date" : `${dlResult} queued`}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => dlMut.mutate()}
|
||||
disabled={dlMut.isPending}
|
||||
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-black hover:bg-yellow-300 transition-colors disabled:opacity-60 flex items-center gap-2"
|
||||
>
|
||||
{dlMut.isPending ? "Queuing…" : "Download all"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => indexMut.mutate()}
|
||||
disabled={indexMut.isPending || indexMut.isSuccess}
|
||||
className="text-sm font-medium px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 hover:bg-zinc-700 transition-colors disabled:opacity-60"
|
||||
>
|
||||
{indexMut.isPending ? "Indexing…" : indexMut.isSuccess ? "Done ✓" : "Re-index"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => followMut.mutate()}
|
||||
disabled={followMut.isPending}
|
||||
className={`text-sm font-medium px-4 py-2 rounded-lg transition-colors ${
|
||||
isFollowed
|
||||
? "bg-zinc-700 text-zinc-300 hover:bg-zinc-600"
|
||||
: "bg-zinc-800 text-zinc-300 hover:bg-zinc-700"
|
||||
}`}
|
||||
>
|
||||
{isFollowed ? "Following" : "Follow"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video grid */}
|
||||
{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="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{sortVideos(videos, videoSort).map((v) => (
|
||||
<VideoCard key={v.youtube_video_id} video={{ ...v, channel_name: channel.name }} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-zinc-500 text-sm">No videos indexed yet. Hit Re-index to fetch them.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user