宜博 / h3livestream

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AI 短剧频道</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Shrikhand&display=swap" />
<link rel="stylesheet" href="live.css" />
</head>
<body>
<div class="channel">
  <header class="topbar">
    <h1 class="logo">AI 短剧频道</h1>
    <div class="tabs" id="tabs">
      <button data-mode="live" class="active">🔴 直播</button>
      <button data-mode="newest">🆕 最新</button>
      <button data-mode="oldest">⏮ 最早</button>
      <button data-mode="top">❤️ 最热</button>
    </div>
    <div class="spacer"></div>
    <div class="watching" id="watchingCount" hidden></div>
    <button class="topbar-pill" id="chatToggleBtn">✕ 聊天</button>
    <button class="topbar-pill" id="muteBtn">🔇 静音</button>
  </header>

  <div class="body" id="body">
    <aside class="left-col" id="leftCol">
      <div class="clip-list" id="clipList"></div>
      <div class="site-credit">🍋 <span>AI 短剧频道</span></div>
    </aside>

    <div class="player-col">
      <div class="player-wrap">
        <div class="live-pill" id="liveDot" hidden><span class="dot"></span>直播中</div>
        <div class="now-playing-box" id="nowPlayingBox" hidden>
          <span class="np-nick" id="nowPlayingNick"></span>
          <span class="np-time" id="nowPlayingTime"></span>
          <div class="np-text" id="nowPlayingText">加载中…</div>
        </div>
        <video id="player" autoplay muted playsinline></video>
      </div>
    </div>

    <aside class="right-col" id="rightCol" hidden>
      <div class="section-title">聊天</div>
      <div class="chat-list" id="chatList"></div>
      <div class="chat-identity-row" id="chatIdentityRow" hidden>
        <span id="currentNickname"></span>
        <button id="changeNameBtn">改昵称</button>
      </div>
      <div class="chat-input-row">
        <input type="text" id="chatInput" placeholder="说点什么，或者想看什么…" maxlength="300" />
        <button id="chatSendBtn">发送</button>
      </div>
      <div class="say-hint" id="chatHint"></div>
    </aside>

    <!-- flex item of #body (not .channel) so `order` in the mobile media
         query actually places it between the player and left/right-col. -->
    <div class="mobile-subtabs" id="mobileSubtabs" hidden>
      <button data-sub="queue" class="active">排队队列</button>
      <button data-sub="input">聊天</button>
    </div>
  </div>
</div>

<div class="nickname-modal" id="nicknameModal" hidden>
  <div class="nickname-box">
    <div class="nickname-title">先起个昵称才能发言</div>
    <input type="text" id="nicknameInput" placeholder="你的昵称" maxlength="20" />
    <button id="nicknameConfirmBtn">确定</button>
  </div>
</div>

<script>
let mode = "live";
let clips = []; // browse mode: full list
let currentIndex = -1;
let currentClipId = null;
let livePollTimer = null;
let chatPollTimer = null;
let advanceTimer = null; // precise, server-endAt-driven switch to the next clip — the 4s poll is just a resync/fallback
let upNextCache = [];
let mobileSub = "queue";

const player = document.getElementById("player");
const clipList = document.getElementById("clipList");
const nowPlayingBox = document.getElementById("nowPlayingBox");
const nowPlayingNick = document.getElementById("nowPlayingNick");
const nowPlayingTime = document.getElementById("nowPlayingTime");
const nowPlayingText = document.getElementById("nowPlayingText");
const liveDot = document.getElementById("liveDot");
const leftCol = document.getElementById("leftCol");
const rightCol = document.getElementById("rightCol");
const mobileSubtabs = document.getElementById("mobileSubtabs");
const chatList = document.getElementById("chatList");
const chatInput = document.getElementById("chatInput");
const chatSendBtn = document.getElementById("chatSendBtn");
const chatHint = document.getElementById("chatHint");
const watchingCount = document.getElementById("watchingCount");
const muteBtn = document.getElementById("muteBtn");
const chatToggleBtn = document.getElementById("chatToggleBtn");
const nicknameModal = document.getElementById("nicknameModal");
const nicknameInput = document.getElementById("nicknameInput");
const nicknameConfirmBtn = document.getElementById("nicknameConfirmBtn");
const chatIdentityRow = document.getElementById("chatIdentityRow");
const changeNameBtn = document.getElementById("changeNameBtn");
const currentNickname = document.getElementById("currentNickname");
const clientId = Math.random().toString(36).slice(2);

muteBtn.addEventListener("click", () => {
  player.muted = !player.muted;
  muteBtn.textContent = player.muted ? "🔇 静音" : "🔈 有声";
});

