re-xxm/reaction_board/web/static/views/video.js

import { api } from "../api.js";
import {
  badge, centerActiveChips, cover, emptyState, metricChips, metricGrid,
  sectionHeader, videoCard,
} from "../components.js";
import { lineChart, emptyChart } from "../charts.js";
import {
  escapeAttr, escapeHtml, formatCount, formatDate, formatDelta,
  formatDuration, formatPercent, formatScore, metricLabel, statusLabel,
} from "../format.js";
import { replaceQuery } from "../router.js";

const METRICS = ["view", "like", "coin", "favorite", "share", "reply", "danmaku"];
const RANGES = [["7", "7 天"], ["30", "30 天"], ["90", "90 天"], ["all", "全部"]];

function snapshotTable(points) {
  if (!points.length) return emptyState("暂无快照", "该视频还没有成功采集的数据。");
  return `<div class="table-wrap">
    <table class="data-table">
      <thead><tr><th>日期</th>${METRICS.map((metric) => `<th>${metricLabel(metric)}</th>`).join("")}<th>状态</th></tr></thead>
      <tbody>
        ${points.slice().reverse().map((point) => `
          <tr class="${point.ok ? "" : "failed-row"}">
            <td>${escapeHtml(point.stat_date)}</td>
            ${METRICS.map((metric) => `<td>${point.ok ? formatCount(point[metric]) : "—"}</td>`).join("")}
            <td>${point.ok ? "成功" : `<span class="danger">失败</span>`}</td>
          </tr>`).join("")}
      </tbody>
    </table>
  </div>`;
}

export async function renderVideo(root, { params, query }) {
  const aid = Number(params[0]);
  const metric = METRICS.includes(query.get("metric")) ? query.get("metric") : "view";
  const range = query.get("range") || "30";
  const trendDays = range === "all" ? "all" : range;
  const [detail, trend] = await Promise.all([
    api(`/api/videos/${aid}`),
    api(`/api/videos/${aid}/trend`, { range: trendDays }),
  ]);
  const up = detail.up_mid ? await api(`/api/ups/${detail.up_mid}`) : null;
  const samples = detail.snapshot_count || 0;
  const others = up?.videos?.filter((item) => item.aid !== aid).slice(0, 5) || [];

  root.innerHTML = `<section class="page video-page">
    <header class="page-head">
      <a class="back-link" href="#/rank?scope=video&sort=heat">← 返回榜单</a>
      <div class="head-actions">
        ${detail.url ? `<a class="button ghost" href="${escapeAttr(detail.url)}" target="_blank" rel="noreferrer">打开 B 站</a>` : ""}
      </div>
    </header>

    <div class="detail-hero">
      ${cover(detail, "hero-cover")}
      <div class="detail-hero-body">
        <h1>${escapeHtml(detail.title)}</h1>
        <div class="detail-meta">
          ${detail.up_mid ? `<a class="inline-link" href="#/up/${detail.up_mid}">${escapeHtml(detail.up_name || "未知 UP")}</a>` : escapeHtml(detail.up_name || "未知 UP")}
          <span>${escapeHtml(formatDate(detail.pubdate))}</span>
          <span>${escapeHtml(formatDuration(detail.duration))}</span>
          ${detail.folder_title ? badge(detail.folder_title) : ""}
          ${badge(statusLabel(detail.status), `status-${detail.status}`)}
          ${samples < 2 ? badge("样本不足", "warning") : ""}
        </div>
        ${detail.blacklisted ? `<p class="section-note warning-text">该 UP 在黑名单中；黑名单只影响未来发现，不影响当前视频追踪。</p>` : ""}
      </div>
    </div>

    ${metricGrid(detail)}

    <div class="mini-stats">
      <div><span>互动率</span><strong>${formatPercent(detail.interaction_rate)}</strong></div>
      <div><span>综合热度</span><strong>${formatScore(detail.heat)}</strong></div>
      <div><span>全库百分位</span><strong>${detail.heat_percentile === null || detail.heat_percentile === undefined ? "—" : `前 ${Math.max(0, 100 - detail.heat_percentile).toFixed(0)}%`}</strong></div>
      <div><span>播放日增</span><strong>${detail.growth?.available ? formatDelta(detail.growth.delta) : "—"}</strong></div>
      <div><span>快照数</span><strong>${samples}</strong></div>
      <div><span>最近快照</span><strong>${escapeHtml(detail.snapshot_date || "—")}</strong></div>
    </div>

    <section class="panel chart-panel">
      ${sectionHeader("七项趋势")}
      <div class="chip-row scroll-x">${metricChips(METRICS, metric)}</div>
      <div class="chip-row scroll-x range-row">
        ${RANGES.map(([value, label]) => `<button type="button"
          class="chip${range === value ? " active" : ""}" data-range="${value}">${label}</button>`).join("")}
      </div>
      ${trend.available ? `<div class="chart" id="video-trend"></div>` : emptyState("暂无趋势数据", "该视频还没有成功快照。")}
      ${!trend.available ? "" : `<p class="section-note">缺失日期会断开，不插值；失败快照按缺失处理。</p>`}
    </section>

    <section class="panel">
      ${sectionHeader("快照记录")}
      ${snapshotTable(trend.points || [])}
    </section>

    ${up ? `<section class="panel">
      <div class="section-head">
        <h2>该 UP 的其他视频</h2>
        <a class="text-link" href="#/up/${detail.up_mid}">查看 UP 页 →</a>
      </div>
      <div class="video-list">
        ${others.length ? others.map((item) => videoCard(item)).join("") : emptyState("没有其他视频")}
      </div>
    </section>` : ""}
  </section>`;

  root.querySelectorAll("[data-metric]").forEach((button) => button.addEventListener("click", () => {
    replaceQuery({ metric: button.dataset.metric });
  }));
  root.querySelectorAll("[data-range]").forEach((button) => button.addEventListener("click", () => {
    replaceQuery({ range: button.dataset.range });
  }));
  centerActiveChips(root);

  const chartElement = root.querySelector("#video-trend");
  if (chartElement) {
    lineChart(chartElement, {
      dates: trend.dates || [],
      values: trend.series?.[metric] || [],
      name: metricLabel(metric),
      color: metric === "view" ? "#fb7299" : "#00aeec",
      scale: true,
    });
  }
}