@midscene/visualizer 0.30.9 → 0.30.11-beta-20251218071621.0

package/dist/lib/component/screenshot-viewer/index.js

@@ -0,0 +1,316 @@
+"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__, {
+    default: ()=>ScreenshotViewer
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@ant-design/icons");
+const external_antd_namespaceObject = require("antd");
+const external_react_namespaceObject = require("react");
+require("./index.css");
+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 ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating = false }) {
+    const [screenshot, setScreenshot] = (0, external_react_namespaceObject.useState)(null);
+    const [loading, setLoading] = (0, external_react_namespaceObject.useState)(false);
+    const [error, setError] = (0, external_react_namespaceObject.useState)(null);
+    const [lastUpdateTime, setLastUpdateTime] = (0, external_react_namespaceObject.useState)(0);
+    const [interfaceInfo, setInterfaceInfo] = (0, external_react_namespaceObject.useState)(null);
+    const pollingIntervalRef = (0, external_react_namespaceObject.useRef)(null);
+    const isPollingPausedRef = (0, external_react_namespaceObject.useRef)(false);
+    const fetchScreenshot = (0, external_react_namespaceObject.useCallback)((isManual = false)=>_async_to_generator(function*() {
+            if (!serverOnline) return;
+            setLoading(true);
+            if (isManual) setError(null);
+            try {
+                const result = yield getScreenshot();
+                console.log('Screenshot API response:', result);
+                if (null == result ? void 0 : result.screenshot) {
+                    const screenshotData = result.screenshot.toString().trim();
+                    if (screenshotData) {
+                        setScreenshot(screenshotData);
+                        setError(null);
+                        setLastUpdateTime(Date.now());
+                    } else setError('Empty screenshot data received');
+                } else setError('No screenshot data in response');
+            } catch (err) {
+                console.error('Screenshot fetch error:', err);
+                setError(err instanceof Error ? err.message : 'Failed to fetch screenshot');
+            } finally{
+                setLoading(false);
+            }
+        })(), [
+        getScreenshot,
+        serverOnline
+    ]);
+    const fetchInterfaceInfo = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
+            if (!serverOnline || !getInterfaceInfo) return;
+            try {
+                const info = yield getInterfaceInfo();
+                if (info) setInterfaceInfo(info);
+            } catch (err) {
+                console.error('Interface info fetch error:', err);
+            }
+        })(), [
+        getInterfaceInfo,
+        serverOnline
+    ]);
+    const startPolling = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
+        console.log('Starting screenshot polling (5s interval)');
+        pollingIntervalRef.current = setInterval(()=>{
+            if (!isPollingPausedRef.current && serverOnline) fetchScreenshot(false);
+        }, 5000);
+    }, [
+        fetchScreenshot,
+        serverOnline
+    ]);
+    const stopPolling = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (pollingIntervalRef.current) {
+            console.log('Stopping screenshot polling');
+            clearInterval(pollingIntervalRef.current);
+            pollingIntervalRef.current = null;
+        }
+    }, []);
+    const pausePolling = (0, external_react_namespaceObject.useCallback)(()=>{
+        console.log('Pausing screenshot polling');
+        isPollingPausedRef.current = true;
+    }, []);
+    const resumePolling = (0, external_react_namespaceObject.useCallback)(()=>{
+        console.log('Resuming screenshot polling');
+        isPollingPausedRef.current = false;
+    }, []);
+    const handleManualRefresh = (0, external_react_namespaceObject.useCallback)(()=>{
+        fetchScreenshot(true);
+    }, [
+        fetchScreenshot
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!serverOnline) {
+            setScreenshot(null);
+            setError(null);
+            setInterfaceInfo(null);
+            stopPolling();
+            return;
+        }
+        fetchScreenshot(false);
+        fetchInterfaceInfo();
+        startPolling();
+        return ()=>{
+            stopPolling();
+        };
+    }, [
+        serverOnline,
+        startPolling,
+        stopPolling,
+        fetchScreenshot,
+        fetchInterfaceInfo
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!serverOnline) return;
+        if (isUserOperating) pausePolling();
+        else {
+            resumePolling();
+            fetchScreenshot(false);
+        }
+    }, [
+        isUserOperating,
+        pausePolling,
+        resumePolling,
+        fetchScreenshot,
+        serverOnline
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            stopPolling();
+        }, [
+        stopPolling
+    ]);
+    if (!serverOnline) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "screenshot-viewer offline",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "screenshot-placeholder",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                    children: "\uD83D\uDCF1 Screen Preview"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                    children: "Start the playground server to see real-time screenshots"
+                })
+            ]
+        })
+    });
+    if (loading && !screenshot) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "screenshot-viewer loading",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Spin, {
+                size: "large"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                children: "Loading screenshot..."
+            })
+        ]
+    });
+    if (error && !screenshot) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "screenshot-viewer error",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "screenshot-placeholder",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                    children: "\uD83D\uDCF1 Screen Preview"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                    className: "error-message",
+                    children: error
+                })
+            ]
+        })
+    });
+    const formatLastUpdateTime = (timestamp)=>{
+        if (!timestamp) return '';
+        const now = Date.now();
+        const diff = Math.floor((now - timestamp) / 1000);
+        if (diff < 60) return `${diff}s ago`;
+        if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+        return new Date(timestamp).toLocaleTimeString();
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "screenshot-viewer",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "screenshot-header",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "screenshot-title",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                        children: (null == interfaceInfo ? void 0 : interfaceInfo.type) ? interfaceInfo.type : 'Device Name'
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "screenshot-container",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "screenshot-overlay",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "device-name-overlay",
+                                children: [
+                                    "Device Name",
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                        title: null == interfaceInfo ? void 0 : interfaceInfo.description,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.InfoCircleOutlined, {
+                                            size: 16,
+                                            className: "info-icon"
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "screenshot-controls",
+                                children: [
+                                    lastUpdateTime > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                        className: "last-update-time",
+                                        children: [
+                                            "Last updated ",
+                                            formatLastUpdateTime(lastUpdateTime)
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                        title: "Refresh screenshot",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                                            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ReloadOutlined, {}),
+                                            onClick: handleManualRefresh,
+                                            loading: loading,
+                                            size: "small"
+                                        })
+                                    }),
+                                    isUserOperating && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                        className: "operation-indicator",
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Spin, {
+                                                size: "small"
+                                            }),
+                                            " Operating..."
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "screenshot-content",
+                        children: screenshot ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                            src: screenshot.startsWith('data:image/') ? screenshot : `data:image/png;base64,${screenshot}`,
+                            alt: "Device Screenshot",
+                            className: "screenshot-image",
+                            onLoad: ()=>console.log('Screenshot image loaded successfully'),
+                            onError: (e)=>{
+                                console.error('Screenshot image load error:', e);
+                                console.error('Screenshot data preview:', screenshot.substring(0, 100));
+                                setError('Failed to load screenshot image');
+                            }
+                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "screenshot-placeholder",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                children: "No screenshot available"
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/service-mode-control/index.js

