@file-viewer/pptx 2.2.9 → 2.3.0

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { PptxViewer } from './viewer';
+export { PptxPresentation } from './presentation';
+export type { PptxPresentationLabels, PptxPresentationState } from './presentation';
 export { createPptxWorker } from './worker';
 export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from './options';
 export type { NativePptxEngineOptions, PptxDiagnosticError, PptxDiagnosticErrorCode, PptxFitMode, PptxListOptions, PptxSlideSize, PptxViewerOptions, PptxWorkerFactoryOptions, PptxWorkerMessage, PptxZipLimits, } from './types';

package/dist/index.js

@@ -1,3 +1,4 @@
 export { PptxViewer } from './viewer.js';
+export { PptxPresentation } from './presentation.js';
 export { createPptxWorker } from './worker.js';
 export { RECOMMENDED_ZIP_LIMITS, createDefaultPptxOptions, resolvePptxEngineOptions, } from './options.js';

package/dist/presentation.d.ts

@@ -0,0 +1,66 @@
+import type { PptxViewer } from './viewer';
+export interface PptxPresentationState {
+    active: boolean;
+    slideNumber: number;
+    total: number;
+}
+export interface PptxPresentationLabels {
+    exit?: string;
+    hint?: string;
+    next?: string;
+    previous?: string;
+}
+/**
+ * Full-screen slideshow for a rendered PPTX deck.
+ *
+ * The slides stay where the viewer put them: the whole scale box is moved into an overlay and the
+ * inactive slots are hidden with CSS, so the engine's scoped `.flyfish-pptx-content .slide` rules
+ * keep applying and no node is cloned. A placeholder marks the original position so exiting puts
+ * everything back exactly where it was.
+ */
+export declare class PptxPresentation {
+    private readonly viewer;
+    private readonly labels;
+    private readonly fullscreen;
+    private overlay;
+    private stage;
+    private counter;
+    private placeholder;
+    private listeners;
+    private layoutFrame;
+    private ownsFullscreen;
+    private current;
+    constructor(viewer: PptxViewer, labels?: PptxPresentationLabels, fullscreen?: boolean);
+    get active(): boolean;
+    get slideNumber(): number;
+    get state(): PptxPresentationState;
+    enter(slideNumber?: number): Promise<void>;
+    exit(): void;
+    toggle(slideNumber?: number): Promise<void>;
+    goTo(slideNumber: number): void;
+    next(): void;
+    previous(): void;
+    /** Scale the active slide to fit the overlay, letterboxing whichever axis has slack. */
+    layout(): void;
+    destroy(): void;
+    private slots;
+    /**
+     * The nodes the slideshow toggles between. Windowed decks wrap each slide in a
+     * slot; the default (non-windowed) deck appends slides directly to the content
+     * node, so those are the containers there.
+     */
+    private slideContainers;
+    /**
+     * Chromium reports the fullscreen element of a shadow root on the shadow root
+     * itself while document.fullscreenElement stays on the host, so both have to
+     * be checked before deciding who owns fullscreen.
+     */
+    private isFullscreenElement;
+    private scheduleLayout;
+    private notify;
+    private on;
+    private attach;
+    private detach;
+    private handleClick;
+    private handleKey;
+}

package/dist/presentation.js

