@netless/fastboard-react 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -581,59 +581,22 @@ function ZoomControl({
 }
 
 // src/components/PageControl/hooks.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useState as useState3 } from "react";
-function usePageControl(room, manager) {
-  const [pageIndex, setPageIndex] = useState3(0);
-  const [pageCount, setPageCount] = useState3(0);
+import { useCallback as useCallback4 } from "react";
+function usePageControl() {
+  const app = useFastboardApp();
+  const pageIndex = useFastboardValue(app.sceneIndex);
+  const pageCount = useFastboardValue(app.sceneLength);
   const addPage = useCallback4(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 = useCallback4(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex - 1);
-    } else if (room) {
-      room.pptPreviousStep();
-    }
-  }, [room, manager, pageIndex]);
-  const nextPage = useCallback4(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (room) {
-      room.pptNextStep();
-    }
-  }, [room, manager, pageIndex]);
-  useEffect3(() => {
-    if (room) {
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-      if (manager) {
-        manager.emitter.on("mainViewSceneIndexChange", setPageIndex);
-        return () => {
-          manager.emitter.off("mainViewSceneIndexChange", setPageIndex);
-        };
-      } else {
-        const onRoomStateChanged = (modifyState) => {
-          if (modifyState.sceneState) {
-            setPageIndex(modifyState.sceneState.index);
-            setPageCount(modifyState.sceneState.scenes.length);
-          }
-        };
-        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-        return () => {
-          room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        };
-      }
-    }
-  }, [room, manager]);
+    await app.manager.switchMainViewToWriter();
+    app.room.putScenes(app.manager.mainViewSceneDir, [{}], pageIndex + 1);
+    await app.manager.setMainViewSceneIndex(pageIndex + 1);
+  }, [app, pageIndex]);
+  const prevPage = useCallback4(async () => {
+    await app.manager.setMainViewSceneIndex(pageIndex - 1);
+  }, [app, pageIndex]);
+  const nextPage = useCallback4(async () => {
+    await app.manager.setMainViewSceneIndex(pageIndex + 1);
+  }, [app, pageIndex]);
   return { pageIndex, pageCount, prevPage, nextPage, addPage };
 }
 
