@netless/app-slide 0.2.2 → 0.3.0-canary.2

package/src/fancy-scrollbar.scss

@@ -0,0 +1,57 @@
+$namespace: "netless-app-slide";
+
+$scrollbar-size: 8px;
+$scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
+$scrollbar-minlength: 50px; // Minimum length of scrollbar thumb
+$scrollbar-track-color: transparent;
+$scrollbar-color: rgba(68, 78, 96, 0.1);
+$scrollbar-color-hover: rgba(68, 78, 96, 0.2);
+$scrollbar-color-active: rgba(68, 78, 96, 0.2);
+
+.#{$namespace}-tele-fancy-scrollbar {
+  overscroll-behavior: contain;
+  overflow: auto;
+  overflow-y: scroll;
+  overflow-y: overlay; // for webkit
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: $scrollbar-ff-width;
+  // Firefox has incorrect track color
+  // scrollbar-color: $scrollbar-color $scrollbar-track-color;
+
+  &::-webkit-scrollbar {
+    height: $scrollbar-size;
+    width: $scrollbar-size;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $scrollbar-track-color;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-color;
+    background-color: $scrollbar-track-color;
+    border-radius: $scrollbar-size * 0.5;
+    transition: background-color 0.4s;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-color;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $scrollbar-color-hover;
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background-color: $scrollbar-color-active;
+  }
+
+  &::-webkit-scrollbar-thumb:vertical {
+    min-height: $scrollbar-minlength;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal {
+    min-width: $scrollbar-minlength;
+  }
+}

package/src/index.ts

@@ -1,234 +1,245 @@
-import type { NetlessApp } from "@netless/window-manager";
-import type { RoomState } from "white-web-sdk";
-import type { Slide } from "@netless/slide";
-import type { MountSlideOptions } from "./SlideDocsViewer";
-import type { Attributes, MagixEvents } from "./typings";
-import type { AddHooks, FreezableSlide } from "./utils/freezer";
+import type { AppContext, NetlessApp, Player, WhiteBoardView } from "@netless/window-manager";
+import type { AddHooks, AppOptions, Attributes, MagixEvents, SlideState } from "./typings";
+import type { SlideViewerOptions } from "./SlideViewer";
 
-import { SideEffectManager } from "side-effect-manager";
-import {
-  DefaultUrl,
-  EmptyAttributes,
-  syncSceneWithSlide,
-  SlideController,
-} from "./SlideController";
-import { SlideDocsViewer } from "./SlideDocsViewer";
-import { apps, FreezerLength, addHooks, useFreezer } from "./utils/freezer";
-import { log, logger } from "./utils/logger";
-import styles from "./style.scss?inline";
-
-export type { PreviewParams } from "./SlidePreviewer";
-export { SlidePreviewer, default as previewSlide } from "./SlidePreviewer";
-
-export type { Attributes, AddHooks, FreezableSlide };
+export type { SlideState, AddHooks, AppOptions, Attributes, MagixEvents, SlideViewerOptions };
 
-export const version = __APP_VERSION__;
+import ColorString from "color-string";
+import { SideEffectManager } from "side-effect-manager";
+import { SlideViewer } from "./SlideViewer";
+import { refrigerator, addHooks } from "./Refrigerator";
 
-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;
-  /** automatically decrease fps @default true */
-  autoFPS?: boolean;
-  /** whether to re-scale automatically @default true */
-  autoResolution?: boolean;
-}
+export { SlideViewer, refrigerator, addHooks };
 
-export interface Controller {
-  slide: () => Slide | undefined;
-  position: () => [page: number, pageCount: number] | undefined;
-  nextStep: () => boolean;
-  prevStep: () => boolean;
-  nextPage: () => boolean;
-  prevPage: () => boolean;
-  jumpToPage: (page: number) => boolean;
-}
+export const version = __APP_VERSION__;
 
