@netless/fastboard-ui 0.3.2-canary.5 → 0.3.3

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

@@ -1,13 +1,13 @@
-import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
-
-export declare interface PageControlProps {
-  app?: FastboardApp | null;
-  theme?: Theme;
-  language?: Language;
-  icons?: GenericIcon<"prev" | "next" | "add">;
-}
-
-declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
-export default PageControl;
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { Theme, Language, GenericIcon } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface PageControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"prev" | "next" | "add">;
+}
+
+declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+export default PageControl;

package/src/components/PageControl/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./PageControl.svelte";
-export * from "./PageControl.svelte";
+export { default } from "./PageControl.svelte";
+export * from "./PageControl.svelte";

package/src/components/PlayerControl/PlayerControl.scss

@@ -1,57 +1,57 @@
-@import "../theme.scss";
-
-$name: "fastboard-player-control";
-
-.#{$name} {
-  @include container;
-  width: 100%;
-}
-
-.#{$name}-btn {
-  @include btn;
-  display: inline;
-
-  &.loading {
-    svg,
-    img {
-      animation: fastboard-player-control-rotate 0.5s linear infinite;
-    }
-  }
-
-  @keyframes fastboard-player-control-rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  &.speed {
-    width: auto;
-    padding: 4px;
-    text-align: right;
-    font-size: 14px;
-    font-variant-numeric: tabular-nums;
-  }
-
-  @each $name, $theme in $themes {
-    &.is-active.#{$name} {
-      color: read($theme, "active-color");
-    }
-  }
-}
-
-.#{$name}-speed-text {
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-  line-height: 16px;
-}
-
-.#{$name}-progress {
-  @extend .#{$name}-speed-text;
-  display: inline-flex;
-  align-items: center;
-}
-
-.#{$name}-panel.speed {
-  display: flex;
-  flex-direction: column;
-}
+@import "../theme.scss";
+
+$name: "fastboard-player-control";
+
+.#{$name} {
+  @include container;
+  width: 100%;
+}
+
+.#{$name}-btn {
+  @include btn;
+  display: inline;
+
+  &.loading {
+    svg,
+    img {
+      animation: fastboard-player-control-rotate 0.5s linear infinite;
+    }
+  }
+
+  @keyframes fastboard-player-control-rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  &.speed {
+    width: auto;
+    padding: 4px;
+    text-align: right;
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  @each $name, $theme in $themes {
+    &.is-active.#{$name} {
+      color: read($theme, "active-color");
+    }
+  }
+}
+
+.#{$name}-speed-text {
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  line-height: 16px;
+}
+
+.#{$name}-progress {
+  @extend .#{$name}-speed-text;
+  display: inline-flex;
+  align-items: center;
+}
+
+.#{$name}-panel.speed {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/PlayerControl/PlayerControl.svelte

