feat(release): publish minimal self-contained Magent source
This commit is contained in:
Magent release tooling
@@ -0,0 +1,282 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,338 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { authFetch, getApiBase } from "../lib/auth";
|
||||
import { useEffectiveRole } from "../lib/viewMode";
|
||||
import PageHeading from "../ui/PageHeading";
|
||||
import {
|
||||
type Stats,
|
||||
BreakdownCard,
|
||||
RecentArtwork,
|
||||
StatsNavigation,
|
||||
StreamingCard,
|
||||
ViewingChart,
|
||||
dateLabel,
|
||||
number,
|
||||
} from "./components";
|
||||
import "./stats.css";
|
||||
|
||||
export default function InsightsPage() {
|
||||
const router = useRouter();
|
||||
const [days, setDays] = useState(30);
|
||||
const [data, setData] = useState<Stats | null>(null);
|
||||
const isAdmin = useEffectiveRole(data?.is_admin ? "admin" : "user") === "admin";
|
||||
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(() => {
|
||||
void revision;
|
||||
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>
|
||||
}
|
||||
/>
|
||||
<StatsNavigation />
|
||||
<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>
|
||||
{isAdmin
|
||||
? "Connect your Jellystat instance to bring personal viewing stats into Magent."
|
||||
: "Viewing stats will appear here once your administrator connects Jellystat."}
|
||||
</p>
|
||||
{isAdmin && (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { authFetch, getApiBase } from "../../lib/auth";
|
||||
|
||||
type Delivery = { id: string; month: string; state: string; detail: string };
|
||||
type Preference = { email: string | null; can_send: boolean; state: string; detail: string; deliveries: Delivery[] };
|
||||
|
||||
export default function EmailReportControl({ month }: { month: string }) {
|
||||
const [data, setData] = useState<Preference | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [notice, setNotice] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [revision, setRevision] = useState(0);
|
||||
const request = useRef<{ month: string; id: string } | null>(null);
|
||||
const pending =
|
||||
data?.deliveries.some((item) => ["queued", "preparing", "sending", "retry"].includes(item.state)) ?? false;
|
||||
|
||||
useEffect(() => {
|
||||
void revision;
|
||||
const abort = new AbortController();
|
||||
void authFetch(`${getApiBase()}/profile/email-recaps`, { signal: abort.signal })
|
||||
.then(async (response) => {
|
||||
if (!response.ok) throw new Error("Could not load your report email preferences. Refresh to try again.");
|
||||
const result = await response.json();
|
||||
if (!abort.signal.aborted) setData(result);
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
if (!abort.signal.aborted) setError(err.message);
|
||||
});
|
||||
return () => abort.abort();
|
||||
}, [revision]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pending) return;
|
||||
const timer = window.setInterval(() => setRevision((value) => value + 1), 10000);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [pending]);
|
||||
|
||||
const send = async () => {
|
||||
if (busy || !data?.can_send) return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
setNotice("");
|
||||
if (request.current?.month !== month) request.current = { month, id: crypto.randomUUID() };
|
||||
try {
|
||||
const response = await authFetch(`${getApiBase()}/profile/email-recaps/send`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ month, request_id: request.current.id }),
|
||||
});
|
||||
const result = await response.json().catch(() => ({}));
|
||||
if (!response.ok)
|
||||
throw new Error(typeof result.detail === "string" ? result.detail : "Could not queue your report. Try again.");
|
||||
setNotice(result.message);
|
||||
request.current = null;
|
||||
setRevision((value) => value + 1);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Could not queue your report.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="stats-panel report-email-panel" aria-label="Email your report">
|
||||
<div className="stats-panel-heading">
|
||||
<h2>Email yourself this report</h2>
|
||||
<a href="/profile#monthly-recaps">Email preferences</a>
|
||||
</div>
|
||||
<p>
|
||||
Choose a month above, including the current month so far, then send its viewing and request summary to your
|
||||
confirmed profile email.
|
||||
</p>
|
||||
{data?.can_send ? (
|
||||
<p>
|
||||
<strong>{data.email}</strong> · One report email every five minutes.
|
||||
</p>
|
||||
) : (
|
||||
data && (
|
||||
<p>
|
||||
{data.state === "enabled"
|
||||
? data.detail
|
||||
: "Confirm your profile email in Email preferences first. You can choose on-demand delivery without automatic monthly emails."}
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
<button type="button" disabled={busy || !data?.can_send} onClick={() => void send()}>
|
||||
{busy ? "Queueing report…" : "Email this report"}
|
||||
</button>
|
||||
{notice && <p role="status">{notice}</p>}
|
||||
{error && <p role="alert">{error}</p>}
|
||||
{!!data?.deliveries.length && (
|
||||
<details>
|
||||
<summary>Recent report emails</summary>
|
||||
<ul>
|
||||
{data.deliveries.map((item) => (
|
||||
<li key={item.id}>
|
||||
<strong>{item.month}</strong> · {item.state === "sent" ? "Accepted by mail server" : item.state} —{" "}
|
||||
{item.detail || "Waiting for delivery"}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</details>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,533 @@
|
||||
"use client";
|
||||
|
||||
import EmailReportControl from "./EmailReportControl";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { authFetch, getApiBase } from "../../lib/auth";
|
||||
import { useEffectiveRole } from "../../lib/viewMode";
|
||||
import PageHeading from "../../ui/PageHeading";
|
||||
import {
|
||||
type Stats,
|
||||
BreakdownCard,
|
||||
RecentArtwork,
|
||||
StatsNavigation,
|
||||
StreamingCard,
|
||||
ViewingChart,
|
||||
dateLabel,
|
||||
number,
|
||||
} from "../components";
|
||||
import "../stats.css";
|
||||
import "./reports.css";
|
||||
|
||||
type Change = { current: number; previous: number; difference: number; percent: number | null };
|
||||
type MonthlyReport = Omit<Stats, "days"> & {
|
||||
month: string;
|
||||
available_months: string[];
|
||||
is_partial: boolean;
|
||||
comparison_capped: boolean;
|
||||
period_start: string;
|
||||
period_end: string;
|
||||
comparison_month: string;
|
||||
comparison_start: string;
|
||||
comparison_end: string;
|
||||
previous_summary?: Stats["summary"];
|
||||
previous_requests?: Omit<Stats["requests"], "recent">;
|
||||
changes?: Record<"minutes" | "movies" | "episodes" | "plays" | "active_days" | "longest_streak" | "requests", Change>;
|
||||
};
|
||||
|
||||
const monthLabel = (month: string, short = false) =>
|
||||
new Date(`${month}-01T00:00:00Z`).toLocaleDateString(undefined, {
|
||||
month: short ? "short" : "long",
|
||||
year: "numeric",
|
||||
timeZone: "UTC",
|
||||
});
|
||||
const decimal = (value: number) => value.toLocaleString(undefined, { maximumFractionDigits: 1 });
|
||||
|
||||
function ChangeLabel({ change, unit = "" }: { change: Change; unit?: string }) {
|
||||
const delta = change.difference;
|
||||
return (
|
||||
<div className={`report-change ${delta > 0 ? "is-up" : delta < 0 ? "is-down" : "is-flat"}`}>
|
||||
<span>
|
||||
{delta === 0
|
||||
? "No change"
|
||||
: `${delta > 0 ? "+" : "−"}${decimal(Math.abs(delta))}${unit}${change.percent === null ? "" : ` (${delta > 0 ? "+" : "−"}${decimal(Math.abs(change.percent))}%)`}`}
|
||||
</span>
|
||||
<small>
|
||||
{change.percent === null
|
||||
? "No activity recorded in the comparison period"
|
||||
: `Previously ${decimal(change.previous)}${unit}`}
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MonthlyReportsPage() {
|
||||
const router = useRouter();
|
||||
const [month, setMonth] = useState("");
|
||||
const [monthReady, setMonthReady] = useState(false);
|
||||
const [months, setMonths] = useState<string[]>([]);
|
||||
const [data, setData] = useState<MonthlyReport | null>(null);
|
||||
const isAdmin = useEffectiveRole(data?.is_admin ? "admin" : "user") === "admin";
|
||||
const [busy, setBusy] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [revision, setRevision] = useState(0);
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const [downloadError, setDownloadError] = useState("");
|
||||
const downloadController = useRef<AbortController | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setMonth(new URLSearchParams(window.location.search).get("month") || "");
|
||||
setMonthReady(true);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (monthReady)
|
||||
window.history.replaceState(null, "", `/insights/reports${month ? `?month=${encodeURIComponent(month)}` : ""}`);
|
||||
}, [month, monthReady]);
|
||||
useEffect(() => () => downloadController.current?.abort(), []);
|
||||
const load = useCallback(
|
||||
async (signal: AbortSignal) => {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
setData(null);
|
||||
setDownloadError("");
|
||||
try {
|
||||
const query = month ? `?month=${encodeURIComponent(month)}` : "";
|
||||
const response = await authFetch(`${getApiBase()}/insights/reports/monthly${query}`, { signal });
|
||||
if (response.status === 401) {
|
||||
router.replace(`/login?next=${encodeURIComponent(`/insights/reports${query}`)}`);
|
||||
return;
|
||||
}
|
||||
if (response.status === 403)
|
||||
throw new Error("Your account cannot access viewing reports. Please contact an administrator.");
|
||||
if (!response.ok) {
|
||||
const result = await response.json().catch(() => ({}));
|
||||
throw new Error(
|
||||
typeof result.detail === "string"
|
||||
? result.detail
|
||||
: "Your report is temporarily unavailable. Please try again shortly.",
|
||||
);
|
||||
}
|
||||
const result = (await response.json()) as MonthlyReport;
|
||||
if (!signal.aborted) {
|
||||
setData(result);
|
||||
setMonths(result.available_months);
|
||||
}
|
||||
} catch (err) {
|
||||
if (!signal.aborted) setError(err instanceof Error ? err.message : "Could not load your report.");
|
||||
} finally {
|
||||
if (!signal.aborted) setBusy(false);
|
||||
}
|
||||
},
|
||||
[month, router],
|
||||
);
|
||||
useEffect(() => {
|
||||
void revision;
|
||||
if (!monthReady) return;
|
||||
const controller = new AbortController();
|
||||
void load(controller.signal);
|
||||
return () => controller.abort();
|
||||
}, [load, revision, monthReady]);
|
||||
|
||||
const download = async () => {
|
||||
if (data?.state !== "ready" || downloading) return;
|
||||
const selected = data.month;
|
||||
const controller = new AbortController();
|
||||
downloadController.current = controller;
|
||||
setDownloading(true);
|
||||
setDownloadError("");
|
||||
try {
|
||||
const response = await authFetch(`${getApiBase()}/insights/reports/monthly.csv?month=${selected}`, {
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (response.status === 401) {
|
||||
router.replace(`/login?next=${encodeURIComponent(`/insights/reports?month=${selected}`)}`);
|
||||
return;
|
||||
}
|
||||
if (!response.ok) throw new Error("The report could not be downloaded. Please try again.");
|
||||
const blob = await response.blob();
|
||||
if (controller.signal.aborted) return;
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `magent-monthly-report-${selected}.csv`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.setTimeout(() => URL.revokeObjectURL(url), 1000);
|
||||
} catch (err) {
|
||||
if (!controller.signal.aborted)
|
||||
setDownloadError(err instanceof Error ? err.message : "Could not download your report.");
|
||||
} finally {
|
||||
if (!controller.signal.aborted) setDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectedMonth = month || data?.month || "";
|
||||
const monthIndex = months.indexOf(selectedMonth);
|
||||
const summary = data?.summary;
|
||||
const changes = data?.changes;
|
||||
return (
|
||||
<main className="stats-page reports-page">
|
||||
<PageHeading
|
||||
title="Monthly report"
|
||||
description="Your month in viewing. See what you watched, what changed, and what you requested."
|
||||
actions={
|
||||
<>
|
||||
<button
|
||||
className="ghost-button"
|
||||
type="button"
|
||||
disabled={busy || downloading}
|
||||
onClick={() => setRevision((value) => value + 1)}
|
||||
>
|
||||
Refresh report
|
||||
</button>
|
||||
<button
|
||||
className="ghost-button"
|
||||
type="button"
|
||||
disabled={busy || downloading || data?.state !== "ready"}
|
||||
onClick={() => void download()}
|
||||
>
|
||||
{downloading ? "Downloading…" : "Download CSV"}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<StatsNavigation reports />
|
||||
<div className="stats-toolbar">
|
||||
<div className="report-month-picker">
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
aria-label="Previous month"
|
||||
disabled={busy || downloading || monthIndex < 0 || monthIndex >= months.length - 1}
|
||||
onClick={() => setMonth(months[monthIndex + 1])}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<label>
|
||||
<span className="stats-sr-only">Report month</span>
|
||||
<select
|
||||
value={selectedMonth}
|
||||
disabled={busy || downloading || !months.length}
|
||||
onChange={(event) => setMonth(event.target.value)}
|
||||
>
|
||||
{!selectedMonth && <option value="">Latest complete month</option>}
|
||||
{months.map((value, index) => (
|
||||
<option value={value} key={value}>
|
||||
{monthLabel(value)}
|
||||
{index === 0 ? " · month to date" : ""}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
aria-label="Next month"
|
||||
disabled={busy || downloading || monthIndex <= 0}
|
||||
onClick={() => setMonth(months[monthIndex - 1])}
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
<p className="stats-source">
|
||||
<span className={data?.state === "ready" ? "stats-source-dot is-ready" : "stats-source-dot"} />
|
||||
From Jellystat · UTC
|
||||
</p>
|
||||
</div>
|
||||
{downloadError && (
|
||||
<p className="stats-notice" role="alert">
|
||||
{downloadError}
|
||||
</p>
|
||||
)}
|
||||
{data?.state === "ready" && !busy && <EmailReportControl month={data.month} />}
|
||||
{busy && (
|
||||
<div className="stats-state" role="status">
|
||||
<span className="stats-state-symbol" aria-hidden="true">
|
||||
◷
|
||||
</span>
|
||||
<h2>Putting your month together</h2>
|
||||
<p>Gathering your viewing history and the previous month’s comparison.</p>
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="stats-state" role="alert">
|
||||
<h2>Report couldn’t load</h2>
|
||||
<p>{error}</p>
|
||||
<button type="button" className="ghost-button" onClick={() => setRevision((value) => value + 1)}>
|
||||
Try again
|
||||
</button>
|
||||
{month && (
|
||||
<button type="button" className="ghost-button" onClick={() => setMonth("")}>
|
||||
Latest complete month
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{data?.state === "not_configured" && (
|
||||
<section className="stats-state">
|
||||
<h2>Your monthly story starts here</h2>
|
||||
<p>
|
||||
{isAdmin
|
||||
? "Connect Jellystat to bring your monthly viewing reports into Magent."
|
||||
: "Monthly reports will appear once your administrator connects Jellystat."}
|
||||
</p>
|
||||
{isAdmin && (
|
||||
<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 report needs your Jellyfin account link. Sign in using Jellyfin, or ask your administrator to review
|
||||
your user identities.
|
||||
</p>
|
||||
{isAdmin && (
|
||||
<a className="stats-action" href="/admin/identities">
|
||||
Review user identities
|
||||
</a>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
{data && summary && changes && (
|
||||
<>
|
||||
<section className="report-intro" aria-label="Report period">
|
||||
<div>
|
||||
<span className="report-kicker">{data.is_partial ? "Month to date" : "Your monthly recap"}</span>
|
||||
<h2>{monthLabel(data.month)}</h2>
|
||||
<p>
|
||||
{data.is_partial
|
||||
? `Compared with the same elapsed time in ${monthLabel(data.comparison_month)}${data.comparison_capped ? ", capped at the end of that month" : ""}.`
|
||||
: `Compared with ${monthLabel(data.comparison_month)}.`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="report-period-meta">
|
||||
<span>{data.is_partial ? "In progress" : "Complete month"}</span>
|
||||
<small>
|
||||
{data.updated_at &&
|
||||
`Updated ${new Date(data.updated_at).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short", timeZone: "UTC" })} UTC`}
|
||||
</small>
|
||||
</div>
|
||||
</section>
|
||||
<section className="stats-metrics" aria-label="Monthly totals">
|
||||
<article className="stats-metric stats-metric-accent">
|
||||
<span>Minutes watched</span>
|
||||
<strong>{number(summary.minutes)}</strong>
|
||||
<small>
|
||||
{decimal(summary.minutes / 60)} hours across {number(summary.plays)} plays
|
||||
</small>
|
||||
<ChangeLabel change={changes.minutes} unit=" min" />
|
||||
</article>
|
||||
<article className="stats-metric">
|
||||
<span>Movies played</span>
|
||||
<strong>{number(summary.movies)}</strong>
|
||||
<small>Different movies you pressed play on</small>
|
||||
<ChangeLabel change={changes.movies} />
|
||||
</article>
|
||||
<article className="stats-metric">
|
||||
<span>Episodes played</span>
|
||||
<strong>{number(summary.episodes)}</strong>
|
||||
<small>Different episodes in your history</small>
|
||||
<ChangeLabel change={changes.episodes} />
|
||||
</article>
|
||||
<article className="stats-metric">
|
||||
<span>Requests made</span>
|
||||
<strong>{number(data.requests.total)}</strong>
|
||||
<small>
|
||||
{data.requests.movies} movies · {data.requests.tv} TV requests
|
||||
</small>
|
||||
<ChangeLabel change={changes.requests} />
|
||||
</article>
|
||||
</section>
|
||||
{summary.plays === 0 && (
|
||||
<div className="stats-notice" role="status">
|
||||
No viewing history was recorded for this month. Your request totals and comparison are still shown.
|
||||
</div>
|
||||
)}
|
||||
<div className="stats-main-grid">
|
||||
<ViewingChart key={`${data.month}-${revision}`} daily={data.daily ?? []} />
|
||||
<section className="stats-panel report-highlights">
|
||||
<div className="stats-panel-heading">
|
||||
<h2>Your viewing habits</h2>
|
||||
</div>
|
||||
<div className="stats-highlight">
|
||||
<span className="stats-highlight-number">
|
||||
{summary.active_days}
|
||||
<small> days</small>
|
||||
</span>
|
||||
<div>
|
||||
<strong>Days you watched</strong>
|
||||
<p>At least one minute of viewing.</p>
|
||||
<ChangeLabel change={changes.active_days} unit=" days" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="stats-highlight">
|
||||
<span className="stats-highlight-number">
|
||||
{summary.longest_streak}
|
||||
<small> days</small>
|
||||
</span>
|
||||
<div>
|
||||
<strong>Longest run</strong>
|
||||
<p>Consecutive viewing days this month.</p>
|
||||
<ChangeLabel change={changes.longest_streak} unit=" days" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="stats-highlight">
|
||||
<span className="stats-highlight-number">
|
||||
{data.daily?.length ? number(summary.minutes / data.daily.length) : 0}
|
||||
<small> min</small>
|
||||
</span>
|
||||
<div>
|
||||
<strong>Daily average</strong>
|
||||
<p>Across the calendar days in this report.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{data.patterns && (
|
||||
<>
|
||||
<section className="report-pattern-summary" aria-label="Viewing insights">
|
||||
<article>
|
||||
<span>Average play</span>
|
||||
<strong>
|
||||
{decimal(data.patterns.average_play_minutes)} <small>min</small>
|
||||
</strong>
|
||||
<p>Time per recorded playback session.</p>
|
||||
</article>
|
||||
<article>
|
||||
<span>Longest play</span>
|
||||
<strong>
|
||||
{decimal(data.patterns.longest_play_minutes)} <small>min</small>
|
||||
</strong>
|
||||
<p>Your longest recorded session this month.</p>
|
||||
</article>
|
||||
<article>
|
||||
<span>Weekend viewing</span>
|
||||
<strong>
|
||||
{decimal(data.patterns.weekend_percent)}
|
||||
<small>%</small>
|
||||
</strong>
|
||||
<p>Share of viewing on Saturday and Sunday (UTC).</p>
|
||||
</article>
|
||||
</section>
|
||||
<div className="stats-main-grid">
|
||||
<BreakdownCard title="Your week in viewing (UTC)" rows={data.patterns.weekdays} />
|
||||
<BreakdownCard title="Movies, TV and more" rows={data.patterns.media} />
|
||||
</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 report-top-titles">
|
||||
{data.top_titles.map((title, index) => (
|
||||
<li key={`${title.title}-${index}`}>
|
||||
<RecentArtwork url={title.artwork_url} type={title.type} />
|
||||
<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 most watched titles will appear here.</p>
|
||||
)}
|
||||
</section>
|
||||
<BreakdownCard title="Your players" rows={data.clients ?? []} />
|
||||
<StreamingCard rows={data.methods ?? []} transcoding={data.transcoding} />
|
||||
</div>
|
||||
<div className="stats-main-grid">
|
||||
<section className="stats-panel stats-history">
|
||||
<div className="stats-panel-heading">
|
||||
<h2>A look back</h2>
|
||||
<span className="stats-unit">Latest 20 plays this month</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 during this month 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 {monthLabel(data.month, true)}</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 ? (
|
||||
<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">No requests recorded during this month.</p>
|
||||
)}
|
||||
<p className="stats-muted">Statuses reflect where these requests are now.</p>
|
||||
</section>
|
||||
</div>
|
||||
<p className="stats-footnote">
|
||||
Private to your account · Based on history retained by Jellystat and requests available in Magent. Plays
|
||||
include unfinished watches. Dates and streaks use UTC. Reports may take a minute to refresh; historical
|
||||
totals can change when retained history or library metadata changes.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
.report-month-picker { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.report-month-picker > button { min-width: 38px; min-height: 42px; padding: 8px; }
|
||||
.report-month-picker label { min-width: 0; }
|
||||
.report-month-picker select { width: 100%; min-height: 42px; padding: 10px 32px 10px 14px; border: 1px solid var(--ops-line); border-radius: 8px; background: var(--ops-panel); color: var(--ops-text); font-size: 13px; }
|
||||
.report-month-picker :disabled { opacity: .5; cursor: default; }
|
||||
.report-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 0; }
|
||||
.report-kicker { color: var(--ops-faint); font-size: 12px; }
|
||||
.report-intro h2 { margin: 8px 0; font-size: clamp(24px, 3vw, 32px); color: var(--ops-text); }
|
||||
.report-intro p { margin: 0; color: var(--ops-muted); font-size: 13px; line-height: 1.7; }
|
||||
.report-period-meta { display: grid; justify-items: end; gap: 10px; text-align: right; }
|
||||
.report-period-meta > span { padding: 6px 10px; border: 1px solid var(--ops-line); border-radius: 6px; color: #d1c6ff; font-size: 11px; white-space: nowrap; }
|
||||
.report-period-meta small { color: var(--ops-faint); font-size: 11px; line-height: 1.6; }
|
||||
.report-change { display: grid; gap: 5px; font-size: 12px; line-height: 1.6; }
|
||||
.stats-metric > .report-change { padding-top: 12px; border-top: 1px solid var(--ops-line-soft); }
|
||||
.report-change > span { color: var(--ops-muted); }
|
||||
.report-change.is-up > span { color: #d1c6ff; }
|
||||
.report-change small { color: var(--ops-faint); font-size: 11px; }
|
||||
.report-highlights .report-change { margin-top: 8px; }
|
||||
.report-top-titles li { grid-template-columns: minmax(0, 1fr) auto; }
|
||||
.reports-page .stats-highlight { grid-template-columns: 85px minmax(0, 1fr); }
|
||||
@media (max-width: 760px) {
|
||||
.report-intro { align-items: start; flex-direction: column; gap: 16px; }
|
||||
.report-period-meta { justify-items: start; text-align: left; }
|
||||
.report-month-picker { width: 100%; }
|
||||
.report-month-picker label { flex: 1; }
|
||||
}
|
||||
|
||||
.report-email-panel { display: grid; gap: 12px; }
|
||||
.report-email-panel > button { justify-self: start; }
|
||||
.report-email-panel p, .report-email-panel li { overflow-wrap: anywhere; }
|
||||
|
||||
.report-pattern-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
|
||||
.report-pattern-summary article { padding:24px; border:1px solid #45404e; border-radius:16px; background:linear-gradient(135deg,#262137,#14292d); }
|
||||
.report-pattern-summary span { color:#d0c6e7; font-size:13px; }
|
||||
.report-pattern-summary strong { display:block; font-size:36px; margin:12px 0; color:#c5baff; }
|
||||
.report-pattern-summary small { font-size:16px; }
|
||||
.report-pattern-summary p { color:#b6b6c0; font-size:13px; margin:0; }
|
||||
.report-top-titles li { grid-template-columns:44px minmax(0,1fr) auto; gap:12px; }
|
||||
.report-top-titles li > div { flex:1; min-width:0; }
|
||||
.report-top-titles li > .stats-media-icon { width:44px; }
|
||||
@media(max-width:640px) { .report-pattern-summary { grid-template-columns:1fr; } }
|
||||
@@ -0,0 +1,110 @@
|
||||
.stats-page { padding-bottom: 32px !important; }
|
||||
.stats-view-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--ops-line-soft); }
|
||||
.stats-view-tabs a { padding: 0 0 14px; border-bottom: 2px solid transparent; color: var(--ops-muted); font-size: 13px; text-decoration: none; }
|
||||
.stats-view-tabs a[aria-current=page] { border-color: #c7bdff; color: #d1c6ff; }
|
||||
.stats-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
||||
.stats-period { display: flex; padding: 4px; margin: 0; min-width: 0; gap: 4px; border: 1px solid var(--ops-line); border-radius: 10px; background: var(--ops-panel); }
|
||||
.stats-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
.stats-period button { min-height: 38px; padding: 8px 16px; border: 0; border-radius: 6px; background: transparent !important; color: var(--ops-muted) !important; font-size: 13px; text-transform: none; }
|
||||
.stats-period button[aria-pressed=true] { background: #c7bdff !important; color: #211a36 !important; font-weight: 700; }
|
||||
.stats-source { margin: 0; font-size: 12px; color: var(--ops-muted); }
|
||||
.stats-source-dot { display: inline-block; height: 6px; width: 6px; margin-right: 8px; border-radius: 50%; background: var(--ops-faint); }
|
||||
.stats-source-dot.is-ready { background: #95d5b2; }
|
||||
.stats-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
|
||||
.stats-metric { display: grid; align-content: start; gap: 12px; padding: 24px; border: 1px solid var(--ops-line); border-radius: 12px; background: var(--ops-panel); }
|
||||
.stats-metric > span { font-size: 13px; color: var(--ops-muted); }
|
||||
.stats-metric > strong { font: 600 clamp(28px, 3vw, 42px)/1.15 "DM Sans", sans-serif; color: var(--ops-text); letter-spacing: -.03em; }
|
||||
.stats-metric > small { color: var(--ops-faint); font-size: 12px; line-height: 1.6; }
|
||||
.stats-metric-accent { border-color: #655987; background: linear-gradient(135deg, #2f2940, var(--ops-panel)); }
|
||||
.stats-metric-accent > strong { color: #d5cbff; }
|
||||
.stats-main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; }
|
||||
.stats-three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
|
||||
.stats-panel { min-width: 0; padding: 24px; border: 1px solid var(--ops-line); border-radius: 12px; background: var(--ops-panel); }
|
||||
.stats-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
|
||||
.stats-panel h2 { margin: 0; color: var(--ops-text); font-size: 17px; font-weight: 600; }
|
||||
.stats-panel-heading p { margin: 8px 0 0; color: var(--ops-faint); font-size: 12px; }
|
||||
.stats-panel-heading a { font-size: 12px; white-space: nowrap; color: #c7bdff; }
|
||||
.stats-unit { color: var(--ops-faint); font-size: 11px; white-space: nowrap; }
|
||||
.stats-chart-detail { min-height: 28px; color: var(--ops-muted); font-size: 12px; }
|
||||
.stats-chart { height: 180px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
|
||||
.stats-chart-scale { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font: 10px "JetBrains Mono", monospace; color: var(--ops-faint); }
|
||||
.stats-chart-bars { display: flex; align-items: stretch; gap: clamp(2px, .5vw, 8px); background: repeating-linear-gradient(to top, var(--ops-line-soft) 0px, var(--ops-line-soft) 1px, transparent 1px, transparent 50%); }
|
||||
.stats-chart-bars button { display: flex; align-items: flex-end; justify-content: center; padding: 0; min-width: 0; flex: 1; border: 0; background: transparent !important; border-radius: 3px; }
|
||||
.stats-chart-bars button > span { display: block; width: 100%; max-width: 44px; background: #9085b8; border-radius: 3px 3px 0 0; }
|
||||
.stats-chart-bars button:is(:hover, :focus-visible, .is-selected) > span { background: #d1c6ff; }
|
||||
.stats-chart-axis { display: flex; justify-content: space-between; padding-left: 50px; margin-top: 12px; color: var(--ops-faint); font-size: 11px; }
|
||||
.stats-highlight { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 16px; align-items: center; padding: 19px 0; border-top: 1px solid var(--ops-line-soft); }
|
||||
.stats-highlight:first-of-type { border-top: 0; }
|
||||
.stats-highlight-number { font-size: 28px; color: #d1c6ff; font-weight: 600; }
|
||||
.stats-highlight-number small { font-size: 11px; color: var(--ops-faint); font-weight: 400; }
|
||||
.stats-highlight strong { font-size: 13px; color: var(--ops-text); }
|
||||
.stats-highlight p { margin: 6px 0 0; color: var(--ops-faint); font-size: 12px; line-height: 1.5; }
|
||||
.stats-top-titles { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
|
||||
.stats-top-titles li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
|
||||
.stats-rank { font: 11px "JetBrains Mono", monospace; color: var(--ops-faint); }
|
||||
.stats-top-titles strong { display: block; font-size: 13px; font-weight: 500; color: var(--ops-text); overflow-wrap: anywhere; }
|
||||
.stats-top-titles small { display: block; margin-top: 5px; font-size: 11px; color: var(--ops-faint); }
|
||||
.stats-top-titles li > span:last-child { text-align: right; font-size: 13px; color: var(--ops-muted); }
|
||||
.stats-breakdown { display: grid; gap: 24px; }
|
||||
.stats-breakdown-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12px; }
|
||||
.stats-breakdown-label span { color: var(--ops-muted); overflow-wrap: anywhere; }
|
||||
.stats-breakdown-label strong { white-space: nowrap; font-size: 11px; color: var(--ops-faint); font-weight: 400; }
|
||||
.stats-meter { height: 5px; background: var(--ops-line-soft); border-radius: 5px; overflow: hidden; }
|
||||
.stats-meter > span { display: block; height: 100%; background: #a497c9; border-radius: 5px; }
|
||||
.stats-history-list { display: grid; }
|
||||
.stats-history-list article { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--ops-line-soft); }
|
||||
.stats-history-list article:first-child { padding-top: 0; border-top: 0; }
|
||||
.stats-media-icon { display: grid; place-items: center; flex: 0 0 44px; height: 66px; border-radius: 6px; overflow: hidden; background: #373043; color: #cfc1eb; font: 10px "JetBrains Mono", monospace; }
|
||||
.stats-media-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
.stats-transcoding { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ops-line-soft); }
|
||||
.stats-transcoding h3 { margin: 0 0 16px; color: var(--ops-text); font-size: 13px; font-weight: 500; }
|
||||
.stats-transcode-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
||||
.stats-transcode-metrics > div { display: grid; align-content: start; gap: 8px; min-width: 0; }
|
||||
.stats-transcode-metrics span { color: var(--ops-muted); font-size: 11px; }
|
||||
.stats-transcode-metrics strong { color: #d1c6ff; font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
|
||||
.stats-transcode-metrics small { color: var(--ops-faint); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
|
||||
.stats-transcode-details { display: grid; gap: 10px; margin: 20px 0 12px; }
|
||||
.stats-transcode-details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--ops-muted); }
|
||||
.stats-transcode-details dd { margin: 0; white-space: nowrap; color: var(--ops-faint); }
|
||||
.stats-transcoding > p { margin: 12px 0 0; font-size: 10px; }
|
||||
.stats-media-icon-movie { background: #3c322c; color: #e5bfa8; }
|
||||
.stats-history-title { flex: 1; min-width: 0; }
|
||||
.stats-history-title strong { display: block; color: var(--ops-text); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
|
||||
.stats-history-title small, .stats-history-title > span { display: block; color: var(--ops-faint); font-size: 11px; line-height: 1.6; margin-top: 3px; overflow-wrap: anywhere; }
|
||||
.stats-history-title > span { font-size: 10px; }
|
||||
.stats-history-time { display: grid; gap: 8px; text-align: right; flex-shrink: 0; }
|
||||
.stats-history-time strong { font-size: 12px; color: var(--ops-muted); font-weight: 500; }
|
||||
.stats-history-time time { font-size: 11px; color: var(--ops-faint); }
|
||||
.stats-requests { align-self: start; }
|
||||
.stats-request-total { display: flex; align-items: center; gap: 16px; }
|
||||
.stats-request-total > strong { font-size: 36px; color: var(--ops-text); }
|
||||
.stats-request-total > span { max-width: 15ch; color: var(--ops-muted); font-size: 12px; line-height: 1.6; }
|
||||
.stats-request-counts { display: flex; justify-content: space-between; gap: 8px; padding: 20px 0; margin-top: 16px; border-block: 1px solid var(--ops-line-soft); }
|
||||
.stats-request-counts > span { font-size: 11px; color: var(--ops-faint); }
|
||||
.stats-request-counts strong { display: block; margin-bottom: 8px; color: var(--ops-text); font-size: 18px; font-weight: 500; }
|
||||
.stats-request-list { list-style: none; margin: 10px 0 0; padding: 0; }
|
||||
.stats-request-list a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; color: var(--ops-muted); font-size: 12px; text-decoration: none; overflow-wrap: anywhere; }
|
||||
.stats-request-list a:hover { color: #d1c6ff; }
|
||||
.stats-request-list a > span { color: var(--ops-faint); }
|
||||
.stats-state { display: grid; justify-items: center; gap: 14px; padding: 56px 24px; border: 1px solid var(--ops-line); border-radius: 12px; background: var(--ops-panel); text-align: center; }
|
||||
.stats-state h2 { margin: 0; font-size: 22px; color: var(--ops-text); }
|
||||
.stats-state p { margin: 0; max-width: 60ch; font-size: 14px; color: var(--ops-muted); line-height: 1.8; }
|
||||
.stats-state-symbol { margin-bottom: 8px; color: #c7bdff; font-size: 36px; }
|
||||
.stats-action { display: inline-block; margin-top: 8px; padding: 12px 20px; background: #c7bdff; color: #211a36; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; }
|
||||
.stats-notice { padding: 16px 20px; border: 1px solid var(--ops-line); border-radius: 8px; color: var(--ops-muted); font-size: 13px; line-height: 1.6; }
|
||||
.stats-muted, .stats-footnote { color: var(--ops-faint); font-size: 12px; line-height: 1.8; }
|
||||
.stats-footnote { margin: 0; }
|
||||
@media (max-width: 1100px) {
|
||||
.stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.stats-main-grid { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); }
|
||||
.stats-three-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.stats-three-grid > :first-child { grid-column: 1 / -1; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.stats-main-grid, .stats-three-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
|
||||
.stats-metric { padding: 18px; gap: 10px; }
|
||||
.stats-panel { padding: 20px; }
|
||||
.stats-period { width: 100%; }
|
||||
.stats-period button { flex: 1; padding-inline: 8px; }
|
||||
.stats-metrics { gap: 12px; }
|
||||
}
|
||||
Reference in New Issue
Block a user