@netless/fastboard-ui 0.3.0-canary.6 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.0-canary.6",
+  "version": "0.3.1",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -10,14 +10,14 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "0.3.0-canary.6"
+    "@netless/fastboard-core": "0.3.1"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.0-canary.6"
+    "@netless/fastboard-core": "0.3.1"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/actions/tippy.ts

@@ -64,6 +64,7 @@ export function tippy_hide_all() {
 
 export const tippy_menu: Partial<Props> = {
   delay: 0,
+  duration: [50, 300],
   placement: "right-start",
   interactive: true,
   trigger: "click",

package/src/behaviors/apps.ts

@@ -0,0 +1,70 @@
+import type { FastboardApp } from "@netless/fastboard-core";
+import code_editor_svg from "./icons/visual-studio-code.svg";
+import geogebra_svg from "./icons/geogebra.svg";
+import countdown_svg from "./icons/countdown.svg";
+
+export interface AppInToolbar {
+  kind: string;
+  icon: string;
+  label: string;
+  onClick: (app: FastboardApp) => void;
+}
+
+class AppsInToolbar {
+  _listeners: Array<(data: AppInToolbar[]) => void> = [];
+  constructor(private _data: AppInToolbar[]) {}
+  get data() {
+    return this._data;
+  }
+  get length() {
+    return this._data.length;
+  }
+  subscribe(fn: (data: AppInToolbar[]) => void) {
+    this._listeners.push(fn);
+    fn(this._data);
+    return () => {
+      this._listeners = this._listeners.filter(item => item !== fn);
+    };
+  }
+  push(...data: AppInToolbar[]) {
+    this._data.push(...data);
+    this._listeners.forEach(fn => fn(this._data));
+  }
+  insert(data: AppInToolbar, index: number) {
+    this._data.splice(index, 0, data);
+    this._listeners.forEach(fn => fn(this._data));
+  }
+  delete(filter: (data: AppInToolbar) => boolean) {
+    this._data = this._data.filter(item => !filter(item));
+    this._listeners.forEach(fn => fn(this._data));
+  }
+}
+
+export type { AppsInToolbar };
+
+export const apps = new AppsInToolbar([
+  {
+    kind: "Monaco",
+    icon: code_editor_svg,
+    label: "Code Editor",
+    onClick(app) {
+      app.insertCodeEditor();
+    },
+  },
+  {
+    kind: "GeoGebra",
+    icon: geogebra_svg,
+    label: "GeoGebra",
+    onClick(app) {
+      app.insertGeoGebra();
+    },
+  },
+  {
+    kind: "Countdown",
+    icon: countdown_svg,
+    label: "Countdown",
+    onClick(app) {
+      app.insertCountdown();
+    },
+  },
+]);

package/src/behaviors/index.ts

@@ -1,68 +1 @@
-import type { FastboardApp } from "@netless/fastboard-core";
-import code_editor_svg from "./icons/visual-studio-code.svg";
-import geogebra_svg from "./icons/geogebra.svg";
-import countdown_svg from "./icons/countdown.svg";
-
-export interface AppInToolbar {
-  kind: string;
-  icon: string;
-  label: string;
-  onClick: (app: FastboardApp) => void;
-}
-
-class AppsInToolbar {
-  _listeners: Array<(data: AppInToolbar[]) => void> = [];
-  constructor(private _data: AppInToolbar[]) {}
-  get data() {
-    return this._data;
-  }
-  get length() {
-    return this._data.length;
-  }
-  subscribe(fn: (data: AppInToolbar[]) => void) {
-    this._listeners.push(fn);
-    fn(this._data);
-    return () => {
-      this._listeners = this._listeners.filter(item => item !== fn);
-    };
-  }
-  push(data: AppInToolbar) {
-    this._data.push(data);
-    this._listeners.forEach(fn => fn(this._data));
-  }
-  insert(data: AppInToolbar, index: number) {
-    this._data.splice(index, 0, data);
-    this._listeners.forEach(fn => fn(this._data));
-  }
-  delete(filter: (data: AppInToolbar) => boolean) {
-    this._data = this._data.filter(item => !filter(item));
-    this._listeners.forEach(fn => fn(this._data));
-  }
-}
-
-export const apps = new AppsInToolbar([
-  {
-    kind: "Monaco",
-    icon: code_editor_svg,
-    label: "Code Editor",
-    onClick(app) {
-      app.insertCodeEditor();
-    },
-  },
-  {
-    kind: "GeoGebra",
-    icon: geogebra_svg,
-    label: "GeoGebra",
-    onClick(app) {
-      app.insertGeoGebra();
-    },
-  },
-  {
-    kind: "Countdown",
-    icon: countdown_svg,
-    label: "Countdown",
-    onClick(app) {
-      app.insertCountdown();
-    },
-  },
-]);
+export * from "./apps";

package/src/components/Fastboard/Fastboard.scss

@@ -21,6 +21,7 @@
   top: 8px;
   left: 0;
   z-index: 200;
+  pointer-events: none;
 
   .fastboard-toolbar {
     padding-left: 16px;
@@ -35,6 +36,7 @@
   left: 8px;
   padding: 8px;
   z-index: 200;
+  pointer-events: none;
 }
 
 .fastboard-bottom-right {
@@ -47,3 +49,13 @@
   @extend .fastboard-bottom-left;
   right: 8px;
 }
+
+.fastboard-left,
+.fastboard-bottom,
+.fastboard-bottom-left,
+.fastboard-bottom-right {
+  &.hidden * {
+    opacity: 0;
+    pointer-events: none;
+  }
+}

package/src/components/Fastboard/Fastboard.svelte

@@ -14,8 +14,26 @@
   export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
 
   const name = "fastboard";
+  const AppsShowToolbar = ["DocsViewer", "Slide"];
 
   let container: HTMLDivElement;
+  let layout: "hidden" | "toolbar-only" | "visible" = "hidden";
+
+  $: writable = app?.writable;
+  $: boxState = app?.boxState;
+  $: focusedApp = app?.focusedApp;
+
+  $: if (!$writable) {
+    layout = "hidden";
+  } else if ($boxState === "maximized") {
+    if ($focusedApp && AppsShowToolbar.some(kind => ($focusedApp || "").includes(kind))) {
+      layout = "toolbar-only";
+    } else {
+      layout = "hidden";
+    }
+  } else {
+    layout = "visible";
+  }
 
   $: try {
     if (app && container) app.bindContainer(container);
@@ -24,6 +42,10 @@
     console.error(err);
   }
 
+  $: if (app && theme) {
+    app.manager.setPrefersColorScheme(theme);
+  }
+
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -36,14 +58,14 @@
 
 <div class="{name}-root" class:loading={!app}>
   <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
-  <div class="{name}-left">
+  <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
     <Toolbar {app} {theme} {language} />
   </div>
-  <div class="{name}-bottom-left">
+  <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>
     <RedoUndo {app} {theme} {language} />
     <ZoomControl {app} {theme} {language} />
   </div>
-  <div class="{name}-bottom-right">
+  <div class="{name}-bottom-right" class:hidden={layout !== "visible"}>
     <PageControl {app} {theme} {language} />
   </div>
 </div>

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -21,6 +21,10 @@
     console.error(err);
   }
 
+  $: if (player && theme) {
+    player.manager.setPrefersColorScheme(theme);
+  }
+
   onMount(() => {
     if (containerRef) {
       containerRef(container);

package/src/components/PageControl/PageControl.svelte

@@ -49,6 +49,7 @@
 
   function addPage() {
     app?.addPage({ after: true });
+    app?.nextPage();
   }
 </script>
 

package/src/components/PlayerControl/PlayerControl.svelte

@@ -46,7 +46,7 @@
   $: disabled = !canPlay;
   $: duration = player?.duration;
   $: current = player?.currentTime;
-  $: speed = player?.speed;
+  $: playbackRate = player?.playbackRate;
 
   $: phase = player?.phase;
   $: loading = $phase === "waitingFirstFrame" || $phase === "buffering";
@@ -76,9 +76,9 @@
     player.seek(seconds * 1000);
   }
 
-  function setSpeed(speed: number) {
+  function setPlaybackRate(speed: number) {
     if (!player) return;
-    player.setSpeed(speed);
+    player.setPlaybackRate(speed);
   }
 </script>
 
@@ -132,7 +132,7 @@
     menu={speed_panel}
     menu_placement="top-end"
   >
-    <span class="{name}-speed-text">{$speed}x</span>
+    <span class="{name}-speed-text">{$playbackRate || 1}x</span>
   </Button>
 </div>
 
@@ -140,11 +140,11 @@
   <div class="{name}-panel speed" bind:this={speed_panel}>
     {#each speeds as s (s)}
       <Button
-        class="speed {s === $speed ? 'is-active' : ''}"
+        class="speed {s === $playbackRate ? 'is-active' : ''}"
         {name}
         {theme}
         {disabled}
-        on:click={() => setSpeed(s)}
+        on:click={() => setPlaybackRate(s)}
       >
         {s}x
       </Button>

package/src/components/Toolbar/Toolbar.scss

@@ -9,6 +9,7 @@ $name: "fastboard-toolbar";
   position: relative;
   transform: translateX(0);
   transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: none;
 
   &.collapsed {
     transform: translateX(-100%);
@@ -21,6 +22,7 @@ $name: "fastboard-toolbar";
   width: 17px;
   font-size: 0;
   cursor: pointer;
+  pointer-events: auto;
 
   input[type="checkbox"] {
     position: absolute;

package/src/components/Toolbar/components/Contents.scss

@@ -112,14 +112,15 @@ $name: "fastboard-toolbar";
 
 .#{$name}-panel.apps {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(min(var(--n, 3), 3), minmax(max-content, 1fr));
   gap: 4px;
 }
 
 .#{$name}-app-btn {
   margin: 0;
   border: 0;
-  padding: 4px;
+  border-radius: 2px;
+  padding: 4px 6px;
   background-color: transparent;
   display: inline-flex;
   flex-direction: column;
@@ -139,6 +140,7 @@ $name: "fastboard-toolbar";
 
   &-text {
     font-size: 14px;
+    line-height: 1;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;

package/src/components/Toolbar/components/Contents.svelte

@@ -172,8 +172,8 @@
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} />
   </div>
-  <div class="{name}-panel apps" bind:this={apps_panel}>
-    {#each apps.data as netless_app (netless_app.kind)}
+  <div class="{name}-panel apps" style="--n:{$apps.length}" bind:this={apps_panel}>
+    {#each $apps as netless_app}
       {@const { icon, label, kind, onClick } = netless_app}
       {@const state = $status && $status[kind]}
       <button

package/src/components/theme.scss

@@ -45,6 +45,7 @@ $themes: (
   border-radius: 4px;
   font-size: 14px;
   font-family: system-ui;
+  pointer-events: auto;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);