@netless/fastboard 0.0.1 → 0.0.5

package/src/components/PlayerControl/hooks.ts

@@ -0,0 +1,95 @@
+import type { DependencyList } from "react";
+import type { Player } from "white-web-sdk";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { PlayerPhase } from "white-web-sdk";
+
+const EMPTY_ARRAY: DependencyList = [];
+
+function useForceUpdate() {
+  const [, forceUpdate_] = useState({});
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
+}
+
+function useLastValue<T>(value: T) {
+  const ref = useRef<T>(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+export function usePlayer(player?: Player | null) {
+  const togglePlay = useCallback(() => {
+    if (player) {
+      switch (player.phase) {
+        case PlayerPhase.WaitingFirstFrame:
+        case PlayerPhase.Pause:
+        case PlayerPhase.Ended: {
+          player.play();
+          break;
+        }
+        case PlayerPhase.Playing: {
+          player.pause();
+          break;
+        }
+      }
+    }
+  }, [player]);
+
+  const seekToProgressTime = useCallback(
+    (time: number) => {
+      if (player) {
+        player.seekToProgressTime(time);
+      }
+    },
+    [player]
+  );
+
+  const lastPlayer = useLastValue(player);
+
+  const forceUpdate = useForceUpdate();
+
+  const setSpeed = useCallback(
+    (speed: number) => {
+      if (player) {
+        player.playbackSpeed = speed;
+        forceUpdate();
+      }
+    },
+    [forceUpdate, player]
+  );
+
+  useEffect(() => {
+    if (!lastPlayer && player) {
+      forceUpdate();
+    }
+  }, [forceUpdate, lastPlayer, player]);
+
+  useEffect(() => {
+    if (player) {
+      player.callbacks.on("onPhaseChanged", forceUpdate);
+      player.callbacks.on("onProgressTimeChanged", forceUpdate);
+      return () => {
+        player.callbacks.off("onPhaseChanged", forceUpdate);
+        player.callbacks.off("onProgressTimeChanged", forceUpdate);
+      };
+    }
+  }, [forceUpdate, player]);
+
+  const phase = player ? player.phase : PlayerPhase.WaitingFirstFrame;
+  const currentTime = player ? player.progressTime : 0;
+  const totalTime = player ? player.timeDuration : 0;
+  const speed = player ? player.playbackSpeed : 1;
+
+  return {
+    phase,
+    currentTime,
+    totalTime,
+    speed,
+    setSpeed,
+    togglePlay,
+    seekToProgressTime,
+  };
+}

package/src/components/PlayerControl/icons/Loading.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../types";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Loading = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z" fill={stroke}></path>
+    </svg>
+  );
+};

package/src/components/PlayerControl/icons/Pause.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../types";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Pause = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path d="M14 19h4V5h-4M6 19h4V5H6v14z" fill={stroke}></path>
+    </svg>
+  );
+};

package/src/components/PlayerControl/icons/Play.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../types";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Play = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path d="M8 5.14v14l11-7l-11-7z" fill={stroke}></path>
+    </svg>
+  );
+};

package/src/components/PlayerControl/icons/index.ts

@@ -0,0 +1,10 @@
+import { memo } from "react";
+import { Loading } from "./Loading";
+import { Pause } from "./Pause";
+import { Play } from "./Play";
+
+export const Icons = {
+  Play: memo(Play),
+  Pause: memo(Pause),
+  Loading: memo(Loading),
+};

package/src/components/PlayerControl/index.ts

@@ -0,0 +1 @@
+export { PlayerControl, name, type PlayerControlProps } from "./PlayerControl";

package/src/components/Root.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from "react";
 
-import { Lock } from "../internal/helpers";
-import { Instance } from "../internal";
+import { Lock, Instance } from "../internal";
 import { Toolbar } from "./Toolbar";
 import { RedoUndo } from "./RedoUndo";
 import { ZoomControl } from "./ZoomControl";

