@caipira/vue-reader 0.0.2 → 0.0.4

package/dist/src/composables/useEpubReader.js

@@ -1,8 +1,222 @@
-import { useEpubReaderController } from '../../src/composables/useEpubReaderController';
+import { Publication as RPublication } from '@readium/shared';
+import { EpubDefaults, EpubNavigator, EpubPreferences } from '@readium/navigator';
+import { toRaw, watch, toValue, nextTick, computed, onMounted, onBeforeUnmount, } from 'vue';
+import { getCurrentTitle } from '../../src/services/common/title';
+import { generatePositions } from '../../src/services/common/progression';
+import { setWasmStreamerConfig } from '../../src/services/wasm/wasm-streamer';
+import { createSessionStorageAdapter } from '../../src/services/common/storage';
+import { injectCurrentFontIntoIframe } from '../../src/services/common/fonts';
+import { createReadiumWordLookupController } from '../../src/services/common/word-lookup';
+import { createReadiumWordDecorationsController } from '../../src/services/common/word-decorations';
+import { useReaderSettings } from '../../src/composables/useReaderSettings';
+import { useEpubReaderWasm } from '../../src/composables/useEpubReaderWasm';
+import { useEpubReaderState } from '../../src/composables/useEpubReaderState';
+import { hasReaderDictionary } from '../../src/composables/useReaderDictionary';
+import { onReaderColorsChange } from '../../src/composables/useReaderColors';
+import { useEpubReaderZipFetcher } from '../../src/composables/useEpubReaderZipFetcher';
+const ENABLE_EDGE_TAP_PAGE_TURN = false;
 export const useEpubReader = (src, containerRef, options) => {
-    const controller = useEpubReaderController(src, containerRef, options);
+    const { error, loading, tocLinks, navigator, publication, totalPositions, currentPosition, currentChapterTitle, } = useEpubReaderState(containerRef);
+    const sourceRef = computed(() => toValue(src));
+    const storage = options?.storage ?? createSessionStorageAdapter();
+    const fontBaseUrl = options?.assets?.fontBaseUrl ?? '/fonts';
+    const { settings, onSettingsChange } = useReaderSettings(options?.preferences);
+    let stopSettingsWatcher = null;
+    let activeChapterHref = '';
+    let chapterProgressions = new Map();
+    let activeSource = null;
+    let strategyFrameLoaded = null;
+    let stopReaderColorsWatcher = onReaderColorsChange((colors) => {
+        settings.backgroundColor = colors.background;
+        settings.textColor = colors.text;
+    });
+    let getProgress = (_idx, rawProg) => ({
+        progress: rawProg ?? 0,
+        resourceProgression: rawProg ?? 0,
+    });
+    const wordDecorations = hasReaderDictionary()
+        ? createReadiumWordDecorationsController(navigator, () => publication.value?.metadata?.languages?.[0])
+        : null;
+    const wordLookup = hasReaderDictionary()
+        ? createReadiumWordLookupController(() => publication.value?.metadata?.languages?.[0])
+        : null;
+    const applyPreferences = async () => {
+        if (!navigator.value) {
+            return;
+        }
+        await toRaw(navigator.value).submitPreferences(new EpubPreferences({
+            backgroundColor: settings.backgroundColor,
+            columnCount: settings.columnCount,
+            fontFamily: settings.fontFamily,
+            fontSize: settings.fontSize,
+            lineHeight: settings.lineHeight,
+            scroll: settings.scroll,
+            textAlign: settings.textAlign,
+            textColor: settings.textColor,
+        }));
+        await injectCurrentFontIntoIframe(containerRef.value, settings.fontFamily, fontBaseUrl);
+    };
+    const destroy = () => {
+        toRaw(navigator.value)?.destroy();
+        navigator.value = null;
+        publication.value = null;
+        tocLinks.value = [];
+        currentPosition.value = 0;
+        totalPositions.value = 0;
+        currentChapterTitle.value = '';
+        strategyFrameLoaded = null;
+        chapterProgressions = new Map();
+        activeChapterHref = '';
+        activeSource?.destroy();
+        activeSource = null;
+        wordDecorations?.destroy();
+        wordLookup?.destroy();
+        stopSettingsWatcher?.();
+        stopSettingsWatcher = null;
+        stopReaderColorsWatcher?.();
+        stopReaderColorsWatcher = null;
+    };
+    const selectStrategy = () => {
+        const strategy = options?.strategy ?? 'zip-fetcher';
+        if (strategy === 'wasm') {
+            setWasmStreamerConfig({
+                swUrl: options?.assets?.swUrl,
+                swScope: options?.assets?.swScope,
+                wasmUrl: options?.assets?.wasmUrl,
+            });
+            return useEpubReaderWasm();
+        }
+        return useEpubReaderZipFetcher();
+    };
+    const init = async () => {
+        if (!containerRef.value) {
+            return;
+        }
+        loading.value = true;
+        error.value = null;
+        try {
+            const url = sourceRef.value;
+            const strategySource = selectStrategy();
+            const source = await strategySource.load(url);
+            activeSource = strategySource;
+            let pub;
+            let positions = [];
+            if (source.publication) {
+                pub = source.publication;
+            }
+            else {
+                pub = new RPublication({
+                    manifest: source.manifest,
+                    fetcher: source.fetcher,
+                });
+            }
+            getProgress = source.createProgressCalculator(pub);
+            chapterProgressions = source.chapterProgressions;
+            strategyFrameLoaded = source.onFrameLoaded ?? null;
+            positions = source.createPositions
+                ? (await source.createPositions(pub))
+                : generatePositions(pub);
+            publication.value = pub;
+            if (pub.toc) {
+                tocLinks.value = pub.toc.items.map((link) => ({
+                    title: link.title || link.href,
+                    link,
+                }));
+            }
+            if (positions.length === 0) {
+                positions = generatePositions(pub);
+            }
+            totalPositions.value = positions.length;
+            const initialLocator = storage.restorePosition(url, pub) ?? positions[0];
+            const listeners = {
+                positionChanged: (locator) => {
+                    if (!locator) {
+                        return;
+                    }
+                    activeChapterHref = locator.href.split('#')[0] ?? locator.href;
+                    wordDecorations?.onPositionChanged(activeChapterHref);
+                    const idx = publication.value
+                        ? publication.value.readingOrder.findIndexWithHref(locator.href)
+                        : -1;
+                    if (idx < 0) {
+                        return;
+                    }
+                    const { progress, resourceProgression } = getProgress(idx, locator.locations?.progression);
+                    currentPosition.value = Math.round(Math.min(1, Math.max(0, progress)) * 100);
+                    currentChapterTitle.value = getCurrentTitle(locator, chapterProgressions, tocLinks.value);
+                    const persisted = locator.copyWithLocations({
+                        position: idx + 1,
+                        progression: resourceProgression,
+                    });
+                    storage.savePosition(url, persisted);
+                },
+                frameLoaded: async (wnd) => {
+                    const nav = toRaw(navigator.value);
+                    const currentHref = nav?.currentLocator?.href ?? activeChapterHref;
+                    const chapterHref = (currentHref ?? '').split('#')[0] ?? '';
+                    if (chapterHref) {
+                        wordDecorations?.onFrameLoaded(wnd, chapterHref);
+                        wordLookup?.onFrameLoaded(wnd);
+                    }
+                    if (chapterHref && strategyFrameLoaded) {
+                        strategyFrameLoaded(wnd, chapterHref);
+                    }
+                    await injectCurrentFontIntoIframe(containerRef.value, settings.fontFamily, fontBaseUrl);
+                },
+                tap: () => !ENABLE_EDGE_TAP_PAGE_TURN,
+                click: () => !ENABLE_EDGE_TAP_PAGE_TURN,
+                zoom: () => { },
+                miscPointer: () => { },
+                scroll: () => { },
+                customEvent: () => { },
+                handleLocator: () => true,
+                textSelected: () => { },
+                contentProtection: () => { },
+                contextMenu: () => { },
+                peripheral: () => { },
+            };
+            navigator.value = new EpubNavigator(containerRef.value, pub, listeners, positions, initialLocator, {
+                preferences: new EpubPreferences(settings),
+                defaults: new EpubDefaults({}),
+                injectables: {
+                    rules: [],
+                    allowedDomains: [window.location.origin],
+                },
+            });
+            await toRaw(navigator.value).load();
+            await toRaw(navigator.value).submitPreferences(new EpubPreferences(settings));
+            stopSettingsWatcher = onSettingsChange(applyPreferences);
+            loading.value = false;
+        }
+        catch (e) {
+            error.value = e instanceof Error ? e.message : 'Unknown error loading EPUB';
+            loading.value = false;
+        }
+    };
+    const reload = async () => {
+        destroy();
+        await nextTick();
+        await init();
+    };
+    onMounted(async () => {
+        if (!sourceRef.value) {
+            error.value = 'No source URL provided';
+            return;
+        }
+        await init();
+    });
+    onBeforeUnmount(() => {
+        destroy();
+    });
+    watch(() => sourceRef.value, async (next, prev) => {
+        if (!next || next === prev) {
+            return;
+        }
+        await reload();
+    });
     return {
-        ...controller,
-        initReader: controller.actions.init,
+        init,
+        reload,
+        destroy,
     };
 };