@@ -43,8 +43,7 @@ const SWITCH_BUTTON_TEXT = {
     Server: 'Switch to In-Browser Mode',
     'In-Browser': 'Switch to Server Mode'
 };
-const ServiceModeControl = (param)=>{
-    let { serviceMode } = param;
+const ServiceModeControl = ({ serviceMode })=>{
     const { setServiceMode, config } = (0, store_js_namespaceObject.useEnvConfig)();
     const serverValid = (0, useServerValid_js_namespaceObject.useServerValid)('Server' === serviceMode);
     const renderServerTip = ()=>{
@@ -131,9 +130,9 @@ const ServiceModeControl = (param)=>{
     });
 };
 exports.ServiceModeControl = __webpack_exports__.ServiceModeControl;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __rspack_i in __webpack_exports__)if (-1 === [
     "ServiceModeControl"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/lib/component/shiny-text/index.css

@@ -13,6 +13,23 @@
   overflow: hidden;
 }
 
+.shiny-text.theme-blue {
+  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+}
+
+.shiny-text.theme-purple {
+  background-image: linear-gradient(45deg, #667eea, #764ba2, #b06ab3, #9d50bb);
+}
+
+.shiny-text.theme-green {
+  background-image: linear-gradient(45deg, #11998e, #38ef7d, #2dd4bf, #10b981);
+}
+
+.shiny-text.theme-rainbow {
+  background-image: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #9d50bb, #ff0080);
+  background-size: 400%;
+}
+
 .shiny-text:after {
   content: "";
   width: 120%;
@@ -28,9 +45,9 @@
 }
 
 .shiny-text.disabled {
-  background: #2b83ff;
-  -webkit-background-clip: text;
-  background-clip: text;
+  color: #000;
+  background: none;
+  font-weight: normal;
   animation: none;
 }
 
@@ -39,6 +56,21 @@
   display: none;
 }
 
+[data-theme="dark"] .shiny-text {
+  color: rgba(0, 0, 0, 0);
+  -webkit-text-fill-color: transparent;
+  text-shadow: none;
+  background-image: linear-gradient(45deg, #a78bfa, #c084fc, #e879f9, #c084fc);
+  background-size: 300%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: 8s infinite textGradient;
+}
+
+[data-theme="dark"] .shiny-text:after {
+  background: linear-gradient(90deg, rgba(197, 184, 255, 0) 0%, rgba(197, 184, 255, .05) 10%, rgba(197, 184, 255, .15) 50%, rgba(197, 184, 255, .05) 90%, rgba(197, 184, 255, 0) 100%);
+}
+
 @keyframes shine {
   0% {
     opacity: .7;

package/dist/lib/component/shiny-text/index.js

@@ -28,22 +28,22 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("./index.css");
-const ShinyText = (param)=>{
-    let { text, disabled = false, speed = 5, className = '' } = param;
+const ShinyText = ({ text, disabled = false, speed = 5, className = '', colorTheme = 'blue' })=>{
     const style = {
         '--animation-duration': `${speed}s`
     };
+    const themeClass = `theme-${colorTheme}`;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: `shiny-text ${disabled ? 'disabled' : ''} ${className}`,
+        className: `shiny-text ${themeClass} ${disabled ? 'disabled' : ''} ${className}`,
         style: style,
         children: text
     });
 };
 const shiny_text = ShinyText;
 exports["default"] = __webpack_exports__["default"];
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __rspack_i in __webpack_exports__)if (-1 === [
     "default"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/lib/component/universal-playground/index.css

@@ -160,7 +160,6 @@
 }
 
 .playground-container .progress-description {
-  color: #000;
   padding: 8px 0;
   font-size: 14px;
   line-height: 22px;
@@ -339,3 +338,64 @@
   text-decoration: underline;
 }
 
+[data-theme="dark"] .universal-playground .error-hint {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .status-indicator {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .universal-playground .status-indicator.error {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .universal-playground .status-indicator.success {
+  color: #52c41a;
+}
+
+[data-theme="dark"] .universal-playground .operation-label {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .universal-playground .alert-message {
+  color: #f8fafd;
+  background-color: rgba(82, 38, 7, .3);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-icon-wrapper {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-content {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-content .operation-title {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .playground-footer {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .universal-playground .playground-footer .status-text {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .universal-playground .results-info {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-title, [data-theme="dark"] .universal-playground .result-section .result-details, [data-theme="dark"] .universal-playground .result-section .result-value {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value.success {
+  color: #52c41a;
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value.error {
+  color: #ff4d4f;
+}
+