@netless/fastboard 0.0.1 → 0.0.5

package/dist/svelte.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var a=require("svelte/store"),n=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("clsx");require("@tippyjs/react");require("rc-slider");function o(t,i){return a.readable(null,s=>{let e=null;n.createWhiteboardApp(i).then(r=>{s(e=r)});const u=t.subscribe(r=>{r&&e&&e.bindElement(r)});return()=>{u(),e&&e.dispose()}})}exports.useFastboard=o;
+//# sourceMappingURL=svelte.cjs.js.map

package/dist/svelte.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.cjs.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":["readable"],"mappings":"kWAqBE,EACA,EACgC,OACzBA,YAA+B,KAAM,GAAO,IAC7C,GAA6B,2BAEb,GAAQ,KAAK,GAAO,GACjC,EAAO,UAGR,GAAU,EAAI,UAAU,GAAO,CAC/B,GAAO,KACJ,YAAY,WAId,IAAM,KAEP,KACG"}

package/dist/svelte.es.js

@@ -0,0 +1,31 @@
+import { readable } from "svelte/store";
+import { createWhiteboardApp } from "./index.es.js";
+import "@netless/window-manager";
+import "white-web-sdk";
+import "i18next";
+import "react";
+import "react-dom";
+import "clsx";
+import "@tippyjs/react";
+import "rc-slider";
+function useFastboard(ref, config) {
+  return readable(null, (set) => {
+    let app_ = null;
+    createWhiteboardApp(config).then((app) => {
+      set(app_ = app);
+    });
+    const dispose = ref.subscribe((div) => {
+      if (div && app_) {
+        app_.bindElement(div);
+      }
+    });
+    return () => {
+      dispose();
+      if (app_) {
+        app_.dispose();
+      }
+    };
+  });
+}
+export { useFastboard };
+//# sourceMappingURL=svelte.es.js.map

package/dist/svelte.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.es.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":[],"mappings":";;;;;;;;;;sBAqBE,KACA,QACgC;SACzB,SAA+B,MAAM,SAAO;QAC7C,OAA6B;wBAEb,QAAQ,KAAK,SAAO;UACjC,OAAO;AAAA;UAGR,UAAU,IAAI,UAAU,SAAO;UAC/B,OAAO,MAAM;aACV,YAAY;AAAA;AAAA;WAId,MAAM;;UAEP,MAAM;aACH;AAAA;AAAA;AAAA;AAAA;;"}

package/dist/vue.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var t=require("vue-demi"),s=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("clsx");require("@tippyjs/react");require("rc-slider");function n(u){var e;const r=t.unref(u);return(e=r==null?void 0:r.$el)!=null?e:r}function o(u){return t.getCurrentScope()?(t.onScopeDispose(u),!0):!1}function l(u,r){const e=t.shallowRef(null),i=t.computed(()=>n(u));return s.createWhiteboardApp(r).then(a=>{e.value=a}),t.watchEffect(()=>{i.value&&e.value&&e.value.bindElement(i.value)}),o(()=>{e.value&&e.value.dispose()}),e}exports.unrefElement=n;exports.useFastboard=l;
+//# sourceMappingURL=vue.cjs.js.map

package/dist/vue.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.cjs.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":["unref","getCurrentScope","shallowRef","computed"],"mappings":"8VAwB6B,EAAwB,YAC7C,GAAQA,QAAM,SACZ,oBAAuB,MAAvB,OAA8B,EAGxC,WAA2B,EAAgB,OACrCC,uCACa,GACR,IAEF,cAkBoB,EAAqB,EAAyB,MACnE,GAAMC,aAAiC,MACvC,EAASC,WAAS,IAAM,EAAa,iCAEvB,GAAQ,KAAK,GAAQ,GACnC,MAAQ,kBAGF,IAAM,CACZ,EAAO,OAAS,EAAI,SAClB,MAAM,YAAY,EAAO,WAIf,IAAM,CAClB,EAAI,SACF,MAAM,YAIP"}

package/dist/vue.es.js

