Add stats peak hours, RSS feed, channel health view, bulk video download
Stats: - Peak watching hours chart (24-bar) from last_watched_at timestamps RSS: - GET /api/channels/rss — last 100 videos from followed channels as RSS 2.0 - RSS link in Following > Health tab Channel health: - New Health tab in Following groups channels into Active / Slow / Dormant / Dead based on days since last upload Bulk video download: - Select mode on Channel page (Videos tab) with checkboxes - Sticky bottom bar shows count + Download button - Queues a download for each selected video Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,7 +5,7 @@ import {
|
||||
getChannel, getChannelVideos, searchChannelYoutube,
|
||||
followChannel, unfollowChannel, indexChannel, indexChannelFull, exploreChannelOlder, fetchPopularVideos, downloadChannel,
|
||||
getChannelPlaylists, fetchChannelPlaylists, getPlaylistVideos, indexPlaylist,
|
||||
getRandomChannelVideo, getChannelInProgress,
|
||||
getRandomChannelVideo, getChannelInProgress, createDownload,
|
||||
} from "../api";
|
||||
import VideoCard from "../components/VideoCard";
|
||||
|
||||
@@ -41,6 +41,9 @@ export default function ChannelPage() {
|
||||
const [activeQ, setActiveQ] = useState("");
|
||||
const [indexing, setIndexing] = useState(false);
|
||||
const [explorePage, setExplorePage] = useState(2);
|
||||
const [selectMode, setSelectMode] = useState(false);
|
||||
const [selectedVideos, setSelectedVideos] = useState(new Set());
|
||||
const [bulkDlResult, setBulkDlResult] = useState(null);
|
||||
const searchInputRef = useRef(null);
|
||||
const [openPlaylistId, setOpenPlaylistId] = useState(null);
|
||||
const [playlistOffset, setPlaylistOffset] = useState(0);
|
||||
@@ -169,6 +172,29 @@ export default function ChannelPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const toggleSelectVideo = (ytId) => {
|
||||
setSelectedVideos(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(ytId)) next.delete(ytId); else next.add(ytId);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const bulkDownloadMut = useMutation({
|
||||
mutationFn: async () => {
|
||||
const ids = [...selectedVideos];
|
||||
await Promise.all(ids.map(ytId => createDownload(ytId)));
|
||||
return ids.length;
|
||||
},
|
||||
onSuccess: (count) => {
|
||||
setBulkDlResult(count);
|
||||
setSelectedVideos(new Set());
|
||||
setSelectMode(false);
|
||||
qc.invalidateQueries({ queryKey: ["downloads"] });
|
||||
setTimeout(() => setBulkDlResult(null), 4000);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSearch = (e) => {
|
||||
e.preventDefault();
|
||||
setActiveQ(search.trim());
|
||||
@@ -315,6 +341,17 @@ export default function ChannelPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{bulkDlResult != null && (
|
||||
<span className="text-xs text-accent font-mono">{bulkDlResult} queued</span>
|
||||
)}
|
||||
{tab === "videos" && (
|
||||
<button
|
||||
onClick={() => { setSelectMode(v => !v); setSelectedVideos(new Set()); }}
|
||||
className={`text-xs px-2.5 py-1 rounded-lg font-medium transition-colors ${selectMode ? "bg-accent text-black" : "text-zinc-500 hover:text-zinc-300"}`}
|
||||
>
|
||||
{selectMode ? "Cancel" : "Select"}
|
||||
</button>
|
||||
)}
|
||||
{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">
|
||||
@@ -499,7 +536,20 @@ export default function ChannelPage() {
|
||||
) : 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 key={v.youtube_video_id} className={`flex items-center gap-2 ${selectMode ? "cursor-pointer" : ""}`}
|
||||
onClick={selectMode ? () => toggleSelectVideo(v.youtube_video_id) : undefined}>
|
||||
{selectMode && (
|
||||
<input
|
||||
type="checkbox"
|
||||
readOnly
|
||||
checked={selectedVideos.has(v.youtube_video_id)}
|
||||
className="shrink-0 ml-1 accent-accent w-3.5 h-3.5 pointer-events-none"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<VideoCard video={{ ...v, channel_name: channel.name }} variant="list" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{hasNextPage ? (
|
||||
@@ -551,6 +601,26 @@ export default function ChannelPage() {
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Sticky bulk download bar */}
|
||||
{selectMode && selectedVideos.size > 0 && (
|
||||
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 px-5 py-3 bg-zinc-800 border border-zinc-700 rounded-2xl shadow-2xl">
|
||||
<span className="text-sm text-zinc-300 font-medium">{selectedVideos.size} selected</span>
|
||||
<button
|
||||
onClick={() => bulkDownloadMut.mutate()}
|
||||
disabled={bulkDownloadMut.isPending}
|
||||
className="px-4 py-1.5 rounded-lg bg-accent text-black text-sm font-semibold hover:bg-zinc-100 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{bulkDownloadMut.isPending ? "Queuing…" : "Download"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedVideos(new Set())}
|
||||
className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
getChannelGroups, createChannelGroup, deleteChannelGroup, renameChannelGroup,
|
||||
addChannelToGroup, removeChannelFromGroup,
|
||||
getSettings, bulkChannelAction, followBulk, updateChannelNotes,
|
||||
getRssFeedUrl,
|
||||
} from "../api";
|
||||
import VideoCard from "../components/VideoCard";
|
||||
import SortPicker from "../components/SortPicker";
|
||||
@@ -781,7 +782,7 @@ export default function Following() {
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center gap-0.5 border-b border-zinc-800">
|
||||
{[["channels", "Channels"], ["feed", "Feed"], ["groups", "Groups"]].map(([key, label]) => (
|
||||
{[["channels", "Channels"], ["feed", "Feed"], ["health", "Health"], ["groups", "Groups"]].map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setTab(key)}
|
||||
@@ -1022,6 +1023,65 @@ export default function Following() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Health tab ── */}
|
||||
{tab === "health" && (() => {
|
||||
const now = Date.now();
|
||||
const bucket = (ch) => {
|
||||
if (!ch.last_published_at) return "unknown";
|
||||
const days = (now - new Date(ch.last_published_at)) / 86400000;
|
||||
if (days < 30) return "active";
|
||||
if (days < 90) return "slow";
|
||||
if (days < 365) return "dormant";
|
||||
return "dead";
|
||||
};
|
||||
const buckets = {
|
||||
active: { label: "Active", sub: "uploaded in the last 30 days", color: "text-green-400", bg: "bg-green-900/20" },
|
||||
slow: { label: "Slow", sub: "uploaded in the last 90 days", color: "text-yellow-400", bg: "bg-yellow-900/20" },
|
||||
dormant: { label: "Dormant", sub: "no upload in 90–365 days", color: "text-orange-400", bg: "bg-orange-900/20" },
|
||||
dead: { label: "Dead", sub: "no upload in over a year", color: "text-red-400", bg: "bg-red-900/20" },
|
||||
unknown: { label: "Unknown", sub: "never indexed", color: "text-zinc-500", bg: "bg-zinc-800/40" },
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<a
|
||||
href={getRssFeedUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="self-start flex items-center gap-1.5 text-xs text-zinc-500 hover:text-orange-400 transition-colors"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6.18 15.64a2.18 2.18 0 010 4.36 2.18 2.18 0 010-4.36M4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 006.18 7.27V4.44M4 10.1a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 006.18 12.93V10.1H4z"/>
|
||||
</svg>
|
||||
RSS feed
|
||||
</a>
|
||||
{Object.entries(buckets).map(([key, { label, sub, color, bg }]) => {
|
||||
const chs = channels.filter(ch => bucket(ch) === key);
|
||||
if (!chs.length) return null;
|
||||
return (
|
||||
<div key={key}>
|
||||
<div className="flex items-baseline gap-2 mb-2">
|
||||
<h2 className={`text-sm font-semibold ${color}`}>{label}</h2>
|
||||
<span className="text-xs text-zinc-600">{sub}</span>
|
||||
<span className="text-xs text-zinc-600 ml-auto">{chs.length} channel{chs.length !== 1 ? "s" : ""}</span>
|
||||
</div>
|
||||
<div className={`rounded-xl ${bg} divide-y divide-zinc-800/40`}>
|
||||
{chs.map(ch => (
|
||||
<ChannelRow
|
||||
key={ch.id}
|
||||
channel={ch}
|
||||
groups={groups}
|
||||
onGroupToggle={handleGroupToggle}
|
||||
hideSubCount={hideSubCount}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* ── Groups tab ── */}
|
||||
{tab === "groups" && (
|
||||
<GroupsPanel groups={groups} channels={channels} />
|
||||
|
||||
@@ -201,6 +201,39 @@ export default function Stats() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Peak hours */}
|
||||
{data.peak_hours?.length > 0 && (() => {
|
||||
const hourMap = Object.fromEntries(data.peak_hours.map(h => [h.hour, h.count]));
|
||||
const maxCount = Math.max(...data.peak_hours.map(h => h.count), 1);
|
||||
const hours = Array.from({ length: 24 }, (_, i) => i);
|
||||
return (
|
||||
<div className="bg-zinc-900 rounded-2xl p-5 flex flex-col gap-3">
|
||||
<h2 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Peak watching hours</h2>
|
||||
<div className="flex items-end gap-0.5 h-16">
|
||||
{hours.map(h => {
|
||||
const count = hourMap[h] || 0;
|
||||
const pct = count / maxCount;
|
||||
const label = h === 0 ? "12a" : h < 12 ? `${h}a` : h === 12 ? "12p" : `${h - 12}p`;
|
||||
return (
|
||||
<div key={h} className="flex-1 flex flex-col items-center gap-0.5" title={`${label}: ${count} video${count !== 1 ? "s" : ""}`}>
|
||||
<div
|
||||
className="w-full rounded-sm transition-all"
|
||||
style={{
|
||||
height: count === 0 ? "2px" : `${Math.max(pct * 100, 6)}%`,
|
||||
backgroundColor: count === 0 ? "#27272a" : `hsl(50,95%,${30 + pct * 30}%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] text-zinc-600">
|
||||
<span>12am</span><span>6am</span><span>12pm</span><span>6pm</span><span>11pm</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Taste profile */}
|
||||
{topTags.length > 0 && (
|
||||
<div className="bg-zinc-900 rounded-2xl p-5 flex flex-col gap-3">
|
||||
|
||||
Reference in New Issue
Block a user