@@ -698,11 +661,10 @@ function PageControl({
   nextIcon,
   nextIconDisable
 }) {
-  const app = useFastboardApp();
   theme = useTheme(theme);
   const { t } = useTranslation();
   const writable = useWritable();
-  const _a = usePageControl(app.room, app.manager), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
+  const _a = usePageControl(), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
   const disabled = !writable;
   return React12.createElement("div", {
     className: clsx3(name3, theme)
@@ -814,7 +776,7 @@ var EmptyToolbarHook = {
 // src/components/Toolbar/Toolbar.tsx
 import clsx9 from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
-import React44, { createContext as createContext3, useCallback as useCallback11, useEffect as useEffect6, useState as useState6 } from "react";
+import React44, { createContext as createContext3, useCallback as useCallback11, useEffect as useEffect5, useState as useState5 } from "react";
 
 // src/components/Toolbar/components/assets/collapsed.png
 var collapsed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA49JREFUeF7tnLFv00AUh5/TFVYkxIDEnKFjJ/gb2CIqpUPagYXNEV2LRGk7tAiRSA0bWcC0QzowwQKuVDnCLE2KTZCMSNLkHCLalCpBkdFVMTKh8TXO+c4S16XDSb0vv/vyfE3fqwQR+ZIA4AoAdADgJ08mSVXVV9ls9nE+nzcBAAFAnweQ1Gg06gihrmEYubm5OeX4+LgBAD9Yw0iO49S63S7U6/VYq9UyCoXC2tLS0kcAwEA9VkBnIO5m7XYbJwTVanVLluWcruvfAOA7ADhhA/0Fgjfr9/tweHgYs20baZq2sbCw8HaQTqgy/wPivvKTkxN8XFPNZvMdC5lHgmAgx3EAISQhhHqGYWyGKbMviJsOC5kvBOIjcxUAWjRkHgtkSGZb07R1WjKPDeIj82cAaAatzIFBhmU2TTOXTCZfBq3ME4HQlJkKCA2ZqYJMIjN1kKAyhwYyrsyhgpwns6IoyysrK/rgQfrnqc4ExCtzrVb7tbe39yCVSr0GAFyZz2CYguANT09PwbIsaWdn5146nX4zuO+wB8EwnU5HqlQqdiKRuHNwcFDC1Zh5Iu4xWZYVU1V1eXZ29jlOhRvI0dGRVC6XP8zMzNwFgK/cQHq9HpTLZXt6evo2AFS4geDbX6lUisXj8VsA8IkbCHZlf39/Kh6P3xQg7jtHJDL826JIRCRC+gRBOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6kjojjxaXbt0Py3jP1DCtes3ruLvVetLnenRYIgnT7OX3Y25gLgQ3gSYg3ghuIEMQ3ABOQ+COcgoCKYgfhD/Jwh+1ZE4GrdKRkJWPxhulTUSBe28ZLglMgzDHcR9N3G/BpDuHH7r4qoY+lUx6PGIoxFHQ3JHOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6ohwxM+RyLR/RaYhLjItgpFomoxEG2kkGmvxRBPXVmPPWIypKMpD5s3X3kEh0zSfJZPJF6NmK0JrI3VHpxBCaiaTWc/n877TJtRBPMNkdrFY3Jifn8ed3njUzneYjCqIZ7xue3FxMadpGh6vu9BEEhUQr4yFQmE1yMDhRCDjyEi6JAUGGVdG6iBBZaQK4pVRluVNXdfZjsfRkHGiRGjKGBjEI+P7TCazQaqMpI1I635jtmNVRtJGpPVRg8fbtGW8EAiL6VUiyGA4vUd6TJN+0KTr0u7u7hYLGUmg0fkHBiRSVuu/AWpfZNft9vFDAAAAAElFTkSuQmCC";
@@ -823,20 +785,20 @@ var collapsed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8C
 var expanded_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
 
 // src/components/Toolbar/components/Mask.tsx
-import React13, { useState as useState4, useEffect as useEffect4 } from "react";
+import React13, { useState as useState3, useEffect as useEffect3 } from "react";
 import ReactDOM from "react-dom";
 var Mask = React13.memo(({ toolbar, children }) => {
-  const [rootElement] = useState4(() => {
+  const [rootElement] = useState3(() => {
     const element = document.createElement("div");
     element.style.position = "absolute";
     return element;
   });
-  useEffect4(() => {
+  useEffect3(() => {
     if (toolbar && rootElement) {
       toolbar.appendChild(rootElement);
     }
   }, [rootElement, toolbar]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (rootElement && toolbar) {
       toolbar.appendChild(rootElement);
       const toolbarRect = toolbar.getBoundingClientRect();
@@ -859,7 +821,7 @@ var Mask = React13.memo(({ toolbar, children }) => {
 
 // src/components/Toolbar/Content.tsx
 import clsx8 from "clsx";
-import React43, { useCallback as useCallback10, useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
+import React43, { useCallback as useCallback10, useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
 
 // src/components/Toolbar/components/ApplianceButtons.tsx
 import React34, { useCallback as useCallback6, useContext as useContext4 } from "react";
@@ -1657,8 +1619,8 @@ function DownButton({ disabled, scrollTo }) {
 // src/components/Toolbar/Content.tsx
 var Content = React43.memo(() => {
   const ref = useRef2(null);
-  const [scrollTop, setScrollTop] = useState5(0);
-  const [parentHeight, setParentHeight] = useState5(0);
+  const [scrollTop, setScrollTop] = useState4(0);
+  const [parentHeight, setParentHeight] = useState4(0);
   const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
   const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
   const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
@@ -1667,12 +1629,12 @@ var Content = React43.memo(() => {
   const scrollTo = useCallback10((height) => {
     setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
   }, [scrollBuffer, scrollTop]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (ref.current) {
       ref.current.scrollTop = scrollTop;
     }
   }, [scrollTop]);
-  useEffect5(() => {
+  useEffect4(() => {
     var _a, _b;
     const container = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
     if (container) {
@@ -1709,16 +1671,16 @@ var name4 = "fastboard-toolbar";
 var Toolbar = ({ theme, icons }) => {
   theme = useTheme(theme);
   const hook = useToolbar();
-  const [expanded, setExpanded] = useState6(true);
-  const [toolbar, toolbarRef] = useState6(null);
-  const [onHover, setOnHover] = useState6(false);
-  const [delayedOnHover, setDelayedOnHover] = useState6(false);
-  const [pointEvents, setPointEvents] = useState6(true);
+  const [expanded, setExpanded] = useState5(true);
+  const [toolbar, toolbarRef] = useState5(null);
+  const [onHover, setOnHover] = useState5(false);
+  const [delayedOnHover, setDelayedOnHover] = useState5(false);
+  const [pointEvents, setPointEvents] = useState5(true);
   const disabled = !hook.writable;
   const toggle = useCallback11(() => {
     setExpanded((e) => !e);
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     const timer = setTimeout(() => {
       setDelayedOnHover(onHover);
     }, 400);
@@ -1765,11 +1727,11 @@ var Toolbar = ({ theme, icons }) => {
 };
 
 // src/components/PlayerControl/hooks.ts
-import { useCallback as useCallback12, useEffect as useEffect7, useState as useState7 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect6, useState as useState6 } from "react";
 import { PlayerPhase } from "white-web-sdk";
 var EMPTY_ARRAY = [];
 function useForceUpdate2() {
-  const [, forceUpdate_] = useState7({});
+  const [, forceUpdate_] = useState6({});
   return useCallback12(() => forceUpdate_({}), EMPTY_ARRAY);
 }
 function usePlayerControl(player) {
@@ -1802,12 +1764,12 @@ function usePlayerControl(player) {
       forceUpdate();
     }
   }, [forceUpdate, player]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!lastPlayer && player) {
       forceUpdate();
     }
   }, [forceUpdate, lastPlayer, player]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (player) {
       player.callbacks.on("onPhaseChanged", forceUpdate);
       player.callbacks.on("onProgressTimeChanged", forceUpdate);
@@ -1836,7 +1798,7 @@ function usePlayerControl(player) {
 import Tippy10 from "@tippyjs/react";
 import clsx11 from "clsx";
 import RcSlider2 from "rc-slider";
-import React49, { useEffect as useEffect8, useState as useState8 } from "react";
+import React49, { useEffect as useEffect7, useState as useState7 } from "react";
 import { PlayerPhase as PlayerPhase2 } from "white-web-sdk";
 
 // src/components/PlayerControl/components/Button.tsx
@@ -1915,12 +1877,12 @@ function PlayerControl(_a) {
   var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
   theme = useTheme(theme);
   const { t } = useTranslation();
-  const [currentTime, setCurrentTime] = useState8(0);
+  const [currentTime, setCurrentTime] = useState7(0);
   const player = usePlayerControl(player_);
-  useEffect8(() => {
+  useEffect7(() => {
     setCurrentTime(player.currentTime);
   }, [player.currentTime]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (player.currentTime !== currentTime) {
       player.seekToProgressTime(currentTime);
     }
@@ -2000,34 +1962,49 @@ function renderSpeeds({ speed: current, setSpeed }) {
 }
 
 // src/components/Fastboard.tsx
-import React50, { useCallback as useCallback13, useEffect as useEffect9 } from "react";
-function Fastboard(_a) {
-  var _b = _a, { app } = _b, restProps = __objRest(_b, ["app"]);
+import React50, { forwardRef as forwardRef3, useCallback as useCallback13, useEffect as useEffect8 } from "react";
+var Fastboard = forwardRef3(function Fastboard2(_a, ref) {
+  var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
   if (!app) {
-    return React50.createElement("div", {
-      className: "fastboard-root"
-    });
+    return React50.createElement("div", __spreadValues({
+      className: "fastboard-root",
+      ref
+    }, restProps));
   }
   return React50.createElement(FastboardAppContext.Provider, {
     value: app
-  }, React50.createElement(FastboardInternal, __spreadValues({}, restProps)));
-}
-function FastboardInternal({
-  language,
-  layout = {},
-  theme = "light",
-  children
-}) {
+  }, React50.createElement(FastboardInternal, __spreadValues(__spreadValues({
+    forwardedRef: ref
+  }, { theme, layout, language }), restProps)));
+});
+function FastboardInternal(_a) {
+  var _b = _a, {
+    forwardedRef,
+    language,
+    layout = {},
+    theme = "light",
+    children
+  } = _b, restProps = __objRest(_b, [
+    "forwardedRef",
+    "language",
+    "layout",
+    "theme",
+    "children"
+  ]);
   const app = useFastboardApp();
   const forceUpdate = useForceUpdate();
   const i18n = useAsyncValue(() => createI18n({ language }));
-  useEffect9(() => {
+  useEffect8(() => {
     if (i18n)
       i18n.changeLanguage(language);
     forceUpdate();
   }, [forceUpdate, i18n, language]);
+  useEffect8(() => {
+    app.manager.setPrefersColorScheme(theme);
+  }, [app, theme]);
   const useWhiteboard = useCallback13((container) => {
-    container && app && app.manager.bindContainer(container);
+    if (container && app)
+      app.manager.bindContainer(container);
   }, [app]);
   const hideControls = useHideControls();
   const showControls = !hideControls;
@@ -2041,9 +2018,10 @@ function FastboardInternal({
     value: theme
   }, React50.createElement(I18nContext.Provider, {
     value: i18n
-  }, React50.createElement("div", {
-    className: "fastboard-root"
-  }, React50.createElement("div", {
+  }, React50.createElement("div", __spreadProps(__spreadValues({}, restProps), {
+    className: "fastboard-root",
+    ref: forwardedRef
+  }), React50.createElement("div", {
     className: "fastboard-view",
     ref: useWhiteboard
   }), children ? children : React50.createElement(React50.Fragment, null, toolbar && React50.createElement("div", {