@netless/fastboard 0.0.7 → 0.0.11

package/src/components/hooks.ts

@@ -0,0 +1,80 @@
+import type { Room, WindowManager } from "@netless/window-manager";
+import { BuiltinApps } from "@netless/window-manager";
+import { useEffect, useState } from "react";
+
+export function useWritable(room?: Room | null) {
+  const [writable, setWritable] = useState(false);
+
+  useEffect(() => {
+    if (room) {
+      setWritable(room.isWritable);
+      room.isWritable && (room.disableSerialization = false);
+
+      const updateWritable = () => setWritable(room.isWritable);
+      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
+
+      return () => {
+        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
+      };
+    }
+  }, [room]);
+
+  return writable;
+}
+
+export type BoxState = "normal" | "minimized" | "maximized";
+
+export function useBoxState(manager?: WindowManager | null) {
+  const [boxState, setBoxState] = useState<BoxState | undefined>();
+
+  useEffect(() => {
+    if (manager) {
+      setBoxState(manager.boxState);
+
+      manager.emitter.on("boxStateChange", setBoxState);
+
+      return () => {
+        manager.emitter.off("boxStateChange", setBoxState);
+      };
+    }
+  }, [manager]);
+
+  return boxState;
+}
+
+export function useFocusedApp(manager?: WindowManager | null) {
+  const [focused, setFocused] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (manager) {
+      setFocused(manager.focused);
+
+      manager.emitter.on("focusedChange", setFocused);
+
+      return () => {
+        manager.emitter.off("focusedChange", setFocused);
+      };
+    }
+  }, [manager]);
+
+  return focused;
+}
+
+export function useMaximized(manager?: WindowManager | null) {
+  return useBoxState(manager) === "maximized";
+}
+
+export function useHideControls(manager?: WindowManager | null) {
+  const maximized = useMaximized(manager);
+  const focusedApp = useFocusedApp(manager);
+
+  if (maximized) {
+    if (Object.values(BuiltinApps).some(kind => focusedApp?.includes(kind))) {
+      return "toolbar-only";
+    } else {
+      return true;
+    }
+  }
+
+  return false;
+}

package/src/index.ts

@@ -6,16 +6,31 @@ import "./behaviors/style";
 import { WhiteboardApp, type WhiteboardAppConfig } from "./WhiteboardApp";
 
 export { version } from "../package.json";
-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 {
+  PageControl,
+  usePageControl,
+  type PageControlProps,
+} from "./components/PageControl";
+export {
+  RedoUndo,
+  useRedoUndo,
+  type RedoUndoProps,
+} from "./components/RedoUndo";
+export { Toolbar, useToolbar, type ToolbarProps } from "./components/Toolbar";
+export {
+  ZoomControl,
+  useZoomControl,
+  type ZoomControlProps,
+} from "./components/ZoomControl";
 export {
   PlayerControl,
+  usePlayerControl,
   type PlayerControlProps,
 } from "./components/PlayerControl";
+export {};
+
 export * from "./WhiteboardApp";
-export * from "./hooks";
+export * from "./react";
 
 export const register = WindowManager.register.bind(WindowManager);
 

package/src/internal/Instance.tsx

@@ -6,6 +6,7 @@ import type { i18n } from "i18next";
 
 import React, { createContext, useContext } from "react";
 import ReactDOM from "react-dom";
+import { BuiltinApps } from "@netless/window-manager";
 
 import { Root } from "../components/Root";
 import { mountWhiteboard } from "./mount-whiteboard";
@@ -18,6 +19,11 @@ export interface AcceptParams {
   readonly i18n: i18n;
 }
 
