@netless/fastboard-ui 0.3.4-canary.0 → 0.3.4

package/dist/index.mjs

@@ -9930,7 +9930,7 @@ function create_fragment57(ctx) {
     m(target, anchor) {
       insert(target, div2, anchor);
       append(div2, div0);
-      ctx[5](div0);
+      ctx[6](div0);
       append(div2, t);
       append(div2, div1);
       mount_component(playercontrol, div1, null);
@@ -9966,7 +9966,7 @@ function create_fragment57(ctx) {
     d(detaching) {
       if (detaching)
         detach(div2);
-      ctx[5](null);
+      ctx[6](null);
       destroy_component(playercontrol);
       mounted = false;
       dispose();
@@ -9980,6 +9980,7 @@ function instance57($$self, $$props, $$invalidate) {
   let { language = "en" } = $$props;
   let { containerRef = void 0 } = $$props;
   let container;
+  let mounted = false;
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -10008,20 +10009,22 @@ function instance57($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
       try {
-          if (player && container)
+          if (player && container) {
             player.bindContainer(container);
+            $$invalidate(5, mounted = true);
+          }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 3) {
-      if (player && theme) {
+    if ($$self.$$.dirty & 35) {
+      if (player && theme && mounted) {
           player.manager.setPrefersColorScheme(theme);
         }
     }
   };
-  return [player, theme, language, container, containerRef, div0_binding];
+  return [player, theme, language, container, containerRef, mounted, div0_binding];
 }
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
@@ -10262,7 +10265,7 @@ function create_fragment58(ctx) {
     m(target, anchor) {
       insert(target, div4, anchor);
       append(div4, div0);
-      ctx[13](div0);
+      ctx[14](div0);
       append(div4, t0);
       append(div4, div1);
       if (if_block0)
@@ -10394,7 +10397,7 @@ function create_fragment58(ctx) {
     d(detaching) {
       if (detaching)
         detach(div4);
-      ctx[13](null);
+      ctx[14](null);
       if (if_block0)
         if_block0.d();
       if (if_block1)
@@ -10413,9 +10416,9 @@ function instance58($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
-  let $focusedApp, $$unsubscribe_focusedApp = noop, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe(focusedApp, ($$value) => $$invalidate(10, $focusedApp = $$value)), focusedApp);
-  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(11, $boxState = $$value)), boxState);
-  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(12, $writable = $$value)), writable2);
+  let $focusedApp, $$unsubscribe_focusedApp = noop, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe(focusedApp, ($$value) => $$invalidate(11, $focusedApp = $$value)), focusedApp);
+  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(12, $boxState = $$value)), boxState);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(13, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_focusedApp());
   $$self.$$.on_destroy.push(() => $$unsubscribe_boxState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
@@ -10427,6 +10430,7 @@ function instance58($$self, $$props, $$invalidate) {
   const AppsShowToolbar = ["DocsViewer", "Slide"];
   let container;
   let layout = "hidden";
+  let mounted = false;
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -10464,7 +10468,7 @@ function instance58($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty & 1) {
       $$subscribe_focusedApp($$invalidate(6, focusedApp = app == null ? void 0 : app.focusedApp));
     }
-    if ($$self.$$.dirty & 7168) {
+    if ($$self.$$.dirty & 14336) {
       if (!$writable) {
           $$invalidate(5, layout = "hidden");
         } else if ($boxState === "maximized") {
@@ -10479,15 +10483,17 @@ function instance58($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty & 17) {
       try {
-          if (app && container)
+          if (app && container) {
             app.bindContainer(container);
+            $$invalidate(10, mounted = true);
+          }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 3) {
-      if (app && theme) {
+    if ($$self.$$.dirty & 1027) {
+      if (app && theme && mounted) {
           app.manager.setPrefersColorScheme(theme);
         }
     }
@@ -10503,6 +10509,7 @@ function instance58($$self, $$props, $$invalidate) {
     boxState,
     writable2,
     containerRef,
+    mounted,
     $focusedApp,
     $boxState,
     $writable,
@@ -10523,6 +10530,62 @@ var Fastboard = class extends SvelteComponent {
 };
 var Fastboard_default = Fastboard;
 
+// src/helpers/index.ts
+function createUI(app, div) {
+  let fastboard;
+  const ui = {
+    mount(div2, props) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new Fastboard_default({ target: div2, props: __spreadValues({ app }, props) });
+      return ui;
+    },
+    update(props) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = void 0;
+    }
+  };
+  if (div) {
+    ui.mount(div);
+  }
+  return ui;
+}
+function createReplayUI(player, div) {
+  let fastboard;
+  const ui = {
+    mount(div2, props) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new ReplayFastboard_default({ target: div2, props: __spreadValues({ player }, props) });
+      return ui;
+    },
+    update(props) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = void 0;
+    }
+  };
+  if (div) {
+    ui.mount(div);
+  }
+  return ui;
+}
+
 // inline-sass-helper:inline-sass-style-helper.js
 function injectStyle(text2) {
   if (typeof document !== "undefined") {
@@ -10539,5 +10602,5 @@ var style_default = '.tippy-box[data-animation=fade][data-state=hidden]{opacity:
 // inline-sass-stub:./src/style.scss
 injectStyle(style_default);
 
-export { Fastboard_default as Fastboard, PageControl_default as PageControl, PlayerControl_default as PlayerControl, RedoUndo_default as RedoUndo, ReplayFastboard_default as ReplayFastboard, Toolbar_default as Toolbar, ZoomControl_default as ZoomControl, apps };
+export { Fastboard_default as Fastboard, PageControl_default as PageControl, PlayerControl_default as PlayerControl, RedoUndo_default as RedoUndo, ReplayFastboard_default as ReplayFastboard, Toolbar_default as Toolbar, ZoomControl_default as ZoomControl, apps, createReplayUI, createUI };
 //# sourceMappingURL=index.mjs.map