@netless/fastboard-ui 0.3.8 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -10,19 +10,20 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "0.3.8"
+    "@netless/fastboard-core": "0.3.9"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@netless/fastboard-core": "0.3.8",
-    "@netless/esbuild-plugin-inline-sass": "0.1.0"
+    "@netless/fastboard-core": "0.3.9",
+    "@netless/esbuild-plugin-inline-sass": "0.1.0",
+    "@netless/buildtool": "0.1.0"
   },
   "scripts": {
     "cleanup": "rimraf dist",
     "check": "tsc --noEmit && svelte-check",
-    "build": "tsup",
+    "build": "buildtool",
     "dev": "vite",
     "test:ssr": "esbuild-dev test/ssr.ts"
   },

package/src/actions/tippy.ts

@@ -1,10 +1,9 @@
 import type { Instance, Props } from "tippy.js";
 import type { SvelteAction } from "../typings";
-import { is_client } from "svelte/internal";
 
 import Tippy from "tippy.js";
 
-if (is_client) {
+if (typeof window !== "undefined") {
   Tippy.setDefaultProps({
     delay: [1000, 400],
     duration: 300,

package/src/components/Button/Button.svelte.d.ts

@@ -1,6 +1,6 @@
-import { SvelteComponentTyped } from "svelte";
 import type { Content, Placement } from "tippy.js";
 import type { Theme } from "../../typings";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface ButtonProps {
   class?: string;

package/src/components/Fastboard/Fastboard.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
 import type { Theme, Language, FastboardUIConfig } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface FastboardProps {
   app?: FastboardApp | null;

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
   import type { FastboardPlayer } from "@netless/fastboard-core";
-  import type { Language, Theme } from "../../typings";
+  import type { Language, ReplayFastboardUIConfig, Theme } from "../../typings";
   import { onMount } from "svelte";
   import { tippy_hide_all } from "../../actions/tippy";
   import PlayerControl from "../PlayerControl";
@@ -11,6 +11,7 @@
   export let theme: Theme = "light";
   export let language: Language = "en";
   export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
+  export let config: ReplayFastboardUIConfig = {};
 
   const name = "fastboard";
 
@@ -51,6 +52,8 @@
 <div class="{name}-root" class:loading={!player}>
   <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
   <div class="{name}-bottom">
-    <PlayerControl {player} {theme} {language} />
+    {#if config.player_control?.enable !== false}
+      <PlayerControl {player} {theme} {language} />
+    {/if}
   </div>
 </div>

package/src/components/Fastboard/ReplayFastboard.svelte.d.ts

@@ -1,12 +1,13 @@
 import type { FastboardPlayer } from "@netless/fastboard-core";
-import type { Theme, Language } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import type { Theme, Language, ReplayFastboardUIConfig } from "../../typings";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface ReplayFastboardProps {
   player?: FastboardPlayer | null;
   theme?: Theme;
   language?: Language;
   containerRef?: (container: HTMLDivElement | null) => void;
+  config?: ReplayFastboardUIConfig;
 }
 
 declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}

package/src/components/Icon/Icon.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface IconProps {
   src?: string;

package/src/components/PageControl/PageControl.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
 import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface PageControlProps {
   app?: FastboardApp | null;

package/src/components/PlayerControl/PlayerControl.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { FastboardPlayer } from "@netless/fastboard-core";
 import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface PlayerControlProps {
   player?: FastboardPlayer | null;

package/src/components/RedoUndo/RedoUndo.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
 import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface RedoUndoProps {
   app?: FastboardApp | null;

package/src/components/Toolbar/Toolbar.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
 import type { Theme, Language, ToolbarConfig } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface ToolbarProps {
   app?: FastboardApp | null;

package/src/components/Toolbar/components/Slider.scss

@@ -22,7 +22,9 @@ $thumb-color: white;
   background: $thumb-color;
   border: 0;
   border-radius: 100%;
-  box-shadow: 0 1px 1px rgba($shadow-color, 0.15), 0 0 0 1px rgba($shadow-color, 0.2);
+  box-shadow:
+    0 1px 1px rgba($shadow-color, 0.15),
+    0 0 0 1px rgba($shadow-color, 0.2);
   width: $thumb-height;
   height: $thumb-height;
   position: relative;

package/src/components/Toolbar/components/Slider.svelte

@@ -39,7 +39,6 @@
     class="{name}-track {theme}"
     class:grabbing
     type="range"
-    role="slider"
     {disabled}
     {min}
     {max}

package/src/components/Toolbar/components/constants.ts

@@ -24,7 +24,7 @@ export const shapes = [
   "speechBalloon",
 ] as const;
 
-export type Shape = typeof shapes[number];
+export type Shape = (typeof shapes)[number];
 
 export const applianceShapes = shapes.slice(0, 4) as Appliance[];
 

package/src/components/ZoomControl/ZoomControl.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { FastboardApp } from "@netless/fastboard-core";
 import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface ZoomControlProps {
   app?: FastboardApp | null;

package/src/helpers/index.ts

@@ -29,7 +29,7 @@ export function createUI(app?: FastboardApp | null, div?: Element): UI {
       return ui;
     },
     update(props?: FastboardProps) {
-      if (fastboard) {
+      if (fastboard && props) {
         fastboard.$set(props);
       }
     },
@@ -74,7 +74,7 @@ export function createReplayUI(player?: FastboardPlayer | null, div?: Element):
       return ui;
     },
     update(props?: ReplayFastboardProps) {
-      if (fastboard) {
+      if (fastboard && props) {
         fastboard.$set(props);
       }
     },

package/src/typings.ts

@@ -1,5 +1,12 @@
+/// <reference types="svelte/types/runtime/ambient.d.ts" />
+
+export { SvelteComponentTyped } from "svelte/internal";
+
 export interface SvelteAction<T = void> {
-  (node: HTMLElement, parameters: T): void | {
+  (
+    node: HTMLElement,
+    parameters: T
+  ): void | {
     update?: (parameters: T) => void;
     destroy?: () => void;
   };
@@ -36,3 +43,9 @@ export interface FastboardUIConfig {
     enable?: boolean;
   };
 }
+
+export interface ReplayFastboardUIConfig {
+  player_control?: {
+    enable?: boolean;
+  };
+}