Rephl3x/Magent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: standardize security and quality foundations
Magent CI/CD / verify (push) Failing after 9m34s
Details
Magent CI/CD / deploy-beta (push) Skipped
Details

Browse Source
This commit is contained in:
Assclaw
2026-09-17 20:03:47 +12:00
parent 5639dbcb83
commit f852e7c941
127 changed files with 17928 additions and 10741 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/insights/components.tsx
+251 -63
View File
@@ -1,94 +1,282 @@
'use client'
"use client";
import { useState } from 'react'
import { getApiBase } from '../lib/auth'
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 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
}
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 }[] }
}
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 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 }[] = []
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 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]
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-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-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>)}
{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>
<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 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`
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>
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>
<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>
<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>
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>
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>
);
}