-const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, Controller> = {
+const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
   kind: "Slide",
   setup(context) {
-    console.log("[Slide] setup @ " + version);
-
-    if (context.getIsWritable()) {
-      context.storage.ensureState(EmptyAttributes);
-    }
+    console.log("[Slide] setup @ " + __APP_VERSION__);
 
     if (!context.storage.state.taskId) {
       throw new Error("[Slide] no taskId");
     }
 
-    const view = context.getView();
-    if (!view) {
-      throw new Error("[Slide] no view, please set scenePath on addApp()");
-    }
-    view.disableCameraTransform = true;
-
-    const box = context.getBox();
-    box.mountStyles(styles);
-    try {
-      box.$content.dataset.appSlideVersion = version;
-    } catch {
-      // ignore
-    }
+    const options = context.getAppOptions() || {};
+    const debug = Boolean(options.debug);
+    const logger = make_logger(context);
+    logger.info("[Slide] setup @ " + __APP_VERSION__);
 
-    // must exist because of view
-    const baseScenePath = context.getInitScenePath() as string;
-
-    let docsViewer: SlideDocsViewer | null = null;
-
-    const onPageChanged = (page: number) => {
-      const room = context.getRoom();
-      if (docsViewer && docsViewer.slideController) {
-        let synced = false;
-        if (room && context.getIsWritable()) {
-          syncSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath);
-          synced = true;
-        }
-        log("[Slide] page to", page, synced ? "(synced)" : "");
-        docsViewer.viewer.setPageIndex(page - 1);
-      }
-    };
-
-    const mountSlideController = (options: MountSlideOptions): SlideController => {
-      const slideController = new SlideController({
-        context,
-        ...options,
-        onPageChanged,
-      });
-      if (useFreezer) apps.set(context.appId, slideController);
-      logger.setAppController(context.appId, slideController);
-      if (import.meta.env.DEV) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (window as any).slideController = slideController;
-      }
-      slideController.readyPromise.then(options.onReady).then(() => {
-        const room = context.getRoom();
-        let synced = false;
-        if (room && context.getIsWritable()) {
-          syncSceneWithSlide(room, context, slideController.slide, baseScenePath);
-          synced = true;
-        }
-        const page = slideController.slide.slideState.currentSlideIndex;
-        log("[Slide] page to", page, synced ? "(synced)" : "", "(on ready)");
-      });
-      return slideController;
-    };
-
-    docsViewer = new SlideDocsViewer({
-      box,
-      view,
-      mountSlideController,
-      mountWhiteboard: context.mountView.bind(context),
+    const sideEffect = new SideEffectManager();
+
+    // Create UI
+    const viewer = new SlideViewer({
+      interactive: true,
+      mode: "interactive",
+      resize: true,
+      enableGlobalClick: true,
+      controller: debug,
+      timestamp: make_timestamp(context),
+      logger,
+      renderOptions: {
+        minFPS: options.minFPS || 25,
+        maxFPS: options.maxFPS || 30,
+        autoFPS: options.autoFPS ?? true,
+        autoResolution: options.autoResolution ?? true,
+        resolution: options.resolution,
+        transactionBgColor: options.bgColor || make_bg_color(context.box.$content),
+      },
+
+      taskId: context.storage.state.taskId,
+      url: context.storage.state.url,
     });
 
+    // For debugging.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (viewer as any).context = context;
+
+    sideEffect.addDisposer(refrigerator.set(context.appId, viewer));
+
     if (import.meta.env.DEV) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any).slideDoc = docsViewer;
+      (window as any).slideViewer = viewer;
     }
 
-    const room = context.getRoom();
-    const sideEffect = new SideEffectManager();
+    // Mount UI
+    context.box.mountStyles(SlideViewer.styles);
+    context.box.mountStage(viewer.$slide);
+    context.box.mountFooter(viewer.$footer);
+    context.box.mountContent(viewer.$content);
+    sideEffect.addDisposer(() => viewer.destroy());
 
