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

package/src/SlidePreviewer/index.ts

@@ -1,226 +0,0 @@
-import { SideEffectManager } from "side-effect-manager";
-import { Slide, SLIDE_EVENTS } from "@netless/slide";
-import { DocsViewer } from "../DocsViewer";
-import { createDocsViewerPages, DefaultUrl } from "../SlideController";
-import { cachedGetBgColor } from "../utils/bgcolor";
-import { clamp } from "../utils/helpers";
-import style from "../style.scss?inline";
-
-export interface PreviewParams {
-  container: HTMLElement;
-  taskId: string;
-  url?: string;
-  debug?: boolean;
-}
-
-export default function previewSlide({
-  container,
-  taskId,
-  url = DefaultUrl,
-  debug = import.meta.env.DEV,
-}: PreviewParams) {
-  if (!taskId) {
-    throw new Error("[Slide] taskId is required");
-  }
-
-  container.style.cssText += `display:flex;flex-direction:column`;
-  const previewer = new SlidePreviewer({ target: container });
-  previewer.debug = !!debug;
-
-  previewer.mount(taskId, url);
-
-  return previewer;
-}
-
-if (import.meta.env.DEV) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (window as any).previewSlide = previewSlide;
-}
-
-export class SlidePreviewer {
-  public readonly viewer: DocsViewer;
-  public readonly bgColor: string;
-  public readonly target: HTMLElement;
-  public slide: Slide | null = null;
-  public debug = import.meta.env.DEV;
-
-  public $slide!: HTMLDivElement;
-
-  private readonly sideEffect = new SideEffectManager();
-
-  public ready = false;
-  private resolveReady!: () => void;
-  public readonly readyPromise = new Promise<void>(resolve => {
-    this.resolveReady = () => {
-      this.ready = true;
-      resolve();
-    };
-  });
-
-  public constructor(config: { target: HTMLElement }) {
-    this.target = config.target;
-    this.bgColor = cachedGetBgColor(this.target);
-    this.viewer = new DocsViewer({
-      readonly: false,
-      onNewPageIndex: this.onNewPageIndex,
-      onPlay: this.onPlay,
-    });
-    this.render();
-  }
-
-  public render() {
-    this.viewer.$content.appendChild(this.renderSlideContainer());
-    this.registerHotKeys(window);
-  }
-
-  /**
-   * In case you have a different window -- for example, in electron.
-   * Use this method to re-register hotkeys.
-   *
-   * @example
-   * previewer.registerHotKeys(windowLike)
-   */
-  public registerHotKeys(windowLike: Window) {
-    this.sideEffect.addEventListener(
-      windowLike,
-      "keydown",
-      this.hotkeyListener,
-      undefined,
-      "hotkey"
-    );
-  }
-
-  private hotkeyListener = (ev: KeyboardEvent) => {
-    if (this.slide) {
-      switch (ev.key) {
-        case "ArrowUp":
-        case "ArrowLeft": {
-          this.slide.prevStep();
-          break;
-        }
-        case "ArrowRight":
-        case "ArrowDown": {
-          this.slide.nextStep();
-          break;
-        }
-        default: {
-          break;
-        }
-      }
-    }
-  };
-
-  public mount(taskId: string, url: string) {
-    this.target.appendChild(this.renderStyle());
-    this.target.appendChild(this.viewer.$content);
-    this.target.appendChild(this.viewer.$footer);
-
-    this.slide = new Slide({
-      anchor: this.$slide,
-      interactive: true,
-      mode: "local",
-      resize: true,
-      controller: this.debug,
-      enableGlobalClick: true,
-      renderOptions: {
-        minFPS: 25,
-        maxFPS: 30,
-        autoFPS: true,
-        autoResolution: true,
-        transactionBgColor: this.bgColor,
-      },
-    });
-
-    this.registerEventListeners();
-
-    this.slide.setResource(taskId, url);
-    this.slide.renderSlide(1);
-  }
-
-  protected renderStyle(): HTMLElement {
-    const element = document.createElement("style");
-    element.appendChild(document.createTextNode(style));
-    return element;
-  }
-
-  protected registerEventListeners() {
-    if (!this.slide) return;
-    const { slide } = this;
-
-    slide.on(SLIDE_EVENTS.slideChange, this.onPageChanged);
-    slide.on(SLIDE_EVENTS.renderStart, this.onTransitionStart);
-    slide.on(SLIDE_EVENTS.renderEnd, this.onTransitionEnd);
-    slide.on(SLIDE_EVENTS.mainSeqStepStart, this.onTransitionStart);
-    slide.on(SLIDE_EVENTS.mainSeqStepEnd, this.onTransitionEnd);
-    slide.on(SLIDE_EVENTS.renderError, this.onError);
-    slide.on(SLIDE_EVENTS.renderEnd, this.resolveReady);
-
-    this.readyPromise.then(this.refreshPages);
-  }
-
-  protected onPageChanged = (page: number) => {
-    this.viewer.setPageIndex(page - 1);
-  };
-
-  protected onTransitionStart = () => {
-    this.viewer.setPlaying();
-  };
-
-  protected onTransitionEnd = () => {
-    this.viewer.setPaused();
-  };
-
-  protected onError = ({ error }: { error: Error }) => {
-    this.viewer.setPaused();
-    console.warn("[Slide] render error", error);
-  };
-
-  private destroyed = false;
-  public destroy() {
-    this.sideEffect.flushAll();
-    if (this.slide && !this.destroyed) {
-      this.slide.destroy();
-      this.destroyed = true;
-    }
-    this.viewer.destroy();
-  }
-
-  protected refreshPages = () => {
-    if (this.slide) {
-      this.viewer.pages = createDocsViewerPages(this.slide);
-      this.viewer.setPageIndex(this.getPageIndex(this.slide.slideState.currentSlideIndex));
-    }
-  };
-
-  protected getPageIndex(page: number) {
-    return (page > 0 ? page : 1) - 1;
-  }
-
-  protected renderSlideContainer(): HTMLDivElement {
-    if (!this.$slide) {
-      const $slide = document.createElement("div");
-      $slide.className = this.wrapClassName("slide");
-      $slide.dataset.appKind = "Slide";
-      this.$slide = $slide;
-    }
-    return this.$slide;
-  }
-
-  protected onPlay = () => {
-    if (this.slide) {
-      this.slide.nextStep();
-    }
-  };
-
-  protected onNewPageIndex = (index: number) => {
-    if (this.slide && this.slide.slideCount > 0) {
-      this.slide.renderSlide(clamp(index + 1, 1, this.slide.slideCount));
-    }
-  };
-
-  protected wrapClassName(className: string) {
-    return `${this.namespace}-${className}`;
-  }
-
-  protected namespace = "netless-app-slide";
-}