@@ -0,0 +1,42 @@
+import { unref, shallowRef, computed, watchEffect, getCurrentScope, onScopeDispose } from "vue-demi";
+import { createWhiteboardApp } from "./index.es.js";
+import "@netless/window-manager";
+import "white-web-sdk";
+import "i18next";
+import "react";
+import "react-dom";
+import "clsx";
+import "@tippyjs/react";
+import "rc-slider";
+function unrefElement(elRef) {
+  var _a;
+  const plain = unref(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function useFastboard(el, config) {
+  const app = shallowRef(null);
+  const target = computed(() => unrefElement(el));
+  createWhiteboardApp(config).then((app_) => {
+    app.value = app_;
+  });
+  watchEffect(() => {
+    if (target.value && app.value) {
+      app.value.bindElement(target.value);
+    }
+  });
+  tryOnScopeDispose(() => {
+    if (app.value) {
+      app.value.dispose();
+    }
+  });
+  return app;
+}
+export { unrefElement, useFastboard };
+//# sourceMappingURL=vue.es.js.map

package/dist/vue.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.es.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":[],"mappings":";;;;;;;;;;sBAwB6B,OAAwB;;QAC7C,QAAQ,MAAM;SACZ,qCAAuB,QAAvB,YAA8B;AAAA;AAGxC,2BAA2B,IAAgB;MACrC,mBAAmB;mBACN;WACR;AAAA;SAEF;AAAA;sBAkBoB,IAAqB,QAAyB;QACnE,MAAM,WAAiC;QACvC,SAAS,SAAS,MAAM,aAAa;sBAEvB,QAAQ,KAAK,UAAQ;QACnC,QAAQ;AAAA;cAGF,MAAM;QACZ,OAAO,SAAS,IAAI,OAAO;UACzB,MAAM,YAAY,OAAO;AAAA;AAAA;oBAIf,MAAM;QAClB,IAAI,OAAO;UACT,MAAM;AAAA;AAAA;SAIP;AAAA;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "description": "An open sourced sdk based on white-web-sdk.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -14,6 +14,14 @@
       "default": "./dist/index.es.js",
       "types": "./src/index.ts"
     },
+    "./vue": {
+      "node": {
+        "import": "./dist/vue.es.js",
+        "require": "./dist/vue.cjs.js"
+      },
+      "default": "./dist/vue.es.js",
+      "types": "./src/vue.ts"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -37,8 +45,11 @@
     "@netless/app-monaco": "*",
     "@netless/app-slide": "*",
     "@netless/window-manager": "*",
+    "@vue/composition-api": "*",
     "react": "*",
     "react-dom": "*",
+    "svelte": "*",
+    "vue": "*",
     "white-web-sdk": "*"
   },
   "peerDependenciesMeta": {
@@ -53,51 +64,24 @@
     },
     "@netless/app-geogebra": {
       "optional": true
+    },
+    "@vue/composition-api": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
-    "i18next": "^21.6.3",
+    "i18next": "^21.6.5",
     "rc-slider": "^9.7.5",
-    "tippy.js": "^6.3.7"
-  },
-  "devDependencies": {
-    "@hyrious/esbuild-dev": "^0.7.1",
-    "@hyrious/rimraf": "^0.1.0",
-    "@netless/app-countdown": "^0.0.1",
-    "@netless/app-geogebra": "^0.0.2",
-    "@netless/app-monaco": "^0.1.12",
-    "@netless/app-slide": "^0.0.52",
-    "@netless/window-manager": "^0.3.16",
-    "@types/node": "^17.0.4",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
-    "@typescript-eslint/parser": "^5.8.0",
-    "@vitejs/plugin-react": "^1.1.3",
-    "esbuild": "^0.14.8",
-    "eslint": "^8.5.0",
-    "eslint-define-config": "^1.2.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rollup": "^2.61.1",
-    "rollup-plugin-visualizer": "^5.5.2",
-    "sass": "^1.45.1",
-    "type-fest": "^2.8.0",
-    "typescript": "^4.5.4",
-    "vite": "^2.7.6",
-    "white-web-sdk": "^2.15.13"
-  },
-  "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "format": "prettier --write .",
-    "lint": "eslint --ext .ts,.tsx .",
-    "dev": "vite dev --host",
-    "build": "vite build",
-    "build:dev": "vite build --mode development"
+    "tippy.js": "^6.3.7",
+    "vue-demi": "^0.12.1"
   },
