feat(stats): add v1 immersion stats dashboard (#19)

2026-03-24 12:11:29 -07:00 · 2026-03-20 02:43:28 -07:00
parent 42abdd1268
commit 6749ff843c
555 changed files with 46356 additions and 2553 deletions
--- a/stats/src/components/library/MediaHeader.tsx
+++ b/stats/src/components/library/MediaHeader.tsx
@@ -0,0 +1,113 @@
+import { useState, useEffect } from 'react';
+import { CoverImage } from './CoverImage';
+import { formatDuration, formatNumber, formatPercent } from '../../lib/formatters';
+import { getStatsClient } from '../../hooks/useStatsApi';
+import { buildLookupRateDisplay } from '../../lib/yomitan-lookup';
+import type { MediaDetailData } from '../../types/stats';
+
+interface MediaHeaderProps {
+  detail: NonNullable<MediaDetailData['detail']>;
+  initialKnownWordsSummary?: {
+    totalUniqueWords: number;
+    knownWordCount: number;
+  } | null;
+}
+
+export function MediaHeader({ detail, initialKnownWordsSummary = null }: MediaHeaderProps) {
+  const knownTokenRate =
+    detail.totalLookupCount > 0 ? detail.totalLookupHits / detail.totalLookupCount : null;
+  const avgSessionMs =
+    detail.totalSessions > 0 ? Math.round(detail.totalActiveMs / detail.totalSessions) : 0;
+  const lookupRate = buildLookupRateDisplay(detail.totalYomitanLookupCount, detail.totalTokensSeen);
+
+  const [knownWordsSummary, setKnownWordsSummary] = useState<{
+    totalUniqueWords: number;
+    knownWordCount: number;
+  } | null>(initialKnownWordsSummary);
+
+  useEffect(() => {
+    let cancelled = false;
+    getStatsClient()
+      .getMediaKnownWordsSummary(detail.videoId)
+      .then((data) => {
+        if (!cancelled) setKnownWordsSummary(data);
+      })
+      .catch(() => {
+        if (!cancelled) setKnownWordsSummary(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [detail.videoId]);
+
+  return (
+    <div className="flex gap-4">
+      <CoverImage
+        videoId={detail.videoId}
+        title={detail.canonicalTitle}
+        className="w-32 h-44 rounded-lg shrink-0"
+      />
+      <div className="flex-1 min-w-0">
+        <h2 className="text-lg font-bold text-ctp-text truncate">{detail.canonicalTitle}</h2>
+        <div className="grid grid-cols-2 gap-2 mt-3 text-sm">
+          <div>
+            <div className="text-ctp-blue font-medium">{formatDuration(detail.totalActiveMs)}</div>
+            <div className="text-xs text-ctp-overlay2">total watch time</div>
+          </div>
+          <div>
+            <div className="text-ctp-cards-mined font-medium">
+              {formatNumber(detail.totalCards)}
+            </div>
+            <div className="text-xs text-ctp-overlay2">cards mined</div>
+          </div>
+          <div>
+            <div className="text-ctp-mauve font-medium">{formatNumber(detail.totalTokensSeen)}</div>
+            <div className="text-xs text-ctp-overlay2">word occurrences</div>
+          </div>
+          <div>
+            <div className="text-ctp-lavender font-medium">
+              {formatNumber(detail.totalYomitanLookupCount)}
+            </div>
+            <div className="text-xs text-ctp-overlay2">Yomitan lookups</div>
+          </div>
+          <div>
+            <div className="text-ctp-sapphire font-medium">
+              {lookupRate?.shortValue ?? '\u2014'}
+            </div>
+            <div className="text-xs text-ctp-overlay2">
+              {lookupRate?.longValue ?? 'lookup rate'}
+            </div>
+          </div>
+          {knownWordsSummary && knownWordsSummary.totalUniqueWords > 0 ? (
+            <div>
+              <div className="text-ctp-green font-medium">
+                {formatNumber(knownWordsSummary.knownWordCount)} /{' '}
+                {formatNumber(knownWordsSummary.totalUniqueWords)}
+              </div>
+              <div className="text-xs text-ctp-overlay2">
+                known unique words (
+                {Math.round(
+                  (knownWordsSummary.knownWordCount / knownWordsSummary.totalUniqueWords) * 100,
+                )}
+                %)
+              </div>
+            </div>
+          ) : (
+            <div>
+              <div className="text-ctp-peach font-medium">{formatPercent(knownTokenRate)}</div>
+              <div className="text-xs text-ctp-overlay2">known word match rate</div>
+            </div>
+          )}
+          <div>
+            <div className="text-ctp-text font-medium">{detail.totalSessions}</div>
+            <div className="text-xs text-ctp-overlay2">sessions</div>
+          </div>
+          <div>
+            <div className="text-ctp-text font-medium">{formatDuration(avgSessionMs)}</div>
+            <div className="text-xs text-ctp-overlay2">avg session</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}