@midscene/visualizer 1.5.2 → 1.5.3-beta-20260305031416.0

package/dist/lib/component/player/remotion/StepScene.js

@@ -0,0 +1,224 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    StepsTimeline: ()=>StepsTimeline
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const index_js_namespaceObject = require("../../../utils/index.js");
+const external_derive_frame_state_js_namespaceObject = require("./derive-frame-state.js");
+const POINTER_PHASE = 0.375;
+const CROSSFADE_FRAMES = 10;
+const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: compHeight, fps })=>{
+    const { scriptFrames, imageWidth: baseImgW, imageHeight: baseImgH } = frameMap;
+    const state = (0, external_react_namespaceObject.useMemo)(()=>(0, external_derive_frame_state_js_namespaceObject.deriveFrameState)(scriptFrames, frame, baseImgW, baseImgH, fps), [
+        scriptFrames,
+        frame,
+        baseImgW,
+        baseImgH,
+        fps
+    ]);
+    if (!state.img) return null;
+    const { img, imageWidth: imgW, imageHeight: imgH, prevImg, camera, prevCamera, insights, spinning: spinningPointer, spinningElapsedMs, currentPointerImg, title, subTitle, frameInScript, imageChanged, pointerMoved, rawProgress } = state;
+    const pT = pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress;
+    const cT = pointerMoved ? rawProgress <= POINTER_PHASE ? 0 : Math.min((rawProgress - POINTER_PHASE) / (1 - POINTER_PHASE), 1) : rawProgress;
+    const pointerLeft = prevCamera.pointerLeft + (camera.pointerLeft - prevCamera.pointerLeft) * pT;
+    const pointerTop = prevCamera.pointerTop + (camera.pointerTop - prevCamera.pointerTop) * pT;
+    const cameraLeft = autoZoom ? prevCamera.left + (camera.left - prevCamera.left) * cT : 0;
+    const cameraTop = autoZoom ? prevCamera.top + (camera.top - prevCamera.top) * cT : 0;
+    const cameraWidth = autoZoom ? prevCamera.width + (camera.width - prevCamera.width) * cT : imgW;
+    const isPortraitImage = imgH > imgW;
+    const browserW = isPortraitImage ? Math.round(imgW / imgH * compHeight) : compWidth;
+    const portraitLeft = Math.round((compWidth - browserW) / 2);
+    const zoom = imgW / cameraWidth;
+    const tx = browserW / imgW * -cameraLeft;
+    const ty = compHeight / imgH * -cameraTop;
+    const transformStyle = `scale(${zoom}) translate(${tx}px, ${ty}px)`;
+    const camH = imgH / imgW * cameraWidth;
+    const ptrX = (pointerLeft - cameraLeft) / cameraWidth * browserW;
+    const ptrY = (pointerTop - cameraTop) / camH * compHeight;
+    const showCursor = camera.pointerLeft !== Math.round(imgW / 2) || camera.pointerTop !== Math.round(imgH / 2) || prevCamera.pointerLeft !== Math.round(imgW / 2) || prevCamera.pointerTop !== Math.round(imgH / 2);
+    const crossfadeAlpha = imageChanged ? Math.min(frameInScript / CROSSFADE_FRAMES, 1) : 1;
+    const spinRotation = spinningPointer ? (Math.sin(spinningElapsedMs / 500 - Math.PI / 2) + 1) / 2 * Math.PI * 2 : 0;
+    const renderInsightOverlays = ()=>{
+        if (0 === insights.length) return null;
+        return insights.map((insight, idx)=>{
+            const overlays = [];
+            if (insight.highlightElement) {
+                const rect = insight.highlightElement.rect;
+                overlays.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: {
+                        position: 'absolute',
+                        left: rect.left,
+                        top: rect.top,
+                        width: rect.width,
+                        height: rect.height,
+                        background: 'rgba(253, 89, 7, 0.4)',
+                        border: '1px solid #fd5907',
+                        boxShadow: '4px 4px 2px rgba(51, 51, 51, 0.4)',
+                        opacity: insight.alpha,
+                        pointerEvents: 'none'
+                    }
+                }, `highlight-${idx}`));
+            }
+            if (insight.searchArea) {
+                const rect = insight.searchArea;
+                overlays.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: {
+                        position: 'absolute',
+                        left: rect.left,
+                        top: rect.top,
+                        width: rect.width,
+                        height: rect.height,
+                        background: 'rgba(2, 131, 145, 0.4)',
+                        border: '1px solid #028391',
+                        boxShadow: '4px 4px 2px rgba(51, 51, 51, 0.4)',
+                        opacity: insight.alpha,
+                        pointerEvents: 'none'
+                    }
+                }, `search-${idx}`));
+            }
+            return overlays;
+        });
+    };
+    const renderContentArea = (w, h)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            style: {
+                width: w,
+                height: h,
+                position: 'relative',
+                overflow: 'hidden'
+            },
+            children: [
+                imageChanged && prevImg && crossfadeAlpha < 1 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: {
+                        position: 'absolute',
+                        width: w,
+                        height: h,
+                        overflow: 'hidden',
+                        opacity: 1 - crossfadeAlpha
+                    },
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                        alt: "",
+                        src: prevImg,
+                        style: {
+                            width: w,
+                            height: h,
+                            transformOrigin: '0 0',
+                            transform: transformStyle
+                        }
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    style: {
+                        position: 'absolute',
+                        width: w,
+                        height: h,
+                        overflow: 'hidden',
+                        opacity: imageChanged ? crossfadeAlpha : 1
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                            alt: "",
+                            src: img,
+                            style: {
+                                width: w,
+                                height: h,
+                                transformOrigin: '0 0',
+                                transform: transformStyle
+                            }
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            style: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                width: w,
+                                height: h,
+                                transformOrigin: '0 0',
+                                transform: transformStyle,
+                                pointerEvents: 'none'
+                            },
+                            children: renderInsightOverlays()
+                        })
+                    ]
+                }),
+                spinningPointer && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                    alt: "",
+                    src: index_js_namespaceObject.mouseLoading,
+                    style: {
+                        position: 'absolute',
+                        left: ptrX - 11,
+                        top: ptrY - 14,
+                        width: 22,
+                        height: 28,
+                        transform: `rotate(${spinRotation}rad)`,
+                        transformOrigin: 'center center',
+                        filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))'
+                    }
+                }),
+                showCursor && !spinningPointer && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                    alt: "",
+                    src: currentPointerImg,
+                    style: {
+                        position: 'absolute',
+                        left: ptrX - 3,
+                        top: ptrY - 2,
+                        width: 22,
+                        height: 28,
+                        filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))'
+                    }
+                })
+            ]
+        });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: '#000'
+        },
+        children: isPortraitImage ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            style: {
+                position: 'absolute',
+                left: portraitLeft,
+                top: 0,
+                width: browserW,
+                height: compHeight,
+                overflow: 'hidden'
+            },
+            children: renderContentArea(browserW, compHeight)
+        }) : renderContentArea(compWidth, compHeight)
+    });
+};
+exports.StepsTimeline = __webpack_exports__.StepsTimeline;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "StepsTimeline"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/player/remotion/derive-frame-state.js

