@@ -83,7 +86,9 @@ let mobileSub = "queue";
const player = document.getElementById("player");
const clipList = document.getElementById("clipList");
-const listTitle = document.getElementById("listTitle");
+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");
@@ -95,6 +100,7 @@ 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");
@@ -105,7 +111,14 @@ const clientId = Math.random().toString(36).slice(2);
muteBtn.addEventListener("click", () => {
player.muted = !player.muted;
- muteBtn.textContent = 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) {
@@ -116,6 +129,16 @@ function escapeHtml(s) {
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) {
@@ -187,10 +210,10 @@ updateNicknameLabel();
function renderBrowseList() {
if (clips.length === 0) {
- clipList.innerHTML = `
`;
return;
}
- clipList.innerHTML = clips
+ const rows = clips
.map(
(c, i) => `
${rows}`;
clipList.querySelectorAll(".clip-row").forEach((row) => {
row.addEventListener("click", (e) => {
if (e.target.dataset.likes) return;
@@ -215,13 +239,22 @@ function renderBrowseList() {
});
}
+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(() => {});
- nowPlayingText.textContent = c.prompt;
+ setNowPlaying(null, null, c.prompt);
renderBrowseList();
}
@@ -237,34 +270,85 @@ async function loadBrowse(sort) {
if (clips.length) playBrowse(0);
}
-// Left queue: prompt + who asked for it only — no resolution/duration/date.
+// Left queue, grouped like infiniteslop.ai: 接下来播放 (already scheduled) /
+// 生成中 (mid-generation) / 排队中 (waiting their turn — votable).
function renderLiveList(state) {
- listTitle.textContent = "排队队列";
const upcoming = state.upNext || [];
const queue = state.queue || [];
- const statusLabel = { generating: "生成中…", matched: "即将播放", failed: "❌ 生成失败" };
- const queueHtml = 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(
- (q) => `
+ (c) => `
`
+ )
+ .join("");
+ const generatingHtml = generating
+ .map(
+ (q) => `
+
`
)
.join("");
- const upcomingHtml = upcoming
+ const waitingHtml = waiting
.map(
- (c) => `
-
-
${escapeHtml(c.prompt)}
- ${c.requestedBy ? `
by ${escapeHtml(c.requestedBy)}
` : ""}
+ (q) => `
+
+
+
💬 ${escapeHtml(q.prompt)}
+
${q.nickname ? `${escapeHtml(q.nickname)} · ` : ""}即将播放
+
+
`
)
.join("");
- clipList.innerHTML = queueHtml + upcomingHtml || `
暂无排队
`;
+ const failedHtml = failed
+ .map(
+ (q) => `
+
+
💬 ${escapeHtml(q.prompt)}
+
${q.nickname ? `${escapeHtml(q.nickname)} · ` : ""}❌ 生成失败
+
`
+ )
+ .join("");
+
+ clipList.innerHTML =
+ (upcomingHtml ? `
接下来播放
${upcomingHtml}` : "") +
+ (generatingHtml ? `
生成中
${generatingHtml}` : "") +
+ (waitingHtml || failedHtml ? `
排队中
${waitingHtml}${failedHtml}` : "") ||
+ `
暂无排队
`;
+
+ 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) {
+function switchToClip(clip, offsetSec, requestedBy) {
currentClipId = clip.id;
player.src = `/lib/video/${clip.id}`;
if (offsetSec > 0) {
@@ -277,12 +361,13 @@ function switchToClip(clip, offsetSec) {
);
}
player.play().catch(() => {});
- nowPlayingText.textContent = clip.prompt;
+ setNowPlaying(requestedBy, fmtClock(Date.now()), clip.prompt);
}
async function pollLive() {
try {
- const res = await fetch(`/api/live/state?cid=${clientId}`);
+ 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;
@@ -294,14 +379,14 @@ async function pollLive() {
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);
+ 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), Math.max(0, msUntilEnd));
+ advanceTimer = setTimeout(() => switchToClip(upNextCache[0], 0, upNextCache[0].requestedBy), Math.max(0, msUntilEnd));
}
}
} catch {
@@ -315,7 +400,7 @@ function renderChat(messages) {
chatList.innerHTML = messages
.map((m) => {
const status = m.status && chatStatusLabel[m.status] ? `
${chatStatusLabel[m.status]}` : "";
- return `
${escapeHtml(m.nickname)}${escapeHtml(m.text)}${status}
`;
+ return `
${escapeHtml(m.nickname)}${escapeHtml(m.text)}${status}
`;
})
.join("");
if (atBottom) chatList.scrollTop = chatList.scrollHeight;
@@ -378,9 +463,10 @@ async function setMode(newMode) {
clearInterval(chatPollTimer);
clearTimeout(advanceTimer);
currentClipId = null;
+ chatToggleBtn.hidden = newMode !== "live";
if (newMode === "live") {
liveDot.hidden = false;
- rightCol.hidden = false;
+ rightCol.hidden = chatClosed;
mobileSubtabs.hidden = false;
applyMobileSub();
await Promise.all([pollLive(), pollChat()]);
@@ -392,7 +478,6 @@ async function setMode(newMode) {
mobileSubtabs.hidden = true;
watchingCount.hidden = true;
leftCol.classList.remove("mobile-inactive");
- listTitle.textContent = "片段列表";
await loadBrowse(newMode);
}
}
diff --git a/server.js b/server.js
index d5e635f..80d0cb9 100644
--- a/server.js
+++ b/server.js
@@ -134,7 +134,7 @@ function updateChatStatus(id, status) {
// e.g. testing) — looks up a library match or kicks off generation, exactly
// like before chat existed. `nickname` is optional (empty for /api/prompt).
function submitPromptToQueue(id, prompt, nickname) {
- const entry = { id, prompt, nickname: nickname || null, submittedAt: Date.now() };
+ const entry = { id, prompt, nickname: nickname || null, submittedAt: Date.now(), votes: [] };
const match = findLibraryMatch(normalizePrompt(prompt));
if (match) {
entry.status = "matched";
@@ -184,13 +184,33 @@ function markPlayed(id) {
// just grows forever and duplicates the same info.
// Returns {clip, requestedBy, chatId} — chatId lets the caller flip the
// originating chat message to "scheduled" once it's actually about to air.
+// Among entries of the same status, the most-upvoted prompt goes first
+// (ties broken by submission order) — lets chat bump a favorite to the
+// front of the line instead of strict FIFO.
+function voteCount(q) {
+ return (q.votes || []).length;
+}
+function pickBestIndexByStatus(status) {
+ let bestIdx = -1;
+ for (let i = 0; i < promptQueue.length; i++) {
+ const q = promptQueue[i];
+ if (q.status !== status) continue;
+ if (bestIdx === -1) {
+ bestIdx = i;
+ continue;
+ }
+ const best = promptQueue[bestIdx];
+ if (voteCount(q) > voteCount(best)) bestIdx = i;
+ }
+ return bestIdx;
+}
function pickNextClip() {
- const readyIdx = promptQueue.findIndex((q) => q.status === "ready");
+ const readyIdx = pickBestIndexByStatus("ready");
if (readyIdx !== -1) {
const q = promptQueue.splice(readyIdx, 1)[0];
return { clip: q.clip, requestedBy: q.nickname, chatId: q.id };
}
- const matchedIdx = promptQueue.findIndex((q) => q.status === "matched");
+ const matchedIdx = pickBestIndexByStatus("matched");
if (matchedIdx !== -1) {
const q = promptQueue.splice(matchedIdx, 1)[0];
return { clip: q.clip, requestedBy: q.nickname, chatId: q.id };
@@ -356,7 +376,9 @@ http
if (pathname === "/api/live/state") {
ensureSchedule();
const now = Date.now();
- const cid = new URL(req.url, "http://x").searchParams.get("cid");
+ const params = new URL(req.url, "http://x").searchParams;
+ const cid = params.get("cid");
+ const uid = params.get("uid") || null;
if (cid) viewers.set(cid, now);
let idx = schedule.findIndex((s) => s.startAt <= now && now < s.endAt);
if (idx === -1) idx = schedule.length - 1;
@@ -370,7 +392,17 @@ http
upNext: schedule.slice(idx + 1, idx + 4).map((s) => ({ ...s.clip, requestedBy: s.requestedBy || null })),
queue: promptQueue
.filter((q) => ["matched", "generating", "failed"].includes(q.status))
- .map((q) => ({ prompt: q.prompt, nickname: q.nickname, status: q.status, error: q.error })),
+ .slice()
+ .sort((a, b) => voteCount(b) - voteCount(a))
+ .map((q) => ({
+ id: q.id,
+ prompt: q.prompt,
+ nickname: q.nickname,
+ status: q.status,
+ error: q.error,
+ votes: voteCount(q),
+ voted: uid ? (q.votes || []).includes(uid) : false,
+ })),
})
);
return;
@@ -546,6 +578,38 @@ http
return;
}
+ if (pathname.startsWith("/api/queue/vote/") && req.method === "POST") {
+ const id = pathname.slice("/api/queue/vote/".length);
+ readJsonBody(req)
+ .then((body) => {
+ const uid = (body.uid || "").trim();
+ if (!uid) {
+ res.writeHead(400, { "Content-Type": "application/json" });
+ res.end(JSON.stringify({ error: "uid required" }));
+ return;
+ }
+ const entry = promptQueue.find((q) => q.id === id);
+ if (!entry || !["matched", "generating", "ready"].includes(entry.status)) {
+ res.writeHead(404, { "Content-Type": "application/json" });
+ res.end(JSON.stringify({ error: "not found" }));
+ return;
+ }
+ if (!Array.isArray(entry.votes)) entry.votes = [];
+ const i = entry.votes.indexOf(uid);
+ const voted = i === -1;
+ if (voted) entry.votes.push(uid);
+ else entry.votes.splice(i, 1);
+ saveLiveState();
+ res.writeHead(200, { "Content-Type": "application/json" });
+ res.end(JSON.stringify({ votes: entry.votes.length, voted }));
+ })
+ .catch(() => {
+ res.writeHead(400, { "Content-Type": "application/json" });
+ res.end(JSON.stringify({ error: "invalid JSON body" }));
+ });
+ return;
+ }
+
if (pathname.startsWith("/api/like/") && req.method === "POST") {
const id = pathname.slice("/api/like/".length);
const lib = getLibrary();