let chatClosed = false;
chatToggleBtn.addEventListener("click", () => {
  chatClosed = !chatClosed;
  chatToggleBtn.textContent = chatClosed ? "聊天" : "✕ 聊天";
  if (mode === "live") rightCol.hidden = chatClosed;
});

function fmtMeta(c) {
  return `${c.width}x${c.height} · ${c.duration}s · ${new Date(c.createdAt).toLocaleString()}`;
}
function escapeHtml(s) {
  const div = document.createElement("div");
  div.textContent = s || "";
  return div.innerHTML;
}
function fmtClock(ts) {
  return new Date(ts).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
}
// Same per-nickname pastel-hash used by infiniteslop.ai — a stable, deterministic
// color per person without needing a server-assigned palette.
function pastel(name) {
  let h = 0;
  for (const c of name || "") h = (h * 31 + c.charCodeAt(0)) % 360;
  return `hsl(${h},85%,85%)`;
}

// ---- viewer identity: nickname + uid, stored in cookies ----
function getCookie(name) {
  const m = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
  return m ? decodeURIComponent(m[1]) : null;
}
function setCookie(name, value, days) {
  document.cookie = `${name}=${encodeURIComponent(value)}; max-age=${days * 86400}; path=/; samesite=lax`;
}
function getIdentity() {
  const uid = getCookie("viewer_uid");
  const nickname = getCookie("viewer_nickname");
  return uid && nickname ? { uid, nickname } : null;
}
function updateNicknameLabel() {
  const existing = getIdentity();
  chatIdentityRow.hidden = !existing;
  if (existing) currentNickname.textContent = existing.nickname;
}

// Shared by first-time setup and the always-visible "昵称 ✎" edit button.
function openNicknameModal(prefill) {
  return new Promise((resolve) => {
    nicknameModal.hidden = false;
    nicknameInput.value = prefill || "";
    nicknameInput.focus();
    const onConfirm = () => {
      const nickname = nicknameInput.value.trim().slice(0, 20);
      if (!nickname) return;
      nicknameModal.hidden = true;
      nicknameConfirmBtn.removeEventListener("click", onConfirm);
      nicknameInput.removeEventListener("keydown", onKeydown);
      resolve(nickname);
    };
    const onKeydown = (e) => {
      if (e.key === "Enter") onConfirm();
    };
    nicknameConfirmBtn.addEventListener("click", onConfirm);
    nicknameInput.addEventListener("keydown", onKeydown);
  });
}

function ensureIdentity() {
  const existing = getIdentity();
  if (existing) return Promise.resolve(existing);
  return openNicknameModal("").then((nickname) => {
    const uid = crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
    setCookie("viewer_uid", uid, 365);
    setCookie("viewer_nickname", nickname, 365);
    updateNicknameLabel();
    return { uid, nickname };
  });
}

changeNameBtn.addEventListener("click", async () => {
  const existing = getIdentity();
  const nickname = await openNicknameModal(existing ? existing.nickname : "");
  const uid = existing ? existing.uid : crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
  setCookie("viewer_uid", uid, 365);
  setCookie("viewer_nickname", nickname, 365);
  updateNicknameLabel();
});

// First click into the chat box is what prompts for a nickname — not just
// hitting send — so the identity row above the input appears right away.
chatInput.addEventListener("focus", () => ensureIdentity());

updateNicknameLabel();

function renderBrowseList() {
  if (clips.length === 0) {
    clipList.innerHTML = `<div class="section-head">片段列表</div><div class="empty-hint">片段库为空</div>`;
    return;
  }
  const rows = clips
    .map(
      (c, i) => `
    <div class="clip-row ${i === currentIndex ? "active" : ""}" data-i="${i}">
      <div class="prompt">${escapeHtml(c.prompt)}</div>
      <div class="meta">${fmtMeta(c)} · ❤️ <span data-likes="${c.id}">${c.likes || 0}</span></div>
    </div>`
    )
    .join("");
  clipList.innerHTML = `<div class="section-head">片段列表</div>${rows}`;
  clipList.querySelectorAll(".clip-row").forEach((row) => {
    row.addEventListener("click", (e) => {
      if (e.target.dataset.likes) return;
      playBrowse(Number(row.dataset.i));
    });
  });
  clipList.querySelectorAll("[data-likes]").forEach((el) => {
    el.style.cursor = "pointer";
    el.addEventListener("click", async (e) => {
      e.stopPropagation();
      const res = await fetch(`/api/like/${el.dataset.likes}`, { method: "POST" });
      if (res.ok) el.textContent = (await res.json()).likes;
    });
  });
}

