167 lines
16 KiB
TypeScript
167 lines
16 KiB
TypeScript
'use client'
|
||
|
||
import { useCallback, useEffect, useState } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import { authFetch, getApiBase } from '../lib/auth'
|
||
import PageHeading from '../ui/PageHeading'
|
||
import './stats.css'
|
||
|
||
type Breakdown = { name: string; minutes: number }
|
||
type Day = { date: string; minutes: number }
|
||
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
|
||
}
|
||
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 }[] }
|
||
}
|
||
|
||
const number = (value: number) => value.toLocaleString(undefined, { maximumFractionDigits: 0 })
|
||
const dateLabel = (date: string) => new Date(date).toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })
|
||
|
||
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>
|
||
)
|
||
}
|
||
|
||
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`
|
||
|
||
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>
|
||
}
|
||
|
||
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 default function InsightsPage() {
|
||
const router = useRouter()
|
||
const [days, setDays] = useState(30)
|
||
const [data, setData] = useState<Stats | null>(null)
|
||
const [busy, setBusy] = useState(true)
|
||
const [error, setError] = useState('')
|
||
const [revision, setRevision] = useState(0)
|
||
const load = useCallback(async (signal: AbortSignal) => {
|
||
setBusy(true)
|
||
setError('')
|
||
setData(null)
|
||
try {
|
||
const response = await authFetch(`${getApiBase()}/insights?days=${days}`, { signal })
|
||
if (response.status === 401) { router.replace('/login?next=%2Finsights'); return }
|
||
if (response.status === 403) throw new Error('Your account cannot access viewing stats. Please contact an administrator.')
|
||
if (!response.ok) {
|
||
const result = await response.json().catch(() => ({}))
|
||
throw new Error(typeof result.detail === 'string' ? result.detail : 'Your viewing stats are temporarily unavailable. Please try again shortly.')
|
||
}
|
||
const result = await response.json() as Stats
|
||
if (!signal.aborted) setData(result)
|
||
} catch (err) {
|
||
if (!signal.aborted) setError(err instanceof Error ? err.message : 'Could not load your stats.')
|
||
} finally {
|
||
if (!signal.aborted) setBusy(false)
|
||
}
|
||
}, [days, router])
|
||
|
||
useEffect(() => {
|
||
const controller = new AbortController()
|
||
void load(controller.signal)
|
||
return () => controller.abort()
|
||
}, [load, revision])
|
||
|
||
const summary = data?.summary
|
||
return (
|
||
<main className="stats-page">
|
||
<PageHeading title="My Stats" description="Your viewing, in numbers. Watch time, favourite stories, and the requests that started it all." actions={<button className="ghost-button" type="button" disabled={busy} onClick={() => setRevision((value) => value + 1)}>{busy ? 'Loading…' : 'Refresh stats'}</button>} />
|
||
<div className="stats-toolbar">
|
||
<fieldset className="stats-period"><legend className="stats-sr-only">Stats period</legend>{[7, 30, 90, 365].map((value) => <button type="button" key={value} aria-pressed={days === value} onClick={() => setDays(value)}>{value === 365 ? 'Past year' : `${value} days`}</button>)}</fieldset>
|
||
<p className="stats-source"><span className={data?.state === 'ready' ? 'stats-source-dot is-ready' : 'stats-source-dot'} />From Jellystat{data?.updated_at && <span> · Updated {new Date(data.updated_at).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</span>}</p>
|
||
</div>
|
||
{busy && <div className="stats-state" role="status"><span className="stats-state-symbol" aria-hidden="true">◷</span><h2>Gathering your stats</h2><p>Fetching your viewing history from Jellystat.</p></div>}
|
||
{error && <div className="stats-state" role="alert"><h2>Stats couldn’t load</h2><p>{error}</p><button type="button" className="ghost-button" onClick={() => setRevision((value) => value + 1)}>Try again</button></div>}
|
||
{data?.state === 'not_configured' && <section className="stats-state"><span className="stats-state-symbol" aria-hidden="true">▥</span><h2>Your viewing story starts here</h2><p>{data.is_admin ? 'Connect your Jellystat instance to bring personal viewing stats into Magent.' : 'Viewing stats will appear here once your administrator connects Jellystat.'}</p>{data.is_admin && <a className="stats-action" href="/admin/jellystat">Connect Jellystat</a>}</section>}
|
||
{data?.state === 'unlinked' && <section className="stats-state"><h2>Link your viewing account</h2><p>Your Magent account needs a Jellyfin identity to find your stats. Sign in using Jellyfin, or ask your administrator to sync Jellyfin users.</p></section>}
|
||
{summary && <>
|
||
<section className="stats-metrics" aria-label="Viewing totals">
|
||
<article className="stats-metric stats-metric-accent"><span>Minutes watched</span><strong>{number(summary.minutes)}</strong><small>{number(summary.minutes / 60)} hours across {number(summary.plays)} plays</small></article>
|
||
<article className="stats-metric"><span>Movies played</span><strong>{number(summary.movies)}</strong><small>Different movies you pressed play on</small></article>
|
||
<article className="stats-metric"><span>Episodes played</span><strong>{number(summary.episodes)}</strong><small>Different episodes in your history</small></article>
|
||
<article className="stats-metric"><span>Requests made</span><strong>{number(data.requests.total)}</strong><small>{number(data.requests.movies)} movies · {number(data.requests.tv)} TV requests</small></article>
|
||
</section>
|
||
{summary.plays === 0 && <div className="stats-notice" role="status">No viewing history in this period yet. Try a longer period, or come back after your next watch.</div>}
|
||
<div className="stats-main-grid">
|
||
<ViewingChart key={`${days}-${revision}`} daily={data.daily ?? []} />
|
||
<section className="stats-panel stats-highlights"><div className="stats-panel-heading"><h2>A little watch history</h2></div>
|
||
<div className="stats-highlight"><span className="stats-highlight-number">{summary.current_streak}<small> days</small></span><div><strong>Current streak</strong><p>Consecutive viewing days through today or yesterday.</p></div></div>
|
||
<div className="stats-highlight"><span className="stats-highlight-number">{summary.longest_streak}<small> days</small></span><div><strong>Longest run</strong><p>Your best streak in this period.</p></div></div>
|
||
<div className="stats-highlight"><span className="stats-highlight-number">{summary.active_days}<small> days</small></span><div><strong>Time for a story</strong><p>Days with at least a minute watched.</p></div></div>
|
||
</section>
|
||
</div>
|
||
<div className="stats-three-grid">
|
||
<section className="stats-panel"><div className="stats-panel-heading"><h2>Most watched</h2><span className="stats-unit">By minutes</span></div>{data.top_titles?.length ? <ol className="stats-top-titles">{data.top_titles.map((title, index) => <li key={`${title.title}-${index}`}><span className="stats-rank">{String(index + 1).padStart(2, '0')}</span><div><strong>{title.title}</strong><small>{title.type === 'series' ? 'TV series' : title.type === 'movie' ? 'Movie' : 'Other media'} · {title.plays} plays</small></div><span>{number(title.minutes)}<small>min</small></span></li>)}</ol> : <p className="stats-muted">Your favourites will find their place here.</p>}</section>
|
||
<BreakdownCard title="Your players" rows={data.clients ?? []} />
|
||
<StreamingCard rows={data.methods ?? []} transcoding={data.transcoding} />
|
||
</div>
|
||
</>}
|
||
{data && <div className="stats-main-grid">
|
||
{summary && <section className="stats-panel stats-history"><div className="stats-panel-heading"><h2>Recently watched</h2><span className="stats-unit">Latest 20 plays</span></div>{data.recent?.length ? <div className="stats-history-list">{data.recent.map((play) => <article key={play.id}><RecentArtwork key={play.artwork_url ?? play.id} url={play.artwork_url} type={play.type} /><div className="stats-history-title"><strong>{play.series || play.title}</strong><small>{play.series ? `${play.episode} · ${play.title}` : play.type === 'movie' ? 'Movie' : 'Media'}</small><span>{play.client} · {play.method}</span></div><div className="stats-history-time"><strong>{number(play.minutes)} min</strong><time dateTime={play.played_at}>{dateLabel(play.played_at)}</time></div></article>)}</div> : <p className="stats-muted">Plays recorded by Jellystat will appear here.</p>}</section>}
|
||
<section className="stats-panel stats-requests"><div className="stats-panel-heading"><h2>Your requests</h2><a href="/">View all</a></div><div className="stats-request-total"><strong>{data.requests.total}</strong><span>submitted in the past {days} days</span></div><div className="stats-request-counts"><span><strong>{data.requests.pending}</strong> Pending</span><span><strong>{data.requests.approved}</strong> Approved</span><span><strong>{data.requests.declined}</strong> Declined</span></div>{data.requests.recent.length > 0 ? <ul className="stats-request-list">{data.requests.recent.map((request) => <li key={request.request_id}><a href={`/requests/${request.request_id}`}>{request.title || `Request ${request.request_id}`}<span aria-hidden="true">↗</span></a></li>)}</ul> : <p className="stats-muted">Something on your watchlist? <a href="/new-requests">Make a request.</a></p>}</section>
|
||
</div>}
|
||
{summary && <p className="stats-footnote">Private to your account · Stats come from Jellystat and may take a minute to refresh. Counts describe plays, including unfinished watches. Movies are identified from Jellystat’s movie libraries; other media still contributes to watch time. Charts and streaks use UTC and the activity dates recorded by Jellystat.</p>}
|
||
</main>
|
||
)
|
||
}
|