Add audio and video playback

app.py

@@ -66,7 +66,7 @@ repo_sorted_by_name = {}
 repo_sorted_by_size = {}
 txt_record_indices = []
 repo_txt_record_indices = {}
-READER_EXTENSIONS = frozenset({"pdf", "epub", "txt", "md", "markdown", "jpg", "jpeg", "png", "gif", "bmp", "webp"})
+READER_EXTENSIONS = frozenset({"pdf", "epub", "txt", "md", "markdown", "jpg", "jpeg", "png", "gif", "bmp", "webp", "mp3", "mp4", "wav", "m4a", "flac", "mov", "mpga"})
 reader_record_indices = []
 repo_reader_record_indices = {}
 reader_record_key_indices = {}
@@ -118,7 +118,7 @@ def decode_reader_assets(raw: bytes) -> dict:
         if entry.get("s") == 2:
             path = entry.get("p")
             mode = entry.get("m")
-            if mode not in ("p", "e", "d", "h") or not isinstance(path, str) or not re.fullmatch(r"objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:[a-z0-9-]+/)?(?:document\.pdf|book\.epub|document\.docx|document\.html)", path):
+            if mode not in ("p", "e", "d", "h", "a", "v") or not isinstance(path, str) or not re.fullmatch(r"objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:[a-z0-9-]+/)?(?:document\.pdf|book\.epub|document\.docx|document\.html|audio\.mp3|video\.mp4)", path):
                 continue
             clean[key] = {"s": 2, "m": mode, "p": path}
         else:
@@ -391,7 +391,7 @@ def validate_voiceofml_source_url(url: str) -> str:
 
 
 READER_ASSET_SOURCE_RE = re.compile(
-    r"^/datasets/vomebook/Reader-Assets/resolve/main/objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:[a-z0-9-]+/)?(?:document\.pdf|book\.epub|document\.docx|document\.html)$"
+    r"^/datasets/vomebook/Reader-Assets/resolve/main/objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:[a-z0-9-]+/)?(?:document\.pdf|book\.epub|document\.docx|document\.html|audio\.mp3|video\.mp4)$"
 )
 VOICEOFML_READER_SOURCE_RE = re.compile(r"^/datasets/VoiceOfML/[A-Za-z0-9._-]+/(?:resolve|raw)/main/.+$")
 
@@ -1419,7 +1419,7 @@ async def api_random_reader(repo: Optional[str] = Query(default=None)):
     asset = converted.get(index)
     if asset:
         rec["ReaderLink"] = f"https://huggingface.co/datasets/vomebook/Reader-Assets/resolve/main/{asset['p']}"
-        rec["ReaderExtension"] = {"p": "pdf", "e": "epub", "d": "docx", "h": "html"}[asset["m"]]
+        rec["ReaderExtension"] = {"p": "pdf", "e": "epub", "d": "docx", "h": "html", "a": "audio", "v": "video"}[asset["m"]]
         rec["DownloadLink"] = rec["Link"]
     return JSONResponse(rec)
 

static/app.js

