add appliance-plugin 1.0.1

netless-io · Jul 4, 2024 · 48a02e7 · 48a02e7
1 parent 0e9ae0e
commit 48a02e7
Show file tree

Hide file tree

Showing 7 changed files with 365 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@netless/app-slide": "0.2.59",
+    "@netless/appliance-plugin": "^1.0.1",
     "@netless/combine-player": "^1.1.1",
     "@netless/cursor-tool": "^0.1.1",
     "@netless/iframe-bridge": "2.1.9",
@@ -34,7 +35,7 @@
     "@netless/white-prepare": "^1.0.2",
     "@netless/white-video-plugin": "^1.2.4",
     "@netless/white-video-plugin2": "^2.0.4",
-    "@netless/window-manager": "^0.4.69",
+    "@netless/window-manager": "^0.4.73",
     "buffer": "^6.0.3",
     "core-js": "^3",
     "html2canvas": "^1.3.3",
@@ -53,7 +54,7 @@
     "@babel/preset-env": "^7.7.4",
     "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.7.4",
-    "@netless/whiteboard-bridge-types": "^0.1.12",
+    "@netless/whiteboard-bridge-types": "^0.1.13",
     "@types/css-font-loading-module": "^0.0.4",
     "@types/react": "^16.9.13",
     "@types/react-dom": "^16.9.4",

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { globalErrorEvent, postCustomMessage } from "./utils/Funs";
 import { setWhiteboardDivGetter } from "./bridge/SDK";
 import "@netless/window-manager/dist/style.css";
+import '@netless/appliance-plugin/dist/style.css'; 
 import "./App.css";
 import 'video.js/dist/video-js.css';
 

diff --git a/src/bridge/SDK.ts b/src/bridge/SDK.ts
@@ -24,11 +24,20 @@ import { registerBridgeRoom } from "./Room";
 import { registerPlayerBridge } from "./Player";
 import { RtcAudioMixingClient } from '../RtcAudioMixingClient';
 import { SDKCallbackHandler } from '../native/SDKCallbackHandler';
-import { destroySyncedStore, initSyncedStore } from './SyncedStore';
+import { destroySyncedStore, initSyncedStore } from './SyncedStore'
 import { SlideLoggerPlugin } from '../utils/SlideLogger';
 import { RtcAudioEffectClient } from '../RtcAudioEffectClient';
 import { prepare } from '@netless/white-prepare';
 
+import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
+import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
+import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
+const fullWorkerBlob = new Blob([fullWorkerString], { type: 'text/javascript' });
+const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
+const subWorkerBlob = new Blob([subWorkerString], { type: 'text/javascript' });
+const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
+
+
 let sdk: WhiteWebSdk | undefined = undefined;
 let room: Room | undefined = undefined;
 let player: Player | undefined = undefined;
@@ -85,9 +94,10 @@ async function mountWindowManager(room: Room, handler: RoomCallbackHandler | Rep
         containerSizeRatio: 9/16,
         chessboard: true,
         cursor: !!cursorAdapter,
+        supportAppliancePlugin: nativeConfig?.enableAppliancePlugin,
         ...windowParams,
         container: divRef(),
-        room
+        room,
     });
     addManagerListener(manager, logger, handler);
     return manager;
@@ -112,7 +122,7 @@ class SDKBridge {
             return url;
         };
 
-        const { log, __nativeTags, __platform, __netlessUA, initializeOriginsStates, useMultiViews, userCursor, enableInterrupterAPI, routeBackup, enableRtcIntercept, enableRtcAudioEffectIntercept, enableSlideInterrupterAPI, enableImgErrorCallback, enableIFramePlugin, enableSyncedStore, ...restConfig } = config;
+        const { log, __nativeTags, __platform, __netlessUA, initializeOriginsStates, useMultiViews, userCursor, enableInterrupterAPI, routeBackup, enableRtcIntercept, enableRtcAudioEffectIntercept, enableSlideInterrupterAPI, enableImgErrorCallback, enableIFramePlugin, enableSyncedStore, enableAppliancePlugin, ...restConfig } = config;
 
         enableReport(!!log);
         nativeConfig = config;