function setNowPlaying(nick, time, text) {
  nowPlayingBox.hidden = false;
  nowPlayingNick.hidden = !nick;
  nowPlayingNick.textContent = nick || "";
  nowPlayingTime.hidden = !time;
  nowPlayingTime.textContent = time || "";
  nowPlayingText.textContent = text;
}

function playBrowse(index) {
  if (index < 0 || index >= clips.length) return;
  currentIndex = index;
  const c = clips[index];
  player.src = `/lib/video/${c.id}`;
  player.play().catch(() => {});
  setNowPlaying(null, null, c.prompt);
  renderBrowseList();
}

player.addEventListener("ended", () => {
  if (mode !== "live" && clips.length) playBrowse((currentIndex + 1) % clips.length);
});

async function loadBrowse(sort) {
  const res = await fetch(`/api/library?sort=${sort}`);
  clips = await res.json();
  currentIndex = -1;
  renderBrowseList();
  if (clips.length) playBrowse(0);
}

// Left queue, grouped like infiniteslop.ai: 接下来播放 (already scheduled) /
// 生成中 (mid-generation) / 排队中 (waiting their turn — votable).
function renderLiveList(state) {
  const upcoming = state.upNext || [];
  const queue = state.queue || [];
  const generating = queue.filter((q) => q.status === "generating");
  const waiting = queue.filter((q) => q.status === "matched" || q.status === "ready");
  const failed = queue.filter((q) => q.status === "failed");

  const upcomingHtml = upcoming
    .map(
      (c) => `
      <div class="clip-row">
        <div class="prompt">${escapeHtml(c.prompt)}</div>
        ${c.requestedBy ? `<div class="meta">by ${escapeHtml(c.requestedBy)}</div>` : ""}
      </div>`
    )
    .join("");
  const generatingHtml = generating
    .map(
      (q) => `
      <div class="clip-row gen">
        <div class="prompt">💬 ${escapeHtml(q.prompt)}</div>
        <div class="meta">${q.nickname ? `${escapeHtml(q.nickname)} · ` : ""}生成中…</div>
      </div>`
    )
    .join("");
  const waitingHtml = waiting
    .map(
      (q) => `
      <div class="qrow">
        <div class="clip-row">
          <div class="prompt">💬 ${escapeHtml(q.prompt)}</div>
          <div class="meta">${q.nickname ? `${escapeHtml(q.nickname)} · ` : ""}即将播放</div>
        </div>
        <button class="up-btn ${q.voted ? "voted" : ""}" data-vote="${q.id}">▲<span>${q.votes || 0}</span></button>
      </div>`
    )
    .join("");
  const failedHtml = failed
    .map(
      (q) => `
      <div class="clip-row failed">
        <div class="prompt">💬 ${escapeHtml(q.prompt)}</div>
        <div class="meta">${q.nickname ? `${escapeHtml(q.nickname)} · ` : ""}❌ 生成失败</div>
      </div>`
    )
    .join("");

  clipList.innerHTML =
    (upcomingHtml ? `<div class="section-head">接下来播放</div>${upcomingHtml}` : "") +
    (generatingHtml ? `<div class="section-head">生成中</div>${generatingHtml}` : "") +
    (waitingHtml || failedHtml ? `<div class="section-head">排队中</div>${waitingHtml}${failedHtml}` : "") ||
    `<div class="empty-hint">暂无排队</div>`;

  clipList.querySelectorAll("[data-vote]").forEach((btn) => {
    btn.addEventListener("click", () => voteQueueItem(btn.dataset.vote, btn));
  });
}