-  "readme": "# @netless/fastboard\n\nA whiteboard starter, based on [white-web-sdk](https://www.npmjs.com/package/white-web-sdk), [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager)\nand [netless-app](https://github.com/netless-io/netless-app).\n\n## 目录\n\n- [安装](#install)\n- [使用](#usage)\n- [进阶](./docs/advanced.md)\n- [开发](#开发)\n\n<h2 id=\"install\">安装</h2>\n\n```bash\nnpm add @netless/fastboard\n```\n\n```bash\nyarn add @netless/fastboard\n```\n\n```bash\npnpm add @netless/fastboard\n```\n\n<h2 id=\"usage\">使用</h2>\n\n<h3 id=\"mount-whiteboard\">挂载白板</h3>\n\n> 原生 `javascript`\n\n```js\nimport { createWhiteboardApp } from \"@netless/fastboard\";\n\nlet whiteboard = createWhiteboardApp({\n  target: document.getElementById(\"whiteboard\"),\n  // [1]\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  // [2]\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n  // [3]\n  managerConfig: {\n    cursor: true,\n  },\n});\n```\n\n> 使用 `React`\n\n```typescript\nimport { useFastboard, FastBoardConfig } from \"@netless/fastboard\";\nimport ReactDOM from \"react-dom\";\n\nconst config: FastBoardConfig = {\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n};\n\nfunction App() {\n  const [app, ref] = useFastboard(config);\n  return <div ref={ref} />;\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n```\n\n[1] 关于 SDK 更多配置请看 [构造 WhiteWebSDK](https://developer.netless.link/javascript-zh/home/construct-white-web-sdk)\n\n[2] 加入房间更多配置请看 [构造 Room 与 Player 对象](https://developer.netless.link/javascript-zh/home/construct-room-and-player)\n\n[3] 配置 `WindowManager` 请看 [WindowManager](https://github.com/netless-io/window-manager#mount)\n\n### 使用 APPS\n\n```typescript\n// 插入动态 PPTX 至白板\nconst appId = await whiteboard.insertDocs({\n  fileType: \"pptx\",\n  params: {\n    scenePath: `/ppt/${uuid}`, // [1]\n    title: \"a.pptx\",\n    taskId: \"1234567...\", // [2]\n    url: \"https://convertcdn.netless.link/dynamicConvert\", // [3]\n  },\n});\n\n// 插入 PDF/静态 PPT 至白板\nconst appId = await whiteboard.insertDocs({\n  fileType: \"pdf\", // or ppt\n  options: {\n    scenePath: `/pdf${uuid}`,\n    title: \"a.pdf\", // 可选\n    scenes: [], // SceneDefinition[] 静态/动态 Scene 数据\n  },\n});\n\n// 插入音频/视频至白板\nconst appId = await whiteboard.manager.addApp({\n  kind: \"MediaPlayer\",\n  options: {\n    title: \"test.mp3\", // 可选\n  },\n  attributes: {\n    src: \"xxxx\", // 音视频 url\n  },\n});\n```\n\n更多 `app` 请看 [netless-app](#https://github.com/netless-io/netless-app)\n\n## Develop\n\n```bash\npnpm i\n# upgrade dependencies\npnpm up -Li\n# build and see bundle size\npnpm build\nopen node_modules/.visualizer/stats.html\n```\n\n## License\n\nMIT @ [netless](https://github.com/netless-io)\n"
+  "readme": "# @netless/fastboard\n\nA whiteboard starter, based on [white-web-sdk](https://www.npmjs.com/package/white-web-sdk), [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager)\nand [netless-app](https://github.com/netless-io/netless-app).\n\n## 目录\n\n- [安装](#install)\n- [使用](#usage)\n- [进阶](./docs/advanced.md)\n- [开发](#开发)\n\n<h2 id=\"install\">安装</h2>\n\n```bash\nnpm add @netless/fastboard @netless/window-manager white-web-sdk react react-dom\n```\n\n<h2 id=\"usage\">使用</h2>\n\n<h3 id=\"mount-whiteboard\">挂载白板</h3>\n\n> 原生 `javascript`\n\n```js\nimport { createWhiteboardApp } from \"@netless/fastboard\";\n\nlet whiteboard = await createWhiteboardApp({\n  target: document.getElementById(\"whiteboard\"),\n  // [1]\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  // [2]\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n  // [3]\n  managerConfig: {\n    cursor: true,\n  },\n});\n```\n\n> 使用 `React`\n\n```typescript\nimport { useFastboard, FastBoardConfig } from \"@netless/fastboard\";\nimport ReactDOM from \"react-dom\";\n\nconst config: FastBoardConfig = {\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n};\n\nfunction App() {\n  const [app, ref] = useFastboard(config);\n  return <div ref={ref} />;\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n```\n\n[1] 关于 SDK 更多配置请看 [构造 WhiteWebSDK](https://developer.netless.link/javascript-zh/home/construct-white-web-sdk)\n\n[2] 加入房间更多配置请看 [构造 Room 与 Player 对象](https://developer.netless.link/javascript-zh/home/construct-room-and-player)\n\n[3] 配置 `WindowManager` 请看 [WindowManager](https://github.com/netless-io/window-manager#mount)\n\n### 使用 APPS\n\n**注意:** 需要先安装对应的 APP\n\n```bash\nnpm add @netless/app-slide\n```\n\n```typescript\n// 插入动态 PPTX 至白板\nconst appId = await whiteboard.insertDocs({\n  fileType: \"pptx\",\n  params: {\n    scenePath: `/ppt/${uuid}`, // [1]\n    title: \"a.pptx\",\n    taskId: \"1234567...\", // [2]\n    url: \"https://convertcdn.netless.link/dynamicConvert\", // [3]\n  },\n});\n\n// 插入 PDF/静态 PPT 至白板\nconst appId = await whiteboard.insertDocs({\n  fileType: \"pdf\", // or ppt\n  options: {\n    scenePath: `/pdf${uuid}`,\n    title: \"a.pdf\", // 可选\n    scenes: [], // SceneDefinition[] 静态/动态 Scene 数据\n  },\n});\n\n// 插入音频/视频至白板\nconst appId = await whiteboard.manager.addApp({\n  kind: \"MediaPlayer\",\n  options: {\n    title: \"test.mp3\", // 可选\n  },\n  attributes: {\n    src: \"xxxx\", // 音视频 url\n  },\n});\n```\n\n更多 `app` 请看 [netless-app](#https://github.com/netless-io/netless-app)\n\n## Develop\n\n```bash\npnpm i\n# upgrade dependencies\npnpm up -Li\n# build and see bundle size\npnpm build\nopen node_modules/.visualizer/stats.html\n```\n\n## License\n\nMIT @ [netless](https://github.com/netless-io)\n"
 }