+export interface InsertMediaParams {
+  title: string;
+  src: string;
+}
+
 export interface InsertDocsStatic {
   readonly fileType: "pdf" | "ppt";
   readonly scenePath: string;
@@ -31,6 +37,7 @@ export interface InsertDocsDynamic {
   readonly taskId: string;
   readonly title?: string;
   readonly url?: string;
+  readonly scenes?: SceneDefinition[];
 }
 
 export type InsertDocsParams = InsertDocsStatic | InsertDocsDynamic;
@@ -110,16 +117,22 @@ export class Instance {
   target: HTMLElement | null = null;
   collector: HTMLElement | null = null;
 
-  bindElement(target: HTMLElement | null, collector: HTMLElement | null) {
-    if (this.target && target) {
+  bindElement(target: HTMLElement | null) {
+    if (this.target && this.target !== target) {
       ReactDOM.unmountComponentAtNode(this.target);
     }
     this.target = target;
-    this.collector = collector;
     this.forceUpdate();
   }
 
-  updateLayout(layout: Layout) {
+  bindCollector(collector: HTMLElement | null) {
+    this.collector = collector;
+    if (this.manager && collector) {
+      this.manager.bindCollectorContainer(collector);
+    }
+  }
+
+  updateLayout(layout: Layout | undefined) {
     this.config.layout = layout;
     this.forceUpdate();
   }
@@ -154,10 +167,9 @@ export class Instance {
     if (!this.manager) {
       throw new Error(`[WhiteboardApp] mounted, but not found window manager`);
     }
+    this.manager.bindContainer(node);
     if (this.collector) {
-      this.manager.bindContainer(node, this.collector);
-    } else {
-      this.manager.bindContainer(node);
+      this.manager.bindCollectorContainer(this.collector);
     }
   }
 
@@ -198,6 +210,7 @@ export class Instance {
           options: {
             scenePath: params.scenePath,
             title: params.title,
+            scenes: params.scenes,
           },
           attributes: {
             taskId: params.taskId,
@@ -237,6 +250,17 @@ export class Instance {
     });
   }
 
+  insertMedia({ title, src }: InsertMediaParams) {
+    if (!this.manager) {
+      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
+    }
+    return this.manager.addApp({
+      kind: BuiltinApps.MediaPlayer,
+      options: { title },
+      attributes: { src },
+    });
+  }
+
   async changeLanguage(language: Language) {
     try {
       await this.i18n?.changeLanguage(language);

package/src/internal/helpers.ts

@@ -1,3 +1,5 @@
+import type { SceneDefinition } from "white-web-sdk";
+
 export function noop() {
   return;
 }
@@ -40,3 +42,45 @@ export class Lock {
     }
   };
 }
+
+// Copy from https://github.com/crimx/side-effect-manager/blob/main/src/gen-uid.ts
+const SOUP =
+  "!#%()*+,-./:;=?@[]^_`{|}~" +
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const SOUP_LEN = SOUP.length;
+const ID_LEN = 20;
+const reusedIdCarrier = Array(ID_LEN);
+
+export const genUID = (): string => {
+  for (let i = 0; i < ID_LEN; i++) {
+    reusedIdCarrier[i] = SOUP.charAt(Math.random() * SOUP_LEN);
+  }
+  return reusedIdCarrier.join("");
+};
+
+export function makeSlideParams(scenes: SceneDefinition[]) {
+  const scenesWithoutPPT: SceneDefinition[] = [];
+  let taskId = "";
+  let url = "";
+
+  // e.g. "ppt(x)://cdn/prefix/dynamicConvert/{taskId}/1.slide"
+  const pptSrcRE = /^pptx?(?<prefix>:\/\/\S+?dynamicConvert)\/(?<taskId>\w+)\//;
+
+  for (const { name, ppt } of scenes) {
+    // make sure scenesWithoutPPT.length === scenes.length
+    scenesWithoutPPT.push({ name });
+
+    if (!ppt || !ppt.src.startsWith("ppt")) {
+      continue;
+    }
+    const match = pptSrcRE.exec(ppt.src);
+    if (!match || !match.groups) {
+      continue;
+    }
+    taskId = match.groups.taskId;
+    url = "https" + match.groups.prefix;
+    break;
+  }
+
+  return { scenesWithoutPPT, taskId, url };
+}

package/src/internal/hooks.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export function useLastValue<T>(value: T) {
+  const ref = useRef<T>(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

package/src/react.tsx

@@ -0,0 +1,52 @@
+import type { WhiteboardApp } from "./index";
+
+import React, { forwardRef, useEffect, useRef } from "react";
+import { useLastValue } from "./internal/hooks";
+
+// https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
+function useCombinedRefs<T>(...refs: React.Ref<T>[]) {
+  const targetRef = useRef<T | null>(null);
+
+  useEffect(() => {
+    for (const ref of refs) {
+      if (!ref) continue;
+
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        (ref as typeof targetRef).current = targetRef.current;
+      }
+    }
+  }, [refs]);
+
+  return targetRef;
+}
+
+/**
+ * @example
+ * let app = await createWhiteboardApp(config)
+ * <Fastboard app={app} />
+ * await app.dispose()
+ */
+export const Fastboard = forwardRef<
+  HTMLDivElement,
+  { app?: WhiteboardApp | null } & React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+>(({ app, ...restProps }, outerRef) => {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const ref = useCombinedRefs(outerRef, innerRef);
+  const previous = useLastValue(app);
+
+  useEffect(() => {
+    if (previous && previous !== app) {
+      previous.bindElement(null);
+    }
+    if (app) {
+      app.bindElement(ref.current);
+    }
+  }, [app, previous, ref]);
+
+  return <div className="fastboard" {...restProps} ref={ref} />;
+});

package/src/style.scss

@@ -3,12 +3,18 @@
 @import "tippy.js/themes/light.css";
 @import "rc-slider/assets/index.css";
 @import "./components/Root.scss";
-@import "./components/RedoUndo.scss";
-@import "./components/PageControl.scss";
-@import "./components/ZoomControl.scss";
+@import "./components/RedoUndo/RedoUndo.scss";
+@import "./components/PageControl/PageControl.scss";
+@import "./components/ZoomControl/ZoomControl.scss";
 @import "./components/Toolbar/Toolbar.scss";
 @import "./components/PlayerControl/PlayerControl.scss";
 
+.fastboard {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
 .tippy-box.fastboard-tip {
   color: #eee;
   background-color: rgba($color: #000000, $alpha: 0.95);

package/src/components/PageControl.tsx

@@ -1,181 +0,0 @@
-import type { RoomState, ViewVisionMode } from "white-web-sdk";
-import type { CommonProps, GenericIcon } from "../types";
-
-import clsx from "clsx";
-import React, { useCallback, useEffect, useState } from "react";
-import Tippy from "@tippyjs/react";
-
-import { TopOffset } from "../theme";
-import { Icon } from "../icons";
-import { FilePlus } from "../icons/FilePlus";
-import { ChevronLeft } from "../icons/ChevronLeft";
-import { ChevronRight } from "../icons/ChevronRight";
-
-export const name = "fastboard-page-control";
-
-export type PageControlProps = CommonProps &
-  GenericIcon<"add" | "prev" | "next">;
-
-export function PageControl({
-  room,
-  manager,
-  theme = "light",
-  addIcon,
-  addIconDisable,
-  prevIcon,
-  prevIconDisable,
-  nextIcon,
-  nextIconDisable,
-  i18n,
-}: PageControlProps) {
-  const [writable, setWritable] = useState(false);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageCount, setPageCount] = useState(0);
-
-  const addPage = useCallback(async () => {
-    if (manager && room) {
-      await manager.switchMainViewToWriter();
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      await manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (!manager && room) {
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      room.setSceneIndex(pageIndex + 1);
-    }
-  }, [room, manager, pageIndex]);
-
-  const prevPage = useCallback(() => {
-    if (room?.isWritable) {
-      if (manager) {
-        manager.setMainViewSceneIndex(pageIndex - 1);
-      } else {
-        room.pptPreviousStep();
-      }
-    }
-  }, [room, manager, pageIndex]);
-
-  const nextPage = useCallback(() => {
-    if (room?.isWritable) {
-      if (manager) {
-        manager.setMainViewSceneIndex(pageIndex + 1);
-      } else {
-        room.pptNextStep();
-      }
-    }
-  }, [room, manager, pageIndex]);
-
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-    }
-
-    const onRoomStateChanged = (modifyState: Partial<RoomState>) => {
-      if (modifyState.sceneState) {
-        setPageIndex(modifyState.sceneState.index);
-        setPageCount(modifyState.sceneState.scenes.length);
-      }
-    };
-
-    const onMainViewModeChanged = (mode: number) => {
-      if (room && mode === (0 as ViewVisionMode.Writable)) {
-        setPageIndex(room.state.sceneState.index);
-        setPageCount(room.state.sceneState.scenes.length);
-      }
-    };
-
-    const updateWritable = () => setWritable(room?.isWritable || false);
-
-    if (room) {
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      manager?.callbacks.on("mainViewModeChange", onMainViewModeChanged);
-    }
-
-    return () => {
-      if (room) {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        manager?.callbacks.off("mainViewModeChange", onMainViewModeChanged);
-      }
-    };
-  }, [room, manager]);
-
-  const disabled = !writable;
-
-  return (
-    <div className={clsx(name, theme)}>
-      {/* <span className={clsx(`${name}-cut-line`, theme)} />{" "} */}
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("prevPage")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "prev", theme)}
-          disabled={disabled || pageIndex === 0}
-          onClick={prevPage}
-        >
-          <Icon
-            fallback={<ChevronLeft theme={theme} />}
-            src={disabled ? prevIconDisable : prevIcon}
-            alt="[prev]"
-          />
-        </button>
-      </Tippy>
-      <span className={clsx(`${name}-page`, theme)}>
-        {pageCount === 0 ? "\u2026" : pageIndex + 1}
-      </span>
-      <span className={clsx(`${name}-slash`, theme)}>/</span>
-      <span className={clsx(`${name}-page-count`, theme)}>{pageCount}</span>
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("nextPage")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "next", theme)}
-          disabled={disabled || pageIndex === pageCount - 1}
-          onClick={nextPage}
-        >
-          <Icon
-            fallback={<ChevronRight theme={theme} />}
-            src={disabled ? nextIconDisable : nextIcon}
-            alt="[next]"
-          />
-        </button>
-      </Tippy>
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("addPage")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "add", theme)}
-          disabled={disabled}
-          onClick={addPage}
-        >
-          <Icon
-            fallback={<FilePlus theme={theme} />}
-            src={disabled ? addIconDisable : addIcon}
-            alt="[add]"
-          />
-        </button>
-      </Tippy>
-    </div>
-  );
-}