package/src/components/Toolbar/Content.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import { useInstance } from "../../internal";
-import { clamp } from "../../helpers";
+import { useInstance, clamp } from "../../internal";
 import { name } from "./Toolbar";
 import { ItemHeight, ItemsCount, MaxHeight, MinHeight } from "./const";
 import { DownButton, UpButton } from "./components/UpDownButtons";
@@ -16,42 +15,54 @@ import { PencilButton } from "./components/PencilButton";
 import { TextButton } from "./components/TextButton";
 import { ShapesButton } from "./components/ShapesButton";
 
-export interface ContentProps {
-  padding?: number;
-}
-
-export function Content({ padding = 16 }: ContentProps) {
+export function Content() {
   const app = useInstance();
   const ref = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
   const [parentHeight, setParentHeight] = useState(0);
 
+  const hasAppButton = app?.config.toolbar?.apps?.enable ?? true;
   const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
   const sectionHeight = clamp(
     parentHeight - 48 * (needScroll ? 3 : 1),
     MinHeight,
     MaxHeight
   );
+  const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
+  const disableScrollUp = scrollTop === 0;
+  const disableScrollDown = scrollTop === scrollBuffer;
+
+  const scrollTo = useCallback(
+    (height: number) => {
+      setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
+    },
+    [scrollBuffer, scrollTop]
+  );
 
-  const scrollTo = useCallback((height: number) => {
+  useEffect(() => {
     if (ref.current) {
-      ref.current.scrollTop = ref.current.scrollTop + height;
+      ref.current.scrollTop = scrollTop;
     }
-  }, []);
+  }, [scrollTop]);
 
   useEffect(() => {
     const container = ref.current?.parentElement?.parentElement;
     if (container) {
+      const { paddingTop, paddingBottom } = getComputedStyle(container);
+      const padding = parseInt(paddingTop) + parseInt(paddingBottom) || 0;
       const resizeObserver = new ResizeObserver(() => {
-        setParentHeight(container.getBoundingClientRect().height - padding * 2);
+        setParentHeight(container.getBoundingClientRect().height - padding);
       });
       resizeObserver.observe(container);
       return () => resizeObserver.disconnect();
     }
-  }, [padding]);
+  }, []);
 
   return (
     <>
-      {needScroll && <UpButton scrollTo={scrollTo} />}
+      {needScroll && (
+        <UpButton scrollTo={scrollTo} disabled={disableScrollUp} />
+      )}
       <div
         ref={ref}
         className={`${name}-section`}
@@ -67,14 +78,16 @@ export function Content({ padding = 16 }: ContentProps) {
         <ShapesButton />
         <EraserButton />
         <CleanButton />
-        {(app?.config.toolbar?.apps?.enable ?? true) && (
+        {hasAppButton && (
           <AppsButton
             content={app?.config.toolbar?.apps?.content}
             onClick={app?.config.toolbar?.apps?.onClick}
           />
         )}
       </div>
-      {needScroll && <DownButton scrollTo={scrollTo} />}
+      {needScroll && (
+        <DownButton scrollTo={scrollTo} disabled={disableScrollDown} />
+      )}
     </>
   );
 }

package/src/components/Toolbar/components/ColorBox.tsx

@@ -1,9 +1,9 @@
 import type { Color } from "white-web-sdk";
 
 import clsx from "clsx";
-import React from "react";
-import { useContext } from "react";
-import { isEqualArray } from "../../../helpers";
+import React, { useContext } from "react";
+
+import { isEqualArray } from "../../../internal";
 import { ToolbarContext } from "../Toolbar";
 
 const colors: Record<string, Color> = {

package/src/components/Toolbar/components/UpDownButtons.tsx

@@ -8,18 +8,17 @@ import { ToolbarContext } from "../Toolbar";
 import { ItemHeight } from "../const";
 
 export interface UpButtonProps {
+  disabled: boolean;
   scrollTo: (height: number) => void;
 }
 
-export function UpButton({ scrollTo }: UpButtonProps) {
-  const { theme, icons, writable } = useContext(ToolbarContext);
+export function UpButton({ disabled, scrollTo }: UpButtonProps) {
+  const { theme, icons } = useContext(ToolbarContext);
   const scrollUp = useCallback(() => scrollTo(-ItemHeight), [scrollTo]);
 
-  const disabled = !writable;
-
   return (
     <>
-      <Button content="Up" onClick={scrollUp}>
+      <Button content="Up" disabled={disabled} onClick={scrollUp}>
         <Icon
           fallback={<Icons.Up theme={theme} />}
           src={disabled ? icons?.upIconDisable : icons?.upIcon}
@@ -31,16 +30,14 @@ export function UpButton({ scrollTo }: UpButtonProps) {
   );
 }
 
-export function DownButton({ scrollTo }: UpButtonProps) {
-  const { theme, icons, writable } = useContext(ToolbarContext);
+export function DownButton({ disabled, scrollTo }: UpButtonProps) {
+  const { theme, icons } = useContext(ToolbarContext);
   const scrollDown = useCallback(() => scrollTo(ItemHeight), [scrollTo]);
 
-  const disabled = !writable;
-
   return (
     <>
       <CutLine />
-      <Button content="Down" onClick={scrollDown}>
+      <Button content="Down" disabled={disabled} onClick={scrollDown}>
         <Icon
           fallback={<Icons.Down theme={theme} />}
           src={disabled ? icons?.downIconDisable : icons?.downIcon}

package/src/components/Toolbar/hooks.ts

@@ -8,7 +8,7 @@ import type {
 } from "white-web-sdk";
 
 import { useCallback, useEffect, useState } from "react";
-import { noop } from "../../internal/helpers";
+import { noop } from "../../internal";
 
 export function useWritable(room?: Room | null) {
   const [value, setValue] = useState(false);

package/src/components/ZoomControl.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import React, { useCallback, useEffect, useState } from "react";
 import Tippy from "@tippyjs/react";
 
-import { clamp } from "../helpers";
+import { clamp } from "../internal";
 import { TopOffset } from "../theme";
 import { Icon } from "../icons";
 import { Minus } from "../icons/Minus";

package/src/hooks.ts

@@ -1,10 +1,9 @@
-import type { WhiteboardApp } from "./WhiteboardApp";
-import type { FastBoardConfig } from "./index";
+import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { createWhiteboardApp } from "./index";
 
-const SECRET_DEV_KEY = Symbol("fastboard working state");
+export type FastBoardConfig = WhiteboardAppConfig;
 
 /**
  * @example
@@ -24,65 +23,24 @@ export function useFastboard(config: FastBoardConfig): readonly [
   const [app, setApp] = useState<WhiteboardApp | null>(null);
   const [currentTarget, ref] = useState<HTMLDivElement | null>(null);
 
-  interface WorkingState {
-    app: WhiteboardApp | undefined;
-    type: "creating" | "disposing" | undefined;
-    next: HTMLDivElement | null | undefined;
-  }
-
-  const working = useRef<WorkingState>({
-    app: undefined,
-    type: undefined,
-    next: undefined,
-  });
-
   useEffect(() => {
-    // == HOT RELOAD ==
-    if (process.env.NODE_ENV !== "production") {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const exist = (window as any)[SECRET_DEV_KEY];
-      if (exist) {
-        working.current = exist;
-      } else {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (window as any)[SECRET_DEV_KEY] = working.current;
-      }
-    }
+    let isMounted = true;
+    const promise = createWhiteboardApp(config).then(app => {
+      if (isMounted) setApp(app);
+    });
+    return () => {
+      isMounted = false;
+      promise.then(() => app?.dispose());
+    };
+    // ignore config and app change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    if (working.current.type) {
-      working.current.next = currentTarget;
-      return;
+  useEffect(() => {
+    if (app) {
+      app.bindElement(currentTarget);
     }
-
-    (async () => {
-      let target: WorkingState["next"] = currentTarget;
-
-      do {
-        if (target) {
-          working.current.type = "creating";
-          if (working.current.app) {
-            await working.current.app.dispose();
-          }
-          working.current.app = await createWhiteboardApp({
-            ...config,
-            target: target,
-          });
-          setApp(working.current.app);
-        } else if (target === null) {
-          working.current.type = "disposing";
-          if (working.current.app) {
-            await working.current.app.dispose();
-            working.current.app = undefined;
-          }
-          setApp(null);
-        }
-        working.current.type = undefined;
-
-        target = working.current.next;
-        working.current.next = undefined;
-      } while (target !== undefined);
-    })();
-  }, [config, currentTarget]);
+  }, [app, currentTarget]);
 
   return Object.assign([app, ref] as const, { app, ref });
 }

package/src/i18n/en.json

@@ -25,6 +25,7 @@
     "speechBalloon": "Speech Balloon",
     "rectangle": "Rectangle",
     "ellipse": "Ellipse",
-    "straight": "Straight"
+    "straight": "Straight",
+    "speed": "Speed"
   }
 }

package/src/i18n/zh-CN.json

@@ -26,6 +26,7 @@
     "speechBalloon": "气球",
     "rectangle": "矩形",
     "ellipse": "椭圆",
-    "straight": "直线"
+    "straight": "直线",
+    "speed": "速度"
   }
 }

package/src/index.ts

@@ -10,13 +10,20 @@ export { PageControl, type PageControlProps } from "./components/PageControl";
 export { RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
 export { Toolbar, type ToolbarProps } from "./components/Toolbar";
 export { ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
+export {
+  PlayerControl,
+  type PlayerControlProps,
+} from "./components/PlayerControl";
 export * from "./WhiteboardApp";
 export * from "./hooks";
 
 export const register = WindowManager.register.bind(WindowManager);
 
-export type FastBoardConfig = Omit<WhiteboardAppConfig, "target">;
-
+/**
+ * @example
+ * let app = await createWhiteboardApp(config)
+ * app.bindElement(el)
+ */
 export async function createWhiteboardApp(
   config: WhiteboardAppConfig
 ): Promise<WhiteboardApp> {

package/src/internal/Instance.tsx

@@ -37,7 +37,6 @@ export type InsertDocsParams = InsertDocsStatic | InsertDocsDynamic;
 export type Language = "zh-CN" | "en-US";
 
 export interface WhiteboardAppConfig {
-  readonly target: HTMLElement;
   readonly sdkConfig: SdkConfig;
   readonly joinRoom: JoinRoom;
   readonly managerConfig?: Omit<ManagerConfig, "container">;
@@ -63,7 +62,6 @@ export class Instance {
 
   readonly config: WhiteboardAppConfig;
 
-  target: HTMLElement | null = null;
   sdk: WhiteWebSdk | null = null;
   room: Room | null = null;
   manager: WindowManager | null = null;
@@ -84,14 +82,41 @@ export class Instance {
   }
 
   constructor(config: WhiteboardAppConfig) {
-    this.target = config.target;
     this.config = config;
     this.refreshReadyPromise();
+    this.initialize();
+  }
+
+  private _target: HTMLElement | null = null;
+
+  async initialize() {
+    const essentials = await mountWhiteboard(
+      this.config.sdkConfig,
+      this.config.joinRoom,
+      this.config.managerConfig || {},
+      this.config.language || "en-US"
+    );
+    this.accept(essentials);
+    this.resolveReady();
+  }
+
+  get target(): HTMLElement | null {
+    return this._target;
+  }
+
+  set target(value: HTMLElement | null) {
+    if (this._target && value) {
+      ReactDOM.unmountComponentAtNode(this._target);
+    }
+    this._target = value;
     this.forceUpdate();
   }
 
-  forceUpdate() {
-    ReactDOM.render(<Root instance={this} />, this.target);
+  async forceUpdate() {
+    await this.readyPromise;
+    if (this.target) {
+      ReactDOM.render(<Root instance={this} />, this.target);
+    }
   }
 
   accept({ sdk, room, manager, i18n }: AcceptParams) {
@@ -112,19 +137,11 @@ export class Instance {
     }
   }
 
-  async mount(container: HTMLElement) {
-    if (this.room) {
-      console.warn("[WhiteboardApp] already mounted");
-      return;
+  async mount(node: HTMLElement) {
+    await this.readyPromise;
+    if (this.manager) {
+      this.manager.bindContainer(node);
     }
-    const essentials = await mountWhiteboard(
-      this.config.sdkConfig,
-      this.config.joinRoom,
-      { ...this.config.managerConfig, container },
-      this.config.language
-    );
-    this.accept(essentials);
-    this.resolveReady();
   }
 
   async unmount() {
@@ -203,8 +220,12 @@ export class Instance {
     });
   }
 
-  changeLanguage(language: Language) {
-    return this.i18n?.changeLanguage(language);
+  async changeLanguage(language: Language) {
+    try {
+      await this.i18n?.changeLanguage(language);
+    } finally {
+      await this.forceUpdate();
+    }
   }
 }
 

package/src/internal/helpers.ts

@@ -2,6 +2,21 @@ export function noop() {
   return;
 }
 
+export function applyStyles(css: string) {
+  const el = document.createElement("style");
+  el.appendChild(document.createTextNode(css));
+  document.head.appendChild(el);
+  return el;
+}
+
+export function clamp(value: number, min: number, max: number) {
+  return value < min ? min : value > max ? max : value;
+}
+
+export function isEqualArray<T>(a: T[], b: T[]) {
+  return a.length === b.length && a.every((e, i) => e === b[i]);
+}
+
 export type TaskFn = () => Promise<void> | void;
 
 export class Lock {

package/src/internal/index.ts

@@ -1,2 +1,3 @@
+export * from "./helpers";
 export * from "./mount-whiteboard";
 export * from "./Instance";

package/src/internal/mount-whiteboard.ts

@@ -1,5 +1,9 @@
 import type { MountParams } from "@netless/window-manager";
-import type { JoinRoomParams, WhiteWebSdkConfiguration } from "white-web-sdk";
+import type {
+  JoinRoomParams,
+  RoomCallbacks,
+  WhiteWebSdkConfiguration,
+} from "white-web-sdk";
 import type { Essentials, Language } from "./instance";
 
 import { WindowManager } from "@netless/window-manager";
@@ -13,7 +17,7 @@ export type SdkConfig = Omit<
 export type JoinRoom = Omit<
   JoinRoomParams,
   "useMultiViews" | "disableMagixEventDispatchLimit"
->;
+> & { callbacks?: Partial<RoomCallbacks> };
 export type ManagerConfig = Omit<MountParams, "room">;
 
 function ensureWindowManager(joinRoom: JoinRoom) {
@@ -45,7 +49,7 @@ export async function mountWhiteboard(
   sdkConfig: SdkConfig,
   joinRoom: JoinRoom,
   managerConfig: ManagerConfig,
-  language?: Language
+  language: Language
 ): Promise<Essentials> {
   const sdk = new WhiteWebSdk({
     ...sdkConfig,
@@ -53,7 +57,10 @@ export async function mountWhiteboard(
   });
 
   ensureWindowManager(joinRoom);
-  const room = await sdk.joinRoom({
+  joinRoom = { ...joinRoom };
+  const callbacks = joinRoom.callbacks;
+  delete joinRoom.callbacks;
+  const joinRoomParams: JoinRoomParams = {
     floatBar: true,
     hotKeys: {
       ...DefaultHotKeys,
@@ -63,7 +70,8 @@ export async function mountWhiteboard(
     useMultiViews: true,
     disableNewPencil: false,
     disableMagixEventDispatchLimit: true,
-  });
+  };
+  const room = await sdk.joinRoom(joinRoomParams, callbacks);
 
   const manager = await WindowManager.mount({
     cursor: true,

package/src/style.scss

@@ -7,6 +7,7 @@
 @import "./components/PageControl.scss";
 @import "./components/ZoomControl.scss";
 @import "./components/Toolbar/Toolbar.scss";
+@import "./components/PlayerControl/PlayerControl.scss";
 
 .tippy-box.fastboard-tip {
   color: #eee;