@netless/app-slide 0.2.17 → 0.2.18

package/dist/utils/freezer.d.ts

@@ -4,7 +4,10 @@ export interface FreezableSlide {
     unfreeze: () => void;
 }
 export declare let useFreezer: boolean;
-export declare const FreezerLength = 2;
+export declare let FreezerLength: number;
+export declare function getFreezerLength(): number;
+/** @param length - must be >= 1, default is 2 */
+export declare function setFreezerLength(length: number): void;
 export declare const apps: {
     map: Map<string, FreezableSlide>;
     boxes: Map<string, ReadonlyTeleBox>;
@@ -14,10 +17,12 @@ export declare const apps: {
     delete(appId: string): void;
     focus(appId: string): void;
 };
+export declare function onCreated(callback: (appId: string) => void): () => boolean;
+export declare function onDestroyed(callback: (appId: string) => void): () => boolean;
 export declare type AddHooks = NonNullable<RegisterParams["addHooks"]>;
 /**
  * Put this function in your register code:
- * `WindowManager.register({ addHooks })`
+ * `WindowManager.register({ kind: 'Slide', src: SlideApp, addHooks })`
  * So that it will automatically freeze the app when it is not in focus.
  */
 export declare const addHooks: AddHooks;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
     "README-zh.md"
   ],
   "devDependencies": {
-    "@netless/slide": "^0.7.7",
+    "@netless/slide": "^0.7.8",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "side-effect-manager": "^1.2.1",

package/src/SlideController/index.ts

@@ -35,7 +35,9 @@ export interface SlideControllerOptions {
   onPageChanged: (page: number) => void;
   onTransitionStart: () => void;
   onTransitionEnd: () => void;
-  onError: (args: { error: Error }) => void;
+  onError: (args: { error: Error; index: number }) => void;
+  onRenderError?: (error: Error, pageIndex: number) => void;
+  showRenderError?: boolean;
 }
 
 type MagixEventListener = Parameters<
@@ -45,6 +47,8 @@ type MagixEventListener = Parameters<
 export class SlideController {
   public readonly context: SlideControllerOptions["context"];
   public readonly slide: Slide;
+  public readonly showRenderError: boolean;
+  public readonly onRenderError?: (error: Error, pageIndex: number) => void;
 
   private readonly room?: Room;
   private readonly player?: Player;
@@ -67,11 +71,15 @@ export class SlideController {
     onTransitionStart,
     onTransitionEnd,
     onError,
+    onRenderError,
+    showRenderError,
   }: SlideControllerOptions) {
     this.onPageChanged = onPageChanged;
     this.onTransitionStart = onTransitionStart;
     this.onTransitionEnd = onTransitionEnd;
     this.onError = onError;
+    this.onRenderError = onRenderError;
+    this.showRenderError = showRenderError ?? true;
 
     this.context = context;
     this.room = context.getRoom();

package/src/SlideDocsViewer/index.ts

@@ -130,10 +130,15 @@ export class SlideDocsViewer {
     return this;
   }
 
-  protected onError = ({ error }: { error: Error }) => {
+  protected onError = ({ error, index }: { error: Error; index: number }) => {
     this.viewer.setPaused();
-    this.$overlay.textContent = `Error on slide[page=${this.slideController?.page}]: ${error.message}`;
-    this.$overlay.style.opacity = "1";
+    if (this.slideController?.showRenderError) {
+      this.$overlay.textContent = `Error on slide[page=${this.slideController.page}]: ${error.message}`;
+      this.$overlay.style.opacity = "1";
+    }
+    if (this.slideController?.onRenderError) {
+      this.slideController.onRenderError(error, index);
+    }
     logger.warn("[Slide] render error", error);
   };
 

package/src/SlideDocsViewer/style.scss

@@ -20,6 +20,7 @@ $namespace: "netless-app-slide";
   left: 0;
   width: 100%;
   height: 100%;
+  padding: 8px;
   background: rgba(255, 0, 0, 0.25);
   transition: opacity 0.3s;
   opacity: 0;

package/src/index.ts

@@ -30,6 +30,8 @@ export const version = __APP_VERSION__;
 
 export { DefaultUrl, apps, FreezerLength, addHooks };
 
+export { setFreezerLength, getFreezerLength, onCreated, onDestroyed } from "./utils/freezer";
+
 export interface AppOptions
   extends Pick<
     ISlideConfig,
@@ -57,6 +59,10 @@ export interface AppOptions
   autoResolution?: boolean;
   /** 1~4, default: 3 */
   maxResolutionLevel?: number;
+  /** custom error handler */
+  onRenderError?: (error: Error, pageIndex: number) => void;
+  /** whether to show an overlay of error message @default: true */
+  showRenderError?: boolean;
 }
 
 export interface ILogger {
@@ -65,7 +71,9 @@ export interface ILogger {
   warn?(msg: string): void;
 }
 
-export interface Controller {
+export interface AppResult {
+  viewer: () => SlideDocsViewer | null;
+  controller: () => SlideController | null | undefined;
   slide: () => Slide | undefined;
   position: () => [page: number, pageCount: number] | undefined;
   nextStep: () => boolean;
@@ -75,7 +83,7 @@ export interface Controller {
   jumpToPage: (page: number) => boolean;
 }
 
-const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
+const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
   kind: "Slide",
   setup(context) {
     console.log("[Slide] setup @ " + version);
@@ -121,10 +129,14 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
     };
 
     const mountSlideController = (options: MountSlideOptions): SlideController => {
+      const appOptions = context.getAppOptions() || {};
+
       const slideController = new SlideController({
         context,
         ...options,
         onPageChanged,
+        onRenderError: appOptions.onRenderError,
+        showRenderError: appOptions.showRenderError,
       });
       if (useFreezer) apps.set(context.appId, slideController, box);
       logger.setAppController(context.appId, slideController);
@@ -194,6 +206,12 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
     docsViewer.mount();
 
     return {
+      viewer: () => {
+        return docsViewer;
+      },
+      controller: () => {
+        return docsViewer?.slideController;
+      },
       slide: () => {
         return docsViewer?.slideController?.slide;
       },

package/src/utils/freezer.ts

@@ -7,7 +7,16 @@ export interface FreezableSlide {
 }
 
 export let useFreezer = false;
-export const FreezerLength = 2;
+export let FreezerLength = 2;
+
+export function getFreezerLength() {
+  return FreezerLength;
+}
+
+/** @param length - must be >= 1, default is 2 */
+export function setFreezerLength(length: number) {
+  FreezerLength = length < 1 ? Infinity : length;
+}
 
 const inspect = (arr: string[]) => {
   return "[" + arr + "]";
@@ -69,16 +78,39 @@ if (import.meta.env.DEV) {
   (window as any).freezer = apps;
 }
 
+const on_created_callbacks = new Set<(appId: string) => void>();
+
+export function onCreated(callback: (appId: string) => void) {
+  on_created_callbacks.add(callback);
+  return () => on_created_callbacks.delete(callback);
+}
+
+const on_destroyed_callbacks = new Set<(appId: string) => void>();
+
+export function onDestroyed(callback: (appId: string) => void) {
+  on_destroyed_callbacks.add(callback);
+  return () => on_destroyed_callbacks.delete(callback);
+}
+
 export type AddHooks = NonNullable<RegisterParams["addHooks"]>;
 
 /**
  * Put this function in your register code:
- * `WindowManager.register({ addHooks })`
+ * `WindowManager.register({ kind: 'Slide', src: SlideApp, addHooks })`
  * So that it will automatically freeze the app when it is not in focus.
  */
 export const addHooks: AddHooks = emitter => {
   useFreezer = true;
+
   emitter.on("focus", ({ appId }) => {
     apps.focus(appId);
   });
+
+  emitter.on("created", ({ appId }) => {
+    on_created_callbacks.forEach(callback => callback(appId));
+  });
+
+  emitter.on("destroy", ({ appId }) => {
+    on_destroyed_callbacks.forEach(callback => callback(appId));
+  });
 };