@netless/fastboard 0.0.4 → 0.0.8

package/dist/index.es.js

@@ -17,12 +17,24 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 import { WindowManager } from "@netless/window-manager";
-import { WhiteWebSdk, DefaultHotKeys, ApplianceNames, ShapeType } from "white-web-sdk";
+import { WhiteWebSdk, DefaultHotKeys, ApplianceNames, ShapeType, PlayerPhase } from "white-web-sdk";
 import i18next from "i18next";
 import require$$0, { memo, forwardRef, useContext, useCallback, useState, useEffect, useRef, createContext } from "react";
 import ReactDOM from "react-dom";
@@ -580,7 +592,7 @@ const Up = (props) => {
     })
   });
 };
-const Icons = {
+const Icons$1 = {
   Clicker: memo(Clicker),
   Collapse: memo(Collapse),
   Eraser: memo(Eraser),
@@ -601,7 +613,7 @@ const Icons = {
   Up: memo(Up),
   Down: memo(Down)
 };
-const Button = forwardRef((props, ref) => {
+const Button$1 = forwardRef((props, ref) => {
   const {
     content,
     disabled,
@@ -640,7 +652,7 @@ function CutLine() {
     theme
   } = useContext(ToolbarContext);
   return /* @__PURE__ */ jsx("span", {
-    className: clsx(`${name$3}-cut-line`, theme)
+    className: clsx(`${name$4}-cut-line`, theme)
   });
 }
 function useWritable(room) {
@@ -714,14 +726,14 @@ const EmptyToolbarHook = {
   setStrokeColor: noop
 };
 const ShapesMap = {
-  [ApplianceNames.rectangle]: Icons.Rectangle,
-  [ApplianceNames.ellipse]: Icons.Circle,
-  [ApplianceNames.straight]: Icons.Line,
-  [ApplianceNames.arrow]: Icons.Arrow,
-  [ShapeType.Pentagram]: Icons.Star,
-  [ShapeType.Rhombus]: Icons.Diamond,
-  [ShapeType.Triangle]: Icons.Triangle,
-  [ShapeType.SpeechBalloon]: Icons.SpeechBalloon
+  [ApplianceNames.rectangle]: Icons$1.Rectangle,
+  [ApplianceNames.ellipse]: Icons$1.Circle,
+  [ApplianceNames.straight]: Icons$1.Line,
+  [ApplianceNames.arrow]: Icons$1.Arrow,
+  [ShapeType.Pentagram]: Icons$1.Star,
+  [ShapeType.Rhombus]: Icons$1.Diamond,
+  [ShapeType.Triangle]: Icons$1.Triangle,
+  [ShapeType.SpeechBalloon]: Icons$1.SpeechBalloon
 };
 const ApplianceShapes = [
   ApplianceNames.rectangle,
@@ -749,12 +761,12 @@ function UpButton({
   } = useContext(ToolbarContext);
   const scrollUp = useCallback(() => scrollTo(-ItemHeight), [scrollTo]);
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Button, {
+    children: [/* @__PURE__ */ jsx(Button$1, {
       content: "Up",
       disabled,
       onClick: scrollUp,
       children: /* @__PURE__ */ jsx(Icon, {
-        fallback: /* @__PURE__ */ jsx(Icons.Up, {
+        fallback: /* @__PURE__ */ jsx(Icons$1.Up, {
           theme
         }),
         src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
@@ -773,12 +785,12 @@ function DownButton({
   } = useContext(ToolbarContext);
   const scrollDown = useCallback(() => scrollTo(ItemHeight), [scrollTo]);
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(Button, {
+    children: [/* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(Button$1, {
       content: "Down",
       disabled,
       onClick: scrollDown,
       children: /* @__PURE__ */ jsx(Icon, {
-        fallback: /* @__PURE__ */ jsx(Icons.Down, {
+        fallback: /* @__PURE__ */ jsx(Icons$1.Down, {
           theme
         }),
         src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
@@ -816,12 +828,12 @@ function ClickerButton() {
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const active = appliance === ApplianceNames.clicker;
   const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content: renderToolTip(i18n == null ? void 0 : i18n.t("clicker"), shortcut),
     onClick: changeAppliance,
     active,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Clicker, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Clicker, {
         theme,
         active
       }),
@@ -845,12 +857,12 @@ function SelectorButton() {
   const active = appliance === ApplianceNames.selector;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.config.joinRoom.hotKeys) || defaultHotKeys).changeToSelector;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content: renderToolTip(i18n == null ? void 0 : i18n.t("selector"), shortcut),
     onClick: changeAppliance,
     active,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Selector, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Selector, {
         theme,
         active
       }),
@@ -874,12 +886,12 @@ function EraserButton() {
   const active = appliance === ApplianceNames.eraser;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.config.joinRoom.hotKeys) || defaultHotKeys).changeToEraser;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content: renderToolTip(i18n == null ? void 0 : i18n.t("eraser"), shortcut),
     onClick: changeAppliance,
     active,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Eraser, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Eraser, {
         theme,
         active
       }),
@@ -897,11 +909,11 @@ function CleanButton() {
     i18n
   } = useContext(ToolbarContext);
   const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content: i18n == null ? void 0 : i18n.t("clean"),
     onClick: cleanCurrentScene,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Clean, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Clean, {
         theme
       }),
       src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
@@ -922,11 +934,11 @@ function AppsButton({
     writable
   } = useContext(ToolbarContext);
   const disabled = !writable;
-  const button = /* @__PURE__ */ jsx(Button, {
+  const button = /* @__PURE__ */ jsx(Button$1, {
     content: "Apps",
     onClick,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Apps, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Apps, {
         theme
       }),
       src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
@@ -986,7 +998,7 @@ function AppIcon({
 }) {
   return /* @__PURE__ */ jsxs("span", {
     className: "fastboard-toolbar-app-icon",
-    children: [/* @__PURE__ */ jsx(Button, {
+    children: [/* @__PURE__ */ jsx(Button$1, {
       placement: "top",
       content: title,
       onClick,
@@ -1099,12 +1111,12 @@ function PencilButton() {
       offset: RightOffset,
       arrow: false,
       interactive: true,
-      children: /* @__PURE__ */ jsxs(Button, {
+      children: /* @__PURE__ */ jsxs(Button$1, {
         content: renderToolTip(i18n == null ? void 0 : i18n.t("pencil"), shortcut),
         active,
         onClick: changeAppliance,
         children: [/* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons.Pencil, {
+          fallback: /* @__PURE__ */ jsx(Icons$1.Pencil, {
             theme,
             active
           }),
@@ -1151,12 +1163,12 @@ function TextButton() {
       offset: RightOffset,
       arrow: false,
       interactive: true,
-      children: /* @__PURE__ */ jsxs(Button, {
+      children: /* @__PURE__ */ jsxs(Button$1, {
         content: renderToolTip(i18n == null ? void 0 : i18n.t("text"), shortcut),
         active,
         onClick: changeAppliance,
         children: [/* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons.Text, {
+          fallback: /* @__PURE__ */ jsx(Icons$1.Text, {
             theme,
             active
           }),
@@ -1186,7 +1198,7 @@ function ShapesButton() {
   const shape = memberState == null ? void 0 : memberState.shapeType;
   const key = appliance === ApplianceNames.shape ? shape : appliance;
   const active = ShapeTypes.has(key);
-  const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
+  const CurrentIcon = ShapesMap[key] || Icons$1.Rectangle;
   return /* @__PURE__ */ jsx("span", {
     className: "fastboard-toolbar-btn-interactive",
     children: /* @__PURE__ */ jsx(Tippy, {
@@ -1198,7 +1210,7 @@ function ShapesButton() {
       offset: RightOffset,
       arrow: false,
       interactive: true,
-      children: /* @__PURE__ */ jsxs(Button, {
+      children: /* @__PURE__ */ jsxs(Button$1, {
         content: i18n == null ? void 0 : i18n.t("shape"),
         active,
         children: [/* @__PURE__ */ jsx(CurrentIcon, {
@@ -1247,7 +1259,7 @@ function ApplianceShapeButton({
   } = useContext(ToolbarContext);
   const current = memberState == null ? void 0 : memberState.currentApplianceName;
   const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content,
     disabled,
     placement: "top",
@@ -1272,7 +1284,7 @@ function ShapeShapeButton({
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const current = appliance === ApplianceNames.shape && (memberState == null ? void 0 : memberState.shapeType);
   const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content,
     disabled,
     placement: "top",
@@ -1325,7 +1337,7 @@ function Content() {
       disabled: disableScrollUp
     }), /* @__PURE__ */ jsxs("div", {
       ref,
-      className: `${name$3}-section`,
+      className: `${name$4}-section`,
       style: {
         height: `${sectionHeight}px`,
         overflow: needScroll ? "hidden" : "visible"
@@ -1343,7 +1355,7 @@ function Content() {
 const ToolbarContext = createContext(__spreadValues({
   theme: "light"
 }, EmptyToolbarHook));
-const name$3 = "fastboard-toolbar";
+const name$4 = "fastboard-toolbar";
 const Toolbar = ({
   theme = "light",
   icons,
@@ -1362,21 +1374,21 @@ const Toolbar = ({
       i18n
     }),
     children: /* @__PURE__ */ jsxs("div", {
-      className: clsx(name$3, theme),
-      children: [expanded ? /* @__PURE__ */ jsx(Button, {
+      className: clsx(name$4, theme),
+      children: [expanded ? /* @__PURE__ */ jsx(Button$1, {
         content: i18n == null ? void 0 : i18n.t("collapse"),
         onClick: toggle,
         children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons.Collapse, {
+          fallback: /* @__PURE__ */ jsx(Icons$1.Collapse, {
             theme
           }),
           src: disabled ? icons == null ? void 0 : icons.collapseIconDisable : icons == null ? void 0 : icons.collapseIcon
         })
-      }) : /* @__PURE__ */ jsx(Button, {
+      }) : /* @__PURE__ */ jsx(Button$1, {
         content: i18n == null ? void 0 : i18n.t("expand"),
         onClick: toggle,
         children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons.Expand, {
+          fallback: /* @__PURE__ */ jsx(Icons$1.Expand, {
             theme
           }),
           src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
@@ -1431,7 +1443,7 @@ function Redo({
     })
   });
 }
-const name$2 = "fastboard-redo-undo";
+const name$3 = "fastboard-redo-undo";
 function RedoUndo({
   room,
   theme = "light",
@@ -1461,7 +1473,7 @@ function RedoUndo({
   }, [room]);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name$2, theme),
+    className: clsx(name$3, theme),
     children: [/* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
       content: i18n == null ? void 0 : i18n.t("undo"),
@@ -1471,7 +1483,7 @@ function RedoUndo({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$2}-btn`, "undo", theme),
+        className: clsx(`${name$3}-btn`, "undo", theme),
         disabled: disabled || undoSteps === 0,
         onClick: useCallback(() => room && room.undo(), [room]),
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1491,7 +1503,7 @@ function RedoUndo({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$2}-btn`, "redo", theme),
+        className: clsx(`${name$3}-btn`, "redo", theme),
         disabled: disabled || redoSteps === 0,
         onClick: useCallback(() => room && room.redo(), [room]),
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1569,7 +1581,7 @@ function Reset({
     })
   });
 }
-const name$1 = "fastboard-zoom-control";
+const name$2 = "fastboard-zoom-control";
 const ScalePoints = [0.10737418240000011, 0.13421772800000012, 0.16777216000000014, 0.20971520000000016, 0.26214400000000015, 0.3276800000000002, 0.4096000000000002, 0.5120000000000001, 0.6400000000000001, 0.8, 1, 1.26, 1.5876000000000001, 2.000376, 2.5204737600000002, 3.1757969376000004, 4.001504141376, 5.041895218133761, 6.352787974848539, 8.00451284830916, 10];
 function nextScale(scale, delta) {
   const {
@@ -1697,7 +1709,7 @@ function ZoomControl({
   }, [room, manager]);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name$1, theme),
+    className: clsx(name$2, theme),
     children: [/* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
       content: i18n == null ? void 0 : i18n.t("zoomOut"),
@@ -1707,7 +1719,7 @@ function ZoomControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "minus", theme),
+        className: clsx(`${name$2}-btn`, "minus", theme),
         disabled,
         onClick: zoomOut,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1719,10 +1731,10 @@ function ZoomControl({
         })
       })
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$1}-scale`, theme),
+      className: clsx(`${name$2}-scale`, theme),
       children: Math.ceil(scale * 100)
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$1}-percent`, theme),
+      className: clsx(`${name$2}-percent`, theme),
       children: "%"
     }), /* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
@@ -1733,7 +1745,7 @@ function ZoomControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "plus", theme),
+        className: clsx(`${name$2}-btn`, "plus", theme),
         disabled,
         onClick: zoomIn,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1753,7 +1765,7 @@ function ZoomControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "reset", theme),
+        className: clsx(`${name$2}-btn`, "reset", theme),
         disabled,
         onClick: resetCamera,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1815,7 +1827,7 @@ function ChevronRight({
     })
   });
 }
-const name = "fastboard-page-control";
+const name$1 = "fastboard-page-control";
 function PageControl({
   room,
   manager,
@@ -1835,14 +1847,14 @@ function PageControl({
     if (manager && room) {
       await manager.switchMainViewToWriter();
       const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageCount);
-      await manager.setMainViewSceneIndex(pageIndex);
+      room.putScenes(path, [{}], pageIndex + 1);
+      await manager.setMainViewSceneIndex(pageIndex + 1);
     } else if (!manager && room) {
       const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageCount);
-      room.setSceneIndex(pageIndex);
+      room.putScenes(path, [{}], pageIndex + 1);
+      room.setSceneIndex(pageIndex + 1);
     }
-  }, [room, manager, pageCount, pageIndex]);
+  }, [room, manager, pageIndex]);
   const prevPage = useCallback(() => {
     if (room == null ? void 0 : room.isWritable) {
       if (manager) {
@@ -1895,7 +1907,7 @@ function PageControl({
   }, [room, manager]);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name, theme),
+    className: clsx(name$1, theme),
     children: [/* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
       content: i18n == null ? void 0 : i18n.t("prevPage"),
@@ -1905,7 +1917,7 @@ function PageControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name}-btn`, "prev", theme),
+        className: clsx(`${name$1}-btn`, "prev", theme),
         disabled: disabled || pageIndex === 0,
         onClick: prevPage,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1917,13 +1929,13 @@ function PageControl({
         })
       })
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name}-page`, theme),
+      className: clsx(`${name$1}-page`, theme),
       children: pageCount === 0 ? "\u2026" : pageIndex + 1
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name}-slash`, theme),
+      className: clsx(`${name$1}-slash`, theme),
       children: "/"
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name}-page-count`, theme),
+      className: clsx(`${name$1}-page-count`, theme),
       children: pageCount
     }), /* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
@@ -1934,7 +1946,7 @@ function PageControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name}-btn`, "next", theme),
+        className: clsx(`${name$1}-btn`, "next", theme),
         disabled: disabled || pageIndex === pageCount - 1,
         onClick: nextPage,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1954,7 +1966,7 @@ function PageControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name}-btn`, "add", theme),
+        className: clsx(`${name$1}-btn`, "add", theme),
         disabled,
         onClick: addPage,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1973,6 +1985,17 @@ function Root({
 }) {
   const [mux] = useState(() => new Lock());
   const useWhiteboard = useCallback((container) => mux.schedule(container ? () => app.mount(container) : () => app.unmount()), [app, mux]);
+  const {
+    Toolbar: toolbar = true,
+    RedoUndo: redo_undo = true,
+    ZoomControl: zoom_control = true,
+    PageControl: page_control = true
+  } = app.config.layout || {};
+  const props = {
+    room: app.room,
+    manager: app.manager,
+    i18n: app.i18n
+  };
   return /* @__PURE__ */ jsx(Instance.Context.Provider, {
     value: app,
     children: /* @__PURE__ */ jsxs("div", {
@@ -1983,31 +2006,15 @@ function Root({
       }), /* @__PURE__ */ jsx("div", {
         className: "fastboard-view",
         ref: useWhiteboard
-      }), /* @__PURE__ */ jsx("div", {
+      }), toolbar && /* @__PURE__ */ jsx("div", {
         className: "fastboard-left",
-        children: /* @__PURE__ */ jsx(Toolbar, {
-          room: app.room,
-          manager: app.manager,
-          i18n: app.i18n
-        })
-      }), /* @__PURE__ */ jsxs("div", {
+        children: /* @__PURE__ */ jsx(Toolbar, __spreadValues({}, props))
+      }), (redo_undo || zoom_control) && /* @__PURE__ */ jsxs("div", {
         className: "fastboard-bottom-left",
-        children: [/* @__PURE__ */ jsx(RedoUndo, {
-          room: app.room,
-          manager: app.manager,
-          i18n: app.i18n
-        }), /* @__PURE__ */ jsx(ZoomControl, {
-          room: app.room,
-          manager: app.manager,
-          i18n: app.i18n
-        })]
-      }), /* @__PURE__ */ jsx("div", {
+        children: [redo_undo && /* @__PURE__ */ jsx(RedoUndo, __spreadValues({}, props)), zoom_control && /* @__PURE__ */ jsx(ZoomControl, __spreadValues({}, props))]
+      }), page_control && /* @__PURE__ */ jsx("div", {
         className: "fastboard-bottom-right",
-        children: /* @__PURE__ */ jsx(PageControl, {
-          room: app.room,
-          manager: app.manager,
-          i18n: app.i18n
-        })
+        children: /* @__PURE__ */ jsx(PageControl, __spreadValues({}, props))
       })]
     })
   });
@@ -2022,8 +2029,9 @@ class Instance {
     __publicField(this, "ready", false);
     __publicField(this, "resolveReady");
     __publicField(this, "readyPromise");
-    __publicField(this, "_target", null);
-    this.config = config;
+    __publicField(this, "target", null);
+    __publicField(this, "collector", null);
+    this.config = __spreadValues({}, config);
     this.refreshReadyPromise();
     this.initialize();
   }
@@ -2041,14 +2049,16 @@ class Instance {
     this.accept(essentials);
     this.resolveReady();
   }
-  get target() {
-    return this._target;
-  }
-  set target(value) {
-    if (this._target && value) {
-      ReactDOM.unmountComponentAtNode(this._target);
+  bindElement(target, collector) {
+    if (this.target && target) {
+      ReactDOM.unmountComponentAtNode(this.target);
     }
-    this._target = value;
+    this.target = target;
+    this.collector = collector;
+    this.forceUpdate();
+  }
+  updateLayout(layout) {
+    this.config.layout = layout;
     this.forceUpdate();
   }
   async forceUpdate() {
@@ -2082,7 +2092,12 @@ class Instance {
   }
   async mount(node) {
     await this.readyPromise;
-    if (this.manager) {
+    if (!this.manager) {
+      throw new Error(`[WhiteboardApp] mounted, but not found window manager`);
+    }
+    if (this.collector) {
+      this.manager.bindContainer(node, this.collector);
+    } else {
       this.manager.bindContainer(node);
     }
   }
@@ -2183,12 +2198,45 @@ class WhiteboardApp {
     this.config = config;
     this._instance = new Instance(config);
   }
-  bindElement(target) {
-    this._instance.target = target || null;
+  get room() {
+    return this._instance.room;
+  }
+  get manager() {
+    return this._instance.manager;
+  }
+  get sdk() {
+    return this._instance.sdk;
+  }
+  get i18n() {
+    return this._instance.i18n;
+  }
+  get target() {
+    return this._instance.target;
+  }
+  get collector() {
+    return this._instance.collector;
+  }
+  bindElement(target, collector) {
+    this._instance.bindElement(target || null, collector || null);
+  }
+  get layout() {
+    return this._instance.config.layout;
+  }
+  updateLayout(layout) {
+    this._instance.updateLayout(layout);
   }
   insertDocs(params) {
     return this._instance.insertDocs(params);
   }
+  insertCodeEditor() {
+    return this._instance.insertCodeEditor();
+  }
+  insertGeoGebra() {
+    return this._instance.insertGeoGebra();
+  }
+  insertCountdown() {
+    return this._instance.insertCountdown();
+  }
   changeLanguage(language) {
     return this._instance.changeLanguage(language);
   }
@@ -2196,10 +2244,268 @@ class WhiteboardApp {
     return this._instance.dispose();
   }
 }
-const version = "0.0.4";
+const version = "0.0.8";
+const EMPTY_ARRAY = [];
+function useForceUpdate() {
+  const [, forceUpdate_] = useState({});
+  return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
+}
+function useLastValue(value) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+function usePlayer(player) {
+  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) => {
+    if (player) {
+      player.seekToProgressTime(time);
+    }
+  }, [player]);
+  const lastPlayer = useLastValue(player);
+  const forceUpdate = useForceUpdate();
+  const setSpeed = useCallback((speed2) => {
+    if (player) {
+      player.playbackSpeed = speed2;
+      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
+  };
+}
+const Loading = (props) => {
+  const stroke = getStroke(props);
+  return /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
+      fill: stroke
+    })
+  });
+};
+const Pause = (props) => {
+  const stroke = getStroke(props);
+  return /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M14 19h4V5h-4M6 19h4V5H6v14z",
+      fill: stroke
+    })
+  });
+};
+const Play = (props) => {
+  const stroke = getStroke(props);
+  return /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M8 5.14v14l11-7l-11-7z",
+      fill: stroke
+    })
+  });
+};
+const Icons = {
+  Play: memo(Play),
+  Pause: memo(Pause),
+  Loading: memo(Loading)
+};
+const Button = forwardRef((props, ref) => {
+  const {
+    theme,
+    content,
+    disabled,
+    active,
+    onClick,
+    interactive,
+    placement = "top",
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(Tippy, {
+    className: "fastboard-tip",
+    content,
+    interactive,
+    theme,
+    disabled,
+    placement,
+    offset: TopOffset,
+    duration: 300,
+    children: /* @__PURE__ */ jsx("button", {
+      ref,
+      className: clsx("fastboard-player-control-btn", theme, {
+        active
+      }),
+      onClick,
+      disabled,
+      children
+    })
+  });
+});
+const name = "fastboard-player-control";
+function PlayerControl(_a) {
+  var _b = _a, {
+    autoHide = false,
+    player: player_,
+    theme = "light",
+    i18n
+  } = _b, icons = __objRest(_b, [
+    "autoHide",
+    "player",
+    "theme",
+    "i18n"
+  ]);
+  const [currentTime, setCurrentTime] = useState(0);
+  const player = usePlayer(player_);
+  useEffect(() => {
+    setCurrentTime(player.currentTime);
+  }, [player.currentTime]);
+  useEffect(() => {
+    if (player.currentTime !== currentTime) {
+      player.seekToProgressTime(currentTime);
+    }
+  }, [currentTime]);
+  const isLoading = player.phase === PlayerPhase.WaitingFirstFrame || player.phase === PlayerPhase.Buffering;
+  const isPlaying = player.phase === PlayerPhase.Playing;
+  const {
+    activeColor
+  } = themes[theme];
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(name, theme, {
+      "auto-hide": autoHide
+    }),
+    children: [/* @__PURE__ */ jsx("button", {
+      className: clsx(`${name}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
+      disabled: isLoading,
+      onClick: player.togglePlay,
+      children: /* @__PURE__ */ jsx(Icon, {
+        fallback: isLoading ? /* @__PURE__ */ jsx(Icons.Loading, {
+          theme
+        }) : isPlaying ? /* @__PURE__ */ jsx(Icons.Pause, {
+          theme
+        }) : /* @__PURE__ */ jsx(Icons.Play, {
+          theme
+        }),
+        src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
+        alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
+      })
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(`${name}-slider`, {
+        loading: isLoading
+      }, theme),
+      children: /* @__PURE__ */ jsx(RcSlider, {
+        disabled: isLoading,
+        trackStyle: {
+          background: activeColor
+        },
+        handleStyle: {
+          border: `1px solid ${activeColor}`
+        },
+        value: currentTime,
+        onChange: setCurrentTime,
+        min: 0,
+        max: player.totalTime,
+        step: 100
+      })
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(`${name}-current`, theme),
+      children: renderTime(player.currentTime)
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(`${name}-slash`, theme),
+      children: "/"
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(`${name}-total`, theme),
+      children: renderTime(player.totalTime)
+    }), /* @__PURE__ */ jsx("span", {
+      className: `${name}-btn-interactive`,
+      children: /* @__PURE__ */ jsx(Tippy, {
+        className: "fastboard-tip",
+        content: renderSpeeds(player),
+        theme,
+        placement: "top-end",
+        trigger: "click",
+        offset: TopOffset,
+        arrow: false,
+        interactive: true,
+        children: /* @__PURE__ */ jsx(Button, {
+          content: i18n == null ? void 0 : i18n.t("speed"),
+          theme,
+          disabled: isLoading,
+          children: /* @__PURE__ */ jsxs("span", {
+            className: clsx(`${name}-speed-text`, theme),
+            children: [player.speed, "x"]
+          })
+        })
+      })
+    })]
+  });
+}
+function renderTime(ms) {
+  let seconds = ms / 1e3;
+  const minutes = Math.floor(seconds / 60);
+  seconds = Math.floor(seconds) % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}
+const Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
+function renderSpeeds({
+  speed: current,
+  setSpeed
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(`${name}-panel`, "speed"),
+    children: Speeds.map((speed) => /* @__PURE__ */ jsxs("button", {
+      className: clsx(`${name}-btn`, "speed", {
+        active: speed === current
+      }),
+      onClick: () => setSpeed(speed),
+      children: [speed, "x"]
+    }, speed))
+  });
+}
 function useFastboard(config) {
   const [app, setApp] = useState(null);
   const [currentTarget, ref] = useState(null);
+  const [collector, collectorRef] = useState(null);
   useEffect(() => {
     let isMounted = true;
     const promise = createWhiteboardApp(config).then((app2) => {
@@ -2213,10 +2519,14 @@ function useFastboard(config) {
   }, []);
   useEffect(() => {
     if (app) {
-      app.bindElement(currentTarget);
+      app.bindElement(currentTarget, collector);
     }
-  }, [app, currentTarget]);
-  return Object.assign([app, ref], { app, ref });
+  }, [app, collector, currentTarget]);
+  return Object.assign([app, ref, collectorRef], {
+    app,
+    ref,
+    collectorRef
+  });
 }
 const register = WindowManager.register.bind(WindowManager);
 async function createWhiteboardApp(config) {
@@ -2224,5 +2534,5 @@ async function createWhiteboardApp(config) {
   await app._instance.readyPromise;
   return app;
 }
-export { PageControl, RedoUndo, Toolbar, WhiteboardApp, ZoomControl, createWhiteboardApp, register, useFastboard, version };
+export { PageControl, PlayerControl, RedoUndo, Toolbar, WhiteboardApp, ZoomControl, createWhiteboardApp, register, useFastboard, version };
 //# sourceMappingURL=index.es.js.map