@godscene/visualizer 1.7.11

package/dist/es/component/player/scenes/export-branded-video.mjs

@@ -0,0 +1,360 @@
+import { mouseLoading, mousePointer } from "../../../utils/index.mjs";
+import { getCenterHighlightBox } from "../../../utils/highlight-element.mjs";
+import { deriveFrameState, shouldRenderCursor } from "./derive-frame-state.mjs";
+import { getPlaybackViewport } from "./playback-layout.mjs";
+import { resolveExportPointerLayout, resolveSpinnerLayout } from "./pointer-layout.mjs";
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function export_branded_video_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else export_branded_video_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const W = 960;
+const H = 540;
+const POINTER_PHASE = 0.375;
+const CROSSFADE_FRAMES = 10;
+const EXPORT_STALL_GRACE_MS = 2000;
+const EXPORT_STALL_GRACE_FRAMES = 10;
+let activeExport = false;
+function clamp(v, lo, hi) {
+    return Math.min(Math.max(v, lo), hi);
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+function isExportRenderStalled(elapsedSinceLastFrameMs, frameDurationMs) {
+    return elapsedSinceLastFrameMs > Math.max(EXPORT_STALL_GRACE_MS, frameDurationMs * EXPORT_STALL_GRACE_FRAMES);
+}
+function resolveExportCamera(prevCamera, camera, imageWidth, progress, autoZoom) {
+    if (!autoZoom) return {
+        camLeft: 0,
+        camTop: 0,
+        camWidth: imageWidth
+    };
+    return {
+        camLeft: lerp(prevCamera.left, camera.left, progress),
+        camTop: lerp(prevCamera.top, camera.top, progress),
+        camWidth: lerp(prevCamera.width, camera.width, progress)
+    };
+}
+function loadImage(src) {
+    return new Promise((resolve, reject)=>{
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = ()=>resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+function projectNativeRectToExportViewport(rect, cameraTransform, viewport) {
+    const scaleX = viewport.contentWidth / viewport.imageWidth;
+    const scaleY = viewport.contentHeight / viewport.imageHeight;
+    return {
+        left: viewport.offsetX + (rect.left * scaleX + cameraTransform.tx) * cameraTransform.zoom,
+        top: viewport.offsetY + (rect.top * scaleY + cameraTransform.ty) * cameraTransform.zoom,
+        width: rect.width * scaleX * cameraTransform.zoom,
+        height: rect.height * scaleY * cameraTransform.zoom
+    };
+}
+function drawInsightOverlays(ctx, insights, cameraTransform, viewport) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(viewport.offsetX, viewport.offsetY, viewport.contentWidth, viewport.contentHeight);
+    ctx.clip();
+    for (const insight of insights)if (!(insight.alpha <= 0)) {
+        ctx.save();
+        ctx.globalAlpha *= insight.alpha;
+        if (insight.highlightElement) {
+            const highlightBox = getCenterHighlightBox(insight.highlightElement);
+            const projected = projectNativeRectToExportViewport(highlightBox, cameraTransform, viewport);
+            ctx.fillStyle = 'rgba(253, 89, 7, 0.4)';
+            ctx.fillRect(projected.left, projected.top, projected.width, projected.height);
+            ctx.strokeStyle = '#fd5907';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(projected.left, projected.top, projected.width, projected.height);
+            ctx.shadowColor = 'rgba(51, 51, 51, 0.4)';
+            ctx.shadowBlur = 2;
+            ctx.shadowOffsetX = 4;
+            ctx.shadowOffsetY = 4;
+            ctx.strokeRect(projected.left, projected.top, projected.width, projected.height);
+            ctx.shadowBlur = 0;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+        }
+        if (insight.searchArea) {
+            const projected = projectNativeRectToExportViewport(insight.searchArea, cameraTransform, viewport);
+            ctx.fillStyle = 'rgba(2, 131, 145, 0.4)';
+            ctx.fillRect(projected.left, projected.top, projected.width, projected.height);
+            ctx.strokeStyle = '#028391';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(projected.left, projected.top, projected.width, projected.height);
+        }
+        ctx.restore();
+    }
+    ctx.restore();
+}
+function drawSpinningPointer(ctx, img, x, y, layout, elapsedMs) {
+    const progress = (Math.sin(elapsedMs / 500 - Math.PI / 2) + 1) / 2;
+    const rotation = progress * Math.PI * 2;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(rotation);
+    ctx.drawImage(img, -layout.centerOffsetX, -layout.centerOffsetY, layout.width, layout.height);
+    ctx.restore();
+}
+function drawSteps(ctx, stepsFrame, frameMap, imgCache, pointerCache, spinnerImg, autoZoom) {
+    var _pointerCache_get;
+    const { scriptFrames, imageWidth: baseW, imageHeight: baseH, fps } = frameMap;
+    const st = deriveFrameState(scriptFrames, stepsFrame, baseW, baseH, fps);
+    if (!st.img) return;
+    const { img, prevImg, imageWidth: imgW, imageHeight: imgH, camera, prevCamera, pointerMoved, imageChanged, rawProgress, frameInScript: fInScript, spinning, spinningElapsedMs, currentPointerImg, pointerVisible, insights } = st;
+    const pT = autoZoom ? pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress : 1;
+    const cT = pointerMoved ? rawProgress <= POINTER_PHASE ? 0 : Math.min((rawProgress - POINTER_PHASE) / (1 - POINTER_PHASE), 1) : rawProgress;
+    const { camLeft: camL, camTop: camT2, camWidth: camW } = resolveExportCamera(prevCamera, camera, imgW, cT, autoZoom);
+    const ptrX = lerp(prevCamera.pointerLeft, camera.pointerLeft, pT);
+    const ptrY = lerp(prevCamera.pointerTop, camera.pointerTop, pT);
+    const zoom = imgW / camW;
+    const { offsetX, offsetY, contentWidth, contentHeight } = getPlaybackViewport(W, H, imgW, imgH);
+    const tx = contentWidth / imgW * -camL;
+    const ty = contentHeight / imgH * -camT2;
+    const crossAlpha = imageChanged ? clamp(fInScript / CROSSFADE_FRAMES, 0, 1) : 1;
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, W, H);
+    const drawImg = (src, alpha)=>{
+        const imgEl = imgCache.get(src);
+        if (!imgEl || alpha <= 0) return;
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        ctx.rect(0, 0, W, H);
+        ctx.clip();
+        ctx.translate(offsetX + tx * zoom, offsetY + ty * zoom);
+        ctx.scale(zoom, zoom);
+        ctx.drawImage(imgEl, 0, 0, contentWidth, contentHeight);
+        ctx.restore();
+    };
+    if (imageChanged && prevImg && crossAlpha < 1) drawImg(prevImg, 1 - crossAlpha);
+    drawImg(img, imageChanged ? crossAlpha : 1);
+    if (insights.length > 0) drawInsightOverlays(ctx, insights, {
+        zoom,
+        tx,
+        ty
+    }, {
+        offsetX,
+        offsetY,
+        contentWidth,
+        contentHeight,
+        imageWidth: imgW,
+        imageHeight: imgH
+    });
+    const camH = imgH / imgW * camW;
+    const sX = offsetX + (ptrX - camL) / camW * contentWidth;
+    const sY = offsetY + (ptrY - camT2) / camH * contentHeight;
+    const pointerLayout = resolveExportPointerLayout(imgW, contentWidth);
+    const spinnerLayout = resolveSpinnerLayout(pointerLayout);
+    const cursorImg = null != (_pointerCache_get = pointerCache.get(currentPointerImg)) ? _pointerCache_get : pointerCache.get(mousePointer);
+    const showCursor = shouldRenderCursor(pointerVisible, camera, prevCamera, imgW, imgH);
+    if (spinning && spinnerImg) drawSpinningPointer(ctx, spinnerImg, sX, sY, _object_spread_props(_object_spread({}, pointerLayout), {
+        width: spinnerLayout.size,
+        height: spinnerLayout.size,
+        centerOffsetX: spinnerLayout.centerOffset,
+        centerOffsetY: spinnerLayout.centerOffset
+    }), spinningElapsedMs);
+    if (!spinning && showCursor && cursorImg) ctx.drawImage(cursorImg, sX - pointerLayout.hotspotX, sY - pointerLayout.hotspotY, pointerLayout.width, pointerLayout.height);
+}
+function exportBrandedVideo(frameMap, options, onProgress) {
+    return _async_to_generator(function*() {
+        if (activeExport) throw new Error('Video export is already in progress');
+        activeExport = true;
+        try {
+            yield runExportBrandedVideo(frameMap, options, onProgress);
+        } finally{
+            activeExport = false;
+        }
+    })();
+}
+function runExportBrandedVideo(frameMap, options, onProgress) {
+    return _async_to_generator(function*() {
+        var _ref;
+        const { totalDurationInFrames: total, fps } = frameMap;
+        const autoZoom = null != (_ref = null == options ? void 0 : options.autoZoom) ? _ref : true;
+        const imgSrcs = new Set();
+        for (const sf of frameMap.scriptFrames)if (sf.img) imgSrcs.add(sf.img);
+        const imgCache = new Map();
+        yield Promise.all([
+            ...imgSrcs
+        ].map((src)=>_async_to_generator(function*() {
+                try {
+                    imgCache.set(src, (yield loadImage(src)));
+                } catch (unused) {}
+            })()));
+        const pointerSrcs = new Set([
+            mousePointer
+        ]);
+        for (const sf of frameMap.scriptFrames)if (sf.pointerImg) pointerSrcs.add(sf.pointerImg);
+        const pointerCache = new Map();
+        yield Promise.all([
+            ...pointerSrcs
+        ].map((src)=>_async_to_generator(function*() {
+                try {
+                    pointerCache.set(src, (yield loadImage(src)));
+                } catch (unused) {}
+            })()));
+        let spinnerImg = null;
+        try {
+            spinnerImg = yield loadImage(mouseLoading);
+        } catch (unused) {}
+        const canvas = document.createElement('canvas');
+        canvas.width = W;
+        canvas.height = H;
+        const ctx = canvas.getContext('2d');
+        const stream = canvas.captureStream(fps);
+        const recorder = new MediaRecorder(stream, {
+            mimeType: 'video/webm'
+        });
+        const chunks = [];
+        recorder.ondataavailable = (e)=>{
+            if (e.data.size > 0) chunks.push(e.data);
+        };
+        return new Promise((resolve, reject)=>{
+            let stoppedByError = null;
+            let settled = false;
+            let nextFrame = 0;
+            let nextFrameDueAt = performance.now();
+            let lastFrameAt = nextFrameDueAt;
+            let stopTimer = null;
+            let renderTimer = null;
+            const frameDuration = 1000 / fps;
+            const cleanup = ()=>{
+                if (stopTimer) clearTimeout(stopTimer);
+                if (renderTimer) clearTimeout(renderTimer);
+                document.removeEventListener('visibilitychange', handleVisibilityChange);
+                stream.getTracks().forEach((track)=>track.stop());
+            };
+            const finishWithError = (error)=>{
+                if (settled || stoppedByError) return;
+                stoppedByError = error;
+                if ('inactive' !== recorder.state) recorder.stop();
+                else {
+                    cleanup();
+                    settled = true;
+                    reject(error);
+                }
+            };
+            const handleVisibilityChange = ()=>{
+                if (document.hidden) finishWithError(new Error('Video export was interrupted because the report tab was hidden'));
+            };
+            recorder.onerror = ()=>{
+                finishWithError(new Error('MediaRecorder error'));
+            };
+            recorder.onstop = ()=>{
+                cleanup();
+                if (settled) return;
+                settled = true;
+                if (stoppedByError) return void reject(stoppedByError);
+                if (0 === chunks.length) return void reject(new Error('No video data'));
+                const blob = new Blob(chunks, {
+                    type: 'video/webm'
+                });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'midscene_replay.webm';
+                a.click();
+                setTimeout(()=>URL.revokeObjectURL(url), 1000);
+                resolve();
+            };
+            document.addEventListener('visibilitychange', handleVisibilityChange);
+            recorder.start();
+            const scheduleNextFrame = ()=>{
+                const delay = Math.max(0, nextFrameDueAt - performance.now());
+                renderTimer = setTimeout(()=>{
+                    requestAnimationFrame(renderFrame);
+                }, delay);
+            };
+            const renderFrame = (timestamp)=>{
+                if (settled || 'inactive' === recorder.state) return;
+                if (nextFrame > 0 && isExportRenderStalled(timestamp - lastFrameAt, frameDuration)) return void finishWithError(new Error('Video export was interrupted because rendering stalled'));
+                lastFrameAt = timestamp;
+                ctx.clearRect(0, 0, W, H);
+                drawSteps(ctx, nextFrame, frameMap, imgCache, pointerCache, spinnerImg, autoZoom);
+                null == onProgress || onProgress((nextFrame + 1) / total);
+                nextFrame += 1;
+                if (nextFrame < total) {
+                    nextFrameDueAt += frameDuration;
+                    scheduleNextFrame();
+                } else stopTimer = setTimeout(()=>{
+                    if ('inactive' !== recorder.state) recorder.stop();
+                }, 2 * frameDuration);
+            };
+            requestAnimationFrame((timestamp)=>{
+                lastFrameAt = timestamp;
+                nextFrameDueAt = timestamp;
+                renderFrame(timestamp);
+            });
+        });
+    })();
+}
+export { exportBrandedVideo, isExportRenderStalled, projectNativeRectToExportViewport, resolveExportCamera };

package/dist/es/component/player/scenes/frame-calculator.mjs

@@ -0,0 +1,149 @@
+const FPS = 30;
+function calculateFrameMap(scripts, options) {
+    let baseImageWidth = (null == options ? void 0 : options.imageWidth) || 1920;
+    let baseImageHeight = (null == options ? void 0 : options.imageHeight) || 1080;
+    for (const s of scripts)if (('img' === s.type || 'insight' === s.type) && s.img) {
+        baseImageWidth = s.imageWidth || baseImageWidth;
+        baseImageHeight = s.imageHeight || baseImageHeight;
+        break;
+    }
+    const scriptFrames = [];
+    let currentFrame = 0;
+    for (const script of scripts){
+        const durationMs = script.duration;
+        switch(script.type){
+            case 'sleep':
+                {
+                    const frames = Math.ceil(durationMs / 1000 * FPS);
+                    scriptFrames.push({
+                        type: 'sleep',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'img':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    const camera = script.camera;
+                    const iw = script.imageWidth || baseImageWidth;
+                    const ih = script.imageHeight || baseImageHeight;
+                    const sf = {
+                        type: 'img',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        img: script.img,
+                        imageWidth: iw,
+                        imageHeight: ih,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    };
+                    if (camera) {
+                        var _camera_pointerLeft, _camera_pointerTop;
+                        sf.cameraTarget = {
+                            left: camera.left,
+                            top: camera.top,
+                            width: camera.width,
+                            pointerLeft: null != (_camera_pointerLeft = camera.pointerLeft) ? _camera_pointerLeft : Math.round(iw / 2),
+                            pointerTop: null != (_camera_pointerTop = camera.pointerTop) ? _camera_pointerTop : Math.round(ih / 2)
+                        };
+                    }
+                    scriptFrames.push(sf);
+                    currentFrame += frames;
+                    break;
+                }
+            case 'insight':
+                {
+                    const insightPhaseFrames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    const cameraDurationMs = script.insightCameraDuration || 0;
+                    const cameraPhaseFrames = Math.ceil(cameraDurationMs / 1000 * FPS);
+                    const totalFrames = insightPhaseFrames + cameraPhaseFrames;
+                    const iw = script.imageWidth || baseImageWidth;
+                    const ih = script.imageHeight || baseImageHeight;
+                    const camera = script.camera;
+                    const sf = {
+                        type: 'insight',
+                        startFrame: currentFrame,
+                        durationInFrames: totalFrames,
+                        img: script.img,
+                        imageWidth: iw,
+                        imageHeight: ih,
+                        insightPhaseFrames,
+                        cameraPhaseFrames,
+                        highlightElement: script.highlightElement,
+                        searchArea: script.searchArea,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    };
+                    if (camera) {
+                        var _camera_pointerLeft1, _camera_pointerTop1;
+                        sf.cameraTarget = {
+                            left: camera.left,
+                            top: camera.top,
+                            width: camera.width,
+                            pointerLeft: null != (_camera_pointerLeft1 = camera.pointerLeft) ? _camera_pointerLeft1 : Math.round(iw / 2),
+                            pointerTop: null != (_camera_pointerTop1 = camera.pointerTop) ? _camera_pointerTop1 : Math.round(ih / 2)
+                        };
+                    }
+                    scriptFrames.push(sf);
+                    currentFrame += totalFrames;
+                    break;
+                }
+            case 'clear-insight':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    scriptFrames.push({
+                        type: 'clear-insight',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'spinning-pointer':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    scriptFrames.push({
+                        type: 'spinning-pointer',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'pointer':
+                scriptFrames.push({
+                    type: 'pointer',
+                    startFrame: currentFrame,
+                    durationInFrames: 0,
+                    pointerImg: script.img,
+                    title: script.title,
+                    subTitle: script.subTitle,
+                    taskId: script.taskId
+                });
+                break;
+        }
+    }
+    const stepsDurationInFrames = Math.max(currentFrame, 1);
+    return {
+        scriptFrames,
+        totalDurationInFrames: stepsDurationInFrames,
+        fps: FPS,
+        stepsDurationInFrames,
+        imageWidth: baseImageWidth,
+        imageHeight: baseImageHeight
+    };
+}
+export { FPS, calculateFrameMap };

package/dist/es/component/player/scenes/playback-frame.mjs

@@ -0,0 +1,6 @@
+import { deriveFrameState } from "./derive-frame-state.mjs";
+function getPlaybackFrameState(frameMap, frame) {
+    const state = deriveFrameState(frameMap.scriptFrames, frame, frameMap.imageWidth, frameMap.imageHeight, frameMap.fps);
+    return state.img ? state : null;
+}
+export { getPlaybackFrameState };

package/dist/es/component/player/scenes/playback-layout.mjs

@@ -0,0 +1,12 @@
+function getPlaybackViewport(containerWidth, containerHeight, imageWidth, imageHeight) {
+    const scale = Math.min(containerWidth / imageWidth, containerHeight / imageHeight);
+    const contentWidth = imageWidth * scale;
+    const contentHeight = imageHeight * scale;
+    return {
+        offsetX: (containerWidth - contentWidth) / 2,
+        offsetY: (containerHeight - contentHeight) / 2,
+        contentWidth,
+        contentHeight
+    };
+}
+export { getPlaybackViewport };

package/dist/es/component/player/scenes/pointer-layout.mjs

@@ -0,0 +1,36 @@
+const POINTER_REFERENCE_IMAGE_WIDTH = 1920;
+const POINTER_WIDTH = 44;
+const POINTER_HEIGHT = 56;
+const POINTER_HOTSPOT_X = 6;
+const POINTER_HOTSPOT_Y = 4;
+function assertPositiveFinite(value, name) {
+    if (!Number.isFinite(value) || value <= 0) throw new Error(`${name} must be a positive finite number`);
+}
+function buildPointerLayout(scale) {
+    return {
+        scale,
+        width: POINTER_WIDTH * scale,
+        height: POINTER_HEIGHT * scale,
+        hotspotX: POINTER_HOTSPOT_X * scale,
+        hotspotY: POINTER_HOTSPOT_Y * scale,
+        centerOffsetX: POINTER_WIDTH * scale / 2,
+        centerOffsetY: POINTER_HEIGHT * scale / 2
+    };
+}
+function resolvePointerLayout(imageWidth) {
+    assertPositiveFinite(imageWidth, 'imageWidth');
+    return buildPointerLayout(Math.max(1, Math.sqrt(imageWidth / POINTER_REFERENCE_IMAGE_WIDTH)));
+}
+function resolveExportPointerLayout(imageWidth, contentWidth) {
+    assertPositiveFinite(contentWidth, 'contentWidth');
+    const liveLayout = resolvePointerLayout(imageWidth);
+    return buildPointerLayout(liveLayout.scale * (contentWidth / imageWidth));
+}
+function resolveSpinnerLayout(pointerLayout) {
+    const size = pointerLayout.height;
+    return {
+        size,
+        centerOffset: size / 2
+    };
+}
+export { POINTER_HEIGHT, POINTER_HOTSPOT_X, POINTER_HOTSPOT_Y, POINTER_WIDTH, resolveExportPointerLayout, resolvePointerLayout, resolveSpinnerLayout };

package/dist/es/component/player/use-frame-player.mjs

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+function useFramePlayer(options) {
+    var _options_playbackRate, _options_playbackRate1;
+    const { durationInFrames, fps, autoPlay = false, loop = false } = options;
+    const [currentFrame, setCurrentFrame] = useState(0);
+    const [playing, setPlaying] = useState(autoPlay);
+    const playingRef = useRef(playing);
+    const frameRef = useRef(currentFrame);
+    const rateRef = useRef(null != (_options_playbackRate = options.playbackRate) ? _options_playbackRate : 1);
+    const durationRef = useRef(durationInFrames);
+    const fpsRef = useRef(fps);
+    const loopRef = useRef(loop);
+    playingRef.current = playing;
+    frameRef.current = currentFrame;
+    rateRef.current = null != (_options_playbackRate1 = options.playbackRate) ? _options_playbackRate1 : 1;
+    durationRef.current = durationInFrames;
+    fpsRef.current = fps;
+    loopRef.current = loop;
+    useEffect(()=>{
+        if (!playing) return;
+        let rafId;
+        let lastTime = null;
+        let accumulated = 0;
+        const tick = (now)=>{
+            if (null !== lastTime) {
+                const delta = (now - lastTime) * rateRef.current;
+                accumulated += delta;
+                const frameDuration = 1000 / fpsRef.current;
+                while(accumulated >= frameDuration){
+                    accumulated -= frameDuration;
+                    const next = frameRef.current + 1;
+                    if (next >= durationRef.current) if (loopRef.current) {
+                        frameRef.current = 0;
+                        setCurrentFrame(0);
+                    } else {
+                        frameRef.current = durationRef.current - 1;
+                        setCurrentFrame(durationRef.current - 1);
+                        setPlaying(false);
+                        return;
+                    }
+                    else {
+                        frameRef.current = next;
+                        setCurrentFrame(next);
+                    }
+                }
+            }
+            lastTime = now;
+            rafId = requestAnimationFrame(tick);
+        };
+        rafId = requestAnimationFrame(tick);
+        return ()=>cancelAnimationFrame(rafId);
+    }, [
+        playing
+    ]);
+    const resetIfAtEnd = ()=>{
+        if (frameRef.current >= durationRef.current - 1) {
+            frameRef.current = 0;
+            setCurrentFrame(0);
+        }
+    };
+    const play = useCallback(()=>{
+        resetIfAtEnd();
+        setPlaying(true);
+    }, []);
+    const pause = useCallback(()=>setPlaying(false), []);
+    const toggle = useCallback(()=>{
+        if (playingRef.current) setPlaying(false);
+        else {
+            resetIfAtEnd();
+            setPlaying(true);
+        }
+    }, []);
+    const seekTo = useCallback((frame)=>{
+        const clamped = Math.max(0, Math.min(frame, durationRef.current - 1));
+        frameRef.current = clamped;
+        setCurrentFrame(clamped);
+    }, []);
+    return {
+        currentFrame,
+        playing,
+        play,
+        pause,
+        toggle,
+        seekTo
+    };
+}
+export { useFramePlayer };