-    sideEffect.add(() => {
-      logger.setAppContext(context.appId, context);
-      logger.enable = context.getAppOptions()?.debug || import.meta.env.DEV;
-      logger.level = import.meta.env.DEV ? "verbose" : "debug";
-      return () => logger.deleteApp(context.appId);
+    // Connect UI with Netless App
+    connect({ context, viewer, sideEffect, logger });
+
+    onUnmount(context, () => {
+      logger.info("[Slide] destroy");
+      sideEffect.flushAll();
     });
+  },
+};
 
-    if (room) {
-      docsViewer.toggleClickThrough(room.state.memberState.currentApplianceName);
-      sideEffect.add(() => {
-        const onRoomStateChanged = (e: Partial<RoomState>) => {
-          if (e.memberState && docsViewer) {
-            docsViewer.toggleClickThrough(e.memberState.currentApplianceName);
-          }
-        };
-        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-        return () => room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-      });
+export default SlideApp;
+
+export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
+  const { container } = options;
+  container.style.cssText = "display:flex;flex-direction:column";
+  const viewer = new SlideViewer(options);
+  container.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
+  container.appendChild(viewer.$content);
+  container.appendChild(viewer.$footer);
+  viewer.prepare(() => viewer.slide.renderSlide(1));
+  return viewer;
+}
+
+function make_timestamp(context: AppContext): () => number {
+  const room = context.room;
+  const player = context.displayer as Player;
+  if (room) {
+    return () => room.calibrationTimestamp;
+  } else if (player) {
+    return () => player.beginTimestamp + player.progressTime;
+  } else {
+    return () => Date.now();
+  }
+}
+
+function make_logger(context: AppContext): { info: (msg: string) => void } {
+  if (import.meta.env.DEV) {
+    return { info: console.debug.bind(console) };
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (context.displayer as any).logger;
+}
+
+function make_bg_color(el: HTMLElement): string {
+  try {
+    let bg = window.getComputedStyle(el).backgroundColor;
+    if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+      bg = hex(bg);
+      console.log("[Slide] guess bg color:", bg);
+      return bg;
+    }
+    if (el.parentElement) {
+      return make_bg_color(el.parentElement);
     }
+  } catch {
+    // ignored
+  }
+  return "#ffffff";
+}
 
-    context.emitter.on("destroy", () => {
-      log("[Slide] destroy", context.appId);
-      if (useFreezer) apps.delete(context.appId);
-      sideEffect.flushAll();
-      if (docsViewer) {
-        docsViewer.destroy();
-        docsViewer = null;
-      }
-    });
+// https://github.com/Qix-/color-convert/blob/8dfdbbc6b46fa6a305bf394d942cc1b08e23fca5/conversions.js#L616
+function hex(color: string): string {
+  const result = ColorString.get(color);
+  if (result && result.model === "rgb") {
+    const args = result.value;
+
+    const integer =
+      ((Math.round(args[0]) & 0xff) << 16) +
+      ((Math.round(args[1]) & 0xff) << 8) +
+      (Math.round(args[2]) & 0xff);
+
+    const string = integer.toString(16);
+    return "#" + "000000".substring(string.length) + string;
+  } else {
+    return color;
+  }
+}
 
-    docsViewer.mount();
+function onUnmount(context: AppContext, callback: () => void) {
+  context.emitter.on("destroy", callback);
+}
 
