Add personal monthly viewing reports and CSV exports

frontend/app/insights/components.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useState } from 'react'
+import { getApiBase } from '../lib/auth'
+
+export type Breakdown = { name: string; minutes: number }
+export type Day = { date: string; minutes: number }
+export type Transcoding = {
+  video_minutes: number; audio_minutes: number; hardware_video_minutes: number; software_video_minutes: number
+  unknown_hardware_minutes: number; unknown_video_minutes: number; unknown_audio_minutes: number
+  hardware: Breakdown[]; audio_codecs: Breakdown[]; gpu_busy_minutes: null
+}
+export type Stats = {
+  state: 'ready' | 'not_configured' | 'unlinked'
+  is_admin: boolean
+  days: number
+  updated_at?: string
+  summary: null | { minutes: number; movies: number; episodes: number; plays: number; current_streak: number; longest_streak: number; active_days: number }
+  daily?: Day[]
+  top_titles?: { title: string; type: string; minutes: number; plays: number }[]
+  recent?: { id: string; title: string; series: string; episode?: string; type: string; minutes: number; played_at: string; client: string; method: string; artwork_url?: string | null }[]
+  clients?: Breakdown[]
+  methods?: Breakdown[]
+  transcoding?: Transcoding
+  requests: { total: number; movies: number; tv: number; pending: number; approved: number; declined: number; recent: { request_id: number; title: string; media_type: string; status: number }[] }
+}
+
+export const number = (value: number) => value.toLocaleString(undefined, { maximumFractionDigits: 0 })
+export const dateLabel = (date: string) => new Date(date).toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })
+
+export function ViewingChart({ daily }: { daily: Day[] }) {
+  const [selected, setSelected] = useState<number | null>(null)
+  const bucket = daily.length > 100 ? 7 : daily.length > 35 ? 3 : 1
+  const bars: { start: string; end: string; minutes: number }[] = []
+  for (let i = 0; i < daily.length; i += bucket) {
+    const group = daily.slice(i, i + bucket)
+    bars.push({ start: group[0].date, end: group[group.length - 1].date, minutes: group.reduce((sum, day) => sum + day.minutes, 0) })
+  }
+  const peak = Math.max(1, ...bars.map((bar) => bar.minutes))
+  const active = selected === null ? null : bars[selected]
+  return (
+    <section className="stats-panel stats-viewing" aria-labelledby="viewing-title">
+      <div className="stats-panel-heading"><div><h2 id="viewing-title">Your viewing rhythm</h2><p>{bucket === 1 ? 'Daily' : `${bucket}-day`} watch time · UTC</p></div><span className="stats-unit">Minutes</span></div>
+      <div className="stats-chart-detail" aria-live="polite">{active ? `${dateLabel(active.start)}${active.end !== active.start ? ` – ${dateLabel(active.end)}` : ''} · ${number(active.minutes)} minutes` : 'Select a bar to explore your watch time.'}</div>
+      <div className="stats-chart">
+        <div className="stats-chart-scale" aria-hidden="true"><span>{number(peak)}</span><span>{number(peak / 2)}</span><span>0</span></div>
+        <div className="stats-chart-bars">
+          {bars.map((bar, index) => <button type="button" className={selected === index ? 'is-selected' : ''} key={bar.start} aria-label={`${dateLabel(bar.start)}${bar.end !== bar.start ? ` to ${dateLabel(bar.end)}` : ''}: ${number(bar.minutes)} minutes`} aria-pressed={selected === index} onClick={() => setSelected(index)} onFocus={() => setSelected(index)}><span style={{ height: `${bar.minutes > 0 ? Math.max(2, bar.minutes / peak * 100) : 1}%` }} /></button>)}
+        </div>
+      </div>
+      <div className="stats-chart-axis" aria-hidden="true"><span>{bars[0] && dateLabel(bars[0].start)}</span><span>{bars.length > 0 && dateLabel(bars[bars.length - 1].end)}</span></div>
+    </section>
+  )
+}
+
+export function BreakdownCard({ title, rows }: { title: string; rows: Breakdown[] }) {
+  const total = rows.reduce((sum, row) => sum + row.minutes, 0)
+  return <section className="stats-panel"><div className="stats-panel-heading"><h2>{title}</h2></div>{rows.length ? <div className="stats-breakdown">{rows.map((row) => <div key={row.name}><div className="stats-breakdown-label"><span>{row.name}</span><strong>{number(row.minutes)} min</strong></div><div className="stats-meter"><span style={{ width: `${total ? row.minutes / total * 100 : 0}%` }} /></div></div>)}</div> : <p className="stats-muted">Your next watch will start the story here.</p>}</section>
+}
+
+const minutes = (value: number) => `${value.toLocaleString(undefined, { maximumFractionDigits: 1 })} min`
+
+export function StreamingCard({ rows, transcoding }: { rows: Breakdown[]; transcoding?: Transcoding }) {
+  const total = rows.reduce((sum, row) => sum + row.minutes, 0)
+  return <section className="stats-panel stats-streaming">
+    <div className="stats-panel-heading"><h2>How you streamed</h2></div>
+    <div className="stats-breakdown">{rows.map((row) => <div key={row.name}><div className="stats-breakdown-label"><span>{row.name}</span><strong>{minutes(row.minutes)}</strong></div><div className="stats-meter"><span style={{ width: `${total ? row.minutes / total * 100 : 0}%` }} /></div></div>)}</div>
+    {transcoding && <div className="stats-transcoding">
+      <h3>Transcoding playback time</h3>
+      <div className="stats-transcode-metrics">
+        <div><span>GPU-assisted video</span><strong>{transcoding.hardware_video_minutes === 0 && (transcoding.unknown_hardware_minutes > 0 || transcoding.unknown_video_minutes > 0) ? 'Not recorded' : minutes(transcoding.hardware_video_minutes)}</strong><small>{transcoding.hardware.map((entry) => `${entry.name} · ${minutes(entry.minutes)}`).join(' / ') || 'Hardware-accelerated video'}</small></div>
+        <div><span>Audio transcoding</span><strong>{transcoding.audio_minutes === 0 && transcoding.unknown_audio_minutes > 0 ? 'Not recorded' : minutes(transcoding.audio_minutes)}</strong><small>{transcoding.audio_codecs.slice(0, 3).map((entry) => `${entry.name} · ${minutes(entry.minutes)}`).join(' / ') || 'Audio converted for your player'}</small></div>
+      </div>
+      <dl className="stats-transcode-details"><div><dt>Total video transcoding</dt><dd>{transcoding.video_minutes === 0 && transcoding.unknown_video_minutes > 0 ? 'Not recorded' : minutes(transcoding.video_minutes)}</dd></div>{transcoding.software_video_minutes > 0 && <div><dt>Software video</dt><dd>{minutes(transcoding.software_video_minutes)}</dd></div>}{transcoding.unknown_hardware_minutes > 0 && <div><dt>Video hardware not recorded</dt><dd>{minutes(transcoding.unknown_hardware_minutes)}</dd></div>}</dl>
+      {(transcoding.unknown_audio_minutes > 0 || transcoding.unknown_video_minutes > 0) && <p className="stats-muted">Some stream details are missing: video {minutes(transcoding.unknown_video_minutes)}, audio {minutes(transcoding.unknown_audio_minutes)}.</p>}
+      <p className="stats-muted">Playback minutes, with audio and video counted separately. They can overlap. GPU busy time is not recorded by Jellystat.</p>
+    </div>}
+  </section>
+}
+
+export function RecentArtwork({ url, type }: { url?: string | null; type: string }) {
+  const [failed, setFailed] = useState(false)
+  return <div className={`stats-media-icon stats-media-icon-${type}`} aria-hidden="true">
+    {url && !failed ? <img src={`${getApiBase()}${url}`} alt="" width={44} height={66} loading="lazy" onError={() => setFailed(true)} /> : <span>{type === 'episode' ? 'TV' : type === 'movie' ? 'MV' : '▶'}</span>}
+  </div>
+}
+
+export function StatsNavigation({ reports = false }: { reports?: boolean }) {
+  return <nav className="stats-view-tabs" aria-label="My Stats views">
+    <a href="/insights" aria-current={!reports ? 'page' : undefined}>Overview</a>
+    <a href="/insights/reports" aria-current={reports ? 'page' : undefined}>Monthly reports</a>
+  </nav>
+}