refactor: disable components on reconnecting

netless-io · Mar 11, 2024 · c7e412e · c7e412e
1 parent ba665c4
commit c7e412e
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Disable components on `room.phase` changed to non-`connected`.
+
 ## 0.3.13
 
 - Added a <q>lite</q> version of Fastboard where `@netless/app-slide` is not registered.\

diff --git a/packages/fastboard-core/src/impl/FastboardApp.ts b/packages/fastboard-core/src/impl/FastboardApp.ts
@@ -311,6 +311,13 @@ export class FastboardApp<TEventData extends Record<string, any> = any> extends
     })
   );
 
+  /**
+   * Returns `writable && phase === "connected"`.
+   */
+  get canOperate(): boolean {
+    return this.room.isWritable && this.room.phase === "connected";
+  }
+
   /**
    * Undo a step on main view.
    */

diff --git a/packages/fastboard-ui/src/components/PageControl/PageControl.svelte b/packages/fastboard-ui/src/components/PageControl/PageControl.svelte
@@ -28,7 +28,8 @@
   const name = "fastboard-page-control";
 
   $: writable = app?.writable;
-  $: disabled = !$writable;
+  $: phase = app?.phase;
+  $: disabled = !($writable && $phase === "connected");
   $: t = i18n[language];
 
   let type: IconType;

diff --git a/packages/fastboard-ui/src/components/RedoUndo/RedoUndo.svelte b/packages/fastboard-ui/src/components/RedoUndo/RedoUndo.svelte
@@ -26,7 +26,8 @@
   const name = "fastboard-redo-undo";
 
   $: writable = app?.writable;
-  $: disabled = !$writable;
+  $: phase = app?.phase;
+  $: disabled = !($writable && $phase === "connected");
   $: t = i18n[language];
 
   let type: IconType;

diff --git a/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte b/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte
@@ -16,7 +16,8 @@
   const extra_height = (32 + 4 + 4) * 2;
 
   $: writable = app?.writable;
-  $: disabled = !$writable;
+  $: phase = app?.phase;
+  $: disabled = !($writable && $phase === "connected");
 
   let collapsed = false;
   let container_height = svelte_writable(0);

diff --git a/packages/fastboard-ui/src/components/ZoomControl/ZoomControl.svelte b/packages/fastboard-ui/src/components/ZoomControl/ZoomControl.svelte
@@ -49,7 +49,8 @@
   const name = "fastboard-zoom-control";
 
   $: writable = app?.writable;
-  $: disabled = !$writable;
+  $: phase = app?.phase;
+  $: disabled = !($writable && $phase === "connected");
   $: t = i18n[language];
 
   let type: IconType;

diff --git a/packages/fastboard-ui/test/App.svelte b/packages/fastboard-ui/test/App.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type { FastboardApp, FastboardPlayer } from "@netless/fastboard-core";
+  import type { RoomPhase, FastboardApp, FastboardPlayer } from "@netless/fastboard-core";
   import type { Language, Theme, ToolbarItem } from "../src";
   import type { MockApp } from "./mock-app";
   import { onMount } from "svelte";
+  import { writable } from "svelte/store";
 
   import { tippy, tippy_menu } from "../src/actions/tippy";
   import { Fastboard, apps } from "../src";
@@ -68,7 +69,8 @@
   }
 
   $: mock_redo_undo = mock?.redo_undo;
-  $: writable = app?.writable;
+  $: writable_ = app?.writable;
+  $: phase = app?.phase || writable<RoomPhase>("disconnected");
   $: member_state = app?.memberState;
 
   onMount(() => {
@@ -138,8 +140,16 @@
 <div class="flex actions">
   <div class="row">
     <button on:click={create_app} disabled={app !== undefined}>createApp</button>
-    <input type="checkbox" id="writable" bind:checked={$writable} />
+    <input type="checkbox" id="writable" bind:checked={$writable_} />
     <label for="writable"><em>Writable</em></label>
+    <label for="writable"><em>Phase:</em></label>
+    <select id="phase" bind:value={$phase}>
+      <option value="connecting">connecting</option>
+      <option value="connected" selected>connected</option>
+      <option value="reconnecting">reconnecting</option>
+      <option value="disconnecting">disconnecting</option>
+      <option value="disconnected">disconnected</option>
+    </select>
     <input type="checkbox" id="theme" checked={theme === "dark"} on:change={toggle_theme} />
     <label for="theme"><em>Dark</em></label>
     <!-- prettier-ignore -->

diff --git a/packages/fastboard-ui/test/mock-app.ts b/packages/fastboard-ui/test/mock-app.ts
@@ -1,10 +1,11 @@
-import type {
-  ApplianceNames,
-  AppsStatus,
-  CameraState,
-  FastboardApp,
-  MemberState,
-  ShapeType,
+import {
+  RoomPhase,
+  type ApplianceNames,
+  type AppsStatus,
+  type CameraState,
+  type FastboardApp,
+  type MemberState,
+  type ShapeType,
 } from "@netless/fastboard-core";
 import type { Readable } from "svelte/store";
 import type { PartialDeep } from "type-fest";
@@ -17,6 +18,7 @@ export interface MockApp {
 
 export function mockApp(): [app: FastboardApp, mock: MockApp] {
   const writable_ = writable(true);
+  const phase = writable<RoomPhase>("connected");
   const undoSteps = writable(0);
   const redoSteps = writable(0);
   const memberState = writable<MemberState>({
@@ -60,6 +62,7 @@ export function mockApp(): [app: FastboardApp, mock: MockApp] {
       el.textContent = "whiteboard container";
     },
     writable: writable_,
+    phase,
     hotKeys: {
       changeToSelector: "s",
       changeToLaserPointer: "z",