package/src/utils/bgcolor.ts

@@ -1,45 +0,0 @@
-import ColorString from "color-string";
-import { log } from "./logger";
-
-export function guessBgColor(el: HTMLElement): string {
-  try {
-    const bg = window.getComputedStyle(el).backgroundColor;
-    if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
-      return bg;
-    }
-    if (el.parentElement) {
-      return guessBgColor(el.parentElement);
-    }
-  } catch {
-    // ignore any error
-  }
-  return "#ffffff";
-}
-
-export function toHex(color: string): string {
-  const result = ColorString.get(color);
-  if (result && result.model === "rgb") {
-    const args = result.value;
-
-    // https://github.com/Qix-/color-convert/blob/8dfdbbc6b46fa6a305bf394d942cc1b08e23fca5/conversions.js#L616
-    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;
-  }
-}
-
-let cachedBgColor = "";
-
-export function cachedGetBgColor(el: HTMLElement): string {
-  if (!cachedBgColor) {
-    cachedBgColor = toHex(guessBgColor(el));
-    log("[Slide] guess bg color", cachedBgColor);
-  }
-  return cachedBgColor;
-}

package/src/utils/freezer.ts

@@ -1,75 +0,0 @@
-import type { RegisterParams } from "@netless/window-manager";
-import { log } from "./logger";
-
-export interface FreezableSlide {
-  freeze: () => void;
-  unfreeze: () => void;
-}
-
-export let useFreezer = false;
-export const FreezerLength = 2;
-
-const inspect = (arr: string[]) => {
-  return "[" + arr + "]";
-};
-
-export const apps = {
-  map: new Map<string, FreezableSlide>(),
-  queue: [] as string[],
-  validateQueue() {
-    log("[Slide] freezer: validate", inspect(this.queue));
-    while (this.queue.length > FreezerLength) {
-      const appId = this.queue.pop() as string;
-      const slide = this.map.get(appId);
-      if (slide) {
-        log("[Slide] freezer: validate-freeze", appId, inspect(this.queue));
-        slide.freeze();
-      }
-    }
-  },
-  set(appId: string, slide: FreezableSlide) {
-    log("[Slide] freezer: add", appId, inspect(this.queue));
-    this.map.set(appId, slide);
-    if (!this.queue.includes(appId)) {
-      this.queue.unshift(appId);
-    }
-    this.validateQueue();
-  },
-  delete(appId: string) {
-    this.map.delete(appId);
-    this.queue = this.queue.filter(id => id !== appId);
-    log("[Slide] freezer: delete", appId, inspect(this.queue));
-  },
-  focus(appId: string) {
-    const slide = this.map.get(appId);
-    const index = this.queue.indexOf(appId);
-    if (index > -1) {
-      this.queue.splice(index, 1);
-    }
-    this.queue.unshift(appId);
-    this.validateQueue();
-    log("[Slide] freezer: focus", appId, inspect(this.queue));
-    if (slide) {
-      slide.unfreeze();
-    }
-  },
-};
-
-if (import.meta.env.DEV) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (window as any).freezer = apps;
-}
-
-export type AddHooks = NonNullable<RegisterParams["addHooks"]>;
-
-/**
- * Put this function in your register code:
- * `WindowManager.register({ 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);
-  });
-};

package/src/utils/helpers.ts

@@ -1,26 +0,0 @@
-export function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-export function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch {
-  return (ev as TouchEvent).touches ? (ev as TouchEvent).touches[0] : (ev as MouseEvent);
-}
-
-export function preventEvent(ev: Event): void {
-  ev.stopPropagation();
-  if (ev.cancelable) {
-    ev.preventDefault();
-  }
-}
-
-export function isObj(obj: unknown) {
-  return typeof obj === "object" && obj !== null;
-}
-
-export function wait(ms: number) {
-  return new Promise<void>(resolve => setTimeout(resolve, ms));
-}
-
-export function deepClone<T>(obj: T): T {
-  return JSON.parse(JSON.stringify(obj));
-}

package/src/utils/logger.ts

@@ -1,106 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { AppContext, Displayer } from "@netless/window-manager";
-import type { SlideController } from "../SlideController";
-import { isObj } from "./helpers";
-
-type DebugMessage = { slide: boolean | "__instance" | "__debug" };
-
-type RoomLogger = {
-  debug: (...args: any) => void;
-  info: (...args: any) => void;
-  warn: (...args: any) => void;
-};
-
-class Logger {
-  public apps: Record<
-    string,
-    { context?: AppContext | null; controller?: SlideController | null }
-  > = {};
-
-  setAppContext(appId: string, context: AppContext | null) {
-    (this.apps[appId] ||= {}).context = context;
-    this.log(`[Slide] new ${appId}`);
-  }
-
-  setAppController(appId: string, controller: SlideController | null) {
-    (this.apps[appId] ||= {}).controller = controller;
-  }
-
-  deleteApp(appId: string) {
-    delete this.apps[appId];
-    this.log(`[Slide] delete ${appId}`);
-  }
-
-  public level: "debug" | "verbose" = import.meta.env.DEV ? "verbose" : "debug";
-
-  public roomLogger: RoomLogger | null = null;
-
-  constructor(public enable: boolean) {
-    this.initialize();
-  }
-
-  initialize() {
-    window.addEventListener("message", this._onMessage);
-  }
-
-  dispose() {
-    window.removeEventListener("message", this._onMessage);
-  }
-
-  log(...args: any[]) {
-    if (this.roomLogger) {
-      this.roomLogger.info(...args);
-    } else if (this.enable) {
-      console.log(...args);
-    }
-  }
-
-  verbose(...args: any[]) {
-    if (this.roomLogger) {
-      this.roomLogger.debug(...args);
-    } else if (this.enable && this.level === "verbose") {
-      console.log(...args);
-    }
-  }
-
-  warn(...args: any[]) {
-    if (this.roomLogger) {
-      this.roomLogger.warn(...args);
-    } else {
-      console.warn(...args);
-    }
-  }
-
-  /**
-   * @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();
-        });
-      }
-    }
-  };
-}
-
-export const logger = /** @__PURE__ */ new Logger(import.meta.env.DEV);
-export const log = /** @__PURE__ */ logger.log.bind(logger);
-export const verbose = /** @__PURE__ */ logger.verbose.bind(logger);
-export const setRoomLogger = (displayer: Displayer) => {
-  logger.roomLogger = (displayer as any).logger;
-};