@@ -0,0 +1,360 @@
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * Full-screen slideshow for a rendered PPTX deck.
+ *
+ * The slides stay where the viewer put them: the whole scale box is moved into an overlay and the
+ * inactive slots are hidden with CSS, so the engine's scoped `.flyfish-pptx-content .slide` rules
+ * keep applying and no node is cloned. A placeholder marks the original position so exiting puts
+ * everything back exactly where it was.
+ */
+export class PptxPresentation {
+    constructor(viewer, labels = {}, fullscreen = true) {
+        this.overlay = null;
+        this.stage = null;
+        this.counter = null;
+        this.placeholder = null;
+        this.listeners = [];
+        this.layoutFrame = 0;
+        this.ownsFullscreen = false;
+        this.current = 1;
+        this.viewer = viewer;
+        this.labels = labels;
+        this.fullscreen = fullscreen;
+    }
+    get active() {
+        return Boolean(this.overlay);
+    }
+    get slideNumber() {
+        return this.current;
+    }
+    get state() {
+        return { active: this.active, slideNumber: this.current, total: this.viewer.slideCount };
+    }
+    async enter(slideNumber = this.current) {
+        var _a, _b;
+        if (this.active || this.viewer.slideCount === 0) {
+            return;
+        }
+        const documentRef = this.viewer.target.ownerDocument || document;
+        const overlay = documentRef.createElement('div');
+        overlay.className = 'flyfish-pptx-presentation';
+        overlay.tabIndex = -1;
+        overlay.setAttribute('role', 'region');
+        overlay.setAttribute('aria-label', this.labels.hint || 'Slideshow');
+        const stage = documentRef.createElement('div');
+        stage.className = 'flyfish-pptx-presentation-stage';
+        const counter = documentRef.createElement('div');
+        counter.className = 'flyfish-pptx-presentation-counter';
+        const hint = documentRef.createElement('div');
+        hint.className = 'flyfish-pptx-presentation-hint';
+        hint.textContent = this.labels.hint || '';
+        hint.hidden = !this.labels.hint;
+        const exit = documentRef.createElement('button');
+        exit.type = 'button';
+        exit.className = 'flyfish-pptx-presentation-exit';
+        exit.textContent = '✕';
+        exit.setAttribute('aria-label', this.labels.exit || 'Exit slideshow');
+        exit.addEventListener('click', event => {
+            event.stopPropagation();
+            this.exit();
+        });
+        overlay.append(stage, counter, hint, exit);
+        this.overlay = overlay;
+        this.stage = stage;
+        this.counter = counter;
+        // Keep the overlay inside whichever root holds the slide styles, or the engine's scoped CSS
+        // would not reach the slides once they move.
+        const styleRoot = this.viewer.presentationRoot;
+        styleRoot.appendChild(overlay);
+        // Park a comment where the scale box lived so exit() can restore the exact position.
+        this.placeholder = documentRef.createComment('flyfish-pptx-presentation');
+        this.viewer.saveScrollPosition();
+        this.viewer.scaleBox.replaceWith(this.placeholder);
+        stage.appendChild(this.viewer.scaleBox);
+        this.viewer.content.classList.add('is-presenting');
+        this.attach(documentRef, overlay);
+        this.goTo(slideNumber);
+        if (this.fullscreen) {
+            try {
+                await ((_a = overlay.requestFullscreen) === null || _a === void 0 ? void 0 : _a.call(overlay));
+                this.ownsFullscreen = this.isFullscreenElement(overlay);
+            }
+            catch {
+                // Fullscreen needs a user gesture and can be blocked by permissions policy. The overlay is
+                // position:fixed, so the slideshow still fills the viewport without it.
+                this.ownsFullscreen = false;
+            }
+        }
+        // exit() may have run while fullscreen was being requested. Leave the
+        // browser out of fullscreen rather than stranded with no overlay.
+        if (this.overlay !== overlay) {
+            if (this.ownsFullscreen) {
+                void ((_b = documentRef.exitFullscreen) === null || _b === void 0 ? void 0 : _b.call(documentRef).catch(() => undefined));
+            }
+            this.ownsFullscreen = false;
+            return;
+        }
+        overlay.focus({ preventScroll: true });
+        this.scheduleLayout();
+        this.notify();
+    }
+    exit() {
+        var _a, _b;
+        const overlay = this.overlay;
+        if (!overlay) {
+            return;
+        }
+        const documentRef = this.viewer.target.ownerDocument || document;
+        // Capture before the overlay leaves the DOM: a detached node's getRootNode()
+        // is the document, so the fullscreen check would fail after removal.
+        const shouldExitFullscreen = this.ownsFullscreen && this.isFullscreenElement(overlay);
+        this.detach();
+        if (this.layoutFrame) {
+            (documentRef.defaultView || window).cancelAnimationFrame(this.layoutFrame);
+            this.layoutFrame = 0;
+        }
+        this.viewer.content.classList.remove('is-presenting');
+        for (const container of this.slideContainers()) {
+            container.classList.remove('is-active-slide');
+        }
+        if ((_a = this.placeholder) === null || _a === void 0 ? void 0 : _a.parentNode) {
+            this.placeholder.replaceWith(this.viewer.scaleBox);
+        }
+        else {
+            this.viewer.target.appendChild(this.viewer.scaleBox);
+        }
+        this.placeholder = null;
+        overlay.remove();
+        this.overlay = null;
+        this.stage = null;
+        this.counter = null;
+        if (shouldExitFullscreen) {
+            void ((_b = documentRef.exitFullscreen) === null || _b === void 0 ? void 0 : _b.call(documentRef).catch(() => undefined));
+        }
+        this.ownsFullscreen = false;
+        this.viewer.restoreScrollPosition();
+        this.notify();
+    }
+    async toggle(slideNumber) {
+        if (this.active) {
+            this.exit();
+            return;
+        }
+        await this.enter(slideNumber);
+    }
+    goTo(slideNumber) {
+        const total = this.viewer.slideCount;
+        if (total === 0) {
+            return;
+        }
+        this.current = clamp(Math.round(slideNumber) || 1, 1, total);
+        this.viewer.ensureSlideRendered(this.current);
+        // Rendering the neighbour keeps the next step instant without defeating virtualization.
+        this.viewer.ensureSlideRendered(this.current + 1);
+        const containers = this.slideContainers();
+        // Windowed decks tag each slot with its slide number; non-windowed decks
+        // append slides in order, so the active one is found by index.
+        const byNumber = containers.some(container => Boolean(container.dataset.slideNumber));
+        containers.forEach((container, index) => {
+            const isActive = byNumber
+                ? Number(container.dataset.slideNumber) === this.current
+                : index === this.current - 1;
+            container.classList.toggle('is-active-slide', isActive);
+        });
+        if (this.counter) {
+            this.counter.textContent = `${this.current} / ${total}`;
+        }
+        if (this.active) {
+            this.scheduleLayout();
+            this.notify();
+        }
+    }
+    next() {
+        if (this.current < this.viewer.slideCount) {
+            this.goTo(this.current + 1);
+        }
+    }
+    previous() {
+        if (this.current > 1) {
+            this.goTo(this.current - 1);
+        }
+    }
+    /** Scale the active slide to fit the overlay, letterboxing whichever axis has slack. */
+    layout() {
+        const overlay = this.overlay;
+        if (!overlay) {
+            return;
+        }
+        const container = this.slideContainers().find((item, index) => {
+            if (item.dataset.slideNumber) {
+                return Number(item.dataset.slideNumber) === this.current;
+            }
+            return index === this.current - 1;
+        });
+        // Windowed decks wrap the slide in a slot; non-windowed decks are the slide.
+        const slide = container && container.classList.contains('flyfish-pptx-slide-slot')
+            ? container.firstElementChild
+            : container;
+        const size = this.viewer.slideDimensions;
+        const slideWidth = (slide === null || slide === void 0 ? void 0 : slide.offsetWidth) || (size === null || size === void 0 ? void 0 : size.width) || 0;
+        const slideHeight = (slide === null || slide === void 0 ? void 0 : slide.offsetHeight) || (size === null || size === void 0 ? void 0 : size.height) || 0;
+        if (!slideWidth || !slideHeight) {
+            return;
+        }
+        const viewWidth = overlay.clientWidth;
+        const viewHeight = overlay.clientHeight;
+        const scale = Math.min(viewWidth / slideWidth, viewHeight / slideHeight);
+        const offsetX = Math.max(0, (viewWidth - slideWidth * scale) / 2);
+        const offsetY = Math.max(0, (viewHeight - slideHeight * scale) / 2);
+        const content = this.viewer.content;
+        content.style.width = `${slideWidth}px`;
+        content.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+        const scaleBox = this.viewer.scaleBox;
+        scaleBox.style.width = '100%';
+        scaleBox.style.height = '100%';
+        scaleBox.style.minHeight = '';
+    }
+    destroy() {
+        this.exit();
+    }
+    slots() {
+        return Array.from(this.viewer.content.querySelectorAll(':scope > .flyfish-pptx-slide-slot'));
+    }
+    /**
+     * The nodes the slideshow toggles between. Windowed decks wrap each slide in a
+     * slot; the default (non-windowed) deck appends slides directly to the content
+     * node, so those are the containers there.
+     */
+    slideContainers() {
+        const slots = this.slots();
+        if (slots.length > 0) {
+            return slots;
+        }
+        return Array.from(this.viewer.content.querySelectorAll(':scope > .slide'));
+    }
+    /**
+     * Chromium reports the fullscreen element of a shadow root on the shadow root
+     * itself while document.fullscreenElement stays on the host, so both have to
+     * be checked before deciding who owns fullscreen.
+     */
+    isFullscreenElement(overlay) {
+        const documentRef = this.viewer.target.ownerDocument || document;
+        if (documentRef.fullscreenElement === overlay) {
+            return true;
+        }
+        const root = overlay.getRootNode();
+        if (root !== documentRef && 'fullscreenElement' in root) {
+            return root.fullscreenElement === overlay;
+        }
+        return false;
+    }
+    scheduleLayout() {
+        const view = this.viewer.target.ownerDocument.defaultView || window;
+        if (this.layoutFrame) {
+            view.cancelAnimationFrame(this.layoutFrame);
+        }
+        this.layoutFrame = view.requestAnimationFrame(() => {
+            this.layoutFrame = 0;
+            this.layout();
+        });
+    }
+    notify() {
+        this.viewer.emitPresentationChange(this.state);
+    }
+    on(target, type, listener) {
+        target.addEventListener(type, listener);
+        this.listeners.push({ target, type, listener });
+    }
+    attach(documentRef, overlay) {
+        const view = documentRef.defaultView || window;
+        this.on(documentRef, 'keydown', (event) => this.handleKey(event));
+        this.on(overlay, 'click', (event) => this.handleClick(event));
+        this.on(overlay, 'contextmenu', (event) => {
+            event.preventDefault();
+            this.previous();
+        });
+        this.on(view, 'resize', () => this.scheduleLayout());
+        this.on(documentRef, 'fullscreenchange', () => {
+            // Leaving fullscreen with the browser's own Esc must close the slideshow too, otherwise the
+            // overlay would stay up as a plain fixed layer.
+            if (this.ownsFullscreen && !this.isFullscreenElement(overlay)) {
+                this.ownsFullscreen = false;
+                this.exit();
+            }
+        });
+    }
+    detach() {
+        for (const { target, type, listener } of this.listeners) {
+            target.removeEventListener(type, listener);
+        }
+        this.listeners = [];
+    }
+    handleClick(event) {
+        var _a;
+        const overlay = this.overlay;
+        if (!overlay || ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('.flyfish-pptx-presentation-exit'))) {
+            return;
+        }
+        // PowerPoint advances on click; the left edge is the only place that goes back.
+        const bounds = overlay.getBoundingClientRect();
+        const ratio = (event.clientX - bounds.left) / (bounds.width || 1);
+        if (ratio < 0.2) {
+            this.previous();
+        }
+        else {
+            this.next();
+        }
+    }
+    handleKey(event) {
+        if (!this.active || event.altKey || event.metaKey || event.ctrlKey) {
+            return;
+        }
+        // Enter/Space on a focused control (the exit button) must activate that
+        // control, not advance the slide. Let the browser's default run instead.
+        const target = event.target;
+        if (target &&
+            typeof target.closest === 'function' &&
+            target.closest('button, a, input, textarea, select, [contenteditable="true"], [contenteditable=""]')) {
+            return;
+        }
+        // With two slideshows open, a key pressed inside the other overlay belongs
+        // to that overlay; only the focused one advances.
+        if (target && typeof target.closest === 'function') {
+            const otherOverlay = target.closest('.flyfish-pptx-presentation');
+            if (otherOverlay && otherOverlay !== this.overlay) {
+                return;
+            }
+        }
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+            case 'PageDown':
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this.next();
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+            case 'PageUp':
+            case 'Backspace':
+                event.preventDefault();
+                this.previous();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goTo(1);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.goTo(this.viewer.slideCount);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.exit();
+                break;
+            default:
+                break;
+        }
+    }
+}

