@netless/window-manager 1.0.0-canary.32 → 1.0.0-canary.35

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/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/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/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 { InvisiblePlugin, isPlayer, isRoom, RoomPhase, Size, ViewMode } from "white-web-sdk";
 import { isEqual, isNull, isObject, isNumber } 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 {
@@ -136,8 +135,6 @@ export type MountParams = {
     containerSizeRatio?: number;
     /** @deprecated */
     chessboard?: boolean;
-    /** 是否高亮显示同步区域, 默认为 true */
-    highlightStage?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
@@ -663,17 +660,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();
         }
@@ -969,6 +966,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),