@file-viewer/renderer-archive 2.1.26 → 2.1.27

package/README.en.md

@@ -30,6 +30,8 @@ const options = {
 ## Capabilities
 
 - Previews ZIP, TAR, GZIP, RAR, 7z, and common archive directories.
+- `.cbz` and `.cbr` automatically enter comic-reading mode: image-only pages, natural path ordering, automatic cover opening, page controls, keyboard shortcuts, and touch swipes. Pages retain the shared image renderer's fit, zoom, and lightbox behavior.
+- Comic mode fully reuses the existing Worker, RAR4/RAR5 support, ZIP fallback, passwords, lazy extraction, IndexedDB cache, size limits, and asset configuration instead of maintaining a second extraction stack.
 - Decodes legacy ZIP entry names that omit the UTF-8 flag but are actually encoded as GBK/GB18030.
 - Supports encrypted archives: encrypted content is handled through the unified `libarchive.js` path, the built-in dialog asks for a password, and a correct password unlocks directory reading or nested entry previews.
 - Uses `libarchive.js` Worker + WASM first to keep large archive parsing off the main thread.

package/README.md

@@ -30,6 +30,8 @@ const options = {
 ## 能力边界
 
 - 支持 ZIP、TAR、GZIP、RAR、7z 等常见压缩包目录预览。
+- `.cbz` / `.cbr` 自动进入漫画阅读模式：只展示图片页，按路径自然排序并自动打开封面，支持翻页按钮、页码、方向键、PageUp/PageDown、Home/End、空格键和触摸滑动。页面继续复用统一图片 renderer 的适屏、缩放和灯箱能力。
+- 漫画模式完全复用现有 Worker、RAR4/RAR5、ZIP fallback、密码、按需解压、IndexedDB 缓存、体积限制和资源配置，不维护第二套解包逻辑。
 - 自动兼容未声明 UTF-8、实际使用 GBK/GB18030 编码的旧 ZIP 中文文件名。
 - 支持加密压缩包：检测到加密内容后使用 `libarchive.js` 统一解密，默认弹框要求用户输入密码，密码正确后继续读取目录或预览内部文件。
 - 优先使用 `libarchive.js` Worker + WASM，避免大压缩包阻塞主线程。

package/dist/archive.js

@@ -3,6 +3,7 @@ import { collectFileViewerRendererPlugins, createFileRenderHandlerLoader, create
 import { buildArchiveNestedRenderContext, createArchiveCacheKey, flattenArchiveObject, formatArchiveBytes, getArchiveEntryExtension, isArchiveEntryDownloadAllowed, } from './archiveShared.js';
 import { readArchiveCache, writeArchiveCache } from './archiveCache.js';
 import { hasLikelyGbkZipFilenames, isLikelyEncryptedArchive, loadArchiveEntriesWithoutWorker, } from './archiveFallback.js';
+import { comicBookStyle, createComicBookController, } from './comicBook.js';
 const DEFAULT_MAX_ARCHIVE_SIZE = 320 * 1024 * 1024;
 const DEFAULT_MAX_ENTRY_PREVIEW_SIZE = 64 * 1024 * 1024;
 const DEFAULT_WORKER_TIMEOUT_MS = 30000;
@@ -14,6 +15,7 @@ class ArchivePasswordCancelledError extends Error {
     }
 }
 const archiveStyle = `
+	${comicBookStyle}
 	.archive-shell,.archive-viewer{position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(280px,34%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);--archive-sidebar-gap:12px;--archive-sidebar-padding:16px;--archive-head-gap:10px;--archive-title-margin:4px;--archive-title-size:18px;--archive-stats-margin:8px;--archive-toggle-size:34px;--archive-toggle-radius:10px;--archive-notice-padding:10px 12px;--archive-notice-radius:12px;--archive-search-height:42px;--archive-search-padding:0 12px;--archive-search-radius:12px;--archive-list-gap:7px;--archive-list-padding:4px;--archive-entry-min-height:58px;--archive-entry-icon-column:42px;--archive-entry-gap:10px;--archive-entry-padding-y:8px;--archive-entry-padding-x:10px;--archive-entry-depth-step:10px;--archive-entry-radius:12px;--archive-entry-ext-height:34px;--archive-entry-ext-radius:10px;--archive-entry-size-width:74px;--archive-preview-toolbar-min-height:64px;--archive-preview-toolbar-gap:12px;--archive-preview-toolbar-padding:12px 16px;--archive-preview-button-height:34px;--archive-preview-button-padding:0 12px;--archive-preview-button-radius:10px;--archive-empty-padding:28px;--archive-state-gap:14px;--archive-state-padding:18px;--archive-state-radius:16px;background:#edf2f7;color:#172033;font-family:Aptos,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}
 	.archive-shell *,.archive-viewer *{box-sizing:border-box}
 	.archive-shell[data-viewer-density='compact'],.archive-viewer[data-viewer-density='compact'],.file-viewer[data-viewer-density='compact'] .archive-shell,.file-viewer[data-viewer-density='compact'] .archive-viewer,.file-viewer-web-shell[data-viewer-density='compact'] .archive-shell,.file-viewer-web-shell[data-viewer-density='compact'] .archive-viewer{--archive-sidebar-gap:5px;--archive-sidebar-padding:5px;--archive-head-gap:5px;--archive-title-margin:2px;--archive-title-size:16px;--archive-stats-margin:3px;--archive-toggle-size:28px;--archive-toggle-radius:7px;--archive-notice-padding:4px 5px;--archive-notice-radius:7px;--archive-search-height:30px;--archive-search-padding:0 5px;--archive-search-radius:7px;--archive-list-gap:3px;--archive-list-padding:2px;--archive-entry-min-height:42px;--archive-entry-icon-column:30px;--archive-entry-gap:5px;--archive-entry-padding-y:3px;--archive-entry-padding-x:5px;--archive-entry-depth-step:7px;--archive-entry-radius:7px;--archive-entry-ext-height:26px;--archive-entry-ext-radius:6px;--archive-entry-size-width:58px;--archive-preview-toolbar-min-height:38px;--archive-preview-toolbar-gap:5px;--archive-preview-toolbar-padding:4px 5px;--archive-preview-button-height:28px;--archive-preview-button-padding:0 5px;--archive-preview-button-radius:7px;--archive-empty-padding:18px;--archive-state-gap:5px;--archive-state-padding:5px;--archive-state-radius:10px}
@@ -318,6 +320,7 @@ export default async function renderArchive(buffer, target, _type, context) {
     const targetWindow = documentRef.defaultView || null;
     const archiveOptions = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.archive;
     const filename = (context === null || context === void 0 ? void 0 : context.filename) || 'archive.bin';
+    const sourceExtension = (_type || getArchiveEntryExtension(filename)).toLowerCase();
     const maxArchiveSize = (archiveOptions === null || archiveOptions === void 0 ? void 0 : archiveOptions.maxArchiveSize) || DEFAULT_MAX_ARCHIVE_SIZE;
     const maxEntryPreviewSize = (archiveOptions === null || archiveOptions === void 0 ? void 0 : archiveOptions.maxEntryPreviewSize) || DEFAULT_MAX_ENTRY_PREVIEW_SIZE;
     const cacheEnabled = (archiveOptions === null || archiveOptions === void 0 ? void 0 : archiveOptions.cache) !== false;
@@ -340,6 +343,7 @@ export default async function renderArchive(buffer, target, _type, context) {
     let passwordAttempt = 0;
     let passwordResolver = null;
     let sidebarCollapsed = false;
+    let previewSequence = 0;
     const style = createStyle(documentRef);
     const root = createElement(documentRef, 'section', 'archive-shell archive-viewer');
     root.dataset.viewerDensity = normalizeFileViewerUiDensity((_c = (_b = context === null || context === void 0 ? void 0 : context.options) === null || _b === void 0 ? void 0 : _b.ui) === null || _c === void 0 ? void 0 : _c.density);
@@ -370,8 +374,19 @@ export default async function renderArchive(buffer, target, _type, context) {
     toolbarTitle.append(createElement(documentRef, 'span', undefined, t('archive.preview.title')), createElement(documentRef, 'strong', undefined, t('archive.preview.chooseFile')));
     const downloadButton = createElement(documentRef, 'button', 'archive-download-button', t('archive.preview.downloadFile'));
     downloadButton.type = 'button';
-    toolbar.append(sidebarShowButton, toolbarTitle, downloadButton);
     const nestedTarget = createElement(documentRef, 'div', 'archive-nested-target');
+    const comicBook = createComicBookController({
+        document: documentRef,
+        extension: sourceExtension,
+        root,
+        stage: nestedTarget,
+        previousLabel: t('epub.previousPage'),
+        nextLabel: t('epub.nextPage'),
+        getEntries: () => entries,
+        openEntry: entry => void previewEntry(entry),
+    });
+    badge.textContent = comicBook.badge;
+    toolbar.append(sidebarShowButton, toolbarTitle, ...comicBook.toolbarElements, downloadButton);
     preview.append(toolbar, nestedTarget);
     root.append(sidebar, preview);
     const state = createElement(documentRef, 'div', 'archive-state');
@@ -512,9 +527,10 @@ export default async function renderArchive(buffer, target, _type, context) {
     };
     const getFilteredEntries = () => {
         const keyword = filterText.trim().toLowerCase();
+        const visibleEntries = comicBook.getVisibleEntries(entries);
         const source = keyword
-            ? entries.filter(entry => entry.path.toLowerCase().includes(keyword))
-            : entries;
+            ? visibleEntries.filter(entry => entry.path.toLowerCase().includes(keyword))
+            : visibleEntries;
         return source.slice(0, MAX_LISTED_ENTRIES);
     };
     const clearNestedPreview = async () => {
@@ -567,6 +583,7 @@ export default async function renderArchive(buffer, target, _type, context) {
             activeTitle.textContent = (selectedEntry === null || selectedEntry === void 0 ? void 0 : selectedEntry.name) || t('archive.preview.chooseFile');
             activeTitle.setAttribute('title', (selectedEntry === null || selectedEntry === void 0 ? void 0 : selectedEntry.path) || (selectedEntry === null || selectedEntry === void 0 ? void 0 : selectedEntry.name) || '');
         }
+        comicBook.sync();
         syncSidebarToggleState();
     };
     const renderEmptyState = () => {
@@ -659,11 +676,11 @@ export default async function renderArchive(buffer, target, _type, context) {
             }
             setLoading(true, t('archive.loading.readingDirectory'), t('archive.loading.directoryReadyHint'));
             const fileTree = await readArchiveDirectoryWithPassword(archive, candidate);
-            entries = flattenArchiveObject(fileTree)
-                .sort((left, right) => left.path.localeCompare(right.path));
+            entries = comicBook.sortEntries(flattenArchiveObject(fileTree));
             syncState();
             renderEntryList();
             renderEmptyState();
+            comicBook.onEntriesReady();
             return true;
         }
         catch (reason) {
@@ -684,12 +701,13 @@ export default async function renderArchive(buffer, target, _type, context) {
         if (!fallbackEntries) {
             return false;
         }
-        entries = fallbackEntries.sort((left, right) => left.path.localeCompare(right.path));
+        entries = comicBook.sortEntries(fallbackEntries);
         encrypted = null;
         archiveNotice = showWorkerFallbackNotice ? t('archive.notice.workerFallback') : '';
         syncState();
         renderEntryList();
         renderEmptyState();
+        comicBook.onEntriesReady();
         return true;
     };
     const openArchive = async () => {
@@ -746,12 +764,21 @@ export default async function renderArchive(buffer, target, _type, context) {
             setLoading(false);
         }
     };
-    const renderEntryBuffer = async (entry, entryBuffer) => {
+    const renderEntryBuffer = async (entry, entryBuffer, requestId) => {
         await clearNestedPreview();
+        if (requestId !== previewSequence) {
+            return;
+        }
         const child = createElement(documentRef, 'div', 'archive-nested-content');
         nestedTarget.append(child);
         const nestedContext = buildArchiveNestedRenderContext(context, entry, archiveOptions);
-        nestedRendered = await renderNestedEntry(entryBuffer, entry.extension, child, nestedContext);
+        const rendered = await renderNestedEntry(entryBuffer, entry.extension, child, nestedContext);
+        if (requestId !== previewSequence) {
+            await disposeFileViewerRendered(rendered);
+            child.remove();
+            return;
+        }
+        nestedRendered = rendered;
     };
     const extractEntryBuffer = async (entry) => {
         const cacheKey = createArchiveCacheKey(filename, buffer.byteLength, entry);
@@ -789,7 +816,9 @@ export default async function renderArchive(buffer, target, _type, context) {
         return entryBuffer;
     };
     async function previewEntry(entry) {
+        const requestId = ++previewSequence;
         selectedEntry = entry;
+        comicBook.onEntrySelected(entry);
         renderEntryList();
         syncState();
         if (entry.size > maxEntryPreviewSize) {
@@ -804,15 +833,22 @@ export default async function renderArchive(buffer, target, _type, context) {
         setError('');
         try {
             const entryBuffer = await extractEntryBuffer(entry);
+            if (requestId !== previewSequence) {
+                return;
+            }
             setLoading(true, t('archive.loading.rendering', { name: entry.name }));
-            await renderEntryBuffer(entry, entryBuffer);
+            await renderEntryBuffer(entry, entryBuffer, requestId);
         }
         catch (nextError) {
-            console.error(nextError);
-            setError(nextError instanceof Error ? nextError.message : String(nextError));
+            if (requestId === previewSequence) {
+                console.error(nextError);
+                setError(nextError instanceof Error ? nextError.message : String(nextError));
+            }
         }
         finally {
-            setLoading(false);
+            if (requestId === previewSequence) {
+                setLoading(false);
+            }
         }
     }
     const downloadEntry = async (entry) => {
@@ -848,6 +884,7 @@ export default async function renderArchive(buffer, target, _type, context) {
         $el: root,
         async unmount() {
             closePasswordDialog(null);
+            comicBook.dispose();
             cleanups.splice(0).forEach(cleanup => cleanup());
             await clearNestedPreview();
             await closeArchive();

package/dist/comicBook.d.ts

@@ -0,0 +1,30 @@
+import type { ArchiveEntryView } from './archiveShared.js';
+export declare const comicBookStyle = "\n.archive-comic-page{min-width:64px;color:#64748b!important;text-align:center;font-variant-numeric:tabular-nums}\n.archive-comic-nav:disabled{cursor:not-allowed;opacity:.42}\n";
+export declare const isComicBookExtension: (extension: string) => boolean;
+export declare const isComicBookPage: (entry: Pick<ArchiveEntryView, "extension">) => boolean;
+export declare const naturalComicPageCompare: (left: Pick<ArchiveEntryView, "path">, right: Pick<ArchiveEntryView, "path">) => number;
+export declare const getComicBookPages: (entries: readonly ArchiveEntryView[]) => ArchiveEntryView[];
+export declare const clampComicPageIndex: (index: number, pageCount: number) => number;
+interface ComicBookControllerOptions {
+    document: Document;
+    extension: string;
+    root: HTMLElement;
+    stage: HTMLElement;
+    previousLabel: string;
+    nextLabel: string;
+    getEntries(): readonly ArchiveEntryView[];
+    openEntry(entry: ArchiveEntryView): void;
+}
+export interface ComicBookController {
+    enabled: boolean;
+    badge: string;
+    toolbarElements: readonly HTMLElement[];
+    getVisibleEntries(entries: readonly ArchiveEntryView[]): ArchiveEntryView[];
+    sortEntries(entries: ArchiveEntryView[]): ArchiveEntryView[];
+    onEntriesReady(): void;
+    onEntrySelected(entry: ArchiveEntryView): void;
+    sync(): void;
+    dispose(): void;
+}
+export declare const createComicBookController: (options: ComicBookControllerOptions) => ComicBookController;
+export {};

package/dist/comicBook.js

@@ -0,0 +1,147 @@
+const COMIC_IMAGE_EXTENSIONS = new Set([
+    'avif', 'bmp', 'gif', 'heic', 'heif', 'jpe', 'jpeg', 'jpg', 'jxl', 'png', 'tif', 'tiff', 'webp',
+]);
+export const comicBookStyle = `
+.archive-comic-page{min-width:64px;color:#64748b!important;text-align:center;font-variant-numeric:tabular-nums}
+.archive-comic-nav:disabled{cursor:not-allowed;opacity:.42}
+`;
+export const isComicBookExtension = (extension) => {
+    const normalized = extension.trim().toLowerCase();
+    return normalized === 'cbz' || normalized === 'cbr';
+};
+export const isComicBookPage = (entry) => (COMIC_IMAGE_EXTENSIONS.has(entry.extension.toLowerCase()));
+export const naturalComicPageCompare = (left, right) => left.path.localeCompare(right.path, undefined, { numeric: true, sensitivity: 'base' });
+export const getComicBookPages = (entries) => entries
+    .filter(isComicBookPage)
+    .sort(naturalComicPageCompare);
+export const clampComicPageIndex = (index, pageCount) => (Math.max(0, Math.min(index, Math.max(0, pageCount - 1))));
+const createButton = (documentRef, text, title) => {
+    const button = documentRef.createElement('button');
+    button.type = 'button';
+    button.className = 'archive-comic-nav';
+    button.textContent = text;
+    button.title = title;
+    button.setAttribute('aria-label', title);
+    return button;
+};
+export const createComicBookController = (options) => {
+    const enabled = isComicBookExtension(options.extension);
+    const previousButton = createButton(options.document, '‹', options.previousLabel);
+    const pageText = options.document.createElement('span');
+    pageText.className = 'archive-comic-page';
+    pageText.setAttribute('role', 'status');
+    pageText.setAttribute('aria-live', 'polite');
+    pageText.setAttribute('aria-atomic', 'true');
+    const nextButton = createButton(options.document, '›', options.nextLabel);
+    const toolbarElements = [previousButton, pageText, nextButton];
+    const cleanups = [];
+    const timers = new Set();
+    let pageIndex = -1;
+    let pointerStartX = null;
+    toolbarElements.forEach(element => {
+        element.hidden = !enabled;
+    });
+    if (enabled) {
+        options.root.tabIndex = 0;
+    }
+    const pages = () => getComicBookPages(options.getEntries());
+    const openPage = (index) => {
+        const currentPages = pages();
+        if (!currentPages.length) {
+            return;
+        }
+        pageIndex = clampComicPageIndex(index, currentPages.length);
+        options.openEntry(currentPages[pageIndex]);
+    };
+    const listen = (element, event, listener) => {
+        element.addEventListener(event, listener);
+        cleanups.push(() => element.removeEventListener(event, listener));
+    };
+    if (enabled) {
+        listen(previousButton, 'click', () => openPage(pageIndex - 1));
+        listen(nextButton, 'click', () => openPage(pageIndex + 1));
+        listen(options.root, 'keydown', event => {
+            const eventTarget = event.target;
+            if (eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.closest('input, button, select, textarea, [contenteditable="true"]')) {
+                return;
+            }
+            if (event.key === 'ArrowLeft' || event.key === 'PageUp') {
+                event.preventDefault();
+                openPage(pageIndex - 1);
+            }
+            else if (event.key === 'ArrowRight' || event.key === 'PageDown' || event.key === ' ') {
+                event.preventDefault();
+                openPage(pageIndex + 1);
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                openPage(0);
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                openPage(pages().length - 1);
+            }
+        });
+        listen(options.stage, 'pointerdown', event => {
+            if (event.isPrimary) {
+                options.root.focus({ preventScroll: true });
+                pointerStartX = event.clientX;
+            }
+        });
+        listen(options.stage, 'pointerup', event => {
+            if (pointerStartX === null || !event.isPrimary) {
+                pointerStartX = null;
+                return;
+            }
+            const distance = event.clientX - pointerStartX;
+            pointerStartX = null;
+            if (Math.abs(distance) >= 56) {
+                openPage(pageIndex + (distance < 0 ? 1 : -1));
+            }
+        });
+        listen(options.stage, 'pointercancel', () => {
+            pointerStartX = null;
+        });
+    }
+    return {
+        enabled,
+        badge: enabled ? options.extension.toUpperCase() : 'ARCHIVE',
+        toolbarElements,
+        getVisibleEntries: entries => enabled ? getComicBookPages(entries) : [...entries],
+        sortEntries: entries => entries.sort(enabled
+            ? naturalComicPageCompare
+            : (left, right) => left.path.localeCompare(right.path)),
+        onEntriesReady() {
+            var _a;
+            if (!enabled || !pages().length) {
+                return;
+            }
+            const timer = (_a = options.document.defaultView) === null || _a === void 0 ? void 0 : _a.setTimeout(() => {
+                timers.delete(timer || 0);
+                openPage(0);
+            }, 0);
+            if (timer !== undefined) {
+                timers.add(timer);
+            }
+        },
+        onEntrySelected(entry) {
+            if (enabled) {
+                pageIndex = pages().findIndex(page => page.id === entry.id);
+            }
+        },
+        sync() {
+            if (!enabled) {
+                return;
+            }
+            const pageCount = pages().length;
+            pageText.textContent = pageCount ? `${pageIndex + 1} / ${pageCount}` : '0 / 0';
+            previousButton.disabled = pageIndex <= 0;
+            nextButton.disabled = pageIndex < 0 || pageIndex >= pageCount - 1;
+        },
+        dispose() {
+            cleanups.splice(0).forEach(cleanup => cleanup());
+            timers.forEach(timer => { var _a; return (_a = options.document.defaultView) === null || _a === void 0 ? void 0 : _a.clearTimeout(timer); });
+            timers.clear();
+        },
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-archive",
-  "version": "2.1.26",
+  "version": "2.1.27",
   "private": false,
   "type": "module",
   "description": "Standalone archive renderer plugin for Flyfish File Viewer with libarchive worker, ZIP/TAR fallback, IndexedDB cache, and nested previews.",
@@ -56,7 +56,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.1.26",
+    "@file-viewer/core": "2.1.27",
     "jszip": "^3.10.1",
     "libarchive.js": "^2.0.2"
   },
@@ -66,6 +66,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc -b tsconfig.json",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "verify:github-101": "pnpm build && node scripts/verify-github-101.mjs"
   }
 }