@netless/app-slide 0.1.1 → 0.1.4

package/dist/utils/logger.d.ts

@@ -1,4 +1,7 @@
 import type { SlideController } from "../SlideController";
+declare type DebugMessage = {
+    slide: boolean | "__instance" | "__debug";
+};
 declare class Logger {
     enable: boolean;
     apps: Record<string, {
@@ -10,9 +13,12 @@ declare class Logger {
     log(...args: Parameters<Console["log"]>): void;
     verbose(...args: Parameters<Console["log"]>): void;
     dispose(appId: string): void;
-    _onMessage: (ev: MessageEvent<{
-        slide: boolean | "__instance";
-    }>) => void;
+    /**
+     * @example
+     * window.postMessage({ slide: '__debug' })
+     * window.dispatchEvent(new MessageEvent('message', { data: { slide: '__debug' } }))
+     */
+    _onMessage: (ev: MessageEvent<DebugMessage> | CustomEvent<DebugMessage>) => void;
 }
 export declare const logger: Logger;
 export declare const log: (...args: Parameters<Console["log"]>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
   ],
   "devDependencies": {
     "@netless/app-shared": "^0.1.1",
-    "@netless/slide": "^0.2.9",
+    "@netless/slide": "^0.2.10",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.0",
     "side-effect-manager": "^0.1.5",

package/src/SlideController/index.ts

@@ -11,6 +11,7 @@
 import type { AppContext, Player, Room } from "@netless/window-manager";
 import type { SyncEvent } from "@netless/slide";
 import type { Attributes, MagixEvents, MagixPayload, SlideState } from "../typings";
+import type { AppOptions } from "..";
 
 import { SideEffectManager } from "side-effect-manager";
 import { Slide, SLIDE_EVENTS } from "@netless/slide";
@@ -28,7 +29,7 @@ export const EmptyAttributes: Attributes = {
 };
 
 export interface SlideControllerOptions {
-  context: AppContext<Attributes, MagixEvents>;
+  context: AppContext<Attributes, MagixEvents, AppOptions>;
   anchor: HTMLDivElement;
   onPageChanged: (page: number) => void;
   onTransitionStart: () => void;
@@ -55,6 +56,9 @@ export class SlideController {
 
   private syncStateOnceFlag: boolean;
 
+  private visible: boolean;
+  private savedIsFrozen: boolean;
+
   public constructor({
     context,
     anchor,
@@ -73,6 +77,8 @@ export class SlideController {
     this.slide = this.createSlide(anchor);
     // the adder does not need to sync state
     this.syncStateOnceFlag = !this.context.isAddApp;
+    this.visible = document.visibilityState === "visible";
+    this.savedIsFrozen = false;
     this.initialize();
   }
 
@@ -152,6 +158,11 @@ export class SlideController {
     slide.on(SLIDE_EVENTS.syncDispatch, this.onSyncDispatch);
 
     slide.on(SLIDE_EVENTS.renderEnd, this.resolveReady);
+
+    this.sideEffect.add(() => {
+      document.addEventListener("visibilitychange", this.onVisibilityChange);
+      return () => document.removeEventListener("visibilitychange", this.onVisibilityChange);
+    });
   }
 
   private onSyncDispatch = (event: SyncEvent) => {
@@ -236,10 +247,10 @@ export class SlideController {
       controller: logger.enable,
       enableGlobalClick: true,
       renderOptions: {
-        minFPS: 25,
-        maxFPS: 30,
+        minFPS: this.context.getAppOptions()?.minFPS || 25,
+        maxFPS: this.context.getAppOptions()?.maxFPS || 30,
         autoFPS: true,
-        autoResolution: true,
+        autoResolution: this.context.getAppOptions()?.autoResolution ?? true,
         resolution: this.context.getAppOptions()?.resolution,
         transactionBgColor: this.context.getAppOptions()?.bgColor || cachedGetBgColor(anchor),
       },
@@ -308,6 +319,7 @@ export class SlideController {
   };
 
   public unfreeze = async () => {
+    if (!this.visible) return;
     if (this.ready) {
       log("[Slide] unfreeze", this.context.appId);
       if (this.freezePromise) {
@@ -320,4 +332,17 @@ export class SlideController {
       this._toFreeze = -1;
     }
   };
+
+  private onVisibilityChange = async () => {
+    if (!(this.visible = document.visibilityState === "visible")) {
+      this.savedIsFrozen = this.freezePromise ? this._toFreeze === 1 : this.isFrozen;
+      log("[Slide] freeze because tab becomes invisible");
+      this.freeze();
+    } else {
+      log("[Slide] unfreeze because tab becomes visible", { savedIsFrozen: this.savedIsFrozen });
+      if (!this.savedIsFrozen) {
+        this.unfreeze();
+      }
+    }
+  };
 }

package/src/index.ts

@@ -27,9 +27,18 @@ export const version = __APP_VERSION__;
 export { DefaultUrl, apps, FreezerLength, addHooks };
 
 export interface AppOptions {
+  /** show debug controller */
   debug?: boolean;
+  /** scale */
   resolution?: number;
+  /** background color for slide animations */
   bgColor?: string;
+  /** minimal fps @default 25 */
+  minFPS?: number;
+  /** maximal fps @default 30 */
+  maxFPS?: number;
+  /** whether to re-scale automatically @default true */
+  autoResolution?: boolean;
 }
 
 export interface Controller {

package/src/utils/logger.ts

@@ -1,6 +1,8 @@
 import type { SlideController } from "../SlideController";
 import { isObj } from "./helpers";
 
+type DebugMessage = { slide: boolean | "__instance" | "__debug" };
+
 class Logger {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public apps: Record<string, { context?: any; controller?: SlideController }> = {};
@@ -23,12 +25,28 @@ class Logger {
     delete this.apps[appId];
     window.removeEventListener("message", this._onMessage);
   }
-  _onMessage = (ev: MessageEvent<{ slide: boolean | "__instance" }>) => {
-    if (isObj(ev.data)) {
-      if (typeof ev.data.slide === "boolean") {
-        this.enable = ev.data.slide;
-      } else if (ev.data.slide === "__instance") {
+  /**
+   * @example
+   * window.postMessage({ slide: '__debug' })
+   * window.dispatchEvent(new MessageEvent('message', { data: { slide: '__debug' } }))
+   */
+  _onMessage = (ev: MessageEvent<DebugMessage> | CustomEvent<DebugMessage>) => {
+    let data: DebugMessage | undefined;
+    if (ev instanceof CustomEvent) {
+      data = ev.detail;
+    } else if (isObj(ev.data)) {
+      data = ev.data;
+    }
+    if (data) {
+      if (typeof data.slide === "boolean") {
+        this.enable = data.slide;
+      } else if (data.slide === "__instance") {
         console.log(this);
+      } else if (data.slide === "__debug") {
+        Object.values(this.apps).forEach(app => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (app.controller?.slide as any)?.createController();
+        });
       }
     }
   };