@netless/fastboard 0.0.4 → 0.0.5

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,
@@ -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, {
@@ -2180,15 +2192,41 @@ applyStyles(style);
 class WhiteboardApp {
   constructor(config) {
     __publicField(this, "_instance");
+    __publicField(this, "_target", null);
     this.config = config;
     this._instance = new Instance(config);
   }
+  get target() {
+    return this._target;
+  }
+  get room() {
+    return this._instance.room;
+  }
+  get manager() {
+    return this._instance.manager;
+  }
+  get sdk() {
+    return this._instance.sdk;
+  }
+  get i18n() {
+    return this._instance.i18n;
+  }
   bindElement(target) {
+    this._target = target || null;
     this._instance.target = target || null;
   }
   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,7 +2234,264 @@ class WhiteboardApp {
     return this._instance.dispose();
   }
 }
-const version = "0.0.4";
+const version = "0.0.5";
+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);
@@ -2224,5 +2519,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