Magent/frontend/app/insights/components.tsx

"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>
  );
}