@@ -199,13 +209,18 @@ class SDKBridge {
         const invisiblePlugins = [
             ...enableIFramePlugin ? [IframeBridge as any] : [],
             ...enableSyncedStore ? [SyncedStorePlugin as any] : [],
+            ...enableAppliancePlugin ? [ApplianceMultiPlugin as any] : [],
         ];
 
+        const wrappedComponents = [
+            ...enableIFramePlugin ? [IframeWrapper] : [],
+        ]
+
         try {
             sdk = new WhiteWebSdk({
                 ...restConfig,
                 invisiblePlugins: invisiblePlugins,
-                wrappedComponents: enableIFramePlugin ? [IframeWrapper] : undefined,
+                wrappedComponents: wrappedComponents,
                 plugins: plugins,
                 urlInterrupter: urlInterrupter,
                 onWhiteSetupFailed: e => {
@@ -267,6 +282,20 @@ class SDKBridge {
                     if (fullscreen) {
                         manager.setMaximized(true);
                     }
+
+                    if (nativeConfig?.enableAppliancePlugin) {
+                        const plugin = await ApplianceMultiPlugin.getInstance(manager,
+                            {
+                                options: {
+                                    cdn: {
+                                        fullWorkerUrl,
+                                        subWorkerUrl,
+                                    }
+                                }
+                            }
+                        );
+                        window.appliancePlugin = plugin;
+                    }
                 } catch (error) {
                     return responseCallback(JSON.stringify({__error: {message: error.message, jsStack: error.stack}}));
                 }
@@ -319,11 +348,15 @@ class SDKBridge {
         }
         replayCallbackHanlder = new ReplayerCallbackHandlerImp(step, !!mediaURL, !!(nativeConfig?.enableIFramePlugin), phaseChangeHook);
 
+        const invisiblePlugins = [
+            ...useMultiViews ? [WindowManager as any] : [],
+        ]
+
         sdk!.replayRoom({
             ...replayParams,
             cursorAdapter: useMultiViews ? undefined : cursorAdapter,
             cameraBound: convertBound(cameraBound),
-            invisiblePlugins: useMultiViews ? [WindowManager] : [],
+            invisiblePlugins: invisiblePlugins,
             useMultiViews
         }, {...replayCallbackHanlder, ...sdkCallbackHandler}).then(async mPlayer => {
             removeBind();

diff --git a/src/client.d.ts b/src/client.d.ts
@@ -0,0 +1,8 @@
+/// <reference lib="es2015.iterable" />
+
+declare module 'promise.any';
+
+declare module '*?raw' {
+    const content: string;
+    export default content;
+}
diff --git a/src/utils/ParamTypes.ts b/src/utils/ParamTypes.ts
@@ -36,5 +36,6 @@ declare global {
     appRegisterParams: AppRegisterParams[];
     nativeWebSocket?: boolean;
     syncedStore?: SyncedStore;
+    appliancePlugin: any;
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -22,6 +22,11 @@ config = {
     alias: {
       "@netless/window-manager/dist/style.css": require.resolve("@netless/window-manager").replace("index.js", "style.css"),
       "@netless/window-manager": require.resolve("@netless/window-manager"),
+
+      "@netless/appliance-plugin/dist/style.css": require.resolve("@netless/appliance-plugin").replace("appliance-plugin.js", "style.css"),
+      "@netless/appliance-plugin/dist/subWorker.js": require.resolve("@netless/appliance-plugin").replace("appliance-plugin.js", "subWorker.js"),
+      "@netless/appliance-plugin/dist/fullWorker.js": require.resolve("@netless/appliance-plugin").replace("appliance-plugin.js", "fullWorker.js"),
+      "@netless/appliance-plugin": require.resolve("@netless/appliance-plugin"),
     },
     extensions: ['.ts', '.tsx', '.js', "cjs"],
     fallback: {
@@ -80,6 +85,7 @@ config = {
     rules: [
       {
         test: /\.(ts|js|cjs)x?$/,
+        resourceQuery: { not: [/raw/] },
         use: [
           "thread-loader",
           'babel-loader',
@@ -92,6 +98,10 @@ config = {
       {
         test: /\.(svg|png)/,
         use: ['file-loader']
+      },
+      {
+        resourceQuery: /raw/,
+        type: 'asset/source',
       }
     ],
     unknownContextCritical: false,