@@ -0,0 +1,241 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    deriveFrameState: ()=>deriveFrameState
+});
+const index_js_namespaceObject = require("../../../utils/index.js");
+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 derive_frame_state_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 derive_frame_state_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function updateImage(acc, sf, baseW, baseH) {
+    if (!sf.img) return;
+    if (acc.img && sf.img !== acc.img) {
+        acc.prevImg = acc.img;
+        acc.imageChanged = true;
+    }
+    acc.img = sf.img;
+    acc.imgW = sf.imageWidth || baseW;
+    acc.imgH = sf.imageHeight || baseH;
+}
+function checkPointerMoved(prev, cur) {
+    return Math.abs(prev.pointerLeft - cur.pointerLeft) > 1 || Math.abs(prev.pointerTop - cur.pointerTop) > 1;
+}
+function handleImg(acc, sf, frame, baseW, baseH) {
+    updateImage(acc, sf, baseW, baseH);
+    const sfEnd = sf.startFrame + sf.durationInFrames;
+    if (sf.cameraTarget) {
+        acc.prevCamera = _object_spread({}, acc.camera);
+        acc.camera = _object_spread({}, sf.cameraTarget);
+        acc.pointerMoved = checkPointerMoved(acc.prevCamera, acc.camera);
+    } else if (frame >= sfEnd) {
+        acc.pointerMoved = false;
+        acc.imageChanged = false;
+    }
+    acc.spinning = false;
+}
+function handleInsight(acc, sf, frame, baseW, baseH) {
+    updateImage(acc, sf, baseW, baseH);
+    const alreadyAdded = acc.insights.some((ai)=>ai.highlightElement === sf.highlightElement && ai.searchArea === sf.searchArea);
+    if (!alreadyAdded) acc.insights.push({
+        highlightElement: sf.highlightElement,
+        searchArea: sf.searchArea,
+        alpha: 1
+    });
+    if (sf.cameraTarget && void 0 !== sf.insightPhaseFrames) {
+        const cameraStartFrame = sf.startFrame + sf.insightPhaseFrames;
+        if (frame >= cameraStartFrame) {
+            acc.prevCamera = _object_spread({}, acc.camera);
+            acc.camera = _object_spread({}, sf.cameraTarget);
+            const cameraFrameIn = frame - cameraStartFrame;
+            const cameraDur = sf.cameraPhaseFrames || 1;
+            acc.rawProgress = Math.min(cameraFrameIn / cameraDur, 1);
+            acc.pointerMoved = checkPointerMoved(acc.prevCamera, acc.camera);
+        }
+    }
+    acc.spinning = false;
+}
+function handleClearInsight(acc, sf, frame) {
+    const sfEnd = sf.startFrame + sf.durationInFrames;
+    const alpha = 1 - acc.rawProgress;
+    acc.insights = acc.insights.map((ai)=>_object_spread_props(_object_spread({}, ai), {
+            alpha
+        }));
+    if (frame >= sfEnd) acc.insights = [];
+    acc.spinning = false;
+}
+function handleSpinningPointer(acc, fps) {
+    acc.spinning = true;
+    acc.spinningElapsedMs = acc.frameInScript / fps * 1000;
+}
+function deriveFrameState(scriptFrames, frame, baseW, baseH, fps) {
+    const defaultCamera = {
+        left: 0,
+        top: 0,
+        width: baseW,
+        pointerLeft: Math.round(baseW / 2),
+        pointerTop: Math.round(baseH / 2)
+    };
+    const acc = {
+        img: '',
+        imgW: baseW,
+        imgH: baseH,
+        camera: _object_spread({}, defaultCamera),
+        prevCamera: _object_spread({}, defaultCamera),
+        prevImg: null,
+        insights: [],
+        spinning: false,
+        spinningElapsedMs: 0,
+        pointerImg: index_js_namespaceObject.mousePointer,
+        title: '',
+        subTitle: '',
+        taskId: void 0,
+        frameInScript: 0,
+        scriptIndex: 0,
+        imageChanged: false,
+        pointerMoved: false,
+        rawProgress: 0
+    };
+    for(let i = 0; i < scriptFrames.length; i++){
+        const sf = scriptFrames[i];
+        const sfEnd = sf.startFrame + sf.durationInFrames;
+        if (0 === sf.durationInFrames) {
+            if (sf.startFrame <= frame) {
+                if ('pointer' === sf.type && sf.pointerImg) acc.pointerImg = sf.pointerImg;
+                acc.title = sf.title || acc.title;
+                acc.subTitle = sf.subTitle || acc.subTitle;
+                var _sf_taskId;
+                acc.taskId = null != (_sf_taskId = sf.taskId) ? _sf_taskId : acc.taskId;
+                acc.scriptIndex = i;
+            }
+            continue;
+        }
+        if (frame < sf.startFrame) break;
+        acc.title = sf.title || acc.title;
+        acc.subTitle = sf.subTitle || acc.subTitle;
+        var _sf_taskId1;
+        acc.taskId = null != (_sf_taskId1 = sf.taskId) ? _sf_taskId1 : acc.taskId;
+        acc.scriptIndex = i;
+        acc.frameInScript = frame - sf.startFrame;
+        acc.rawProgress = Math.min(acc.frameInScript / sf.durationInFrames, 1);
+        switch(sf.type){
+            case 'img':
+                handleImg(acc, sf, frame, baseW, baseH);
+                break;
+            case 'insight':
+                handleInsight(acc, sf, frame, baseW, baseH);
+                break;
+            case 'clear-insight':
+                handleClearInsight(acc, sf, frame);
+                break;
+            case 'spinning-pointer':
+                handleSpinningPointer(acc, fps);
+                break;
+            case 'sleep':
+                acc.spinning = false;
+                break;
+        }
+        if (frame >= sfEnd) {
+            if ('clear-insight' !== sf.type) acc.imageChanged = false;
+            acc.pointerMoved = false;
+            acc.rawProgress = 1;
+            if (sf.cameraTarget) acc.prevCamera = _object_spread({}, acc.camera);
+        }
+    }
+    if (!acc.img) {
+        const firstImgScript = scriptFrames.find((sf)=>'img' === sf.type && sf.img);
+        if (firstImgScript) {
+            acc.img = firstImgScript.img;
+            acc.imgW = firstImgScript.imageWidth || baseW;
+            acc.imgH = firstImgScript.imageHeight || baseH;
+        }
+    }
+    return {
+        img: acc.img,
+        imageWidth: acc.imgW,
+        imageHeight: acc.imgH,
+        prevImg: acc.imageChanged ? acc.prevImg : null,
+        camera: acc.camera,
+        prevCamera: acc.prevCamera,
+        insights: acc.insights,
+        spinning: acc.spinning,
+        spinningElapsedMs: acc.spinningElapsedMs,
+        currentPointerImg: acc.pointerImg,
+        title: acc.title,
+        subTitle: acc.subTitle,
+        taskId: acc.taskId,
+        frameInScript: acc.frameInScript,
+        scriptIndex: acc.scriptIndex,
+        imageChanged: acc.imageChanged,
+        pointerMoved: acc.pointerMoved,
+        rawProgress: acc.rawProgress
+    };
+}
+exports.deriveFrameState = __webpack_exports__.deriveFrameState;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "deriveFrameState"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});