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

package/dist/index.mjs

@@ -9930,13 +9930,13 @@ function create_fragment57(ctx) {
     m(target, anchor) {
       insert(target, div2, anchor);
       append(div2, div0);
-      ctx[5](div0);
+      ctx[7](div0);
       append(div2, t);
       append(div2, div1);
       mount_component(playercontrol, div1, null);
       current = true;
       if (!mounted) {
-        dispose = listen(div0, "touchstart", tippy_hide_all, { passive: true, capture: true });
+        dispose = listen(div0, "touchstart", ctx[4], { passive: true, capture: true });
         mounted = true;
       }
     },
@@ -9966,7 +9966,7 @@ function create_fragment57(ctx) {
     d(detaching) {
       if (detaching)
         detach(div2);
-      ctx[5](null);
+      ctx[7](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);
@@ -9989,6 +9990,11 @@ function instance57($$self, $$props, $$invalidate) {
       };
     }
   });
+  function focus_me() {
+    tippy_hide_all();
+    let a = document.activeElement;
+    a && a.blur && a.blur();
+  }
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
@@ -10003,25 +10009,36 @@ function instance57($$self, $$props, $$invalidate) {
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
     if ("containerRef" in $$props2)
-      $$invalidate(4, containerRef = $$props2.containerRef);
+      $$invalidate(5, containerRef = $$props2.containerRef);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
       try {
-          if (player && container)
+          if (player && container) {
             player.bindContainer(container);
+            $$invalidate(6, 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 & 67) {
+      if (player && theme && mounted) {
           player.manager.setPrefersColorScheme(theme);
         }
     }
   };
-  return [player, theme, language, container, containerRef, div0_binding];
+  return [
+    player,
+    theme,
+    language,
+    container,
+    focus_me,
+    containerRef,
+    mounted,
+    div0_binding
+  ];
 }
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
@@ -10030,7 +10047,7 @@ var ReplayFastboard = class extends SvelteComponent {
       player: 0,
       theme: 1,
       language: 2,
-      containerRef: 4
+      containerRef: 5
     });
   }
 };
@@ -10262,7 +10279,7 @@ function create_fragment58(ctx) {
     m(target, anchor) {
       insert(target, div4, anchor);
       append(div4, div0);
-      ctx[13](div0);
+      ctx[15](div0);
       append(div4, t0);
       append(div4, div1);
       if (if_block0)
@@ -10280,7 +10297,7 @@ function create_fragment58(ctx) {
         if_block3.m(div3, null);
       current = true;
       if (!mounted) {
-        dispose = listen(div0, "touchstart", tippy_hide_all, { passive: true, capture: true });
+        dispose = listen(div0, "touchstart", ctx[9], { passive: true, capture: true });
         mounted = true;
       }
     },
@@ -10394,7 +10411,7 @@ function create_fragment58(ctx) {
     d(detaching) {
       if (detaching)
         detach(div4);
-      ctx[13](null);
+      ctx[15](null);
       if (if_block0)
         if_block0.d();
       if (if_block1)
@@ -10413,9 +10430,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(12, $focusedApp = $$value)), focusedApp);
+  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(13, $boxState = $$value)), boxState);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(14, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_focusedApp());
   $$self.$$.on_destroy.push(() => $$unsubscribe_boxState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
@@ -10427,6 +10444,7 @@ function instance58($$self, $$props, $$invalidate) {
   const AppsShowToolbar = ["DocsViewer", "Slide"];
   let container;
   let layout = "hidden";
+  let mounted = false;
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -10436,6 +10454,11 @@ function instance58($$self, $$props, $$invalidate) {
       };
     }
   });
+  function focus_me() {
+    tippy_hide_all();
+    let a = document.activeElement;
+    a && a.blur && a.blur();
+  }
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
@@ -10450,7 +10473,7 @@ function instance58($$self, $$props, $$invalidate) {
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
     if ("containerRef" in $$props2)
-      $$invalidate(9, containerRef = $$props2.containerRef);
+      $$invalidate(10, containerRef = $$props2.containerRef);
     if ("config" in $$props2)
       $$invalidate(3, config = $$props2.config);
   };
@@ -10464,7 +10487,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 & 28672) {
       if (!$writable) {
           $$invalidate(5, layout = "hidden");
         } else if ($boxState === "maximized") {
@@ -10479,15 +10502,17 @@ function instance58($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty & 17) {
       try {
-          if (app && container)
+          if (app && container) {
             app.bindContainer(container);
+            $$invalidate(11, 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 & 2051) {
+      if (app && theme && mounted) {
           app.manager.setPrefersColorScheme(theme);
         }
     }
@@ -10502,7 +10527,9 @@ function instance58($$self, $$props, $$invalidate) {
     focusedApp,
     boxState,
     writable2,
+    focus_me,
     containerRef,
+    mounted,
     $focusedApp,
     $boxState,
     $writable,
@@ -10516,13 +10543,69 @@ var Fastboard = class extends SvelteComponent {
       app: 0,
       theme: 1,
       language: 2,
-      containerRef: 9,
+      containerRef: 10,
       config: 3
     });
   }
 };
 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 +10622,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