@godscene/playground-electron 1.7.11

package/dist/lib/ScrcpyPanel.js

@@ -0,0 +1,424 @@
+"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 ("u" > 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__, {
+    ScrcpyPanel: ()=>ScrcpyPanel
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const scrcpy_namespaceObject = require("@yume-chan/scrcpy");
+const scrcpy_decoder_webcodecs_namespaceObject = require("@yume-chan/scrcpy-decoder-webcodecs");
+const external_antd_namespaceObject = require("antd");
+const external_react_namespaceObject = require("react");
+const external_socket_io_client_namespaceObject = require("socket.io-client");
+const external_scrcpy_preview_js_namespaceObject = require("./scrcpy-preview.js");
+const external_scrcpy_stream_js_namespaceObject = require("./scrcpy-stream.js");
+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 ScrcpyPanel_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 ScrcpyPanel_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const { Text } = external_antd_namespaceObject.Typography;
+function ScrcpyPanel({ connectingOverlay, deviceId, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = external_scrcpy_preview_js_namespaceObject.SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000, viewportStyle }) {
+    const canvasStageRef = (0, external_react_namespaceObject.useRef)(null);
+    const socketRef = (0, external_react_namespaceObject.useRef)(null);
+    const decoderRef = (0, external_react_namespaceObject.useRef)(null);
+    const metadataTimeoutRef = (0, external_react_namespaceObject.useRef)(null);
+    const reconnectTimerRef = (0, external_react_namespaceObject.useRef)(null);
+    const ignoreDisconnectRef = (0, external_react_namespaceObject.useRef)(false);
+    const [status, setStatus] = (0, external_react_namespaceObject.useState)('connecting');
+    const [errorMessage, setErrorMessage] = (0, external_react_namespaceObject.useState)(null);
+    const [waitingStatusMessage, setWaitingStatusMessage] = (0, external_react_namespaceObject.useState)(()=>(0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+    const [webCodecsSupported, setWebCodecsSupported] = (0, external_react_namespaceObject.useState)(true);
+    const [retryNonce, setRetryNonce] = (0, external_react_namespaceObject.useState)(0);
+    const statusText = (0, external_react_namespaceObject.useMemo)(()=>(0, external_scrcpy_preview_js_namespaceObject.getScrcpyPreviewStatusText)(status, waitingStatusMessage), [
+        status,
+        waitingStatusMessage
+    ]);
+    const showCustomErrorOverlay = ('error' === status || 'disconnected' === status) && Boolean(renderErrorOverlay);
+    const renderResolvedErrorOverlay = renderErrorOverlay;
+    const requestRetry = (0, external_react_namespaceObject.useCallback)(()=>{
+        setStatus('connecting');
+        setErrorMessage(null);
+        setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+        setRetryNonce((current)=>current + 1);
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        null == onStatusChange || onStatusChange(status, statusText);
+    }, [
+        onStatusChange,
+        status,
+        statusText
+    ]);
+    const clearCanvas = ()=>{
+        const stage = canvasStageRef.current;
+        if (!stage) return;
+        stage.replaceChildren();
+    };
+    const disposeDecoder = ()=>{
+        if (!decoderRef.current) return;
+        decoderRef.current.dispose();
+        decoderRef.current = null;
+    };
+    const clearMetadataTimeout = ()=>{
+        if (metadataTimeoutRef.current) {
+            clearTimeout(metadataTimeoutRef.current);
+            metadataTimeoutRef.current = null;
+        }
+    };
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!serverUrl) {
+            setStatus('error');
+            setErrorMessage('scrcpy preview metadata is missing a server URL.');
+            return;
+        }
+        if (!scrcpy_decoder_webcodecs_namespaceObject.WebCodecsVideoDecoder.isSupported) {
+            setWebCodecsSupported(false);
+            setStatus('error');
+            setErrorMessage('Current browser does not support WebCodecs, so live scrcpy preview is unavailable.');
+            return;
+        }
+        let disposed = false;
+        let connectTimer = null;
+        const cleanup = ()=>{
+            if (connectTimer) {
+                clearTimeout(connectTimer);
+                connectTimer = null;
+            }
+            clearMetadataTimeout();
+            if (reconnectTimerRef.current) {
+                clearTimeout(reconnectTimerRef.current);
+                reconnectTimerRef.current = null;
+            }
+            if (socketRef.current) {
+                socketRef.current.disconnect();
+                socketRef.current = null;
+            }
+            disposeDecoder();
+            clearCanvas();
+        };
+        const scheduleReconnect = ()=>{
+            if (disposed || reconnectTimerRef.current) return;
+            reconnectTimerRef.current = setTimeout(()=>{
+                reconnectTimerRef.current = null;
+                cleanup();
+                connect();
+            }, reconnectInterval);
+        };
+        const createDecoder = (codecId)=>_async_to_generator(function*() {
+                var _canvasStageRef_current;
+                const renderer = scrcpy_decoder_webcodecs_namespaceObject.WebGLVideoFrameRenderer.isSupported ? new scrcpy_decoder_webcodecs_namespaceObject.WebGLVideoFrameRenderer() : new scrcpy_decoder_webcodecs_namespaceObject.BitmapVideoFrameRenderer();
+                const canvas = renderer.canvas;
+                canvas.style.width = '100%';
+                canvas.style.height = '100%';
+                canvas.style.objectFit = 'contain';
+                clearCanvas();
+                null == (_canvasStageRef_current = canvasStageRef.current) || _canvasStageRef_current.appendChild(canvas);
+                const decoder = new scrcpy_decoder_webcodecs_namespaceObject.WebCodecsVideoDecoder({
+                    codec: codecId,
+                    renderer
+                });
+                return decoder;
+            })();
+        const connect = ()=>{
+            if (disposed) return;
+            ignoreDisconnectRef.current = false;
+            setStatus('connecting');
+            setErrorMessage(null);
+            setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+            const socket = (0, external_socket_io_client_namespaceObject.io)(serverUrl, {
+                withCredentials: true,
+                reconnection: false,
+                timeout: 10000,
+                transports: [
+                    'websocket'
+                ]
+            });
+            socketRef.current = socket;
+            const videoStream = (0, external_scrcpy_stream_js_namespaceObject.createScrcpyVideoStream)(socket);
+            socket.on('connect', ()=>{
+                setStatus('waiting-for-stream');
+                setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+                clearMetadataTimeout();
+                metadataTimeoutRef.current = setTimeout(()=>{
+                    if (disposed) return;
+                    ignoreDisconnectRef.current = true;
+                    setStatus('error');
+                    setErrorMessage((0, external_scrcpy_preview_js_namespaceObject.getScrcpyMetadataTimeoutMessage)(metadataTimeoutMs));
+                    setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+                    socket.disconnect();
+                    socketRef.current = null;
+                    scheduleReconnect();
+                }, metadataTimeoutMs);
+                socket.emit('connect-device', _object_spread_props(_object_spread({}, 'string' == typeof deviceId && deviceId.trim() ? {
+                    deviceId: deviceId.trim()
+                } : {}), {
+                    maxSize: 1024
+                }));
+            });
+            socket.on('preview-status', (event)=>{
+                if (disposed || !(0, external_scrcpy_preview_js_namespaceObject.isScrcpyPreviewStatusEvent)(event)) return;
+                setStatus('waiting-for-stream');
+                setWaitingStatusMessage(event.message);
+            });
+            socket.on('video-metadata', (metadata)=>_async_to_generator(function*() {
+                    try {
+                        clearMetadataTimeout();
+                        disposeDecoder();
+                        setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getScrcpyDecoderStatusText)());
+                        const codecId = metadata.codec ? metadata.codec : scrcpy_namespaceObject.ScrcpyVideoCodecId.H264;
+                        const decoder = yield createDecoder(codecId);
+                        decoderRef.current = decoder;
+                        videoStream.pipeTo(decoder.writable).catch((error)=>{
+                            if (disposed) return;
+                            setStatus('error');
+                            setErrorMessage(error.message);
+                            scheduleReconnect();
+                        });
+                        setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+                        setStatus('connected');
+                    } catch (error) {
+                        if (disposed) return;
+                        setStatus('error');
+                        setErrorMessage(error instanceof Error ? error.message : 'Failed to start decoder.');
+                        setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+                        scheduleReconnect();
+                    }
+                })());
+            socket.on('disconnect', ()=>{
+                clearMetadataTimeout();
+                if (disposed) return;
+                if (ignoreDisconnectRef.current) {
+                    ignoreDisconnectRef.current = false;
+                    return;
+                }
+                setStatus('disconnected');
+                setErrorMessage(null);
+                setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+                scheduleReconnect();
+            });
+            socket.on('connect_error', (error)=>{
+                clearMetadataTimeout();
+                if (disposed) return;
+                setStatus('error');
+                setErrorMessage(error.message);
+                setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+                scheduleReconnect();
+            });
+            socket.on('error', (error)=>{
+                clearMetadataTimeout();
+                if (disposed) return;
+                setStatus('error');
+                setErrorMessage(error.message);
+                setWaitingStatusMessage((0, external_scrcpy_preview_js_namespaceObject.getDefaultScrcpyWaitingStatusText)());
+                scheduleReconnect();
+            });
+        };
+        connectTimer = setTimeout(()=>{
+            connectTimer = null;
+            connect();
+        }, 0);
+        return ()=>{
+            disposed = true;
+            cleanup();
+        };
+    }, [
+        deviceId,
+        metadataTimeoutMs,
+        reconnectInterval,
+        retryNonce,
+        serverUrl
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        style: {
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column'
+        },
+        children: [
+            errorMessage && !showCustomErrorOverlay ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+                type: "warning",
+                showIcon: true,
+                style: {
+                    marginBottom: 12
+                },
+                message: statusText,
+                description: errorMessage
+            }) : null,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                style: _object_spread({
+                    position: 'relative',
+                    flex: 1,
+                    minHeight: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#111827',
+                    borderRadius: 8,
+                    overflow: 'hidden'
+                }, viewportStyle),
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        ref: canvasStageRef,
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }
+                    }),
+                    'connected' !== status ? showCustomErrorOverlay && renderResolvedErrorOverlay ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            zIndex: 1
+                        },
+                        children: renderResolvedErrorOverlay({
+                            errorMessage,
+                            retry: requestRetry,
+                            status,
+                            statusText
+                        })
+                    }) : 'error' !== status && 'disconnected' !== status && connectingOverlay ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            zIndex: 1
+                        },
+                        children: connectingOverlay
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        style: {
+                            position: 'absolute',
+                            inset: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 12,
+                            color: '#fff',
+                            background: 'rgba(17, 24, 39, 0.78)',
+                            textAlign: 'center',
+                            padding: 24,
+                            zIndex: 1
+                        },
+                        children: [
+                            'error' === status ? null : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Spin, {
+                                spinning: true
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
+                                style: {
+                                    color: '#fff'
+                                },
+                                children: statusText
+                            }),
+                            'error' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
+                                style: {
+                                    color: '#d1d5db'
+                                },
+                                children: "Scrcpy preview will retry automatically."
+                            }) : null,
+                            !webCodecsSupported && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
+                                style: {
+                                    color: '#d1d5db'
+                                },
+                                children: "Please use a modern Chromium browser to view the stream."
+                            })
+                        ]
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+exports.ScrcpyPanel = __webpack_exports__.ScrcpyPanel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ScrcpyPanel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});