@caipira/vue-reader 0.0.2 → 0.0.4

package/dist/src/core/controller.js

@@ -1,262 +0,0 @@
-import { ref, computed, toRaw } from 'vue';
-import { Publication as RPublication } from '@readium/shared';
-import { EpubDefaults, EpubNavigator, EpubPreferences } from '@readium/navigator';
-import { getCurrentTitle } from '../../services/common/title';
-import { useEpubReaderWasm } from '../../composables/useEpubReaderWasm';
-import { generatePositions } from '../../services/common/progression';
-import { hasReaderDictionary } from '../../src/composables/useReaderDictionary';
-import { onReaderColorsChange } from '../../src/composables/useReaderSettings';
-import { setWasmStreamerConfig } from '../../services/wasm/wasm-streamer';
-import { useEpubReaderZipFetcher } from '../../composables/useEpubReaderZipFetcher';
-import { createReaderSettingsStore } from '../../src/core/settings-store';
-import { createSessionStorageAdapter } from '../../src/core/storage';
-import { injectCurrentFontIntoIframe } from '../../src/core/fonts';
-import { createReadiumWordLookupController } from '../../services/common/word-lookup';
-import { createReadiumWordDecorationsController } from '../../services/common/word-decorations';
-const ENABLE_EDGE_TAP_PAGE_TURN = false;
-export const createEpubReaderController = (src, containerRef, options) => {
-    const error = ref(null);
-    const loading = ref(false);
-    const tocLinks = ref([]);
-    const navigator = ref(null);
-    const publication = ref(null);
-    const currentPosition = ref(0);
-    const totalPositions = ref(0);
-    const currentChapterTitle = ref('');
-    const progressPercent = computed(() => Math.min(100, Math.max(0, currentPosition.value)));
-    const storage = options?.storage ?? createSessionStorageAdapter();
-    const settingsStore = createReaderSettingsStore(options?.settings, options?.preferences);
-    const settings = settingsStore.settings;
-    const fontBaseUrl = options?.assets?.fontBaseUrl ?? '/fonts';
-    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 destroyNavigator = () => {
-        toRaw(navigator.value)?.destroy();
-        navigator.value = null;
-    };
-    const destroy = () => {
-        destroyNavigator();
-        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;
-        await settingsStore.hydrate();
-        loading.value = true;
-        error.value = null;
-        try {
-            const url = src.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 = settingsStore.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 new Promise((resolve) => setTimeout(resolve, 0));
-        await init();
-    };
-    const goForward = () => {
-        toRaw(navigator.value)?.goForward(false, () => { });
-    };
-    const goBackward = () => {
-        toRaw(navigator.value)?.goBackward(false, () => { });
-    };
-    const goToLink = (link) => {
-        toRaw(navigator.value)?.goLink(link, false, () => { });
-    };
-    const toggleFullscreen = () => {
-        const el = containerRef.value?.parentElement;
-        if (!el) {
-            return;
-        }
-        if (!document.fullscreenElement) {
-            el.requestFullscreen()
-                .then(() => {
-                settings.isFullscreen = true;
-            })
-                .catch(() => { });
-            return;
-        }
-        document
-            .exitFullscreen()
-            .then(() => {
-            settings.isFullscreen = false;
-        })
-            .catch(() => { });
-    };
-    return {
-        state: {
-            error,
-            loading,
-            tocLinks,
-            navigator,
-            publication,
-            currentPosition,
-            totalPositions,
-            progressPercent,
-            currentChapterTitle,
-            settings,
-        },
-        actions: {
-            init,
-            destroy,
-            reload,
-            goForward,
-            goBackward,
-            goToLink,
-            toggleFullscreen,
-        },
-    };
-};

package/dist/src/core/settings-store.d.ts

@@ -1,16 +0,0 @@
-import type { ReaderPreferencesAdapter, ReaderSettings } from '../../src/types';
-export declare const createReaderSettingsStore: (initialSettings?: Partial<ReaderSettings>, preferences?: ReaderPreferencesAdapter) => {
-    settings: {
-        backgroundColor: string | null;
-        columnCount: number | null;
-        fontFamily: string | null;
-        fontSize: number | null;
-        isFullscreen: boolean;
-        lineHeight: number | null;
-        scroll: boolean | null;
-        textAlign: import("@readium/navigator").TextAlignment | null;
-        textColor: string | null;
-    };
-    hydrate: () => Promise<void>;
-    onSettingsChange: (handler: (settings: Readonly<ReaderSettings>) => void) => () => boolean;
-};

package/dist/src/core/settings-store.js

@@ -1,58 +0,0 @@
-import { reactive, watch } from 'vue';
-import { getReaderColors } from '../../src/composables/useReaderSettings';
-const defaultSettings = () => ({
-    ...(() => {
-        const colors = getReaderColors();
-        return {
-            backgroundColor: colors.background,
-            textColor: colors.text,
-        };
-    })(),
-    fontFamily: 'DEFAULT',
-    fontSize: 1,
-    lineHeight: null,
-    textAlign: null,
-    columnCount: null,
-    scroll: null,
-    isFullscreen: false,
-});
-export const createReaderSettingsStore = (initialSettings, preferences) => {
-    const settings = reactive({
-        ...defaultSettings(),
-        ...(initialSettings ?? {}),
-    });
-    const listeners = new Set();
-    let hydrated = false;
-    const hydrate = async () => {
-        if (hydrated || !preferences?.load) {
-            hydrated = true;
-            return;
-        }
-        const loaded = await preferences.load();
-        Object.assign(settings, loaded ?? {});
-        hydrated = true;
-    };
-    const onSettingsChange = (handler) => {
-        listeners.add(handler);
-        return () => listeners.delete(handler);
-    };
-    watch(() => [
-        settings.fontFamily,
-        settings.fontSize,
-        settings.lineHeight,
-        settings.textAlign,
-        settings.columnCount,
-        settings.scroll,
-        settings.backgroundColor,
-        settings.textColor,
-        settings.isFullscreen,
-    ], () => {
-        listeners.forEach((handler) => handler(settings));
-        void preferences?.save?.(settings);
-    });
-    return {
-        settings,
-        hydrate,
-        onSettingsChange,
-    };
-};

package/dist/src/settings/options.d.ts

@@ -1,20 +0,0 @@
-import { TextAlignment } from '@readium/navigator';
-export declare const EPUB_FONT_SIZE_OPTIONS: {
-    value: number;
-    label: string;
-}[];
-export declare const PX_FONT_SIZE_OPTIONS: {
-    value: number;
-    label: string;
-}[];
-export declare const COLUMN_OPTIONS: {
-    value: number;
-    label: string;
-}[];
-export declare const ALIGN_OPTIONS: ({
-    key: null;
-    label: string;
-} | {
-    key: TextAlignment;
-    label: string;
-})[];

package/dist/src/settings/options.js

@@ -1,27 +0,0 @@
-import { TextAlignment } from '@readium/navigator';
-export const EPUB_FONT_SIZE_OPTIONS = [
-    { value: 0.8, label: '80%' },
-    { value: 1, label: '100% (Default)' },
-    { value: 1.2, label: '120%' },
-    { value: 1.4, label: '140%' },
-    { value: 1.6, label: '160%' },
-];
-export const PX_FONT_SIZE_OPTIONS = [
-    { value: 16, label: '16 (Default)' },
-    { value: 20, label: '20' },
-    { value: 24, label: '24' },
-    { value: 28, label: '28' },
-    { value: 32, label: '32' },
-];
-export const COLUMN_OPTIONS = [
-    { value: 0, label: 'Auto' },
-    { value: 1, label: '1' },
-    { value: 2, label: '2' },
-];
-export const ALIGN_OPTIONS = [
-    { key: null, label: 'Auto' },
-    { key: TextAlignment.start, label: 'Start' },
-    { key: TextAlignment.left, label: 'Left' },
-    { key: TextAlignment.right, label: 'Right' },
-    { key: TextAlignment.justify, label: 'Justify' },
-];

package/dist/src/types.d.ts

@@ -1,40 +0,0 @@
-import type { Link, Locator, Publication } from '@readium/shared';
-import type { TextAlignment } from '@readium/navigator';
-export type EpubReaderStrategy = 'wasm' | 'zip-fetcher';
-export type TocEntry = {
-    title: string;
-    link: Link;
-};
-export type ReaderSettings = {
-    backgroundColor: string | null;
-    columnCount: number | null;
-    fontFamily: string | null;
-    fontSize: number | null;
-    isFullscreen: boolean;
-    lineHeight: number | null;
-    scroll: boolean | null;
-    textAlign: TextAlignment | null;
-    textColor: string | null;
-};
-export type ReaderStorageAdapter = {
-    savePosition: (key: string, locator: Locator) => void;
-    restorePosition: (key: string, publication: Publication) => Locator | undefined;
-};
-export type ReaderPreferencesAdapter = {
-    load: () => Partial<ReaderSettings> | Promise<Partial<ReaderSettings>>;
-    save?: (settings: Readonly<ReaderSettings>) => void | Promise<void>;
-};
-export type ReaderAssetConfig = {
-    swUrl?: string;
-    swScope?: string;
-    wasmUrl?: string;
-    fontBaseUrl?: string;
-};
-export type EpubReaderControllerOptions = {
-    strategy?: EpubReaderStrategy;
-    settings?: Partial<ReaderSettings>;
-    storage?: ReaderStorageAdapter;
-    preferences?: ReaderPreferencesAdapter;
-    assets?: ReaderAssetConfig;
-    logNamespace?: string;
-};

package/dist/src/types.js

@@ -1 +0,0 @@
-export {};