package/dist/src/composables/useEpubReaderLogging.d.ts

@@ -0,0 +1,5 @@
+export declare const useEpubReaderLogging: (namespace: string) => {
+    debug: (message: string, payload?: unknown) => void;
+    warn: (message: string, payload?: unknown) => void;
+    error: (message: string, payload?: unknown) => void;
+};

package/dist/src/composables/useEpubReaderLogging.js

@@ -0,0 +1,27 @@
+import { useEpubReaderState, LOG_MODES } from '../../src/composables/useEpubReaderState';
+export const useEpubReaderLogging = (namespace) => {
+    const { logMode } = useEpubReaderState();
+    const debug = (message, payload) => {
+        if ([LOG_MODES.NONE, LOG_MODES.ERROR, LOG_MODES.WARNING].includes(logMode.value)) {
+            return;
+        }
+        console.log(`[${namespace}] ${message}`, payload);
+    };
+    const warn = (message, payload) => {
+        if ([LOG_MODES.NONE, LOG_MODES.ERROR].includes(logMode.value)) {
+            return;
+        }
+        console.warn(`[${namespace}] ${message}`, payload);
+    };
+    const error = (message, payload) => {
+        if ([LOG_MODES.NONE].includes(logMode.value)) {
+            return;
+        }
+        console.error(`[${namespace}] ${message}`, payload);
+    };
+    return {
+        debug,
+        warn,
+        error,
+    };
+};

