Add editable Reader bookmarks

static/reader.css

@@ -34,12 +34,17 @@ body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex
 .panel-search.is-open { max-height: 34px; margin-bottom: 8px; opacity: 1; transform: translateY(0); }
 .panel-list { padding-bottom: 12px; }
 .panel-empty { padding: 28px 12px; color: #929aa1; text-align: center; }
+.media-panel-content { display: grid; gap: 14px; padding: 24px 16px; text-align: center; }
+.media-panel-time { font-variant-numeric: tabular-nums; font-size: 24px; }
+.media-panel-content { display: grid; gap: 14px; padding: 24px 16px; text-align: center; }
+.media-panel-time { font-variant-numeric: tabular-nums; font-size: 24px; }
 .panel-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #2d3237; background: transparent; color: inherit; text-align: left; }
 .panel-item-main { min-width: 0; border: 0; padding: 0; background: transparent; color: #e5e9ec; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
 .panel-item small { color: #929aa1; }
 .bookmark-excerpt { grid-column: 1 / -1; margin: 2px 0 0; color: #b8bec3; font-size: 12px; line-height: 1.55; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
 .search-match { padding: 0; background: #f0c75e; color: #1d2023; }
 .panel-item-remove, .text-action { border: 0; background: transparent; color: #aeb5ba; cursor: pointer; }
+.panel-item-edit { border: 0; background: transparent; color: #aeb5ba; cursor: pointer; }
 .toc-item { padding-left: calc(12px + var(--toc-depth, 0) * 16px); }
 .toc-item .panel-item-main { user-select: text; }
 .reader-panel > footer { flex: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid #34383d; }

static/reader.js

@@ -97,18 +97,22 @@ let restorationFailed = false;
 let tocEntries = [];
 let markerFrame = 0;
 let pendingBookmarkSnapshot = null;
+let editingBookmark = null;
 let showingAllBookmarks = false;
 let bookmarkRenderGeneration = 0;
+let mediaElement = null;
 const viewport = document.querySelector("#viewport");
 const zoomInput = document.querySelector("#zoom");
 const pageInput = document.querySelector("#page-number");
 const readerPath = document.querySelector("#reader-path");
 const bookmarkRibbon = document.querySelector("#bookmark-ribbon");
 const bookmarkPopover = document.querySelector("#bookmark-popover");
+const bookmarkLabelInput = document.createElement("input"), bookmarkExcerptInput = document.createElement("textarea"), bookmarkEditFields = document.createElement("div"); bookmarkLabelInput.id = "bookmark-label"; bookmarkLabelInput.maxLength = 120; bookmarkExcerptInput.id = "bookmark-excerpt-input"; bookmarkExcerptInput.maxLength = 500; bookmarkExcerptInput.rows = 3; bookmarkEditFields.className = "bookmark-edit-fields"; bookmarkEditFields.innerHTML = "<label>标题</label><label>摘要</label>"; bookmarkEditFields.children[0].appendChild(bookmarkLabelInput); bookmarkEditFields.children[1].appendChild(bookmarkExcerptInput); bookmarkPopover.insertBefore(bookmarkEditFields, bookmarkPopover.querySelector("div"));
 const bookmarksAllButton = document.createElement("button");
 bookmarksAllButton.id = "bookmarks-all"; bookmarksAllButton.className = "text-action"; bookmarksAllButton.type = "button"; bookmarksAllButton.textContent = "全部书签"; bookmarksAllButton.setAttribute("aria-pressed", "false");
 const bookmarksHeader = document.querySelector("#bookmarks-panel .panel-view-header"), bookmarksSearchButton = bookmarksHeader.querySelector(".panel-search-toggle"), bookmarksHeaderActions = document.createElement("span");
 bookmarksHeaderActions.append(bookmarksAllButton, bookmarksSearchButton); bookmarksHeader.appendChild(bookmarksHeaderActions);
+const mediaTab = document.createElement("button"), mediaPanel = document.createElement("section"); mediaTab.id = "media-tab"; mediaTab.type = "button"; mediaTab.role = "tab"; mediaTab.dataset.panel = "media"; mediaTab.textContent = "播放"; mediaTab.hidden = !["audio", "video"].includes(capability.mode); mediaPanel.id = "media-panel"; mediaPanel.className = "reader-panel-view"; mediaPanel.dataset.panelView = "media"; mediaPanel.hidden = true; mediaPanel.innerHTML = '<div class="media-panel-content"><strong>播放状态</strong><span class="media-panel-time">尚未播放</span><button class="text-action media-panel-bookmark" type="button">在当前时间添加书签</button></div>'; document.querySelector(".reader-panel-tabs").prepend(mediaTab); document.querySelector("#history-panel").insertBefore(mediaPanel, document.querySelector("#toc-panel")); mediaPanel.querySelector(".media-panel-bookmark").addEventListener("click", () => bookmarkRibbon.click());
 const loadingObserver = new MutationObserver(() => {
   if (content.querySelector(".reader-page, .reader-image, .reader-audio, .reader-video, .reader-text, .reader-markdown, .html-frame, .docx-body")) {
     loadingIndicator.remove();
@@ -246,7 +250,7 @@ async function saveProgress() {
   const pageOffset = shell ? Math.max(0, viewport.scrollTop - shell.offsetTop) : 0;
   const htmlScrollTop = htmlFrame && htmlFrame.contentWindow ? htmlFrame.contentWindow.scrollY : 0;
   const readerUrl = new URL(location.href); readerUrl.searchParams.delete("return"); readerUrl.searchParams.delete("nav");
-  const progress = { url: sourceUrl, title, extension, readerUrl: readerUrl.href, page: currentPage, pageCount, pageOffset, epubLocation, scrollTop: viewport.scrollTop, htmlScrollTop, zoom: Math.round(zoom * 100) };
+  const progress = { url: sourceUrl, title, extension, readerUrl: readerUrl.href, page: currentPage, pageCount, pageOffset, epubLocation, mediaTime: mediaElement && Number.isFinite(mediaElement.currentTime) ? mediaElement.currentTime : 0, scrollTop: viewport.scrollTop, htmlScrollTop, zoom: Math.round(zoom * 100) };
   const signature = JSON.stringify(progress);
   if (signature === lastSavedProgress) return progressSaveChain;
   lastSavedProgress = signature;
@@ -297,7 +301,7 @@ function setReaderPanelOpen(open, restoreFocus = false) {
     panel.hidden = false;
     void panel.offsetWidth;
     panel.classList.add("is-open");
-    selectPanel(tocEntries.length ? "toc" : "bookmarks");
+    selectPanel(mediaElement ? "media" : tocEntries.length ? "toc" : "bookmarks");
     return;
   }
   panel.classList.remove("is-open");
@@ -320,10 +324,12 @@ function setPanelSearchOpen(button, open) {
 }
 function selectPanel(name) {
   if (name === "toc" && !tocEntries.length) name = "bookmarks";
+  if (name === "media" && mediaTab.hidden) name = "bookmarks";
   for (const button of document.querySelectorAll(".reader-panel-tabs button")) { const selected = button.dataset.panel === name; button.setAttribute("aria-selected", String(selected)); button.tabIndex = selected ? 0 : -1; }
   for (const view of document.querySelectorAll(".reader-panel-view")) view.hidden = view.dataset.panelView !== name;
   if (name === "bookmarks") renderBookmarks();
   if (name === "history") renderHistory();
+  if (name === "media" && mediaElement) mediaPanel.querySelector(".media-panel-time").textContent = `${formatMediaTime(mediaElement.currentTime)} / ${formatMediaTime(mediaElement.duration)}`;
 }
 function setToc(entries) {
   tocEntries = entries || [];
@@ -347,6 +353,7 @@ async function renderHistory() {
   try {
     for (const entry of await VoiceOfMLReaderStore.list()) {
       const row = document.createElement("div"); row.className = "panel-item";
+      if (entry.mediaTime != null) row.dataset.mediaTime = String(entry.mediaTime);
       const link = document.createElement("button"); link.type = "button"; link.className = "panel-item-main"; link.textContent = entry.title || entry.url; link.addEventListener("click", () => navigateReader(entry.readerUrl));
       const meta = document.createElement("small"); meta.textContent = `${entry.pageCount ? `第 ${entry.page || 1} / ${entry.pageCount} 页 · ` : ""}${new Date(entry.lastReadAt).toLocaleString()}`;
       const remove = document.createElement("button"); remove.type = "button"; remove.className = "panel-item-remove"; remove.textContent = "删除"; remove.addEventListener("click", async () => { await VoiceOfMLReaderStore.remove(entry.url); if (entry.url === sourceUrl) historySuppressed = true; row.remove(); if (!list.querySelector(".panel-item")) emptyPanel(list, "暂无阅读记录"); });
@@ -406,11 +413,11 @@ async function renderBookmarks() {
     list.textContent = "";
     for (const entry of entries) {
       const row = document.createElement("div"); row.className = "panel-item";
-      const open = document.createElement("button"); open.type = "button"; open.className = "panel-item-main"; open.textContent = showingAllBookmarks ? `${entry.title || "未命名书籍"} · ${entry.label}` : entry.label; open.addEventListener("click", async () => { if (entry.url !== sourceUrl) { await navigateReader(entry.readerUrl); return; } if (entry.epubLocation && epubRendition) await epubRendition.display(entry.epubLocation); else if (entry.page) { await goToPage(entry.page); if (Number.isFinite(entry.pageOffset)) { const shell = content.querySelector(`.reader-page[data-page="${entry.page}"], .reader-docx-page[data-page="${entry.page}"]`); if (shell) viewport.scrollTop = shell.offsetTop + entry.pageOffset; } } else if (Number.isFinite(entry.htmlScrollTop) && htmlFrame && htmlFrame.contentWindow) htmlFrame.contentWindow.scrollTo(0, entry.htmlScrollTop); else viewport.scrollTop = entry.scrollTop || 0; });
+      const open = document.createElement("button"); open.type = "button"; open.className = "panel-item-main"; open.textContent = showingAllBookmarks ? `${entry.title || "未命名书籍"} · ${entry.label}` : entry.label; open.addEventListener("click", async () => { if (entry.url !== sourceUrl) { await navigateReader(entry.readerUrl); return; } if (entry.mediaTime != null && mediaElement) mediaElement.currentTime = entry.mediaTime; else if (entry.epubLocation && epubRendition) await epubRendition.display(entry.epubLocation); else if (entry.page) { await goToPage(entry.page); if (Number.isFinite(entry.pageOffset)) { const shell = content.querySelector(`.reader-page[data-page="${entry.page}"], .reader-docx-page[data-page="${entry.page}"]`); if (shell) viewport.scrollTop = shell.offsetTop + entry.pageOffset; } } else if (Number.isFinite(entry.htmlScrollTop) && htmlFrame && htmlFrame.contentWindow) htmlFrame.contentWindow.scrollTo(0, entry.htmlScrollTop); else viewport.scrollTop = entry.scrollTop || 0; });
       const excerpt = document.createElement("p"); excerpt.className = "bookmark-excerpt"; excerpt.textContent = entry.excerpt || ""; excerpt.hidden = !entry.excerpt;
       const meta = document.createElement("small"); meta.textContent = new Date(entry.createdAt).toLocaleString();
       const remove = document.createElement("button"); remove.type = "button"; remove.className = "panel-item-remove"; remove.textContent = "删除"; remove.addEventListener("click", async () => { await VoiceOfMLReaderStore.removeBookmark(entry.id); row.remove(); if (!list.querySelector(".panel-item")) emptyPanel(list, "暂无书签"); });
-      row.append(open, remove, excerpt, meta); list.appendChild(row);
+      const edit = document.createElement("button"); edit.type = "button"; edit.className = "panel-item-edit"; edit.textContent = "编辑"; edit.onclick = () => { editingBookmark = { ...entry }; bookmarkLabelInput.value = entry.label || ""; bookmarkExcerptInput.value = entry.excerpt || ""; bookmarkPopover.hidden = false; setBookmarkDialogModal(true); bookmarkLabelInput.focus(); }; row.append(open, edit, remove, excerpt, meta); list.appendChild(row);
     }
     if (!list.childElementCount) emptyPanel(list, "暂无书签");
     filterPanel(document.querySelector("#bookmarks-panel"));
@@ -419,7 +426,9 @@ async function renderBookmarks() {
 function pageAtMarker() { const y = bookmarkRibbon.getBoundingClientRect().bottom, pages = [...content.querySelectorAll(".reader-page, .reader-docx-page")]; if (!pages.length) return null; return pages.find((page) => { const rect = page.getBoundingClientRect(); return rect.top <= y && rect.bottom > y; }) || pages.find((page) => page.getBoundingClientRect().bottom > y) || pages[pages.length - 1]; }
 function syncCurrentPageFromMarker() { const page = pageAtMarker(); if (!page) return; const next = Number(page.dataset.page); if (!next || next === currentPage) return; currentPage = next; pageInput.value = String(next); }
 function scheduleMarkerSync() { if (markerFrame) return; markerFrame = requestAnimationFrame(() => { markerFrame = 0; syncCurrentPageFromMarker(); scheduleSave(); }); }
+function formatMediaTime(seconds) { if (!Number.isFinite(seconds) || seconds < 0) return "00:00"; const total = Math.floor(seconds), hours = Math.floor(total / 3600), minutes = Math.floor(total % 3600 / 60), secs = total % 60; return `${hours ? `${String(hours).padStart(2, "0")}:` : ""}${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`; }
 function captureBookmarkSnapshot() {
+  if (mediaElement) { const time = Number.isFinite(mediaElement.currentTime) ? mediaElement.currentTime : 0; return { locator: `media:${Math.round(time * 10) / 10}`, label: `时间 ${formatMediaTime(time)}`, excerpt: "", progress: mediaElement.duration ? Math.round(time / mediaElement.duration * 1000) / 10 : 0, mediaTime: time, page: 0, pageOffset: 0, epubLocation: "", scrollTop: 0, htmlScrollTop: 0 }; }
   syncCurrentPageFromMarker();
   const shell = pageCount ? pageAtMarker() : null;
   const pageOffset = shell ? Math.max(0, viewport.scrollTop - shell.offsetTop) : 0;
@@ -430,16 +439,17 @@ function captureBookmarkSnapshot() {
   return { locator, label: pageCount ? `第 ${currentPage} / ${pageCount} 页` : `阅读进度 ${progress.toFixed(1)}%`, excerpt: bookmarkExcerpt(), progress, page: pageCount ? currentPage : 0, pageOffset, epubLocation, scrollTop, htmlScrollTop };
 }
 function setBookmarkDialogModal(open) { document.documentElement.classList.toggle("bookmark-dialog-open", open); document.querySelector(".reader-toolbar").inert = open; bookmarkRibbon.inert = open; content.inert = open; }
-function closeBookmarkPopover() { pendingBookmarkSnapshot = null; bookmarkPopover.hidden = true; bookmarkRibbon.setAttribute("aria-expanded", "false"); setBookmarkDialogModal(false); bookmarkRibbon.focus(); }
-bookmarkRibbon.addEventListener("click", () => { const prompt = document.querySelector("#bookmark-prompt"); pendingBookmarkSnapshot = captureBookmarkSnapshot(); prompt.textContent = `在${pendingBookmarkSnapshot.label}添加书签？`; if (pendingBookmarkSnapshot.excerpt) { const summary = document.createElement("small"); summary.textContent = `摘要：${pendingBookmarkSnapshot.excerpt}`; prompt.appendChild(summary); } bookmarkPopover.hidden = false; bookmarkRibbon.setAttribute("aria-expanded", "true"); setBookmarkDialogModal(true); document.querySelector("#bookmark-add").focus(); });
+function closeBookmarkPopover() { pendingBookmarkSnapshot = null; editingBookmark = null; bookmarkPopover.hidden = true; bookmarkRibbon.setAttribute("aria-expanded", "false"); setBookmarkDialogModal(false); bookmarkRibbon.focus(); }
+bookmarkRibbon.addEventListener("click", () => { const prompt = document.querySelector("#bookmark-prompt"); pendingBookmarkSnapshot = captureBookmarkSnapshot(); editingBookmark = null; prompt.textContent = `在${pendingBookmarkSnapshot.label}添加书签？`; bookmarkLabelInput.value = pendingBookmarkSnapshot.label; bookmarkExcerptInput.value = pendingBookmarkSnapshot.excerpt || ""; bookmarkPopover.hidden = false; bookmarkRibbon.setAttribute("aria-expanded", "true"); setBookmarkDialogModal(true); bookmarkLabelInput.focus(); });
 document.querySelector("#bookmark-cancel").addEventListener("click", closeBookmarkPopover);
-document.querySelector("#bookmark-add").addEventListener("click", async () => { const snapshot = pendingBookmarkSnapshot || captureBookmarkSnapshot(), now = Date.now(); await VoiceOfMLReaderStore.putBookmark({ id: `${sourceUrl}\0${snapshot.locator}`, url: sourceUrl, title, extension, readerUrl: location.href, label: snapshot.label, excerpt: snapshot.excerpt, progress: snapshot.progress, page: snapshot.page, pageOffset: snapshot.pageOffset, epubLocation: snapshot.epubLocation, scrollTop: snapshot.scrollTop, htmlScrollTop: snapshot.htmlScrollTop, createdAt: now }); pendingBookmarkSnapshot = null; bookmarkPopover.hidden = true; bookmarkRibbon.setAttribute("aria-expanded", "false"); setBookmarkDialogModal(false); if (!document.querySelector("#bookmarks-panel").hidden) renderBookmarks(); bookmarkRibbon.focus(); });
+document.querySelector("#bookmark-add").addEventListener("click", async () => { const snapshot = pendingBookmarkSnapshot || captureBookmarkSnapshot(), now = Date.now(), label = bookmarkLabelInput.value.trim() || snapshot.label, excerpt = bookmarkExcerptInput.value.trim(); if (editingBookmark) await VoiceOfMLReaderStore.putBookmark({ ...editingBookmark, label, excerpt }); else await VoiceOfMLReaderStore.putBookmark({ id: `${sourceUrl}\0${snapshot.locator}`, url: sourceUrl, title, extension, readerUrl: location.href, label, excerpt, progress: snapshot.progress, mediaTime: snapshot.mediaTime, page: snapshot.page, pageOffset: snapshot.pageOffset, epubLocation: snapshot.epubLocation, scrollTop: snapshot.scrollTop, htmlScrollTop: snapshot.htmlScrollTop, createdAt: now }); pendingBookmarkSnapshot = null; editingBookmark = null; bookmarkPopover.hidden = true; bookmarkRibbon.setAttribute("aria-expanded", "false"); setBookmarkDialogModal(false); if (!document.querySelector("#bookmarks-panel").hidden) renderBookmarks(); bookmarkRibbon.focus(); });
 bookmarkPopover.addEventListener("keydown", (event) => { if (event.key === "Escape") { event.preventDefault(); closeBookmarkPopover(); return; } if (event.key !== "Tab") return; const buttons = [...bookmarkPopover.querySelectorAll("button")], first = buttons[0], last = buttons[buttons.length - 1]; if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); } });
 for (const button of document.querySelectorAll(".reader-panel-tabs button")) button.addEventListener("click", () => selectPanel(button.dataset.panel));
 document.querySelector(".reader-panel-tabs").addEventListener("keydown", (event) => { if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return; const tabs = [...document.querySelectorAll(".reader-panel-tabs button:not([hidden])")], current = tabs.indexOf(document.activeElement); if (current < 0) return; event.preventDefault(); const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (current + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length; selectPanel(tabs[next].dataset.panel); tabs[next].focus(); });
 bookmarksAllButton.addEventListener("click", () => { showingAllBookmarks = !showingAllBookmarks; bookmarksAllButton.textContent = showingAllBookmarks ? "本书书签" : "全部书签"; bookmarksAllButton.setAttribute("aria-pressed", String(showingAllBookmarks)); renderBookmarks(); });
 for (const button of document.querySelectorAll(".panel-search-toggle")) { button.classList.remove("icon-button"); button.classList.add("text-action"); button.textContent = "搜索"; button.hidden = false; button.setAttribute("aria-expanded", "false"); button.addEventListener("click", () => setPanelSearchOpen(button, button.getAttribute("aria-expanded") !== "true")); }
 for (const input of document.querySelectorAll(".panel-search")) input.addEventListener("input", () => filterPanel(input.closest(".reader-panel-view")));
+document.querySelector("#bookmarks-list").addEventListener("click", async (event) => { if (!mediaElement || event.target.closest(".panel-item-remove")) return; const row = event.target.closest(".panel-item"), index = row ? [...row.parentElement.children].indexOf(row) : -1; if (index < 0) return; const entries = showingAllBookmarks ? await VoiceOfMLReaderStore.listAllBookmarks() : await VoiceOfMLReaderStore.listBookmarks(sourceUrl); if (entries[index] && entries[index].mediaTime != null) mediaElement.currentTime = entries[index].mediaTime; });
 document.querySelector("#history-clear").addEventListener("click", async () => { if (!confirm("清空全部阅读历史？")) return; await VoiceOfMLReaderStore.clearHistory(); historySuppressed = true; renderHistory(); });
 readerThemeToggle.addEventListener("click", () => { const theme = readerTheme === "dark" ? "light" : "dark"; applyReaderTheme(theme); if (window.parent !== window) window.parent.postMessage({ type: "voice-reader-theme", theme }, location.origin); });
 window.addEventListener("storage", (event) => { if (event.key === "theme" && event.newValue) applyReaderTheme(event.newValue, false); });
@@ -829,6 +839,9 @@ function renderMedia(mode) {
   media.controls = true;
   media.preload = "metadata";
   if (mode === "video") media.playsInline = true;
+  media.addEventListener("loadedmetadata", () => { if (restoredEntry && Number.isFinite(restoredEntry.mediaTime)) media.currentTime = restoredEntry.mediaTime; });
+  media.addEventListener("timeupdate", () => { const time = formatMediaTime(media.currentTime), timeNode = document.querySelector(".media-panel-time"); if (timeNode) timeNode.textContent = `${time} / ${formatMediaTime(media.duration)}`; scheduleSave(); }, { passive: true });
+  mediaElement = media;
   media.addEventListener("error", () => fail("媒体加载失败，请检查网络后重试，或下载原文件。"), { once: true });
   media.src = contentUrl;
   content.appendChild(media);