@netless/window-manager 1.0.0-canary.33 → 1.0.0-canary.36

package/src/App/AppContext.ts

@@ -7,13 +7,14 @@ import {
     reaction,
     unlistenDisposed,
     unlistenUpdated,
-    toJS,
+    toJS
 } from "white-web-sdk";
 import type {
     Room,
     SceneDefinition,
     View,
-    EventListener as WhiteEventListener
+    EventListener as WhiteEventListener,
+    Player
 } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
@@ -91,6 +92,15 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.appProxy.view;
     };
 
+    public get now(): number {
+        if (this.isReplay) {
+            const player = this.displayer as Player;
+            return player.beginTimestamp + player.progressTime;
+        } else {
+            return (this.displayer as Room).calibrationTimestamp;
+        }
+    }
+
     public createWhiteBoardView = (params?: CreateWhiteBoardViewParams): WhiteBoardView => {
         if (this.whiteBoardView) {
             return this.whiteBoardView;

package/src/AppListener.ts

@@ -2,9 +2,10 @@ import { callbacks } from "./callback";
 import { emitter } from "./InternalEmitter";
 import { Events, MagixEventName } from "./constants";
 import { setViewFocusScenePath } from "./Utils/Common";
-import type { Event } from "white-web-sdk";
+import type { AnimationMode, Camera, Event, Rectangle } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { TeleBoxState } from "@netless/telebox-insider";
+import { computedMinScale } from "./View/CameraSynchronizer";
 
 type SetAppFocusIndex = {
     type: "main" | "app";
@@ -73,6 +74,14 @@ export class AppListeners {
                     this.manager.attributesUpdateCallback(this.manager.attributes.apps);
                     break;
                 }
+                case Events.MoveCamera: {
+                    this.moveCameraHandler(data.payload);
+                    break;
+                }
+                case Events.MoveCameraToContain: {
+                    this.moveCameraToContainHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -125,4 +134,20 @@ export class AppListeners {
             }
         }
     }
+
+    private moveCameraHandler = (payload: Camera) => {
+        const cameraPayload = payload;
+        if (payload.scale) {
+            const remoteSize = this.manager.mainViewProxy.size$.value;
+            const currentSize = this.manager.boxManager?.stageRect;
+            if (remoteSize && currentSize) {
+                cameraPayload.scale = payload.scale * computedMinScale(remoteSize, currentSize);
+            }
+        }
+        this.manager.mainView.moveCamera(cameraPayload);
+    }
+
+    private moveCameraToContainHandler = (payload: Rectangle & { animationMode?: AnimationMode }) => {
+        this.manager.mainView.moveCameraToContain(payload);
+    }
 }

package/src/BoxManager.ts

@@ -15,7 +15,7 @@ import type {
     TeleBoxRect,
     TeleBoxConfig,
     TeleBoxFullscreen
-} from "@netless/telebox-insider";
+, TeleBoxManagerThemeConfig } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
@@ -53,6 +53,9 @@ export type CreateTeleBoxManagerConfig = {
     containerStyle?: string;
     stageStyle?: string;
     fullscreen?: TeleBoxFullscreen;
+    defaultBoxBodyStyle?: string | null;
+    defaultBoxStageStyle?: string | null;
+    theme?: TeleBoxManagerThemeConfig;
 };
 
 export type BoxManagerContext = {
@@ -268,6 +271,18 @@ export class BoxManager {
             initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
         }
 
+        if (createTeleBoxManagerConfig?.defaultBoxBodyStyle !== undefined) {
+            initManagerState.defaultBoxBodyStyle = createTeleBoxManagerConfig.defaultBoxBodyStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.defaultBoxStageStyle !== undefined) {
+            initManagerState.defaultBoxStageStyle = createTeleBoxManagerConfig.defaultBoxStageStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.theme) {
+            initManagerState.theme = createTeleBoxManagerConfig.theme;
+        }
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();

package/src/BuiltinApps.ts

@@ -1,28 +1,24 @@
 import AppDocsViewer from "@netless/app-docs-viewer";
-import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
+import Plyr from "@netless/app-plyr";
 import { WindowManager } from "./index";
 
 export const setupBuiltin = () => {
-    if (WindowManager.debug) {
-        setOptions({ verbose: true });
-    }
-
     WindowManager.register({
         kind: AppDocsViewer.kind,
         src: AppDocsViewer,
     });
     WindowManager.register({
-        kind: AppMediaPlayer.kind,
-        src: AppMediaPlayer,
+        kind: Plyr.kind,
+        src: Plyr,
     });
 };
 
 export const BuiltinApps = {
     DocsViewer: AppDocsViewer.kind as string,
-    MediaPlayer: AppMediaPlayer.kind as string,
+    MediaPlayer: Plyr.kind as string,
 };
 
 export const BuiltinAppsMap = {
     [BuiltinApps.DocsViewer]: AppDocsViewer,
-    [BuiltinApps.MediaPlayer]: AppMediaPlayer,
+    [BuiltinApps.MediaPlayer]: Plyr,
 }

package/src/View/CameraSynchronizer.ts

@@ -1,7 +1,7 @@
 import { AnimationMode } from "white-web-sdk";
 import { isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { Camera, View } from "white-web-sdk";
+import type { Camera, View, Size } from "white-web-sdk";
 import type { ICamera, ISize } from "../AttributesDelegate";
 
 export type SaveCamera = (camera: ICamera) => void;
@@ -30,12 +30,9 @@ export class CameraSynchronizer {
         this.remoteCamera = camera;
         this.remoteSize = size;
         if (this.remoteSize && this.rect) {
-            const wScale = this.rect.width / size.width;
-            const hScale = this.rect.height / size.height;
-            const nextScale = camera.scale * Math.min(wScale, hScale);
-            const config: Partial<Camera> & { animationMode: AnimationMode } = {
+            const nextScale = camera.scale * computedMinScale(size, this.rect);
+            const config: Partial<Camera> = {
                 scale: nextScale,
-                animationMode: AnimationMode.Continuous,
             }
             if (camera.centerX !== null) {
                 config.centerX = camera.centerX;
@@ -65,6 +62,12 @@ export class CameraSynchronizer {
     }
 
     private moveCamera(camera: Partial<Camera>) {
-        this.view?.moveCamera({ ...camera, animationMode: AnimationMode.Continuous });
+        this.view?.moveCamera({ ...camera, animationMode: AnimationMode.Immediately });
     }
 }
+
+export const computedMinScale = (remoteSize: Size, currentSize: Size) => {
+    const wScale = currentSize.width / remoteSize.width;
+    const hScale = currentSize.height / remoteSize.height;
+    return Math.min(wScale, hScale);
+}

package/src/View/MainView.ts

@@ -49,6 +49,16 @@ export class MainViewProxy {
                 }
             }
         }));
+        this.camera$.reaction(camera => {
+            if (camera) {
+                callbacks.emit("baseCameraChange", camera);
+            }
+        });
+        this.size$.reaction(size => {
+            if (size) {
+                callbacks.emit("baseSizeChange", size);
+            }
+        });
     }
 
     public createViewSync = () => {

package/src/View/ViewSync.ts

@@ -1,7 +1,6 @@
-import { ViewMode, AnimationMode } from "white-web-sdk";
-import { CameraSynchronizer } from "./CameraSynchronizer";
+import { ViewMode, AnimationMode, Size } from "white-web-sdk";
+import { CameraSynchronizer, computedMinScale } from "./CameraSynchronizer";
 import { combine } from "value-enhancer";
-import { isEqual } from "lodash";
 import { SideEffectManager } from "side-effect-manager";
 import type { Camera, View } from "white-web-sdk";
 import type { Val, ReadonlyVal } from "value-enhancer";
@@ -94,13 +93,11 @@ export class ViewSync {
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
         if (!camera) return;
-        this.synchronizer.onLocalCameraUpdate({ ...camera, id: this.context.uid });
-        const stage = this.context.stageRect$.value;
-        if (stage) {
-            const size = { width: stage.width, height: stage.height, id: this.context.uid };
-            if (!isEqual(size, this.context.size$.value)) {
-                this.context.storeSize(size);
-            }
+        if (this.context.size$.value && this.context.stageRect$.value) {
+            // 始终以远端的 size 为标准, 设置到 attributes 时根据尺寸的大小还原回去
+            const diffScale = computedMinScale(this.context.size$.value, this.context.stageRect$.value);
+            const remoteScale = camera.scale / diffScale;
+            this.synchronizer.onLocalCameraUpdate({ ...camera, scale: remoteScale, id: this.context.uid });
         }
     };
 

package/src/callback.ts

@@ -1,8 +1,9 @@
 import Emittery from "emittery";
 import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
-import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
+import type { Camera, CameraState, SceneState, Size, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
+import { ICamera, ISize } from "./AttributesDelegate";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -21,6 +22,8 @@ export type PublicEvent = {
     sceneStateChange: SceneState;
     pageStateChange: PageState;
     appClose: { appId: string; kind: string, error?: Error };
+    baseCameraChange: ICamera;
+    baseSizeChange: ISize;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/constants.ts

@@ -15,6 +15,8 @@ export enum Events {
     Refresh = "Refresh",
     InitMainViewCamera = "InitMainViewCamera",
     InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback",
+    MoveCamera = "MoveCamera",
+    MoveCameraToContain = "moveCameraToContain",
 }
 
 export const MagixEventName = "__WindowManger";

package/src/index.ts

@@ -9,14 +9,13 @@ import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants
 import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
-import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, isNumber } from "lodash";
+import { AnimationMode, InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
+import { isEqual, isNull, isObject, isNumber, isEmpty } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
 import { replaceRoomFunction } from "./Utils/RoomHacker";
 import { setupBuiltin } from "./BuiltinApps";
-import "video.js/dist/video-js.css";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
 import {
@@ -45,14 +44,17 @@ import type {
     Player,
     ImageInformation,
     SceneState,
- Rectangle} from "white-web-sdk";
+    Rectangle,
+    Size
+} from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
-import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxState } from "@netless/telebox-insider";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
+import { computedMinScale } from "./View/CameraSynchronizer";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -136,8 +138,6 @@ export type MountParams = {
     containerSizeRatio?: number;
     /** @deprecated */
     chessboard?: boolean;
-    /** 是否高亮显示同步区域, 默认为 true */
-    highlightStage?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
@@ -149,6 +149,12 @@ export type MountParams = {
     prefersColorScheme?: TeleBoxColorScheme;
     applianceIcons?: ApplianceIcons;
     fullscreen?: TeleBoxFullscreen;
+    /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
+    defaultBoxBodyStyle?: string | null;
+    /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
+    defaultBoxStageStyle?: string | null;
+    /** Theme variable */
+    theme?: TeleBoxManagerThemeConfig;
 };
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter });
@@ -663,17 +669,17 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
-    public get baseCamera$() {
+    public get baseCamera() {
         if (this.appManager) {
-            return this.appManager.mainViewProxy.camera$;
+            return this.appManager.mainViewProxy.camera$.value;
         } else {
             throw new Errors.AppManagerNotInitError();
         }
     }
 
-    public get baseSize$() {
+    public get baseSize() {
         if (this.appManager) {
-            return this.appManager.mainViewProxy.size$;
+            return this.appManager.mainViewProxy.size$.value;
         } else {
             throw new Errors.AppManagerNotInitError();
         }
@@ -793,30 +799,86 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera(camera: Partial<Camera> ): void {
+    public moveCamera(camera: Partial<Camera> & { animationMode?: AnimationMode } ): void {
         const mainViewCamera = { ...this.mainView.camera };
         const nextCamera = { ...mainViewCamera, ...camera };
         if (isEqual(nextCamera, mainViewCamera)) return;
         if (!this.appManager) return;
-        this.appManager.mainViewProxy.storeCamera({
-            id: this.appManager.uid,
-            ...nextCamera
-        });
+        if (camera.animationMode === AnimationMode.Immediately) {
+            this.appManager.mainViewProxy.storeCamera({
+                id: this.appManager.uid,
+                ...nextCamera
+            });
+        } else {
+            const remoteCamera = this.appManager.mainViewProxy.size$.value;
+            const currentSize = this.boxManager?.stageRect;
+            let nextScale;
+            if (camera.scale &&  remoteCamera && currentSize) {
+                nextScale = camera.scale * computedMinScale(remoteCamera, currentSize);
+            }
+            if (nextScale) {
+                this.mainView.moveCamera({
+                    ...camera,
+                    scale: nextScale,
+                });
+            } else {
+                this.mainView.moveCamera(camera);
+            }
+            this.appManager.dispatchInternalEvent(Events.MoveCamera, camera);
+            setTimeout(() => {
+                if (!this.appManager) return;
+                this.appManager.mainViewProxy.storeCamera({
+                    id: this.appManager.uid,
+                    ...nextCamera
+                });
+            }, 200);
+        }
     }
 
-    public moveCameraToContain(rectangle: Rectangle): void {
+    public moveCameraToContain(rectangle: Rectangle & { animationMode?: AnimationMode }): void {
         if (!this.appManager) return;
-        const mainViewSize = this.appManager.mainViewProxy.size$.value;
-        if (mainViewSize) {
-            const wScale = mainViewSize.width / rectangle.width;
-            const hScale = mainViewSize.height / rectangle.height;
-            const nextScale = Math.min(wScale, hScale);
-            this.appManager.mainViewProxy.storeCamera({
+        const camera: Partial<Camera> = {};
+        if (isNumber(rectangle.originX)) {
+            camera.centerX = rectangle.originX;
+        }
+        if (isNumber(rectangle.originY)) {
+            camera.centerY = rectangle.originY;
+        }
+        if (rectangle.animationMode === AnimationMode.Immediately) {
+            this.appManager.mainViewProxy.storeSize({
                 id: this.appManager.uid,
-                scale: nextScale,
-                centerX: rectangle.originX,
-                centerY: rectangle.originY,
+                width: rectangle.width,
+                height: rectangle.height,
             });
+            this.mainView.moveCameraToContain(rectangle);
+            if (!isEmpty(camera) && this.appManager.mainViewProxy.camera$.value) {
+                this.appManager.mainViewProxy.storeCamera({
+                    ...this.appManager.mainViewProxy.camera$.value,
+                    id: this.appManager.uid,
+                    centerX: this.mainView.camera.centerX,
+                    centerY: this.mainView.camera.centerY
+                });
+            }
+        } else {
+            this.appManager.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
+            this.mainView.moveCameraToContain(rectangle);
+            setTimeout(() => {
+                if (!this.appManager) return;
+                this.appManager.mainViewProxy.storeSize({
+                    id: this.appManager.uid,
+                    width: rectangle.width,
+                    height: rectangle.height,
+                });
+
+                if (!isEmpty(camera) && this.appManager.mainViewProxy.camera$.value) {
+                    this.appManager.mainViewProxy.storeCamera({
+                        ...this.appManager.mainViewProxy.camera$.value,
+                        id: this.appManager.uid,
+                        centerX: this.mainView.camera.centerX,
+                        centerY: this.mainView.camera.centerY
+                    });
+                }
+            }, 200);
         }
     }
 
@@ -969,6 +1031,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         this.boxManager?.teleBoxManager.setStageStyle(style);
     }
 
+    public setBaseSize(size: Size) {
+        this.appManager?.mainViewProxy.setMainViewSize(size);
+    }
+
     public createPPTHandler() {
         return {
             onPageJumpTo: (_pptUUID: string, index: number) => {

package/vite.config.js

@@ -15,7 +15,9 @@ export default defineConfig(({ mode }) => {
                 inline: [
                   "@juggle/resize-observer"
                 ]
-            }
+            },
+            setupFiles: "./test/setup.ts",
+            include: ["test/**/*.test.ts"],
         },
         define: {
             __APP_VERSION__: JSON.stringify(version),