@netless/fastboard-core 0.2.12 → 0.3.0-canary.1

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@netless/fastboard-core",
-  "version": "0.2.12",
+  "version": "0.3.0-canary.1",
   "description": "A tiny wrapper of white-web-sdk and @netless/window-manager.",
   "main": "dist/index.js",
   "files": [
     "src",
-    "dist",
-    "minimal.mjs",
-    "minimal.ts"
+    "dist"
   ],
+  "repository": "netless-io/fastboard",
   "dependencies": {
     "@netless/app-slide": "^0.0.56"
   },
@@ -16,16 +15,12 @@
     "@netless/window-manager": ">=0.4.0",
     "white-web-sdk": ">=2.16.0"
   },
-  "devDependencies": {
-    "@netless/window-manager": "^0.4.11-canary.1",
-    "tsup": "^5.12.0",
-    "white-web-sdk": "^2.16.10"
-  },
   "scripts": {
-    "build": "tsup",
     "cleanup": "rimraf dist",
-    "check": "tsc --noEmit"
+    "check": "tsc --noEmit",
+    "build": "tsup"
   },
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts"
+  "types": "dist/index.d.ts",
+  "readme": "## @netless/fastboard-core\n\nA tiny wrapper of white-web-sdk and @netless/window-manager.\n\nUsed by [@netless/fastboard-ui](https://github.com/netless-io/fastboard/tree/main/packages/fastboard-ui).\n\n### License\n\nMIT @ [netless](https://github.com/netless-io)\n"
 }

package/src/behaviors/{register-apps.ts → index.ts}

@@ -1,11 +1,12 @@
 import type { RegisterParams } from "@netless/window-manager";
 import { WindowManager } from "@netless/window-manager";
+import AppSlide from "@netless/app-slide";
 
 export interface AppsConfig {
   [kind: string]: Omit<RegisterParams, "kind">;
 }
 