package/src/WhiteboardApp.ts

@@ -10,18 +10,54 @@ export type { WhiteboardAppConfig, InsertDocsParams };
 export class WhiteboardApp {
   private readonly _instance: Instance;
 
+  private _target: HTMLElement | null = null;
+  public get target(): HTMLElement | null {
+    return this._target;
+  }
+
   constructor(readonly config: WhiteboardAppConfig) {
     this._instance = new Instance(config);
   }
 
+  get room() {
+    return this._instance.room;
+  }
+
+  get manager() {
+    return this._instance.manager;
+  }
+
+  get sdk() {
+    return this._instance.sdk;
+  }
+
+  get i18n() {
+    return this._instance.i18n;
+  }
+
+  public bindElement(target?: HTMLElement | null) {
+    this._target = target || null;
+    this._instance.target = target || null;
+  }
+
   public insertDocs(params: InsertDocsParams) {
     return this._instance.insertDocs(params);
   }
 
+  public insertCodeEditor() {
+    return this._instance.insertCodeEditor();
+  }
+
+  public insertGeoGebra() {
+    return this._instance.insertGeoGebra();
+  }
+
+  public insertCountdown() {
+    return this._instance.insertCountdown();
+  }
+
   public changeLanguage(language: Language) {
-    return this._instance.changeLanguage(language)?.finally(() => {
-      this._instance.forceUpdate();
-    });
+    return this._instance.changeLanguage(language);
   }
 
   public dispose() {

package/src/behaviors/style.ts

@@ -1,4 +1,4 @@
-import { applyStyles } from "../helpers";
+import { applyStyles } from "../internal";
 import style from "../style.scss?inline";
 
 const newEl = applyStyles(style);

package/src/components/PlayerControl/PlayerControl.scss

@@ -0,0 +1,145 @@
+$name: "fastboard-player-control";
+
+.#{$name} {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 4px;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+
+  &.auto-hide {
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .rc-slider-disabled {
+    background: transparent;
+    opacity: 0.5;
+  }
+
+  .rc-slider-rail,
+  .rc-slider-track {
+    height: 2px;
+  }
+
+  .tippy-content {
+    padding: 8px;
+  }
+  .tippy-box {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba($color: #333, $alpha: 0.95);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+  }
+  .tippy-box[data-theme~="light"] {
+    background-color: rgba($color: #fff, $alpha: 0.95);
+    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
+  }
+
+  &.light {
+    color: #333;
+    background-color: rgba($color: #fff, $alpha: 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  &.dark {
+    color: #ddd;
+    background-color: rgba($color: #333, $alpha: 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.45);
+  }
+}
+
+.#{$name}-btn {
+  appearance: none;
+  cursor: pointer;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  min-width: 24px;
+  height: 24px;
+  background-color: transparent;
+  border-radius: 4px;
+  font-size: 24px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg,
+  img {
+    width: 1em;
+    height: 1em;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.light:not(:disabled):hover {
+    background-color: rgba(51, 129, 255, 0.1);
+  }
+
+  &.dark:not(:disabled):hover {
+    background-color: rgba(51, 129, 255, 0.25);
+  }
+
+  &.loading {
+    animation: fastboard-player-control-rotate 0.5s linear infinite;
+  }
+
+  @keyframes fastboard-player-control-rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+.#{$name}-panel {
+  padding: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  gap: 4px;
+
+  .#{$name}-btn {
+    width: initial;
+    height: initial;
+    user-select: none;
+    font-size: 12px;
+    padding: 4px;
+    justify-content: flex-end;
+
+    &.active {
+      color: #3381ff;
+    }
+  }
+}
+
+.#{$name}-slider {
+  width: 100%;
+  padding: 0 7px;
+
+  &.loading {
+    cursor: not-allowed;
+  }
+}
+
+.#{$name}-slash {
+  opacity: 0.6;
+}
+
+.#{$name}-current,
+.#{$name}-slash,
+.#{$name}-total,
+.#{$name}-speed-text {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}

package/src/components/PlayerControl/PlayerControl.tsx

@@ -0,0 +1,158 @@
+import type { Player } from "white-web-sdk";
+import type { CommonProps, GenericIcon } from "../../types";
+
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import RcSlider from "rc-slider";
+import { PlayerPhase } from "white-web-sdk";
+import { usePlayer } from "./hooks";
+import { Icon } from "../../icons";
+import { themes, TopOffset } from "../../theme";
+import { Icons } from "./icons";
+import Tippy from "@tippyjs/react";
+import { Button } from "./components/Button";
+
+export type PlayerControlProps = {
+  autoHide?: boolean;
+  player?: Player;
+} & Omit<CommonProps, "room"> &
+  GenericIcon<"play" | "pause" | "loading">;
+
+export const name = "fastboard-player-control";
+
+export function PlayerControl({
+  autoHide = false,
+  player: player_,
+  theme = "light",
+  i18n,
+  ...icons
+}: PlayerControlProps) {
+  const [currentTime, setCurrentTime] = useState(0);
+  const player = usePlayer(player_);
+
+  useEffect(() => {
+    setCurrentTime(player.currentTime);
+  }, [player.currentTime]);
+
+  useEffect(() => {
+    if (player.currentTime !== currentTime) {
+      player.seekToProgressTime(currentTime);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentTime]);
+
+  const isLoading =
+    player.phase === PlayerPhase.WaitingFirstFrame ||
+    player.phase === PlayerPhase.Buffering;
+  const isPlaying = player.phase === PlayerPhase.Playing;
+
+  const { activeColor } = themes[theme];
+
+  return (
+    <div className={clsx(name, theme, { "auto-hide": autoHide })}>
+      <button
+        className={clsx(
+          `${name}-btn`,
+          isLoading ? "loading" : isPlaying ? "pause" : "play",
+          theme
+        )}
+        disabled={isLoading}
+        onClick={player.togglePlay}
+      >
+        <Icon
+          fallback={
+            isLoading ? (
+              <Icons.Loading theme={theme} />
+            ) : isPlaying ? (
+              <Icons.Pause theme={theme} />
+            ) : (
+              <Icons.Play theme={theme} />
+            )
+          }
+          src={
+            isLoading
+              ? icons.loadingIcon
+              : isPlaying
+              ? icons.pauseIcon
+              : icons.playIcon
+          }
+          alt={isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"}
+        />
+      </button>
+      <span className={clsx(`${name}-slider`, { loading: isLoading }, theme)}>
+        <RcSlider
+          disabled={isLoading}
+          trackStyle={{ background: activeColor }}
+          handleStyle={{ border: `1px solid ${activeColor}` }}
+          value={currentTime}
+          onChange={setCurrentTime}
+          min={0}
+          max={player.totalTime}
+          step={100}
+        />
+      </span>
+      <span className={clsx(`${name}-current`, theme)}>
+        {renderTime(player.currentTime)}
+      </span>
+      <span className={clsx(`${name}-slash`, theme)}>/</span>
+      <span className={clsx(`${name}-total`, theme)}>
+        {renderTime(player.totalTime)}
+      </span>
+      <span className={`${name}-btn-interactive`}>
+        <Tippy
+          className="fastboard-tip"
+          content={renderSpeeds(player)}
+          theme={theme}
+          placement="top-end"
+          trigger="click"
+          offset={TopOffset}
+          arrow={false}
+          interactive
+        >
+          <Button content={i18n?.t("speed")} theme={theme} disabled={isLoading}>
+            <span className={clsx(`${name}-speed-text`, theme)}>
+              {player.speed}x
+            </span>
+          </Button>
+        </Tippy>
+      </span>
+    </div>
+  );
+}
+
+function renderTime(ms: number) {
+  let seconds = ms / 1000;
+  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.0, 1.5, 1.25, 1.0, 0.75, 0.5];
+
+function renderSpeeds({
+  speed: current,
+  setSpeed,
+}: {
+  speed: number;
+  setSpeed: (speed: number) => void;
+}) {
+  return (
+    <div className={clsx(`${name}-panel`, "speed")}>
+      {Speeds.map(speed => (
+        <button
+          className={clsx(`${name}-btn`, "speed", {
+            active: speed === current,
+          })}
+          key={speed}
+          onClick={() => setSpeed(speed)}
+        >
+          {speed}x
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/PlayerControl/components/Button.tsx

@@ -0,0 +1,55 @@
+import type { Placement } from "tippy.js";
+import type { Theme } from "../../../types";
+
+import clsx from "clsx";
+import React, { forwardRef, type PropsWithChildren } from "react";
+import Tippy from "@tippyjs/react";
+
+import { TopOffset } from "../../../theme";
+
+type ButtonProps = PropsWithChildren<{
+  theme: Theme;
+  content: React.ReactNode;
+  disabled?: boolean;
+  active?: boolean;
+  onClick?: () => void;
+  interactive?: boolean;
+  placement?: Placement;
+}>;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      theme,
+      content,
+      disabled,
+      active,
+      onClick,
+      interactive,
+      placement = "top",
+      children,
+    } = props;
+
+    return (
+      <Tippy
+        className="fastboard-tip"
+        content={content}
+        interactive={interactive}
+        theme={theme}
+        disabled={disabled}
+        placement={placement}
+        offset={TopOffset}
+        duration={300}
+      >
+        <button
+          ref={ref}
+          className={clsx("fastboard-player-control-btn", theme, { active })}
+          onClick={onClick}
+          disabled={disabled}
+        >
+          {children}
+        </button>
+      </Tippy>
+    );
+  }
+);