static/reader.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex, nofollow, noarchive" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; base-uri 'self' blob:; script-src 'self' https://unpkg.com 'unsafe-inline' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline' blob:; font-src 'self' blob:; img-src 'self' data: blob: https:; media-src 'self' https://voiceofml-search.hf.space https://hf-mirror.com https://huggingface.co https://*.hf.co https://*.huggingface.co https://vomebook-hitokoto.hf.space blob:; connect-src 'self' blob: https://unpkg.com https://huggingface.co https://*.hf.co https://*.huggingface.co https://voiceofml-search.hf.space https://hf-mirror.com https://vomebook-hitokoto.hf.space; frame-src 'self' blob:;"
    />
    <title>VoiceOfML Reader</title>
    <script>
      // Start source lookup before the Reader module graph loads; consume it once.
      (() => {
        const params = new URLSearchParams(location.search), id = params.get("id");
        if (params.get("url") || !/^[a-z0-9]{13}$/.test(id || "")) return;
        try {
          if (JSON.parse(sessionStorage.getItem(`reader-resolve:${id}`) || "null")?.url) return;
        } catch (_) {}
        const controller = new AbortController();
        const timer = setTimeout(() => controller.abort(
          new DOMException("Reader ID lookup stalled", "TimeoutError")
        ), 10000);
        const dispose = () => {
          clearTimeout(timer);
          controller.abort();
          removeEventListener("pagehide", onPageHide);
          removeEventListener("voice-reader-dispose", dispose);
        };
        const onPageHide = (event) => { if (!event.persisted) dispose(); };
        addEventListener("pagehide", onPageHide);
        addEventListener("voice-reader-dispose", dispose);
        const promise = fetch(`/api/reader-resolve?id=${encodeURIComponent(id)}`, {
          signal: controller.signal
        }).then(async (response) => {
          const data = response.ok ? await response.json() : null;
          if (!response.ok) await response.body?.cancel();
          return { ok: response.ok, status: response.status, data };
        }).finally(() => {
          clearTimeout(timer);
          removeEventListener("pagehide", onPageHide);
          removeEventListener("voice-reader-dispose", dispose);
        });
        promise.catch(() => {});
        window.__VOICE_READER_RESOLVE__ = { id, promise, dispose };
      })();
    </script>
    <link rel="modulepreload" href="/static/reader.js" />
    <style>
      #loading-status {
        display: none !important;
      }
    </style>
    <link rel="preconnect" href="https://huggingface.co" />
    <link rel="preconnect" href="https://voiceofml-search.hf.space" />
    <link rel="stylesheet" href="/static/reader.css" />
    <script defer src="/static/reader/core/reader-security.js"></script>
    <script defer src="/static/reader-resources.js"></script>
    <script defer src="/static/reader/pdf/reader-engine-preload.js"></script>
    <script defer src="/static/reader/core/reader-contract.js"></script>
    <script defer src="/static/reader/core/reader-store.js"></script>
  </head>
  <body>
    <a class="reader-skip-link" href="#viewport">跳转到正文</a>
    <header class="reader-toolbar">
      <button id="back" class="icon-button" type="button" aria-label="返回" title="返回">
        <!-- Lucide arrow-left, ISC; see icons/LICENSE-lucide -->
        <svg class="lucide lucide-arrow-left" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
          <path d="m12 19-7-7 7-7" /><path d="M19 12H5" />
        </svg>
      </button>
      <div class="reader-heading">
        <strong id="title">在线阅读</strong>
        <button id="reader-path" class="reader-path" type="button" hidden></button>
        <span id="status">正在准备...</span>
      </div>
      <div class="reader-actions">
        <span class="control-group page-controls">
          <button id="page-prev" class="icon-button" type="button">&#8249;</button>
          <label class="compact-input"
            ><input id="page-number" type="number" min="1" value="1" /><span id="page-total"
              >/ -</span
            ></label
          >
          <button id="page-next" class="icon-button" type="button">&#8250;</button>
        </span>
        <span class="control-group zoom-controls">
          <button id="zoom-out" class="icon-button" type="button">&#8722;</button>
          <label class="compact-input"
            ><input id="zoom" type="number" min="25" max="400" step="10" value="100" /><span
              >%</span
            ></label
          >
          <button id="zoom-in" class="icon-button" type="button">+</button>
        </span>
        <a
          id="download"
          class="icon-button"
          aria-label="下载原文件"
          title="下载原文件"
          target="_blank"
          rel="noopener noreferrer"
        >
          <!-- Lucide download, ISC; see icons/LICENSE-lucide -->
          <svg class="lucide lucide-download" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
            <polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" />
          </svg>
        </a>
        <span id="download-feedback" role="status" hidden></span>
      </div>
      <button id="history" class="icon-button" type="button" aria-label="阅读选项" aria-controls="history-panel" aria-expanded="false">&#9776;</button>
    </header>
    <main id="viewport" class="reader-viewport" tabindex="-1" aria-label="正文">
      <button id="bookmark-ribbon" class="bookmark-ribbon" type="button"></button>
      <div id="bookmark-popover" hidden>
        <span id="bookmark-prompt"></span>
        <div>
          <button id="bookmark-add" type="button">添加书签</button
          ><button id="bookmark-cancel" type="button">取消</button>
        </div>
      </div>
      <div id="loading-status" role="status">正在加载原文件...</div>
      <div id="content" class="reader-content"></div>
    </main>
    <aside id="history-panel" class="reader-panel" aria-labelledby="reader-panel-title" hidden inert>
      <header>
        <strong id="reader-panel-title">阅读选项</strong>
        <button id="full-search-toggle" class="text-action" type="button">全文搜索</button>
        <button id="page-invert-toggle" class="text-action" type="button" aria-pressed="false" hidden>页面反色</button>
        <button id="theme-toggle" class="theme-toggle" type="button" aria-label="切换主题"></button>
        <button id="history-close" class="icon-button" type="button" aria-label="关闭阅读选项" title="关闭阅读选项">&times;</button>
      </header>
      <nav class="reader-panel-tabs" role="tablist" aria-label="阅读面板">
        <button
          id="toc-tab"
          role="tab"
          aria-controls="toc-panel"
          aria-selected="false"
          data-panel="toc"
          hidden
        >
          目录
        </button>
        <button
          id="bookmarks-tab"
          role="tab"
          aria-controls="bookmarks-panel"
          aria-selected="false"
          data-panel="bookmarks"
        >
          书签
        </button>
        <button
          id="history-tab"
          role="tab"
          aria-controls="history-view"
          aria-selected="false"
          data-panel="history"
        >
          历史
        </button>
      </nav>
      <section
        id="toc-panel"
        class="reader-panel-view"
        role="tabpanel"
        aria-labelledby="toc-tab"
        data-panel-view="toc"
        hidden
      >
        <div class="panel-view-header"><strong>目录</strong></div>
        <div id="toc-list" class="panel-list"></div>
      </section>
      <section
        id="bookmarks-panel"
        class="reader-panel-view"
        role="tabpanel"
        aria-labelledby="bookmarks-tab"
        data-panel-view="bookmarks"
        hidden
      >
        <div class="panel-view-header"><strong>书签</strong></div>
        <div id="bookmarks-list" class="panel-list"></div>
      </section>
      <section
        id="history-view"
        class="reader-panel-view"
        role="tabpanel"
        aria-labelledby="history-tab"
        data-panel-view="history"
        hidden
      >
        <div class="panel-view-header">
          <strong>阅读历史</strong
          ><span
            ><button id="history-clear" class="text-action" type="button">清空历史</button></span
          >
        </div>
        <div id="history-list" class="panel-list"></div>
      </section>
    </aside>
    <script>
      // Back is visible before the module graph binds it; remember an early tap
      // so the Reader can still exit instead of ignoring it.
      (() => {
        const back = document.querySelector("#back");
        let pending = false;
        const early = (event) => { event.preventDefault(); pending = true; };
        back?.addEventListener("click", early);
        window.__VOICE_READER_EARLY_BACK__ = () => {
          back?.removeEventListener("click", early);
          delete window.__VOICE_READER_EARLY_BACK__;
          return pending;
        };
      })();
      if (window.parent !== window)
        window.parent.postMessage({ type: "voice-reader-shell" }, location.origin);
      for (const panel of document.querySelectorAll(".reader-panel-view")) {
        const header = panel.querySelector(".panel-view-header");
        const actions =
          panel.id === "history-view" ? header.querySelector("span") || header : header;
        const button = document.createElement("button");
        button.className = "panel-search-toggle";
        actions.appendChild(button);
        const input = document.createElement("input");
        input.className = "panel-search";
        input.setAttribute("aria-label", `搜索${header.querySelector("strong").textContent}`);
        input.hidden = true;
        panel.insertBefore(input, panel.querySelector(".panel-list"));
      }
    </script>
    <section id="speech-panel" class="speech-panel" aria-label="朗读设置" hidden>
      <div class="speech-heading"><span id="speech-title">朗读</span><button type="button" id="speech-collapse" class="icon-button" aria-label="收起设置，继续播放" title="收起，继续播放"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M5 12h14"/></svg></button><button type="button" id="speech-stop" class="icon-button" aria-label="停止朗读" title="停止朗读">×</button></div>
      <p id="speech-status" class="speech-note" role="status">从当前阅读位置开始</p>
      <label class="speech-setting" for="speech-pitch"><span>音高</span><input id="speech-pitch" type="range" min="-3" max="3" step="1" value="0"><output id="speech-pitch-value">0</output></label>
      <label class="speech-setting" for="speech-speed"><span>语速</span><input id="speech-speed" type="range" min="0.5" max="2" step="0.05" value="1"><output id="speech-speed-value">1.0×</output></label>
      <label class="speech-setting" for="speech-timer"><span>睡眠定时</span><select id="speech-timer"><option value="off">关闭</option><option value="clip">读完当前句</option><option value="5">5 分钟</option><option value="15">15 分钟</option><option value="30">30 分钟</option><option value="60">60 分钟</option></select></label>
      <div class="speech-transport"><button type="button" id="speech-previous" class="text-button" aria-label="上一句">上一句</button><button type="button" id="speech-play" class="speech-play">暂停</button><button type="button" id="speech-next" class="text-button" aria-label="下一句">下一句</button></div>
      <div class="speech-links"><button type="button" id="speech-visible" class="text-button">从当前阅读位置开始</button><button type="button" id="speech-locate" class="text-button">回到播放位置</button></div>
    </section>
    <script defer src="/static/tts-client.js"></script>
    <script type="module" src="/static/reader.js"></script>
  </body>
</html>