react-ipdf-viewer-lite/dist/hooks/useViewerControls.js

A lightweight, dependency-free media viewer for PDFs and other media types with advanced controls

import { useState, useCallback, useEffect } from "react";
export var useViewerControls = function (initialZoom, onDownload, initialTheme, onPrint, rotateValue) {
    if (initialZoom === void 0) { initialZoom = 1; }
    if (initialTheme === void 0) { initialTheme = "light"; }
    if (rotateValue === void 0) { rotateValue = 0; }
    var _a = useState(initialZoom), zoom = _a[0], setZoom = _a[1];
    var _b = useState(rotateValue), rotation = _b[0], setRotation = _b[1];
    var _c = useState(false), isFullscreen = _c[0], setIsFullscreen = _c[1];
    var _d = useState(initialTheme), currentTheme = _d[0], setCurrentTheme = _d[1];
    // Zoom controls
    var zoomIn = useCallback(function () {
        setZoom(function (prev) { return Math.min(prev + 0.25, 3); }); // Cap at 3x zoom
    }, []);
    var zoomOut = useCallback(function () {
        setZoom(function (prev) { return Math.max(prev - 0.25, 0.5); }); // Floor at 0.5x zoom
    }, []);
    // Rotation control (fixed for negative values)
    // const rotate = useCallback((degrees: number) => {
    //   setRotation(prev => (prev + degrees + 360) % 360);
    // }, []);
    // Reset to initial state
    var reset = useCallback(function () {
        setZoom(initialZoom);
        setRotation(0);
    }, [initialZoom]);
    // File operations
    var download = useCallback(function () {
        onDownload === null || onDownload === void 0 ? void 0 : onDownload();
    }, [onDownload]);
    var print = useCallback(function () {
        onPrint === null || onPrint === void 0 ? void 0 : onPrint();
    }, [onPrint]);
    // Fullscreen handling with event listeners
    var handleFullscreenChange = useCallback(function () {
        setIsFullscreen(!!document.fullscreenElement);
    }, []);
    useEffect(function () {
        document.addEventListener("fullscreenchange", handleFullscreenChange);
        return function () {
            document.removeEventListener("fullscreenchange", handleFullscreenChange);
        };
    }, [handleFullscreenChange]);
    var enterFullscreen = useCallback(function () {
        var _a, _b;
        (_b = (_a = document.documentElement).requestFullscreen) === null || _b === void 0 ? void 0 : _b.call(_a).then(function () { return setIsFullscreen(true); }).catch(console.error);
    }, []);
    var exitFullscreen = useCallback(function () {
        var _a;
        (_a = document
            .exitFullscreen) === null || _a === void 0 ? void 0 : _a.call(document).then(function () { return setIsFullscreen(false); }).catch(console.error);
    }, []);
    // Theme management
    var toggleTheme = useCallback(function () {
        setCurrentTheme(function (prev) {
            var newTheme = prev === "light" ? "dark" : "light";
            document.documentElement.setAttribute("data-theme", newTheme);
            return newTheme;
        });
    }, []);
    // const rotate = useCallback(() => {
    //   setRotation(prev => (prev + 90));
    // }, [rotateValue]);
    var rotateLeft = useCallback(function () {
        setRotation(function (prev) { return prev - 90; });
    }, [rotateValue]);
    var rotateRight = useCallback(function () {
        setRotation(function (prev) { return prev + 90; });
    }, [rotateValue]);
    // Initialize theme
    useEffect(function () {
        document.documentElement.setAttribute("data-theme", initialTheme);
    }, [initialTheme]);
    return {
        zoom: zoom,
        rotation: rotation,
        isFullscreen: isFullscreen,
        currentTheme: currentTheme,
        zoomIn: zoomIn,
        zoomOut: zoomOut,
        // rotate
        rotateRight: rotateRight,
        rotateLeft: rotateLeft,
        reset: reset,
        download: download,
        print: print,
        enterFullscreen: enterFullscreen,
        exitFullscreen: exitFullscreen,
        toggleTheme: toggleTheme,
    };
};