async function voteQueueItem(id, btn) {
  const identity = await ensureIdentity();
  btn.disabled = true;
  try {
    const res = await fetch(`/api/queue/vote/${id}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ uid: identity.uid }),
    });
    if (!res.ok) return;
    const data = await res.json();
    btn.classList.toggle("voted", data.voted);
    btn.querySelector("span").textContent = data.votes;
  } finally {
    btn.disabled = false;
  }
}

function switchToClip(clip, offsetSec, requestedBy) {
  currentClipId = clip.id;
  player.src = `/lib/video/${clip.id}`;
  if (offsetSec > 0) {
    player.addEventListener(
      "loadedmetadata",
      () => {
        player.currentTime = Math.min(offsetSec, player.duration || offsetSec);
      },
      { once: true }
    );
  }
  player.play().catch(() => {});
  setNowPlaying(requestedBy, fmtClock(Date.now()), clip.prompt);
}

async function pollLive() {
  try {
    const identity = getIdentity();
    const res = await fetch(`/api/live/state?cid=${clientId}${identity ? `&uid=${encodeURIComponent(identity.uid)}` : ""}`);
    const state = await res.json();
    if (mode !== "live") return;
    watchingCount.hidden = false;
    watchingCount.textContent = `👀 ${state.watching}`;
    renderLiveList(state);
    upNextCache = state.upNext || [];

    clearTimeout(advanceTimer);
    if (state.current) {
      if (state.current.clip.id !== currentClipId) {
        const offsetSec = Math.max(0, (state.now - state.current.startAt) / 1000);
        switchToClip(state.current.clip, offsetSec, state.current.requestedBy);
      }
      // Fire the switch to the next clip exactly when this one should end,
      // instead of waiting for the next 4s poll to notice — the poll still
      // runs on schedule and will correct any drift.
      if (upNextCache.length) {
        const msUntilEnd = state.current.endAt - Date.now();
        advanceTimer = setTimeout(() => switchToClip(upNextCache[0], 0, upNextCache[0].requestedBy), Math.max(0, msUntilEnd));
      }
    }
  } catch {
    // transient — next poll retries
  }
}

const chatStatusLabel = { rejected: "❌ 未通过审核", generating: "生成中…", matched: "即将播放", scheduled: "即将播放", ready: "已排播放", failed: "❌ 生成失败" };
function renderChat(messages) {
  const atBottom = chatList.scrollHeight - chatList.scrollTop - chatList.clientHeight < 40;
  chatList.innerHTML = messages
    .map((m) => {
      const status = m.status && chatStatusLabel[m.status] ? `<span class="chat-status">${chatStatusLabel[m.status]}</span>` : "";
      return `<div class="chat-msg" style="background:${pastel(m.nickname)}"><b class="chat-nick">${escapeHtml(m.nickname)}</b><span class="chat-text">${escapeHtml(m.text)}</span>${status}</div>`;
    })
    .join("");
  if (atBottom) chatList.scrollTop = chatList.scrollHeight;
}

async function pollChat() {
  try {
    const res = await fetch(`/api/chat?cid=${clientId}`);
    renderChat(await res.json());
  } catch {
    // transient — next poll retries
  }
}

async function sendChat() {
  const text = chatInput.value.trim();
  if (!text) return;
  const identity = await ensureIdentity();
  chatSendBtn.disabled = true;
  try {
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ uid: identity.uid, nickname: identity.nickname, text }),
    });
    const data = await res.json();
    if (res.status === 429) {
      chatHint.textContent = data.error;
      return;
    }
    chatInput.value = "";
    chatHint.textContent =
      data.status === "rejected" ? `未通过审核：${data.reason}` : data.status === "matched" ? "已匹配片段，即将播放" : data.status === "generating" ? "库里没有，已提交生成，请稍候…" : "";
    pollChat();
  } finally {
    chatSendBtn.disabled = false;
  }
}
chatSendBtn.addEventListener("click", sendChat);
chatInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") sendChat();
});

function applyMobileSub() {
  leftCol.classList.toggle("mobile-inactive", mobileSub !== "queue");
  rightCol.classList.toggle("mobile-inactive", mobileSub !== "input");
  mobileSubtabs.querySelectorAll("button").forEach((b) => b.classList.toggle("active", b.dataset.sub === mobileSub));
}
mobileSubtabs.querySelectorAll("button").forEach((b) =>
  b.addEventListener("click", () => {
    mobileSub = b.dataset.sub;
    applyMobileSub();
  })
);

async function setMode(newMode) {
  mode = newMode;
  document.querySelectorAll("#tabs button").forEach((b) => b.classList.toggle("active", b.dataset.mode === newMode));
  clearInterval(livePollTimer);
  clearInterval(chatPollTimer);
  clearTimeout(advanceTimer);
  currentClipId = null;
  chatToggleBtn.hidden = newMode !== "live";
  if (newMode === "live") {
    liveDot.hidden = false;
    rightCol.hidden = chatClosed;
    mobileSubtabs.hidden = false;
    applyMobileSub();
    await Promise.all([pollLive(), pollChat()]);
    livePollTimer = setInterval(pollLive, 4000);
    chatPollTimer = setInterval(pollChat, 3000);
  } else {
    liveDot.hidden = true;
    rightCol.hidden = true;
    mobileSubtabs.hidden = true;
    watchingCount.hidden = true;
    leftCol.classList.remove("mobile-inactive");
    await loadBrowse(newMode);
  }
}

document.querySelectorAll("#tabs button").forEach((b) => b.addEventListener("click", () => setMode(b.dataset.mode)));

setMode("live");
</script>
</body>
</html>