-export const DefaultApps: AppsConfig = {
+const DefaultApps: AppsConfig = {
   Monaco: {
     src: "https://netless-app.oss-cn-hangzhou.aliyuncs.com/@netless/app-monaco/0.1.12/dist/main.iife.js",
   },
@@ -27,6 +28,12 @@ export const DefaultApps: AppsConfig = {
   },
 };
 
+WindowManager.register({
+  kind: "Slide",
+  appOptions: { debug: false },
+  src: AppSlide,
+});
+
 for (const kind in DefaultApps) {
   if (Object.prototype.hasOwnProperty.call(DefaultApps, kind)) {
     const options = DefaultApps[kind];

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

@@ -1,26 +1,37 @@
-import type { PublicEvent, WindowManager } from "@netless/window-manager";
+import type { AddPageParams, PublicEvent, MountParams } from "@netless/window-manager";
 import type {
   AnimationMode,
   ApplianceNames,
   Camera,
   Color,
   ConversionResponse,
+  HotKey,
   HotKeys,
+  JoinRoomParams,
   MemberState,
   Rectangle,
   Room,
+  RoomPhase as RoomPhaseEnum,
   RoomCallbacks,
   RoomState,
   SceneDefinition,
   ShapeType,
   ViewCallbacks,
-  WhiteWebSdk,
+  WhiteWebSdkConfiguration,
 } from "white-web-sdk";
-import type { FastboardDisposer, FastboardInternalValue } from "../helpers/value";
 
-import { BuiltinApps } from "@netless/window-manager";
-import { convertedFileToScene, genUID, getImageSize, makeSlideParams } from "../helpers/utils";
-import { createValue } from "../helpers/value";
+import { DefaultHotKeys, WhiteWebSdk, contentModeScale } from "white-web-sdk";
+import { BuiltinApps, WindowManager } from "@netless/window-manager";
+import {
+  getImageSize,
+  genUID,
+  convertedFileToScene,
+  makeSlideParams,
+  readable,
+  writable,
+  warn,
+} from "../utils";
+import { ensure_window_manager, transform_app_status } from "../internal";
 
 class FastboardAppBase {
   public constructor(
@@ -30,48 +41,72 @@ class FastboardAppBase {
     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.");
+      throw new Error("FastboardApp has been destroyed");
     }
   }
 
-  // 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) {
+  protected _addRoomListener<K extends keyof RoomCallbacks>(name: K, listener: RoomCallbacks[K]) {
     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) {
+  protected _addManagerListener<K extends keyof PublicEvent>(
+    name: K,
+    listener: (value: PublicEvent[K]) => void
+  ) {
     this._assertNotDestroyed();
-    this.manager.emitter.on(name, set);
-    return () => this.manager.emitter.off(name, set);
+    this.manager.emitter.on(name, listener);
+    return () => this.manager.emitter.off(name, listener);
   }
 
-  protected _addMainViewListener<K extends keyof ViewCallbacks, T = ViewCallbacks[K]>(name: K, listener: T) {
+  protected _addMainViewListener<K extends keyof ViewCallbacks>(name: K, listener: ViewCallbacks[K]) {
     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();
   }
 }
 
+type RoomPhase = `${RoomPhaseEnum}`;
+
+export type {
+  AddPageParams,
+  AnimationMode,
+  ApplianceNames,
+  Camera,
+  Color,
+  ConversionResponse,
+  HotKey,
+  HotKeys,
+  JoinRoomParams,
+  MemberState,
+  MountParams,
+  PublicEvent,
+  Rectangle,
+  Room,
+  RoomPhase,
+  RoomCallbacks,
+  RoomState,
+  SceneDefinition,
+  ShapeType,
+  ViewCallbacks,
+  WhiteWebSdk,
+  WhiteWebSdkConfiguration,
+  WindowManager,
+};
+
+export type Appliance = `${ApplianceNames}`;
+export type Shape = `${ShapeType}`;
+
 export interface InsertDocsStatic {
   readonly fileType: "pdf";
   readonly scenePath: string;
@@ -122,7 +157,7 @@ export class FastboardApp extends FastboardAppBase {
   /**
    * Is current room writable?
    */
-  readonly writable = this.createValue(
+  readonly writable = writable(
     this.room.isWritable,
     set => this._addRoomListener("onEnableWriteNowChanged", () => set(this.room.isWritable)),
     this.room.setWritable.bind(this.room)
@@ -131,50 +166,50 @@ export class FastboardApp extends FastboardAppBase {
   /**
    * Current window-manager's windows' state (is it maximized?).
    */
-  readonly boxState = this.createValue(this.manager.boxState, set =>
-    this._addManagerListener("boxStateChange", set)
-  );
+  readonly boxState = readable(this.manager.boxState, set => this._addManagerListener("boxStateChange", set));
 
   /**
    * Current window-manager's focused app's id.
    * @example "HelloWorld-1A2b3C4d"
    */
-  readonly focusedApp = this.createValue(this.manager.focused, set =>
-    this._addManagerListener("focusedChange", set)
-  );
+  readonly focusedApp = readable(this.manager.focused, set => this._addManagerListener("focusedChange", set));
 
   /**
    * How many times can I call `app.redo()`?
    */
-  readonly canRedoSteps = this.createValue(this.manager.canRedoSteps, set =>
+  readonly canRedoSteps = readable(this.manager.canRedoSteps, set =>
     this._addManagerListener("canRedoStepsChange", set)
   );
 
   /**
    * How many times can I call `app.undo()`?
    */
-  readonly canUndoSteps = this.createValue(this.manager.canUndoSteps, set =>
+  readonly canUndoSteps = readable(this.manager.canUndoSteps, set =>
     this._addManagerListener("canUndoStepsChange", set)
   );
 
   /**
    * Current camera information of main view.
+   *
+   * Change the camera position by `app.moveCamera()`.
    */
-  readonly camera = this.createValue(this.manager.mainView.camera, set =>
+  readonly camera = readable(this.manager.mainView.camera, set =>
     this._addMainViewListener("onCameraUpdated", set)
   );
 
   /**
    * Current tool's info, like "is using pencil?", "what color?".
+   *
+   * Change the tool by `app.setAppliance()`.
    */
-  readonly memberState = this.createValue(this.room.state.memberState, set =>
+  readonly memberState = readable(this.room.state.memberState, set =>
     this._addRoomListener("onRoomStateChanged", ({ memberState: m }) => m && set(m))
   );
 
   /**
    * 0..n-1, current index of main view scenes.
    */
-  readonly sceneIndex = this.createValue(
+  readonly sceneIndex = writable(
     this.manager.mainViewSceneIndex,
     set => this._addManagerListener("mainViewSceneIndexChange", set),
     this.manager.setMainViewSceneIndex.bind(this.manager)
@@ -183,7 +218,7 @@ export class FastboardApp extends FastboardAppBase {
   /**
    * How many pages are in the main view?
    */
-  readonly sceneLength = this.createValue(this.manager.mainViewScenesLength, set =>
+  readonly sceneLength = readable(this.manager.mainViewScenesLength, set =>
     this._addManagerListener("mainViewScenesLengthChange", set)
   );
 
@@ -191,12 +226,9 @@ export class FastboardApp extends FastboardAppBase {
   /**
    * Apps status.
    */
-  readonly appsStatus = this.createValue<AppsStatus>({}, set =>
+  readonly appsStatus = readable<AppsStatus>({}, set =>
     this._addManagerListener("loadApp", ({ kind, status, reason }) => {
-      this._appsStatus[kind] = {
-        status: status === "start" ? "loading" : status === "failed" ? "failed" : "idle",
-        reason,
-      };
+      this._appsStatus[kind] = { status: transform_app_status(status), reason };
       set(this._appsStatus);
     })
   );
@@ -206,7 +238,7 @@ export class FastboardApp extends FastboardAppBase {
    */
   undo() {
     this._assertNotDestroyed();
-    this.manager.mainView.undo();
+    this.manager.undo();
   }
 
   /**
@@ -214,7 +246,7 @@ export class FastboardApp extends FastboardAppBase {
    */
   redo() {
     this._assertNotDestroyed();
-    this.manager.mainView.redo();
+    this.manager.redo();
   }
 
   /**
@@ -244,9 +276,12 @@ export class FastboardApp extends FastboardAppBase {
   /**
    * Set current tool, like "pencil".
    */
-  setAppliance(appliance: ApplianceNames, shape?: ShapeType) {
+  setAppliance(appliance: ApplianceNames | Appliance, shape?: ShapeType | Shape) {
     this._assertNotDestroyed();
-    this.manager.mainView.setMemberState({ currentApplianceName: appliance, shapeType: shape });
+    this.manager.mainView.setMemberState({
+      currentApplianceName: appliance as ApplianceNames,
+      shapeType: shape as ShapeType,
+    });
   }
 
   setStrokeWidth(strokeWidth: number) {
@@ -259,6 +294,21 @@ export class FastboardApp extends FastboardAppBase {
     this.manager.mainView.setMemberState({ strokeColor });
   }
 
+  prevPage() {
+    this._assertNotDestroyed();
+    return this.manager.prevPage();
+  }
+
+  nextPage() {
+    this._assertNotDestroyed();
+    return this.manager.nextPage();
+  }
+
+  addPage(params?: AddPageParams) {
+    this._assertNotDestroyed();
+    return this.manager.addPage(params);
+  }
+
   /**
    * Insert an image to the main view.
    */
@@ -310,19 +360,20 @@ export class FastboardApp extends FastboardAppBase {
   insertDocs(params: InsertDocsParams): Promise<string | undefined>;
 
   insertDocs(arg1: string | InsertDocsParams, arg2?: ConversionResponse) {
+    this._assertNotDestroyed();
     if (typeof arg1 === "object" && "fileType" in arg1) {
       return this._insertDocsImpl(arg1);
     } else if (arg2 && arg2.status !== "Finished") {
-      throw new Error("[FastboardApp] Can not insert a converting doc.");
+      throw new Error("FastboardApp cannot insert a converting doc.");
     } else if (arg2 && arg2.progress) {
-      const scenes: SceneDefinition[] = arg2.progress.convertedFileList.map(convertedFileToScene);
+      const title = arg1;
       const scenePath = `/${arg2.uuid}/${genUID()}`;
-      const { emptyScenes, taskId, url } = makeSlideParams(scenes);
+      const scenes1 = arg2.progress.convertedFileList.map(convertedFileToScene);
+      const { scenes, taskId, url } = makeSlideParams(scenes1);
       if (taskId && url) {
-        const title = arg1;
-        return this._insertDocsImpl({ fileType: "pptx", scenePath, taskId, title, url, scenes: emptyScenes });
+        return this._insertDocsImpl({ fileType: "pptx", scenePath, scenes, title, taskId, url });
       } else {
-        return this._insertDocsImpl({ fileType: "pdf", scenePath, scenes, title: arg1 });
+        return this._insertDocsImpl({ fileType: "pdf", scenePath, scenes: scenes1, title });
       }
     }
   }
@@ -336,6 +387,9 @@ export class FastboardApp extends FastboardAppBase {
           options: { scenePath, title, scenes },
         });
       case "pptx":
+        if (scenes && scenes[0].ppt) {
+          warn("no-ppt-in-scenes");
+        }
         return this.manager.addApp({
           kind: "Slide",
           options: { scenePath, title, scenes },
@@ -389,3 +443,78 @@ export class FastboardApp extends FastboardAppBase {
     });
   }
 }
+
+export interface FastboardOptions {
+  sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState"> & {
+    region: NonNullable<WhiteWebSdkConfiguration["region"]>;
+  };
+  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,
+ *     region: 'cn-hz',
+ *   },
+ *   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,
+      ...ensure_window_manager(joinRoomParams),
+      useMultiViews: true,
+      disableNewPencil: false,
+      disableMagixEventDispatchLimit: true,
+    },
+    callbacks
+  );
+
+  const manager = await WindowManager.mount({
+    cursor: true,
+    ...managerConfig,
+    room,
+  });
+
+  manager.mainView.setCameraBound({
+    minContentMode: contentModeScale(0.3),
+    maxContentMode: contentModeScale(3),
+  });
+
+  return new FastboardApp(sdk, room, manager, hotKeys);
+}

package/src/impl/FastboardPlayer.ts

@@ -0,0 +1,203 @@
+import type { MountParams, PublicEvent } from "@netless/window-manager";
+import type {
+  Player,
+  PlayerPhase as PlayerPhaseEnum,
+  PlayerCallbacks,
+  PlayerState,
+  PlayerSeekingResult,
+  ReplayRoomParams,
+  ViewCallbacks,
+  WhiteWebSdkConfiguration,
+} from "white-web-sdk";
+
+import { WhiteWebSdk } from "white-web-sdk";
+import { WindowManager } from "@netless/window-manager";
+import { readable, writable } from "../utils";
+import { ensure_window_manager } from "../internal";
+
+class FastboardPlayerBase {
+  public constructor(readonly sdk: WhiteWebSdk, readonly player: Player, readonly manager: WindowManager) {}
+
+  protected _destroyed = false;
+  protected _assertNotDestroyed() {
+    if (this._destroyed) {
+      throw new Error("FastboardApp has been destroyed");
+    }
+  }
+
+  protected _addPlayerListener<K extends keyof PlayerCallbacks>(name: K, listener: PlayerCallbacks[K]) {
+    this._assertNotDestroyed();
+    this.player.callbacks.on(name, listener);
+    return () => this.player.callbacks.off(name, listener);
+  }
+
+  protected _addManagerListener<K extends keyof PublicEvent>(
+    name: K,
+    listener: (value: PublicEvent[K]) => void
+  ) {
+    this._assertNotDestroyed();
+    this.manager.emitter.on(name, listener);
+    return () => this.manager.emitter.off(name, listener);
+  }
+
+  protected _addMainViewListener<K extends keyof ViewCallbacks>(name: K, listener: ViewCallbacks[K]) {
+    this._assertNotDestroyed();
+    this.manager.mainView.callbacks.on(name, listener);
+    return () => this.manager.mainView.callbacks.off(name, listener);
+  }
+
+  public destroy() {
+    this._destroyed = true;
+    this.manager.destroy();
+    return this.player.callbacks.off();
+  }
+}
+
+type PlayerPhase = `${PlayerPhaseEnum}`;
+
+export type { PlayerPhase, PlayerSeekingResult };
+
+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 = writable(
+    this.player.progressTime,
+    set => this._addPlayerListener("onProgressTimeChanged", set),
+    this.player.seekToProgressTime.bind(this.player)
+  );
+
+  readonly phase = readable<PlayerPhase>(this.player.phase, set =>
+    this._addPlayerListener("onPhaseChanged", set)
+  );
+
+  readonly canplay = readable(this.player.isPlayable, set =>
+    this._addPlayerListener("onIsPlayableChanged", set)
+  );
+
+  private _setSpeed!: (value: number) => void;
+  readonly speed = writable(
+    this.player.playbackSpeed,
+    set => {
+      this._setSpeed = set;
+    },
+    value => {
+      this.player.playbackSpeed = value;
+      this._setSpeed(value);
+    }
+  );
+
+  private _setReady!: (value: boolean) => void;
+  readonly ready = readable(false, set => {
+    this._setReady = set;
+  });
+
+  private _setDuration!: (value: number) => void;
+  readonly duration = readable(0, set => {
+    this._setDuration = set;
+  });
+
+  readonly state = readable<PlayerState | null>(null, set => {
+    const update = () => set(this.player.state);
+    this.player.callbacks.once("onLoadFirstFrame", () => {
+      this._setDuration(this.player.timeDuration);
+      this._setReady(true);
+      update();
+    });
+    return this._addPlayerListener("onPlayerStateChanged", update);
+  });
+
+  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();
+  }
+
+  setSpeed(value: number) {
+    this._assertNotDestroyed();
+    this.speed.set(value);
+  }
+}
+
+export interface FastboardReplayOptions {
+  sdkConfig: Omit<WhiteWebSdkConfiguration, "useMobXState"> & {
+    region: NonNullable<WhiteWebSdkConfiguration["region"]>;
+  };
+  replayRoom: Omit<ReplayRoomParams, "useMultiViews"> & {
+    callbacks?: Partial<PlayerCallbacks>;
+  };
+  managerConfig?: Omit<MountParams, "room">;
+}
+
+/**
+ * Create a FastboardApp instance.
+ * @example
+ * let player = await replayFastboard({
+ *   sdkConfig: {
+ *     appIdentifier: import.meta.env.VITE_APPID,
+ *     region: 'cn-hz',
+ *   },
+ *   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(
+    {
+      ...ensure_window_manager(replayRoomParams),
+      useMultiViews: true,
+    },
+    callbacks
+  );
+
+  const managerPromise = WindowManager.mount({
+    cursor: true,
+    ...managerConfig,
+    room: player,
+  });
+
+  player.play();
+  const manager = await managerPromise;
+  player.pause();
+
+  return new FastboardPlayer(sdk, player, manager);
+}

package/src/impl/index.ts

@@ -0,0 +1,4 @@
+export * from "./FastboardApp";
+export * from "./FastboardPlayer";
+
+import "../behaviors";

package/src/index.ts

@@ -1,3 +1,2 @@
-export * from "./minimal";
-
-import "./behaviors/register-slide";
+export * from "./utils";
+export * from "./impl";

package/src/internal.ts

@@ -0,0 +1,14 @@
+import type { JoinRoomParams, ReplayRoomParams } from "white-web-sdk";
+import type { PublicEvent } from "@netless/window-manager";
+import { WindowManager } from "@netless/window-manager";
+
+export function ensure_window_manager<T extends JoinRoomParams | ReplayRoomParams>(joinRoom: T): T {
+  if (!joinRoom.invisiblePlugins || !joinRoom.invisiblePlugins.includes(WindowManager)) {
+    joinRoom.invisiblePlugins = [...(joinRoom.invisiblePlugins || []), WindowManager];
+  }
+  return joinRoom;
+}
+
+export function transform_app_status(status: PublicEvent["loadApp"]["status"]) {
+  return status === "start" ? "loading" : status === "failed" ? "failed" : "idle";
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./store";
+export * from "./misc";
+export * from "./uid";
+export * from "./warn";