package/dist/styles.js

@@ -57,6 +57,24 @@ export const pptxViewerCss = `
 ${scopePptxContentStyleText(legacyPptxCss)}
 .flyfish-pptx-content > .slide:last-of-type{margin-bottom:0}
 .flyfish-pptx-slide-slot:last-of-type > .slide{margin-bottom:0}
+.flyfish-pptx-presentation{position:fixed;inset:0;z-index:2147483000;display:block;overflow:hidden;background:#000;cursor:default;user-select:none;-webkit-user-select:none}
+.flyfish-pptx-presentation:focus{outline:none}
+.flyfish-pptx-presentation-stage{position:absolute;inset:0;overflow:hidden}
+.flyfish-pptx-presentation .flyfish-pptx-scale-box{position:absolute;inset:0;width:100%;height:100%;margin:0}
+.flyfish-pptx-presentation .flyfish-pptx-thumbnail{display:none}
+.flyfish-pptx-content.is-presenting > .flyfish-pptx-slide-slot{display:none;min-height:0}
+.flyfish-pptx-content.is-presenting > .flyfish-pptx-slide-slot.is-active-slide{display:flow-root}
+.flyfish-pptx-content.is-presenting > .slide{display:none}
+.flyfish-pptx-content.is-presenting > .slide.is-active-slide{display:block}
+.flyfish-pptx-content.is-presenting .slide{margin:0!important;box-shadow:none}
+.flyfish-pptx-presentation-counter{position:absolute;right:18px;bottom:14px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:13px/1.4 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none}
+.flyfish-pptx-presentation-hint{position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.55);font:12px/1.4 system-ui,sans-serif;pointer-events:none}
+.flyfish-pptx-presentation-hint[hidden]{display:none}
+.flyfish-pptx-presentation-exit{position:absolute;top:14px;right:14px;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:1;cursor:pointer}
+.flyfish-pptx-presentation-exit:hover{background:rgba(255,255,255,.26)}
+.flyfish-pptx-presentation-exit:focus-visible{outline:2px solid #fff;outline-offset:2px}
+@media (prefers-reduced-motion:no-preference){.flyfish-pptx-content.is-presenting > .flyfish-pptx-slide-slot.is-active-slide,.flyfish-pptx-content.is-presenting > .slide.is-active-slide{animation:flyfish-pptx-slide-in 140ms ease-out}}
+@keyframes flyfish-pptx-slide-in{from{opacity:.35}to{opacity:1}}
 `;
 const PPTX_STYLE_ID = 'flyfish-pptx-native-style';
 export const ensurePptxViewerStyles = (documentRef, root = documentRef) => {

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { PptxPresentationLabels, PptxPresentationState } from './presentation';
 export type PptxFitMode = 'contain' | 'none';
 export interface PptxZipLimits {
     maxFileBytes?: number;
@@ -60,6 +61,9 @@ export interface PptxViewerOptions extends PptxWorkerFactoryOptions {
     onRenderComplete?: () => void;
     onWarning?: (warning: unknown) => void;
     onError?: (error: unknown) => void;
+    presentationLabels?: PptxPresentationLabels;
+    presentationFullscreen?: boolean;
+    onPresentationChange?: (state: PptxPresentationState) => void;
 }
 export interface PptxWorkerMessage {
     type: string;

package/dist/viewer.d.ts

@@ -1,3 +1,4 @@
+import type { PptxPresentationState } from './presentation';
 import type { PptxViewerOptions } from './types';
 export declare class PptxViewer {
     static open(buffer: ArrayBuffer, target: HTMLElement, options?: PptxViewerOptions): Promise<PptxViewer>;
@@ -16,6 +17,9 @@ export declare class PptxViewer {
     private previewThumbnailDataUrl;
     private slideSize;
     private slideRecords;
+    private totalSlides;
+    private savedScroll;
+    private pendingScrollRestore;
     private slideWindowTarget;
     private slideWindowListeners;
     private slideWindowFrame;
@@ -24,10 +28,38 @@ export declare class PptxViewer {
     private readonly mediaRecords;
     private disposed;
     private completed;
+    private presentation;
     private readonly handleSlideWindowChange;
     private constructor();
     get zoomPercent(): number;
     get thumbnailDataUrl(): string | null;
+    get slideCount(): number;
+    get slideDimensions(): {
+        width: number;
+        height: number;
+    } | null;
+    get presenting(): boolean;
+    get presentationSlideNumber(): number;
+    private get styleRoot();
+    /**
+     * Where the slideshow overlay is mounted. It has to share a root with the injected slide styles,
+     * or the engine's scoped CSS stops applying once the slides move into the overlay.
+     */
+    get presentationRoot(): ShadowRoot | HTMLElement;
+    /** Force a slide out of the virtualized window so the slideshow can show it immediately. */
+    ensureSlideRendered(slideNumber: number): Element | null;
+    refreshLayout(): void;
+    /**
+     * Remember where the deck was scrolled before the slideshow moves the scale
+     * box into the overlay. Moving it collapses the scroller and clamps scrollTop
+     * to zero, so the position has to be captured up front and restored on exit.
+     */
+    saveScrollPosition(): void;
+    restoreScrollPosition(): void;
+    emitPresentationChange(state: PptxPresentationState): void;
+    enterPresentation(slideNumber?: number): Promise<void>;
+    exitPresentation(): void;
+    togglePresentation(slideNumber?: number): Promise<void>;
     open(): Promise<void>;
     setZoom(percent: number): Promise<void>;
     destroy(): void;