Skip to content

feat: video history panel#4

Merged
BH3GEI merged 1 commit into
mainfrom
feat/04-history
May 21, 2026
Merged

feat: video history panel#4
BH3GEI merged 1 commit into
mainfrom
feat/04-history

Conversation

@BH3GEI

@BH3GEI BH3GEI commented May 21, 2026

Copy link
Copy Markdown
Member

Summary

  • Keep last 5 generated videos in memory (blob URLs + character name, text, timestamp)
  • Horizontally scrollable thumbnail strip ("历史记录") below video area
  • Click any history item to replay that video
  • Active video highlighted, old blob URLs cleaned up automatically

Test plan

  • Verify history-panel and history-list elements in HTML
  • History panel hidden when empty, shown after first video
  • Clicking history item replays video and highlights it

- Keep last 5 generated videos in memory (blob URLs + metadata)
- Horizontally scrollable thumbnail strip below video
- Click history item to replay that video
- Active item highlighted, auto-cleanup of old blob URLs
Copilot AI review requested due to automatic review settings May 21, 2026 14:55
@BH3GEI BH3GEI merged commit 0697aef into main May 21, 2026
1 check passed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a client-side “视频历史记录” panel to the web UI so users can quickly replay previously generated videos, while attempting to manage blob URL lifetime to avoid leaks.

Changes:

  • Introduces a new history panel UI (HTML + CSS) with a horizontally scrollable list of thumbnails.
  • Tracks the last 5 generated videos in static/app.js and allows click-to-replay with an “active” highlight.
  • Bumps static asset cache-busting query params (?v=12).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File Description
static/style.css Adds styling for the history panel/list/items and adjusts mobile max-width rules.
static/index.html Adds the history panel DOM container and bumps asset version query params.
static/app.js Implements in-memory history tracking, rendering, and click-to-replay logic.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread static/app.js
timeBadge.classList.remove("hidden");
$("#download-btn").classList.remove("hidden");

addToHistory(url, avatarData[selectedAvatar]?.name || selectedAvatar, spokenText);
Comment thread static/app.js
Comment on lines +340 to +343
if (videoHistory.length > MAX_HISTORY) {
const removed = videoHistory.pop();
URL.revokeObjectURL(removed.url);
}
Comment thread static/app.js
Comment on lines +360 to +363
el.innerHTML = `
<video src="${item.url}" muted preload="metadata"></video>
<div class="history-meta">${item.characterName} ${item.timestamp}</div>
`;
Comment thread static/app.js
}
panel.classList.remove("hidden");
list.innerHTML = "";
videoHistory.forEach((item, idx) => {
Comment thread static/app.js
Comment on lines +358 to +365
const el = document.createElement("div");
el.className = "history-item" + (item.url === currentVideoUrl ? " active" : "");
el.innerHTML = `
<video src="${item.url}" muted preload="metadata"></video>
<div class="history-meta">${item.characterName} ${item.timestamp}</div>
`;
el.addEventListener("click", () => {
const video = $("#video-player");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants