283 lines
9.7 KiB
TypeScript
283 lines
9.7 KiB
TypeScript
"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[];
|
||
patterns?: {
|
||
average_play_minutes: number;
|
||
longest_play_minutes: number;
|
||
weekend_percent: number;
|
||
weekdays: Breakdown[];
|
||
media: Breakdown[];
|
||
};
|
||
top_titles?: { artwork_url?: string | null; 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>
|
||
);
|
||
}
|