@@ -1,153 +1,153 @@
-<script lang="ts" context="module">
-  import type { FastboardPlayer } from "@netless/fastboard-core";
-  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
-
-  const speeds = [2.0, 1.5, 1.25, 1.0, 0.75, 0.5];
-
-  const i18n: I18nData<"play" | "pause" | "speed"> = {
-    en: {
-      play: "Play",
-      pause: "Pause",
-      speed: "Speed",
-    },
-    "zh-CN": {
-      play: "播放",
-      pause: "暂停",
-      speed: "速度",
-    },
-  };
-
-  function format(ms: number) {
-    const s = Math.floor(ms / 1000);
-    const m = Math.floor(s / 60);
-    return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
-  }
-</script>
-
-<script lang="ts">
-  import Icon from "../Icon";
-  import Icons from "../Icons";
-  import Button from "../Button";
-  import Slider from "../Toolbar/components/Slider.svelte";
-
-  export let player: FastboardPlayer | null | undefined = null;
-  export let theme: Theme = "light";
-  export let language: Language = "en";
-  export let icons: GenericIcon<"play" | "pause" | "loading"> | undefined = undefined;
-
-  const name = "fastboard-player-control";
-
-  $: t = i18n[language];
-
-  let type: IconType;
-  $: type = disabled ? "disable" : "normal";
-
-  $: canPlay = player?.canplay;
-  $: disabled = !canPlay;
-  $: duration = player?.duration;
-  $: current = player?.currentTime;
-  $: playbackRate = player?.playbackRate;
-
-  $: phase = player?.phase;
-  $: loading = $phase === "waitingFirstFrame" || $phase === "buffering";
-  $: playing = $phase === "playing";
-  $: className = [loading ? "loading" : "", playing ? "pause" : "play"].filter(Boolean).join(" ");
-
-  let speed_panel: HTMLDivElement;
-
-  function toggle() {
-    if (!player) return;
-    switch (player.player.phase) {
-      case "waitingFirstFrame":
-      case "pause":
-      case "ended": {
-        player.play();
-        break;
-      }
-      case "playing": {
-        player.pause();
-        break;
-      }
-    }
-  }
-
-  function seek({ detail: seconds }: CustomEvent<number>) {
-    if (!player) return;
-    player.seek(seconds * 1000);
-  }
-
-  function setPlaybackRate(speed: number) {
-    if (!player) return;
-    player.setPlaybackRate(speed);
-  }
-</script>
-
-<div class="{name} {theme}">
-  <Button
-    class={className}
-    {name}
-    {theme}
-    {disabled}
-    on:click={toggle}
-    content={loading ? "" : playing ? t.pause : t.play}
-  >
-    {#if loading}
-      <Icon src={icons?.loading[type]} alt="[loading]">
-        <Icons.Loading {theme} />
-      </Icon>
-    {:else if playing}
-      <Icon src={icons?.pause[type]} alt="[pause]">
-        <Icons.Pause {theme} />
-      </Icon>
-    {:else}
-      <Icon src={icons?.play[type]} alt="[play]">
-        <Icons.Play {theme} />
-      </Icon>
-    {/if}
-  </Button>
-  {#if $current == null || $duration == null || $duration === 0}
-    <Slider class="{name}-slider" disabled />
-    <span class="{name}-progress loading">&hellip;/&hellip;</span>
-  {:else}
-    <Slider
-      class="{name}-slider"
-      {theme}
-      value={$current / 1000}
-      min={0}
-      max={$duration / 1000}
-      on:change={seek}
-    />
-    <span class="{name}-progress">
-      <span class="{name}-current">{format($current)}</span>
-      <span class="{name}-slash">/</span>
-      <span class="{name}-duration">{format($duration)}</span>
-    </span>
-  {/if}
-  <Button
-    class="speed"
-    {name}
-    {theme}
-    {disabled}
-    content={t.speed}
-    menu={speed_panel}
-    menu_placement="top-end"
-  >
-    <span class="{name}-speed-text">{$playbackRate || 1}x</span>
-  </Button>
-</div>
-
-<div style="display:none">
-  <div class="{name}-panel speed" bind:this={speed_panel}>
-    {#each speeds as s (s)}
-      <Button
-        class="speed {s === $playbackRate ? 'is-active' : ''}"
-        {name}
-        {theme}
-        {disabled}
-        on:click={() => setPlaybackRate(s)}
-      >
-        {s}x
-      </Button>
-    {/each}
-  </div>
-</div>
+<script lang="ts" context="module">
+  import type { FastboardPlayer } from "@netless/fastboard-core";
+  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
+
+  const speeds = [2.0, 1.5, 1.25, 1.0, 0.75, 0.5];
+
+  const i18n: I18nData<"play" | "pause" | "speed"> = {
+    en: {
+      play: "Play",
+      pause: "Pause",
+      speed: "Speed",
+    },
+    "zh-CN": {
+      play: "播放",
+      pause: "暂停",
+      speed: "速度",
+    },
+  };
+
+  function format(ms: number) {
+    const s = Math.floor(ms / 1000);
+    const m = Math.floor(s / 60);
+    return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
+  }
+</script>
+
+<script lang="ts">
+  import Icon from "../Icon";
+  import Icons from "../Icons";
+  import Button from "../Button";
+  import Slider from "../Toolbar/components/Slider.svelte";
+
+  export let player: FastboardPlayer | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let icons: GenericIcon<"play" | "pause" | "loading"> | undefined = undefined;
+
+  const name = "fastboard-player-control";
+
+  $: t = i18n[language];
+
+  let type: IconType;
+  $: type = disabled ? "disable" : "normal";
+
+  $: canPlay = player?.canplay;
+  $: disabled = !canPlay;
+  $: duration = player?.duration;
+  $: current = player?.currentTime;
+  $: playbackRate = player?.playbackRate;
+
+  $: phase = player?.phase;
+  $: loading = $phase === "waitingFirstFrame" || $phase === "buffering";
+  $: playing = $phase === "playing";
+  $: className = [loading ? "loading" : "", playing ? "pause" : "play"].filter(Boolean).join(" ");
+
+  let speed_panel: HTMLDivElement;
+
+  function toggle() {
+    if (!player) return;
+    switch (player.player.phase) {
+      case "waitingFirstFrame":
+      case "pause":
+      case "ended": {
+        player.play();
+        break;
+      }
+      case "playing": {
+        player.pause();
+        break;
+      }
+    }
+  }
+
+  function seek({ detail: seconds }: CustomEvent<number>) {
+    if (!player) return;
+    player.seek(seconds * 1000);
+  }
+
+  function setPlaybackRate(speed: number) {
+    if (!player) return;
+    player.setPlaybackRate(speed);
+  }
+</script>
+
+<div class="{name} {theme}">
+  <Button
+    class={className}
+    {name}
+    {theme}
+    {disabled}
+    on:click={toggle}
+    content={loading ? "" : playing ? t.pause : t.play}
+  >
+    {#if loading}
+      <Icon src={icons?.loading[type]} alt="[loading]">
+        <Icons.Loading {theme} />
+      </Icon>
+    {:else if playing}
+      <Icon src={icons?.pause[type]} alt="[pause]">
+        <Icons.Pause {theme} />
+      </Icon>
+    {:else}
+      <Icon src={icons?.play[type]} alt="[play]">
+        <Icons.Play {theme} />
+      </Icon>
+    {/if}
+  </Button>
+  {#if $current == null || $duration == null || $duration === 0}
+    <Slider class="{name}-slider" disabled />
+    <span class="{name}-progress loading">&hellip;/&hellip;</span>
+  {:else}
+    <Slider
+      class="{name}-slider"
+      {theme}
+      value={$current / 1000}
+      min={0}
+      max={$duration / 1000}
+      on:change={seek}
+    />
+    <span class="{name}-progress">
+      <span class="{name}-current">{format($current)}</span>
+      <span class="{name}-slash">/</span>
+      <span class="{name}-duration">{format($duration)}</span>
+    </span>
+  {/if}
+  <Button
+    class="speed"
+    {name}
+    {theme}
+    {disabled}
+    content={t.speed}
+    menu={speed_panel}
+    menu_placement="top-end"
+  >
+    <span class="{name}-speed-text">{$playbackRate || 1}x</span>
+  </Button>
+</div>
+
+<div style="display:none">
+  <div class="{name}-panel speed" bind:this={speed_panel}>
+    {#each speeds as s (s)}
+      <Button
+        class="speed {s === $playbackRate ? 'is-active' : ''}"
+        {name}
+        {theme}
+        {disabled}
+        on:click={() => setPlaybackRate(s)}
+      >
+        {s}x
+      </Button>
+    {/each}
+  </div>
+</div>

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

@@ -1,13 +1,13 @@
-import type { FastboardPlayer } from "@netless/fastboard-core";
-import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
-
-export declare interface PlayerControlProps {
-  player?: FastboardPlayer | null;
-  theme?: Theme;
-  language?: Language;
-  icons?: GenericIcon<"play" | "pause" | "loading">;
-}
-
-declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
-export default PlayerControl;
+import type { FastboardPlayer } from "@netless/fastboard-core";
+import type { Theme, Language, GenericIcon } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface PlayerControlProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"play" | "pause" | "loading">;
+}
+
+declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
+export default PlayerControl;

package/src/components/PlayerControl/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./PlayerControl.svelte";
-export * from "./PlayerControl.svelte";
+export { default } from "./PlayerControl.svelte";
+export * from "./PlayerControl.svelte";

package/src/components/RedoUndo/RedoUndo.scss

@@ -1,11 +1,11 @@
-@import "../theme.scss";
-
-$name: "fastboard-redo-undo";
-
-.#{$name} {
-  @include container;
-}
-
-.#{$name}-btn {
-  @include btn;
-}
+@import "../theme.scss";
+
+$name: "fastboard-redo-undo";
+
+.#{$name} {
+  @include container;
+}
+
+.#{$name}-btn {
+  @include btn;
+}

package/src/components/RedoUndo/RedoUndo.svelte

@@ -1,60 +1,60 @@
-<script lang="ts" context="module">
-  import type { FastboardApp } from "@netless/fastboard-core";
-  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
-  const i18n: I18nData<"redo" | "undo"> = {
-    en: {
-      redo: "Redo",
-      undo: "Undo",
-    },
-    "zh-CN": {
-      redo: "重做",
-      undo: "撤销",
-    },
-  };
-</script>
-
-<script lang="ts">
-  import Icon from "../Icon";
-  import Icons from "../Icons";
-  import Button from "../Button";
-
-  export let app: FastboardApp | null | undefined = null;
-  export let theme: Theme = "light";
-  export let language: Language = "en";
-  export let icons: GenericIcon<"undo" | "redo"> | undefined = undefined;
-
-  const name = "fastboard-redo-undo";
-
-  $: writable = app?.writable;
-  $: disabled = !$writable;
-  $: t = i18n[language];
-
-  let type: IconType;
-  $: type = disabled ? "disable" : "normal";
-
-  $: undoSteps = app?.canUndoSteps;
-  $: redoSteps = app?.canRedoSteps;
-  $: undo_disabled = disabled || !$undoSteps;
-  $: redo_disabled = disabled || !$redoSteps;
-
-  function undo() {
-    app?.undo();
-  }
-
-  function redo() {
-    app?.redo();
-  }
-</script>
-
-<div class="{name} {theme}">
-  <Button class="undo" {name} {theme} disabled={undo_disabled} on:click={undo} content={t.undo}>
-    <Icon src={icons?.undo[type]} alt="[undo]">
-      <Icons.Undo {theme} />
-    </Icon>
-  </Button>
-  <Button class="redo" {name} {theme} disabled={redo_disabled} on:click={redo} content={t.redo}>
-    <Icon src={icons?.redo[type]} alt="[redo]">
-      <Icons.Redo {theme} />
-    </Icon>
-  </Button>
-</div>
+<script lang="ts" context="module">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
+  const i18n: I18nData<"redo" | "undo"> = {
+    en: {
+      redo: "Redo",
+      undo: "Undo",
+    },
+    "zh-CN": {
+      redo: "重做",
+      undo: "撤销",
+    },
+  };
+</script>
+
+<script lang="ts">
+  import Icon from "../Icon";
+  import Icons from "../Icons";
+  import Button from "../Button";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let icons: GenericIcon<"undo" | "redo"> | undefined = undefined;
+
+  const name = "fastboard-redo-undo";
+
+  $: writable = app?.writable;
+  $: disabled = !$writable;
+  $: t = i18n[language];
+
+  let type: IconType;
+  $: type = disabled ? "disable" : "normal";
+
+  $: undoSteps = app?.canUndoSteps;
+  $: redoSteps = app?.canRedoSteps;
+  $: undo_disabled = disabled || !$undoSteps;
+  $: redo_disabled = disabled || !$redoSteps;
+
+  function undo() {
+    app?.undo();
+  }
+
+  function redo() {
+    app?.redo();
+  }
+</script>
+
+<div class="{name} {theme}">
+  <Button class="undo" {name} {theme} disabled={undo_disabled} on:click={undo} content={t.undo}>
+    <Icon src={icons?.undo[type]} alt="[undo]">
+      <Icons.Undo {theme} />
+    </Icon>
+  </Button>
+  <Button class="redo" {name} {theme} disabled={redo_disabled} on:click={redo} content={t.redo}>
+    <Icon src={icons?.redo[type]} alt="[redo]">
+      <Icons.Redo {theme} />
+    </Icon>
+  </Button>
+</div>

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

@@ -1,13 +1,13 @@
-import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language, GenericIcon } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
-
-export declare interface RedoUndoProps {
-  app?: FastboardApp | null;
-  theme?: Theme;
-  language?: Language;
-  icons?: GenericIcon<"undo" | "redo">;
-}
-
-declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
-export default RedoUndo;
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { Theme, Language, GenericIcon } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface RedoUndoProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"undo" | "redo">;
+}
+
+declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
+export default RedoUndo;

package/src/components/RedoUndo/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./RedoUndo.svelte";
-export * from "./RedoUndo.svelte";
+export { default } from "./RedoUndo.svelte";
+export * from "./RedoUndo.svelte";