-
{item.canonicalTitle}
+
{primaryTitle}
+ {secondaryTitle ? (
+
{secondaryTitle}
+ ) : null}
{formatDuration(item.totalActiveMs)} · {formatNumber(item.totalCards)} cards
diff --git a/stats/src/components/library/MediaDetailView.test.tsx b/stats/src/components/library/MediaDetailView.test.tsx
new file mode 100644
index 0000000..accce1e
--- /dev/null
+++ b/stats/src/components/library/MediaDetailView.test.tsx
@@ -0,0 +1,43 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { getRelatedCollectionLabel } from './MediaDetailView';
+
+test('getRelatedCollectionLabel returns View Channel for youtube-backed media', () => {
+ assert.equal(
+ getRelatedCollectionLabel({
+ videoId: 1,
+ animeId: 1,
+ canonicalTitle: 'Video',
+ totalSessions: 1,
+ totalActiveMs: 1,
+ totalCards: 0,
+ totalTokensSeen: 0,
+ totalLinesSeen: 0,
+ totalLookupCount: 0,
+ totalLookupHits: 0,
+ totalYomitanLookupCount: 0,
+ channelName: 'Creator',
+ }),
+ 'View Channel',
+ );
+});
+
+test('getRelatedCollectionLabel returns View Anime for non-youtube media', () => {
+ assert.equal(
+ getRelatedCollectionLabel({
+ videoId: 2,
+ animeId: 1,
+ canonicalTitle: 'Episode 5',
+ totalSessions: 1,
+ totalActiveMs: 1,
+ totalCards: 0,
+ totalTokensSeen: 0,
+ totalLinesSeen: 0,
+ totalLookupCount: 0,
+ totalLookupHits: 0,
+ totalYomitanLookupCount: 0,
+ channelName: null,
+ }),
+ 'View Anime',
+ );
+});
diff --git a/stats/src/components/library/MediaDetailView.tsx b/stats/src/components/library/MediaDetailView.tsx
index 27bc1b4..4f353c9 100644
--- a/stats/src/components/library/MediaDetailView.tsx
+++ b/stats/src/components/library/MediaDetailView.tsx
@@ -5,7 +5,14 @@ import { confirmSessionDelete } from '../../lib/delete-confirm';
import { getSessionDisplayWordCount } from '../../lib/session-word-count';
import { MediaHeader } from './MediaHeader';
import { MediaSessionList } from './MediaSessionList';
-import type { SessionSummary } from '../../types/stats';
+import type { MediaDetailData, SessionSummary } from '../../types/stats';
+
+export function getRelatedCollectionLabel(detail: MediaDetailData['detail']): string {
+ if (detail?.channelName?.trim()) {
+ return 'View Channel';
+ }
+ return 'View Anime';
+}
interface MediaDetailViewProps {
videoId: number;
@@ -53,6 +60,7 @@ export function MediaDetailView({
totalLookupHits: sessions.reduce((sum, session) => sum + session.lookupHits, 0),
totalYomitanLookupCount: sessions.reduce((sum, session) => sum + session.yomitanLookupCount, 0),
};
+ const relatedCollectionLabel = getRelatedCollectionLabel(detail);
const handleDeleteSession = async (session: SessionSummary) => {
if (!confirmSessionDelete()) return;
@@ -87,7 +95,7 @@ export function MediaDetailView({
onClick={() => onNavigateToAnime(animeId)}
className="text-sm text-ctp-blue hover:text-ctp-sapphire transition-colors"
>
- View Anime →
+ {relatedCollectionLabel} →
) : null}
+
+
+ 
+ 
+ 
+ 
setFailed(true)}
/>
diff --git a/stats/src/components/library/LibraryTab.tsx b/stats/src/components/library/LibraryTab.tsx
index 217fbec..e058062 100644
--- a/stats/src/components/library/LibraryTab.tsx
+++ b/stats/src/components/library/LibraryTab.tsx
@@ -1,6 +1,11 @@
import { useState, useMemo } from 'react';
import { useMediaLibrary } from '../../hooks/useMediaLibrary';
-import { formatDuration } from '../../lib/formatters';
+import { formatDuration, formatNumber } from '../../lib/formatters';
+import {
+ groupMediaLibraryItems,
+ summarizeMediaLibraryGroups,
+} from '../../lib/media-library-grouping';
+import { CoverImage } from './CoverImage';
import { MediaCard } from './MediaCard';
import { MediaDetailView } from './MediaDetailView';
@@ -16,19 +21,22 @@ export function LibraryTab({ onNavigateToSession }: LibraryTabProps) {
const filtered = useMemo(() => {
if (!search.trim()) return media;
const q = search.toLowerCase();
- return media.filter((m) => m.canonicalTitle.toLowerCase().includes(q));
+ return media.filter((m) => {
+ const haystacks = [
+ m.canonicalTitle,
+ m.videoTitle,
+ m.channelName,
+ m.uploaderId,
+ m.channelId,
+ ].filter(Boolean);
+ return haystacks.some((value) => value!.toLowerCase().includes(q));
+ });
}, [media, search]);
-
- const totalMs = media.reduce((sum, m) => sum + m.totalActiveMs, 0);
+ const grouped = useMemo(() => groupMediaLibraryItems(filtered), [filtered]);
+ const summary = useMemo(() => summarizeMediaLibraryGroups(grouped), [grouped]);
if (selectedVideoId !== null) {
- return (
-