@netless/fastboard-core 0.2.0 → 0.2.4

package/src/{utils.ts → helpers/utils.ts}

@@ -1,4 +1,4 @@
-import type { ConvertedFile, JoinRoomParams, SceneDefinition, Size } from "white-web-sdk";
+import type { ConvertedFile, JoinRoomParams, ReplayRoomParams, SceneDefinition, Size } from "white-web-sdk";
 import { WindowManager } from "@netless/window-manager";
 
 export function noop() {
@@ -53,7 +53,7 @@ export function convertedFileToScene(f: ConvertedFile, i: number) {
   };
 }
 
-export function ensureWindowManager(joinRoom: JoinRoomParams) {
+export function ensureWindowManager<T extends JoinRoomParams | ReplayRoomParams>(joinRoom: T): T {
   if (!joinRoom.invisiblePlugins || !joinRoom.invisiblePlugins.includes(WindowManager)) {
     joinRoom.invisiblePlugins = [...(joinRoom.invisiblePlugins || []), WindowManager];
   }

package/src/{core.ts → impl/app.ts}

@@ -1,19 +1,76 @@
+import type { PublicEvent, WindowManager } from "@netless/window-manager";
 import type {
   AnimationMode,
   ApplianceNames,
   Camera,
   Color,
   ConversionResponse,
+  HotKeys,
   MemberState,
   Rectangle,
+  Room,
+  RoomCallbacks,
   RoomState,
   SceneDefinition,
   ShapeType,
+  ViewCallbacks,
+  WhiteWebSdk,
 } from "white-web-sdk";
+import type { FastboardDisposer, FastboardInternalValue } from "../helpers/value";
 
 import { BuiltinApps } from "@netless/window-manager";
-import { FastboardAppBase } from "./base";
-import { convertedFileToScene, genUID, getImageSize, makeSlideParams } from "./utils";
+import { convertedFileToScene, genUID, getImageSize, makeSlideParams } from "../helpers/utils";
+import { createValue } from "../helpers/value";
+
+class FastboardAppBase {
+  public constructor(
+    readonly sdk: WhiteWebSdk,
+    readonly room: Room,
+    readonly manager: WindowManager,
+    readonly hotKeys: Partial<HotKeys>
+  ) {}
+
+  protected readonly _disposers: FastboardDisposer[] = [];
+  protected _destroyed = false;
+  protected _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("[FastboardApp] Can not call any method on destroyed FastboardApp.");
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  protected createValue: typeof createValue = (...args: [any, any]): any => {
+    const value = createValue(...args);
+    this._disposers.push((value as FastboardInternalValue<unknown>).dispose);
+    return value;
+  };
+
+  protected _addRoomListener<K extends keyof RoomCallbacks, T = RoomCallbacks[K]>(name: K, listener: T) {
+    this._assertNotDestroyed();
+    this.room.callbacks.on(name, listener);
+    return () => this.room.callbacks.off(name, listener);
+  }
+
+  protected _addManagerListener<K extends keyof PublicEvent>(name: K, set: (value: PublicEvent[K]) => void) {
+    this._assertNotDestroyed();
+    this.manager.emitter.on(name, set);
+    return () => this.manager.emitter.off(name, set);
+  }
+
+  protected _addMainViewListener<K extends keyof ViewCallbacks, T = ViewCallbacks[K]>(name: K, listener: T) {
+    this._assertNotDestroyed();
+    this.manager.mainView.callbacks.on(name, listener);
+    return () => this.manager.mainView.callbacks.off(name, listener);
+  }
+
+  public destroy() {
+    this._disposers.forEach(dispose => dispose());
+    this._disposers.length = 0;
+    this._destroyed = true;
+    this.manager.destroy();
+    return this.room.disconnect();
+  }
+}
 
 export interface InsertDocsStatic {
   readonly fileType: "pdf" | "ppt";
@@ -82,33 +139,29 @@ export class FastboardApp extends FastboardAppBase {
   /**
    * How many times can I call `app.redo()`?
    */
-  readonly canRedoSteps = this.createValue(this.manager.mainView.canRedoSteps, set =>
-    this._addMainViewListener("onCanRedoStepsUpdate", set)
+  readonly canRedoSteps = this.createValue(this.manager.canRedoSteps, set =>
+    this._addManagerListener("canRedoStepsChange", set)
   );
 
   /**
    * How many times can I call `app.undo()`?
    */
-  readonly canUndoSteps = this.createValue(this.manager.mainView.canUndoSteps, set =>
-    this._addMainViewListener("onCanUndoStepsUpdate", set)
+  readonly canUndoSteps = this.createValue(this.manager.canUndoSteps, set =>
+    this._addManagerListener("canUndoStepsChange", set)
   );
 
   /**
    * Current camera information of main view.
    */
-  readonly camera = this.createValue(
-    this.manager.mainView.camera,
-    set => this._addMainViewListener("onCameraUpdated", set),
-    this.manager.moveCamera.bind(this.manager)
+  readonly camera = this.createValue(this.manager.mainView.camera, set =>
+    this._addMainViewListener("onCameraUpdated", set)
   );
 
   /**
    * Current tool's info, like "is using pencil?", "what color?".
    */
-  readonly memberState = this.createValue<MemberState, SetMemberStateFn>(
-    this.room.state.memberState,
-    set => this._addRoomListener<RoomStateChanged>("onRoomStateChanged", ({ memberState: m }) => m && set(m)),
-    this.manager.mainView.setMemberState.bind(this.manager.mainView)
+  readonly memberState = this.createValue(this.room.state.memberState, set =>
+    this._addRoomListener("onRoomStateChanged", ({ memberState: m }) => m && set(m))
   );
 
   /**

package/src/impl/player.ts

@@ -0,0 +1,122 @@
+import type { Player, PlayerCallbacks, PlayerState, ViewCallbacks, WhiteWebSdk } from "white-web-sdk";
+import type { PublicEvent, WindowManager } from "@netless/window-manager";
+import type { FastboardDisposer, FastboardInternalValue } from "../helpers/value";
+
+import { createValue } from "../helpers/value";
+
+class FastboardPlayerBase {
+  public constructor(readonly sdk: WhiteWebSdk, readonly player: Player, readonly manager: WindowManager) {}
+
+  protected readonly _disposers: FastboardDisposer[] = [];
+  protected _destroyed = false;
+  protected _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("[FastboardPlayer] Can not call any method on destroyed FastboardPlayer.");
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  protected createValue: typeof createValue = (...args: [any, any]): any => {
+    const value = createValue(...args);
+    this._disposers.push((value as FastboardInternalValue<unknown>).dispose);
+    return value;
+  };
+
+  protected _addPlayerListener<K extends keyof PlayerCallbacks, T = PlayerCallbacks[K]>(
+    name: K,
+    listener: T
+  ) {
+    this._assertNotDestroyed();
+    this.player.callbacks.on(name, listener);
+    return () => this.player.callbacks.off(name, listener);
+  }
+
+  protected _addManagerListener<K extends keyof PublicEvent>(name: K, set: (value: PublicEvent[K]) => void) {
+    this._assertNotDestroyed();
+    this.manager.emitter.on(name, set);
+    return () => this.manager.emitter.off(name, set);
+  }
+
+  protected _addMainViewListener<K extends keyof ViewCallbacks, T = ViewCallbacks[K]>(name: K, listener: T) {
+    this._assertNotDestroyed();
+    this.manager.mainView.callbacks.on(name, listener);
+    return () => this.manager.mainView.callbacks.off(name, listener);
+  }
+
+  public destroy() {
+    this._disposers.forEach(dispose => dispose());
+    this._disposers.length = 0;
+    this._destroyed = true;
+    this.manager.destroy();
+    this.player.callbacks.off();
+  }
+}
+
+export class FastboardPlayer extends FastboardPlayerBase {
+  /**
+   * Render this player to some DOM.
+   */
+  bindContainer(container: HTMLElement) {
+    this._assertNotDestroyed();
+    this.manager.bindContainer(container);
+  }
+
+  /**
+   * Move window-manager's collector to some place.
+   */
+  bindCollector(container: HTMLElement) {
+    this._assertNotDestroyed();
+    this.manager.bindCollectorContainer(container);
+  }
+
+  readonly currentTime = this.createValue(
+    this.player.progressTime,
+    set => this._addPlayerListener("onProgressTimeChanged", set),
+    this.player.seekToProgressTime.bind(this.player)
+  );
+
+  readonly phase = this.createValue(this.player.phase, set => this._addPlayerListener("onPhaseChanged", set));
+
+  readonly canplay = this.createValue(this.player.isPlayable, set =>
+    this._addPlayerListener("onIsPlayableChanged", set)
+  );
+
+  private _setSpeed!: (value: number) => void;
+  readonly speed = this.createValue(
+    this.player.playbackSpeed,
+    set => {
+      this._setSpeed = set;
+    },
+    value => {
+      this.player.playbackSpeed = value;
+      this._setSpeed(value);
+    }
+  );
+
+  readonly state = this.createValue<PlayerState | null>(null, set => {
+    const update = () => set(this.player.state);
+    const dispose1 = this._addPlayerListener("onLoadFirstFrame", update);
+    const dispose2 = this._addPlayerListener("onPlayerStateChanged", update);
+    return () => (dispose1(), dispose2());
+  });
+
+  seek(timestamp: number) {
+    this._assertNotDestroyed();
+    return this.player.seekToProgressTime(timestamp);
+  }
+
+  play() {
+    this._assertNotDestroyed();
+    this.player.play();
+  }
+
+  pause() {
+    this._assertNotDestroyed();
+    this.player.pause();
+  }
+
+  stop() {
+    this._assertNotDestroyed();
+    this.player.stop();
+  }
+}

package/src/index.ts

@@ -1,80 +1,3 @@
-import type { HotKeys, JoinRoomParams, RoomCallbacks, WhiteWebSdkConfiguration } from "white-web-sdk";
-import type { MountParams } from "@netless/window-manager";
+import "./behaviors/register-slide";
 
-import { DefaultHotKeys, WhiteWebSdk } from "white-web-sdk";
-import { WindowManager } from "@netless/window-manager";
-
-import "./behaviors/register-apps";
-import { FastboardApp } from "./core";
-import { ensureWindowManager } from "./utils";
-
-export type { FastboardReadable, FastboardWritable } from "./value";
-
-export type { FastboardApp };
-
-export interface FastboardOptions {
-  sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState">;
-  joinRoom: Omit<JoinRoomParams, "useMultiViews" | "disableNewPencil" | "disableMagixEventDispatchLimit"> & {
-    callbacks?: Partial<RoomCallbacks>;
-  };
-  managerConfig?: Omit<MountParams, "room">;
-}
-
-/**
- * Create a FastboardApp instance.
- * @example
- * let app = await createFastboard({
- *   sdkConfig: {
- *     appIdentifier: import.meta.env.VITE_APPID,
- *   },
- *   joinRoom: {
- *     uid: unique_id,
- *     uuid: import.meta.env.VITE_ROOM_UUID,
- *     roomToken: import.meta.env.VITE_ROOM_TOKEN,
- *   },
- * })
- */
-export async function createFastboard({
-  sdkConfig,
-  joinRoom: { callbacks, ...joinRoomParams },
-  managerConfig,
-}: FastboardOptions) {
-  const sdk = new WhiteWebSdk({
-    ...sdkConfig,
-    useMobXState: true,
-  });
-
-  const hotKeys: Partial<HotKeys> = {
-    ...DefaultHotKeys,
-    changeToSelector: "s",
-    changeToLaserPointer: "z",
-    changeToPencil: "p",
-    changeToRectangle: "r",
-    changeToEllipse: "c",
-    changeToEraser: "e",
-    changeToText: "t",
-    changeToStraight: "l",
-    changeToArrow: "a",
-    changeToHand: "h",
-  };
-
-  const room = await sdk.joinRoom(
-    {
-      floatBar: true,
-      hotKeys,
-      ...ensureWindowManager(joinRoomParams),
-      useMultiViews: true,
-      disableNewPencil: false,
-      disableMagixEventDispatchLimit: true,
-    },
-    callbacks
-  );
-
-  const manager = await WindowManager.mount({
-    cursor: true,
-    ...managerConfig,
-    room,
-  });
-
-  return new FastboardApp(sdk, room, manager, hotKeys);
-}
+export * from "./minimal";

package/src/minimal.ts

@@ -0,0 +1,139 @@
+import type {
+  Displayer,
+  HotKeys,
+  JoinRoomParams,
+  PlayerCallbacks,
+  ReplayRoomParams,
+  Room,
+  RoomCallbacks,
+  WhiteWebSdkConfiguration,
+} from "white-web-sdk";
+import type { MountParams } from "@netless/window-manager";
+
+import { DefaultHotKeys, WhiteWebSdk } from "white-web-sdk";
+import { WindowManager } from "@netless/window-manager";
+
+import "./behaviors/register-apps";
+import { ensureWindowManager } from "./helpers/utils";
+import { FastboardApp } from "./impl/app";
+import { FastboardPlayer } from "./impl/player";
+
+export type { FastboardReadable, FastboardWritable } from "./helpers/value";
+
+export type { FastboardApp };
+
+export interface FastboardOptions {
+  sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState">;
+  joinRoom: Omit<JoinRoomParams, "useMultiViews" | "disableNewPencil" | "disableMagixEventDispatchLimit"> & {
+    callbacks?: Partial<RoomCallbacks>;
+  };
+  managerConfig?: Omit<MountParams, "room">;
+}
+
+/**
+ * Create a FastboardApp instance.
+ * @example
+ * let app = await createFastboard({
+ *   sdkConfig: {
+ *     appIdentifier: import.meta.env.VITE_APPID,
+ *   },
+ *   joinRoom: {
+ *     uid: unique_id,
+ *     uuid: import.meta.env.VITE_ROOM_UUID,
+ *     roomToken: import.meta.env.VITE_ROOM_TOKEN,
+ *   },
+ * })
+ */
+export async function createFastboard({
+  sdkConfig,
+  joinRoom: { callbacks, ...joinRoomParams },
+  managerConfig,
+}: FastboardOptions) {
+  const sdk = new WhiteWebSdk({
+    ...sdkConfig,
+    useMobXState: true,
+  });
+
+  const hotKeys: Partial<HotKeys> = {
+    ...DefaultHotKeys,
+    changeToSelector: "s",
+    changeToLaserPointer: "z",
+    changeToPencil: "p",
+    changeToRectangle: "r",
+    changeToEllipse: "c",
+    changeToEraser: "e",
+    changeToText: "t",
+    changeToStraight: "l",
+    changeToArrow: "a",
+    changeToHand: "h",
+  };
+
+  const room = await sdk.joinRoom(
+    {
+      floatBar: true,
+      hotKeys,
+      ...ensureWindowManager(joinRoomParams),
+      useMultiViews: true,
+      disableNewPencil: false,
+      disableMagixEventDispatchLimit: true,
+    },
+    callbacks
+  );
+
+  const manager = await WindowManager.mount({
+    cursor: true,
+    ...managerConfig,
+    room,
+  });
+
+  return new FastboardApp(sdk, room, manager, hotKeys);
+}
+
+export interface FastboardReplayOptions {
+  sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState">;
+  replayRoom: Omit<ReplayRoomParams, "useMultiViews"> & {
+    callbacks?: Partial<PlayerCallbacks>;
+  };
+  managerConfig?: Omit<MountParams, "room">;
+}
+
+/**
+ * Create a FastboardPlayer instance.
+ * @example
+ * let app = await replayFastboard({
+ *   sdkConfig: {
+ *     appIdentifier: import.meta.env.VITE_APPID,
+ *   },
+ *   replayRoom: {
+ *     uid: unique_id,
+ *     uuid: import.meta.env.VITE_ROOM_UUID,
+ *     roomToken: import.meta.env.VITE_ROOM_TOKEN,
+ *   },
+ * })
+ */
+export async function replayFastboard({
+  sdkConfig,
+  replayRoom: { callbacks, ...replayRoomParams },
+  managerConfig,
+}: FastboardReplayOptions) {
+  const sdk = new WhiteWebSdk({
+    ...sdkConfig,
+    useMobXState: true,
+  });
+
+  const player = await sdk.replayRoom(
+    {
+      ...ensureWindowManager(replayRoomParams),
+      useMultiViews: true,
+    },
+    callbacks
+  );
+
+  const manager = await WindowManager.mount({
+    cursor: true,
+    ...managerConfig,
+    room: player as Displayer as Room,
+  });
+
+  return new FastboardPlayer(sdk, player, manager);
+}

package/src/base.ts

@@ -1,55 +0,0 @@
-import type { PublicEvent, Room, WindowManager } from "@netless/window-manager";
-import type { HotKeys, WhiteWebSdk } from "white-web-sdk";
-import type { FastboardDisposer, FastboardInternalValue } from "./value";
-
-import { createValue } from "./value";
-
-export class FastboardAppBase {
-  public constructor(
-    readonly sdk: WhiteWebSdk,
-    readonly room: Room,
-    readonly manager: WindowManager,
-    readonly hotKeys: Partial<HotKeys>
-  ) {}
-
-  protected readonly _disposers: FastboardDisposer[] = [];
-  protected _destroyed = false;
-  protected _assertNotDestroyed() {
-    if (this._destroyed) {
-      throw new Error("[FastboardApp] Can not call any method on destroyed FastboardApp.");
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  protected createValue: typeof createValue = (...args: [any, any]): any => {
-    const value = createValue(...args);
-    this._disposers.push((value as FastboardInternalValue<unknown>).dispose);
-    return value;
-  };
-
-  protected _addRoomListener<T = unknown>(name: string, listener: T) {
-    this._assertNotDestroyed();
-    this.room.callbacks.on(name, listener);
-    return () => this.room.callbacks.off(name, listener);
-  }
-
-  protected _addManagerListener<K extends keyof PublicEvent>(name: K, set: (value: PublicEvent[K]) => void) {
-    this._assertNotDestroyed();
-    this.manager.emitter.on(name, set);
-    return () => this.manager.emitter.off(name, set);
-  }
-
-  protected _addMainViewListener<T = unknown>(name: string, listener: T) {
-    this._assertNotDestroyed();
-    this.manager.mainView.callbacks.on(name, listener);
-    return () => this.manager.mainView.callbacks.off(name, listener);
-  }
-
-  public destroy() {
-    this._disposers.forEach(dispose => dispose());
-    this._disposers.length = 0;
-    this._destroyed = true;
-    this.manager.destroy();
-    return this.room.disconnect();
-  }
-}