@@ -711,10 +711,11 @@ function loadReaderAssets() {
 
 function applyReaderAsset(record, repo, relativePath, originalLink) {
   const asset = readerAssets && readerAssets[`${repo}\0${relativePath}`];
-  if (!asset || asset.s !== 2 || !["p", "e", "d", "h"].includes(asset.m) || !/^objects\/[0-9a-f]{2}\/[0-9a-f]{64}\/(?:[a-z0-9-]+\/)?(document\.pdf|book\.epub|document\.docx|document\.html)$/.test(asset.p || "")) return record;
+  if (!asset || asset.s !== 2 || !["p", "e", "d", "h", "a", "v"].includes(asset.m) || !/^objects\/[0-9a-f]{2}\/[0-9a-f]{64}\/(?:[a-z0-9-]+\/)?(document\.pdf|book\.epub|document\.docx|document\.html|audio\.mp3|video\.mp4)$/.test(asset.p || "")) return record;
+  const readerExtensions = { p: "pdf", e: "epub", d: "docx", h: "html", a: "audio", v: "video" };
   return Object.assign({}, record, {
     ReaderLink: `https://huggingface.co/datasets/vomebook/Reader-Assets/resolve/main/${asset.p}`,
-    ReaderExtension: asset.m === "p" ? "pdf" : asset.m === "e" ? "epub" : asset.m === "d" ? "docx" : "html",
+    ReaderExtension: readerExtensions[asset.m],
     DownloadLink: originalLink,
   });
 }
@@ -1502,7 +1503,7 @@ function buildResultHTML(rec, idx) {
       <button class="result-action-btn" data-action="copy" data-link="${escapeHTML(getCopyableLink(recordLink))}">复制链接</button>
       <button class="result-action-btn primary" data-action="download" data-filename="${escapeHTML(rec.File + (rec.Extension ? '.' + rec.Extension : ''))}" data-link="${escapeHTML(recordLink)}">下载</button>
       <a href="${escapeHTML(getPreviewLink(recordPath))}" class="result-action-btn" target="_blank" rel="noopener noreferrer">仓库查看</a>
-      ${isReadableRecord(readerRecord) ? `<button class="result-action-btn" data-action="read" data-reader-url="${escapeHTML(getReaderLink(readerRecord))}">在线阅读</button>` : ""}
+      ${isReadableRecord(readerRecord) ? `<button class="result-action-btn" data-action="read" data-reader-url="${escapeHTML(getReaderLink(readerRecord))}">${["audio", "video"].includes(VoiceOfMLReader.capability(readerRecord.ReaderExtension || readerRecord.Extension).mode) ? "在线播放" : "在线阅读"}</button>` : ""}
     </div>`;
 }
 

static/reader-contract.js

@@ -11,6 +11,8 @@
   const modes = Object.freeze({
     pdf: "pdf", epub: "epub", docx: "docx", html: "html", htm: "html", txt: "text", md: "markdown", markdown: "markdown",
     jpg: "image", jpeg: "image", png: "image", gif: "image", bmp: "image", webp: "image",
+    mp3: "audio", wav: "audio", m4a: "audio", flac: "audio", mpga: "audio", audio: "audio",
+    mp4: "video", mov: "video", video: "video",
   });
   const articleExtensions = Object.freeze(Object.keys(modes));
 

static/reader.css

@@ -35,6 +35,9 @@ body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex
 .reader-page canvas { position: relative; opacity: 0; transition: opacity 120ms ease; }
 .reader-page canvas.ready { opacity: 1; }
 .reader-image { display: block; width: calc(100% * var(--reader-zoom)); max-width: none; height: auto; margin: 0 auto; background: #fff; }
+.reader-content[data-mode="audio"], .reader-content[data-mode="video"] { width: 100%; height: 100%; padding: 0; display: grid; place-items: center; }
+.reader-audio { display: block; width: min(720px, calc(100% - 32px)); }
+.reader-video { display: block; width: 100%; height: 100%; max-height: calc(100dvh - 44px); object-fit: contain; background: #000; }
 .reader-text { margin: 0 auto; max-width: 76ch; white-space: pre-wrap; overflow-wrap: anywhere; font: calc(17px * var(--reader-zoom))/1.8 ui-monospace, monospace; color: #e7e9eb; }
 .reader-markdown { margin: 0 auto; max-width: 76ch; font-size: calc(17px * var(--reader-zoom)); line-height: 1.75; }
 .reader-markdown img { max-width: 100%; }

static/reader.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="theme-color" content="#181a1d">
-<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline' blob:; img-src 'self' data: blob: https://huggingface.co https://hf-mirror.com https://*.huggingface.co https://*.hf.co https://*.xethub.hf.co; connect-src 'self' blob: https://huggingface.co https://hf-mirror.com https://*.huggingface.co https://*.hf.co https://*.xethub.hf.co; worker-src 'self' blob:; frame-src 'self' blob:; font-src 'self' data:; base-uri 'self' blob:; form-action 'none'; object-src 'none'">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline' blob:; img-src 'self' data: blob: https://huggingface.co https://hf-mirror.com https://*.huggingface.co https://*.hf.co https://*.xethub.hf.co; media-src 'self'; connect-src 'self' blob: https://huggingface.co https://hf-mirror.com https://*.huggingface.co https://*.hf.co https://*.xethub.hf.co; worker-src 'self' blob:; frame-src 'self' blob:; font-src 'self' data:; base-uri 'self' blob:; form-action 'none'; object-src 'none'">
 <title>VoiceOfML Reader</title>
 <link rel="preconnect" href="https://huggingface.co" crossorigin>
 <link rel="stylesheet" href="/static/reader.css">

static/reader.js

@@ -76,13 +76,14 @@ const zoomInput = document.querySelector("#zoom");
 const pageInput = document.querySelector("#page-number");
 const readerPath = document.querySelector("#reader-path");
 const loadingObserver = new MutationObserver(() => {
-  if (content.querySelector(".reader-page, .reader-image, .reader-text, .reader-markdown, .html-frame, .epub-frame, .docx-body")) {
+  if (content.querySelector(".reader-page, .reader-image, .reader-audio, .reader-video, .reader-text, .reader-markdown, .html-frame, .epub-frame, .docx-body")) {
     loadingIndicator.remove();
     loadingObserver.disconnect();
   }
 });
 loadingObserver.observe(content, { childList: true });
 document.querySelector(".page-controls").hidden = capability.mode !== "pdf";
+document.querySelector(".zoom-controls").hidden = ["audio", "video"].includes(capability.mode);
 
 document.querySelector("#title").textContent = title;
 document.title = title + " - VoiceOfML Reader";
@@ -196,7 +197,7 @@ function validSource(raw) {
   try {
     const url = new URL(raw);
     if (url.protocol !== "https:" || !["huggingface.co", "hf-mirror.com"].includes(url.hostname)) return false;
-    const readerAsset = /^\/datasets\/vomebook\/Reader-Assets\/resolve\/[^/]+\/objects\/[0-9a-f]{2}\/[0-9a-f]{64}\/(?:[a-z0-9-]+\/)?(document\.pdf|book\.epub|document\.docx|document\.html)$/.test(url.pathname);
+    const readerAsset = /^\/datasets\/vomebook\/Reader-Assets\/resolve\/[^/]+\/objects\/[0-9a-f]{2}\/[0-9a-f]{64}\/(?:[a-z0-9-]+\/)?(document\.pdf|book\.epub|document\.docx|document\.html|audio\.mp3|video\.mp4)$/.test(url.pathname);
     if (extension === "docx") return readerAsset;
     return /^\/datasets\/VoiceOfML\/[^/]+\/(resolve|raw)\//.test(url.pathname) || readerAsset;
   } catch (_) { return false; }
@@ -510,6 +511,17 @@ async function renderDocx(prepared) {
   }
   status.textContent = "DOCX";
 }
+function renderMedia(mode) {
+  const media = document.createElement(mode);
+  media.className = mode === "audio" ? "reader-audio" : "reader-video";
+  media.controls = true;
+  media.preload = "metadata";
+  if (mode === "video") media.playsInline = true;
+  media.addEventListener("error", () => fail("媒体加载失败，请检查网络后重试，或下载原文件。"), { once: true });
+  media.src = contentUrl;
+  content.appendChild(media);
+  status.textContent = mode === "audio" ? "音频" : "视频";
+}
 async function start() {
   if (!validSource(sourceUrl) || capability.readerMode === VoiceOfMLReader.ReaderMode.UNSUPPORTED) return fail("此文件暂不支持在线阅读，请下载原文件。");
   document.querySelector("#download").href = `/api/download?file=${encodeURIComponent(title)}&link=${encodeURIComponent(downloadUrl)}`;
@@ -528,6 +540,7 @@ async function start() {
     else if (capability.mode === "html") await renderHtml(prepared);
     else if (capability.mode === "epub") await renderEpub(prepared);
     else if (capability.mode === "docx") await renderDocx(prepared);
+    else if (capability.mode === "audio" || capability.mode === "video") renderMedia(capability.mode);
     loadingIndicator.remove();
     loadingStatus.hidden = true;
     if (!pageCount && restoredEntry) viewport.scrollTop = restoredEntry.scrollTop || 0;
@@ -541,6 +554,7 @@ function prepareDocument() {
   if (capability.mode === "text") return fetch(contentUrl).then((response) => ({ response }));
   if (capability.mode === "epub") return Promise.all([fetch(contentUrl), loadScript(JSZIP_URL).then(() => loadScript(EPUB_URL))]);
   if (capability.mode === "docx") return Promise.all([fetch(contentUrl), loadScript(JSZIP_URL).then(() => loadScript(DOCX_PREVIEW_URL))]);
+  if (capability.mode === "audio" || capability.mode === "video") return Promise.resolve(null);
   if (capability.mode === "image") return new Promise((resolve, reject) => { const image = new Image(); image.className = "reader-image"; image.alt = title; image.decoding = "async"; let fallback = false; image.onload = () => resolve(image); image.onerror = () => { if (!fallback) { fallback = true; image.src = sourceUrl; } else reject(new Error("image load failed")); }; image.src = contentUrl; });
   return Promise.resolve(null);
 }