package/dist/src/composables/useEpubReaderNavigation.d.ts

@@ -1,6 +1,6 @@
-import type { ReturnTypeCreateController } from '../../src/composables/utils';
-export declare const useEpubReaderNavigation: (controller?: ReturnTypeCreateController) => {
+import type { TocEntry } from '../../src/types/common';
+export declare const useEpubReaderNavigation: () => {
     goForward: () => void;
     goBackward: () => void;
-    goToLink: (link: import("..").TocEntry["link"]) => void;
+    goToLink: (link: TocEntry["link"]) => void;
 };

package/dist/src/composables/useEpubReaderNavigation.js

@@ -1,22 +1,15 @@
-import { useEpubReaderControllerRef } from '../../src/composables/useEpubReaderState';
-export const useEpubReaderNavigation = (controller) => {
-    if (controller) {
-        const { goForward, goBackward, goToLink } = controller.actions;
-        return {
-            goForward,
-            goBackward,
-            goToLink,
-        };
-    }
-    const activeEpubReader = useEpubReaderControllerRef();
+import { toRaw } from 'vue';
+import { useEpubReaderState } from '../../src/composables/useEpubReaderState';
+export const useEpubReaderNavigation = () => {
+    const { navigator } = useEpubReaderState();
     const goForward = () => {
-        activeEpubReader.value?.actions?.goForward?.();
+        toRaw(navigator.value)?.goForward(false, () => { });
     };
     const goBackward = () => {
-        activeEpubReader.value?.actions?.goBackward?.();
+        toRaw(navigator.value)?.goBackward(false, () => { });
     };
-    const goToLink = (...args) => {
-        activeEpubReader.value?.actions?.goToLink?.(...args);
+    const goToLink = (link) => {
+        toRaw(navigator.value)?.goLink(link, false, () => { });
     };
     return {
         goForward,