-    return {
-      slide: () => {
-        return docsViewer?.slideController?.slide;
-      },
-      nextStep: () => {
-        if (docsViewer && docsViewer.slideController) {
-          docsViewer?.slideController?.slide.nextStep();
-          return true;
-        }
-        return false;
-      },
-      prevStep: () => {
-        if (docsViewer && docsViewer.slideController) {
-          docsViewer?.slideController?.slide.prevStep();
-          return true;
-        }
-        return false;
-      },
-      position: () => {
-        const controller = docsViewer?.slideController;
-        if (controller) {
-          return [controller.page, controller.pageCount] as [page: number, pageCount: number];
-        }
-      },
-      nextPage: () => {
-        const controller = docsViewer?.slideController;
-        if (controller) {
-          const { page, pageCount } = controller;
-          if (pageCount > 0 && page < pageCount) {
-            controller.jumpToPage(page + 1);
-            return true;
-          }
-        }
-        return false;
-      },
-      prevPage: () => {
-        const controller = docsViewer?.slideController;
-        if (controller) {
-          const { page, pageCount } = controller;
-          if (pageCount > 0 && page > 1) {
-            controller.jumpToPage(page - 1);
-            return true;
+interface ConnectParams {
+  context: AppContext;
+  viewer: SlideViewer;
+  sideEffect: SideEffectManager;
+  logger: { info: (msg: string) => void };
+}
+
+function connect({ context, viewer, sideEffect, logger }: ConnectParams) {
+  const log = import.meta.env.DEV ? console.log.bind(console) : logger.info.bind(logger);
+
+  let whiteboard: WhiteBoardView | null = null;
+
+  viewer.prepare(({ width, height, slideCount }) => {
+    if (context.destroyed) return;
+    width && context.box.setStageRatio(height / width);
+    whiteboard = context.createWhiteBoardView(slideCount);
+    kick_start();
+  });
+
+  const { slide } = viewer;
+
+  function kick_start() {
+    if (context.storage.state.state) {
+      log("[Slide] restore", { ...context.storage.state.state });
+      slide.setSlideState(context.storage.state.state);
+    } else if (context.isAddApp) {
+      log("[Slide] kick start");
+      slide.renderSlide(1);
+    } else {
+      log("[Slide] wait for restore");
+      const timeoutID = sideEffect.add(() => {
+        const timer = setInterval(() => {
+          if (!context.storage.state.state) {
+            log("[Slide] timeout");
+            slide.renderSlide(1);
           }
-        }
-        return false;
-      },
-      jumpToPage: (newPage: number) => {
-        const controller = docsViewer?.slideController;
-        if (controller) {
-          const { page, pageCount } = controller;
-          if (pageCount > 0 && page > 0 && page <= pageCount) {
-            controller.jumpToPage(newPage);
-            return true;
+        }, 15 * 1000);
+        return () => clearInterval(timer);
+      });
+      const disposerID = sideEffect.addDisposer(
+        context.storage.addStateChangedListener(() => {
+          if (context.storage.state.state) {
+            log("[Slide] restore", { ...context.storage.state.state });
+            slide.setSlideState(context.storage.state.state);
+            sideEffect.flush(disposerID);
+            sideEffect.flush(timeoutID);
           }
-        }
-        return false;
-      },
-    };
-  },
-};
+        })
+      );
+    }
+  }
 
-export default SlideApp;
+  // setup sync event
+  slide.on("stateChange", () => {
+    if (context.isWritable) {
+      log("[Slide] save state", { ...slide.slideState });
+      context.storage.setState({ state: slide.slideState });
+    }
+  });
+  slide.on("syncDispatch", payload => {
+    if (context.isWritable) {
+      log("[Slide] dispatch", { ...payload });
+      context.dispatchMagixEvent("syncDispatch", payload);
+    }
+  });
+  sideEffect.addDisposer(
+    context.addMagixEventListener(
+      "syncDispatch",
+      ({ payload }) => {
+        log("[Slide] receive", { ...payload });
+        slide.emit("syncReceive", payload);
+      },
+      { fireSelfEventAfterCommit: true }
+    )
+  );
+
+  // save state
+  slide.on("slideChange", page => {
+    if (context.isWritable && whiteboard) {
+      log("[Slide] page to", page);
+      whiteboard.jumpPage(page - 1);
+    }
+  });
+
+  // handle ui events
+  viewer.setReadonly(!context.isWritable);
+  sideEffect.addDisposer(
+    context.emitter.on("writableChange", w => {
+      viewer.setReadonly(!w);
+    })
+  );
+}