@netless/app-slide 0.3.0-canary.11 → 0.3.0-canary.13

package/dist/preview.d.ts

@@ -0,0 +1,5 @@
+import type { SlideViewerOptions } from "./SlideViewer";
+import { SlideViewer } from "./SlideViewer";
+export declare function previewSlide(options: SlideViewerOptions & {
+    container: HTMLElement;
+}): SlideViewer;

package/dist/typings.d.ts

@@ -14,7 +14,6 @@ export interface MagixEvents {
     [SLIDE_EVENTS.syncDispatch]: SyncEvent;
 }
 export interface AppOptions extends Pick<ISlideConfig, "renderOptions" | "rtcAudio" | "useLocalCache" | "resourceTimeout" | "loaderDelegate" | "navigatorDelegate" | "fixedFrameSize" | "logger"> {
-    debug?: boolean;
 }
 export interface ILogger {
     info?(msg: string): void;

package/dist/utils.d.ts

@@ -1 +1,13 @@
+import type { AppContext } from "@netless/window-manager";
 export declare function noop(): void;
+export declare function h<K extends keyof HTMLElementTagNameMap>(tag: K): HTMLElementTagNameMap[K];
+export declare function hc<K extends keyof HTMLElementTagNameMap>(tag: K, name: string): HTMLElementTagNameMap[K];
+export declare function append(parent: HTMLElement, child: HTMLElement): HTMLElement;
+export declare function wrap_class(name: string): string;
+export declare function set_class(el: HTMLElement, name: string): void;
+export declare function trim_slash(s: string): string;
+export declare function get(o: unknown, k: string): unknown;
+export declare function block<T = void>(): [p: Promise<T>, resolve: (t: T) => void];
+export declare function make_timestamp(context: AppContext): () => number;
+export declare function make_bg_color(el: HTMLElement): string;
+export declare function hex(color: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.11",
+  "version": "0.3.0-canary.13",
   "main": "dist/main.js",
   "module": "dist/main.mjs",
   "types": "dist/index.d.ts",
@@ -10,11 +10,12 @@
     "README-zh.md"
   ],
   "dependencies": {
-    "@netless/slide": "^0.7.0"
+    "@netless/slide": "^0.7.4"
   },
   "devDependencies": {
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
+    "remitter": "^0.2.9",
     "side-effect-manager": "^1.2.1",
     "value-enhancer": "^1.3.2",
     "vanilla-lazyload": "^17.8.3"

package/src/Logger.ts

@@ -0,0 +1,38 @@
+import type { AppContext } from "@netless/window-manager";
+
+export interface ILogger {
+  info(this: void, msg: string): void;
+}
+
+function getRoomLogger(context: AppContext) {
+  return (context.displayer as unknown as { logger: ILogger }).logger;
+}
+
+export class Logger implements ILogger {
+  static active = new Set<string>();
+  static roomLogger: ILogger | null = null;
+
+  constructor(readonly context: AppContext | null) {
+    if (context) {
+      Logger.active.add(context.appId);
+      Logger.roomLogger = getRoomLogger(context);
+    }
+  }
+
+  info = (msg: string) => {
+    if (Logger.roomLogger && this.context) {
+      Logger.roomLogger.info(msg + ` (${this.context.appId})`);
+    } else if (this.context) {
+      console.debug(msg + ` (${this.context.appId})`);
+    } else {
+      console.debug(msg);
+    }
+  };
+
+  destroy() {
+    this.context && Logger.active.delete(this.context.appId);
+    if (Logger.active.size === 0) {
+      Logger.roomLogger = null;
+    }
+  }
+}

package/src/SlideViewer/footer.ts

@@ -0,0 +1,146 @@
+import { class_name } from "../constants";
+import { arrowLeftSVG, arrowRightSVG, pauseSVG, playSVG, sidebarSVG } from "../icons";
+import { h, noop, set_class, wrap_class } from "../utils";
+
+export function create_footer() {
+  type NewPageIndexCallback = (newPageIndex: number) => void;
+  let new_page_index_callback: NewPageIndexCallback = noop;
+  const on_new_page_index = (callback: NewPageIndexCallback) => {
+    new_page_index_callback = callback;
+  };
+
+  let toggle_preview_callback: () => void = noop;
+  const on_toggle_preview = (callback: () => void) => {
+    toggle_preview_callback = callback;
+  };
+
+  let play_callback: () => void = noop;
+  const on_play = (callback: () => void) => {
+    play_callback = callback;
+  };
+
+  let readonly = false;
+  let sidebar = false;
+  let page_index = 0;
+  let page_count = 0;
+
+  const $footer = h("div");
+  set_class($footer, "footer");
+
+  const $btnSidebar = h("button");
+  set_class($btnSidebar, "btn-sidebar");
+  $btnSidebar.classList.add(wrap_class("footer-btn"));
+  $btnSidebar.appendChild(sidebarSVG(class_name));
+  $btnSidebar.onclick = function on_click_btn_sidebar() {
+    if (readonly) return;
+    toggle_preview_callback();
+  };
+  $btnSidebar.style.display = "none";
+  $footer.appendChild($btnSidebar);
+
+  const $pageJumps = h("div");
+  set_class($pageJumps, "page-jumps");
+
+  const $btnPageBack = h("button");
+  set_class($btnPageBack, "btn-page-back");
+  $btnPageBack.classList.add(wrap_class("footer-btn"));
+  $btnPageBack.appendChild(arrowLeftSVG(class_name));
+  $btnPageBack.onclick = function on_click_btn_page_back() {
+    if (readonly) return;
+    new_page_index_callback(page_index - 1);
+  };
+  $pageJumps.appendChild($btnPageBack);
+
+  const $btnPlay = h("button");
+  set_class($btnPlay, "btn-page-play");
+  $btnPlay.classList.add(wrap_class("footer-btn"));
+  $btnPlay.appendChild(playSVG(class_name));
+  $btnPlay.appendChild(pauseSVG(class_name));
+  let returnPlayTimer = 0;
+  $btnPlay.onclick = function on_click_btn_play() {
+    if (readonly) return;
+    $btnPlay.classList.add(wrap_class("footer-btn-playing"));
+    play_callback();
+    clearTimeout(returnPlayTimer);
+    returnPlayTimer = setTimeout(() => {
+      $btnPlay.classList.remove(wrap_class("footer-btn-playing"));
+    }, 500);
+  };
+  $pageJumps.appendChild($btnPlay);
+
+  const $btnPageNext = h("button");
+  set_class($btnPageNext, "btn-page-next");
+  $btnPageNext.classList.add(wrap_class("footer-btn"));
+  $btnPageNext.appendChild(arrowRightSVG(class_name));
+  $btnPageNext.onclick = function on_click_btn_page_next() {
+    if (readonly) return;
+    new_page_index_callback(page_index + 1);
+  };
+  $pageJumps.appendChild($btnPageNext);
+
+  const $pageNumber = h("div");
+  set_class($pageNumber, "page-number");
+
+  const $pageNumberInput = h("input");
+  set_class($pageNumberInput, "page-number-input");
+  $pageNumberInput.value = String(page_index + 1);
+  $pageNumberInput.onchange = function on_change_page_number_input() {
+    if (readonly) return;
+    if ($pageNumberInput.value) {
+      new_page_index_callback(Number($pageNumberInput.value) - 1);
+    }
+  };
+
+  const $totalPage = h("span");
+  set_class($totalPage, "total-page");
+  $totalPage.textContent = " / ";
+
+  $pageNumber.appendChild($pageNumberInput);
+  $pageNumber.appendChild($totalPage);
+
+  $footer.appendChild($pageJumps);
+  $footer.appendChild($pageNumber);
+
+  const class_readonly = wrap_class("readonly");
+
+  function set_readonly(readonly_: boolean) {
+    if (readonly !== readonly_) {
+      readonly = readonly_;
+      $footer.classList.toggle(class_readonly, readonly);
+      $pageNumberInput.disabled = readonly;
+    }
+  }
+
+  function set_sidebar(sidebar_: boolean) {
+    if (sidebar !== sidebar_) {
+      sidebar = sidebar_;
+      $btnSidebar.style.display = sidebar ? "" : "none";
+    }
+  }
+
+  function set_page_index(page_index_: number, force = false) {
+    if (force || page_index !== page_index_) {
+      page_index = page_index_;
+      $pageNumberInput.value = String(page_index + 1);
+    }
+  }
+
+  function set_page_count(page_count_: number) {
+    if (page_count !== page_count_) {
+      page_count = page_count_;
+      $totalPage.textContent = ` / ${page_count}`;
+    }
+  }
+
+  return {
+    $footer,
+    $pageNumberInput,
+    set_readonly,
+    set_sidebar,
+    set_page_index,
+    set_page_count,
+    on_new_page_index,
+    on_toggle_preview,
+    on_play,
+  };
+}

package/src/SlideViewer/index.ts

@@ -0,0 +1,235 @@
+import type { ISlideConfig } from "@netless/slide";
+import type { SlideAttributes } from "./typings";
+
+import { Slide } from "@netless/slide";
+import { SideEffectManager } from "side-effect-manager";
+import { Remitter } from "remitter";
+
+import { DefaultUrl } from "../constants";
+import { append, block, hc } from "../utils";
+import { fetch_slide_info, make_prefix, on_visibility_change } from "./utils";
+
+import styles from "../style.scss?inline";
+import { create_footer } from "./footer";
+import { create_sidebar } from "./sidebar";
+
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export type SlideViewerOptions = MakeOptional<
+  Omit<ISlideConfig & SlideAttributes, "anchor">,
+  "mode" | "interactive"
+>;
+
+export interface SlideViewerInfoResponse {
+  width: number;
+  height: number;
+  slideCount: number;
+}
+
+export interface SlideViewerEventData {
+  freeze: void;
+  unfreeze: void;
+  renderError: { error: Error; index: number };
+  prepareError: Error;
+}
+
+export class SlideViewer {
+  static styles = styles;
+  static fetchSlideInfo = fetch_slide_info;
+
+  readonly sideEffect = new SideEffectManager();
+  readonly events = new Remitter<SlideViewerEventData>();
+
+  readonly $slide = hc("div", "slide");
+  readonly $overlay = hc("div", "overlay");
+  readonly sidebar = create_sidebar();
+  readonly footer = create_footer();
+  readonly $content: HTMLElement;
+  readonly $footer: HTMLElement;
+
+  readonly slide: Slide;
+
+  private readonly _readyPromise: Promise<void>;
+  private readonly _infoPromise: Promise<SlideViewerInfoResponse>;
+  private _ready = false;
+  private _slideCount = 0;
+  private _destroyed = false;
+  private _isFrozen = false;
+  private _cachedIsFrozen = false;
+
+  constructor(options: SlideViewerOptions) {
+    // user interface
+    this.$content = this.sidebar.$content;
+    this.$footer = this.footer.$footer;
+    append(this.$content, this.$slide);
+    append(this.$content, this.$overlay);
+
+    // bind user actions
+    this.sidebar.on_new_page_index(this.onNewPageIndex);
+    this.footer.on_new_page_index(this.onNewPageIndex);
+    this.footer.on_toggle_preview(this.onTogglePreview);
+    this.footer.on_play(this.onPlay);
+
+    // remove dom on cleanup
+    this.sideEffect.push(this.sidebar.destroy);
+    this.sideEffect.push(() => this.slide.destroy());
+    this.sideEffect.push(() => {
+      this.$content.parentElement && this.$content.remove();
+      this.$footer.parentElement && this.$footer.remove();
+      this.$slide.parentElement && this.$slide.remove();
+    });
+
+    // auto freeze on lost focus
+    this.sideEffect.push(
+      on_visibility_change(visible => {
+        if (this._destroyed) return;
+        if (!visible) {
+          this._cachedIsFrozen = this._isFrozen;
+          this.freeze();
+        } else {
+          if (!this._cachedIsFrozen) this.unfreeze();
+        }
+      })
+    );
+
+    // start loading slide
+    // prepare(info) -> slide.renderEnd(ready)
+    const [infoPromise, resolveInfo] = block<SlideViewerInfoResponse>();
+    this._infoPromise = infoPromise;
+
+    const fetching = SlideViewer.fetchSlideInfo(options).then(({ preview, slide }) => {
+      if (this._destroyed) return;
+
+      this._slideCount = slide.slideCount;
+
+      if (preview) {
+        const { taskId, url } = options;
+        const { slideCount } = slide;
+        const { width, height } = preview;
+
+        const prefix = make_prefix(taskId, url);
+        const pages = Array.from({ length: slideCount }, (_, i) => ({
+          width,
+          height,
+          thumbnail: `${prefix}/preview/${i + 1}.png`,
+        }));
+
+        this.sidebar.set_pages(pages);
+        this.footer.set_sidebar(true);
+      }
+
+      this.footer.set_page_count(slide.slideCount);
+      resolveInfo(slide);
+    });
+
+    fetching.catch(error => {
+      console.log("[Slide] fetch slide info error");
+      console.error(error);
+      this.events.emit("prepareError", error);
+    });
+
+    const [readyPromise, resolveReady] = block();
+    this._readyPromise = readyPromise;
+
+    this.slide = new Slide({
+      anchor: this.$slide,
+      mode: "local",
+      interactive: true,
+      enableGlobalClick: true,
+      useLocalCache: true,
+      ...options,
+    });
+    this.slide.setResource(options.taskId, options.url || DefaultUrl);
+
+    this.slide.on("slideChange", page => {
+      if (this._destroyed) return;
+      this.setPage(page);
+    });
+
+    this.slide.on("renderEnd", () => {
+      // ready = first render end
+      if (!this._ready) {
+        setTimeout(() => {
+          this._ready = true;
+          resolveReady();
+        }, 1000);
+      } else {
+        // otherwise, clear overlay
+        this.$overlay.style.opacity = "";
+      }
+    });
+
+    // show overlay on render error
+    this.slide.on("renderError", ev => {
+      if (this._destroyed) return;
+      if (ev.error) {
+        console.error(ev.error);
+        this.$overlay.textContent = `Error on slide.index=${ev.index}: ${ev.error.message}`;
+        this.$overlay.style.opacity = "1";
+        this.events.emit("renderError", ev);
+      }
+    });
+
+    this.ready(() => {
+      if (this._isFrozen) {
+        this.freeze();
+      }
+    });
+  }
+
+  prepare(callback: (response: SlideViewerInfoResponse) => void) {
+    return this._infoPromise.then(callback);
+  }
+
+  ready(callback: () => void) {
+    return this._readyPromise.then(callback);
+  }
+
+  destroy() {
+    this._destroyed = true;
+    this.sideEffect.flushAll();
+  }
+
+  onPlay = () => {
+    this.slide.nextStep();
+  };
+
+  onNewPageIndex = (index: number) => {
+    if (this._ready && index >= 0 && index < this._slideCount) {
+      this.slide.renderSlide(index + 1);
+    } else {
+      this.setPage(this.slide.slideState.currentSlideIndex);
+    }
+  };
+
+  onTogglePreview = () => {
+    this.sidebar.set_active(!this.sidebar.get_active());
+  };
+
+  setReadonly(readonly: boolean) {
+    this.slide.setInteractive(!readonly);
+    this.sidebar.set_readonly(readonly);
+    this.footer.set_readonly(readonly);
+  }
+
+  setPage(page: number) {
+    this.sidebar.set_page_index(page - 1, true);
+    this.footer.set_page_index(page - 1, true);
+  }
+
+  freeze() {
+    if (this._destroyed) return;
+    this._isFrozen = true;
+    if (!this._ready) return;
+    this.slide.frozen();
+    this.events.emit("freeze");
+  }
+
+  unfreeze() {
+    if (this._destroyed) return;
+    this._isFrozen = false;
+    if (!this._ready) return;
+    this.slide.release();
+    this.events.emit("unfreeze");
+  }
+}

package/src/SlideViewer/sidebar.ts

@@ -0,0 +1,139 @@
+import type { PreviewPage } from "./typings";
+
+import LazyLoad from "vanilla-lazyload";
+import { append, h, noop, set_class, wrap_class } from "../utils";
+
+export function create_sidebar() {
+  type NewPageIndexCallback = (newPageIndex: number) => void;
+  let new_page_index_callback: NewPageIndexCallback = noop;
+  const on_new_page_index = (callback: NewPageIndexCallback) => {
+    new_page_index_callback = callback;
+  };
+
+  let destroyed = false;
+  let readonly = false;
+  let active = false;
+  let pages: PreviewPage[] = [];
+  let page_index = 0;
+
+  const class_readonly = wrap_class("readonly");
+  const class_preview_active = wrap_class("preview-active");
+
+  const $content = h("div");
+  set_class($content, "content");
+
+  const $previewMask = h("div");
+  set_class($previewMask, "preview-mask");
+  $previewMask.onclick = function on_click_preview_mask(ev) {
+    if (readonly) return;
+    if (ev.target !== $previewMask) return;
+    set_active(false);
+  };
+  append($content, $previewMask);
+
+  const $preview = h("div");
+  set_class($preview, "preview");
+  $preview.classList.add(wrap_class("tele-fancy-scrollbar"));
+  $preview.onclick = function on_click_preview(ev) {
+    if (readonly) return;
+    const page_index = (ev.target as HTMLElement).dataset?.pageIndex;
+    if (page_index) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      new_page_index_callback(Number(page_index));
+      set_active(false);
+    }
+  };
+  append($content, $preview);
+
+  const lazyload = new LazyLoad({
+    container: $preview,
+    elements_selector: `.${wrap_class("preview-page>img")}`,
+  });
+
+  function set_readonly(readonly_: boolean) {
+    if (readonly !== readonly_) {
+      readonly = readonly_;
+      $content.classList.toggle(class_readonly, readonly);
+    }
+  }
+
+  function set_active(active_: boolean) {
+    if (active !== active_) {
+      active = active_;
+      $content.classList.toggle(class_preview_active, active);
+    }
+  }
+
+  function set_pages(pages_: PreviewPage[]) {
+    if (pages !== pages_) {
+      pages = pages_;
+
+      const page_class = wrap_class("preview-page");
+      const page_name_class = wrap_class("preview-page-name");
+
+      pages.forEach((page, i) => {
+        const pageIndex = String(i);
+
+        const $page = h("a");
+        $page.className = page_class + " " + wrap_class(`preview-page-${i}`);
+        $page.href = "#";
+        $page.dataset.pageIndex = pageIndex;
+
+        const $name = h("span");
+        $name.className = page_name_class;
+        $name.textContent = String(i + 1);
+        $name.dataset.pageIndex = pageIndex;
+
+        const $img = h("img");
+        $img.width = page.width;
+        $img.height = page.height;
+        $img.src = page.thumbnail;
+        $img.alt = `page-${i}`;
+        $img.dataset.pageIndex = pageIndex;
+
+        append($page, $img);
+        append($page, $name);
+        append($preview, $page);
+      });
+
+      if (!destroyed) {
+        lazyload.update();
+      }
+    }
+  }
+
+  function set_page_index(page_index_: number, force = false) {
+    if (force || page_index !== page_index_) {
+      page_index = page_index_;
+      const $page = $preview.querySelector<HTMLElement>(
+        `.${wrap_class(`preview-page-${page_index}`)}`
+      );
+      if ($page) {
+        $preview.scrollTo({ top: $page.offsetTop - 16 });
+      }
+    }
+  }
+
+  function destroy() {
+    destroyed = true;
+    lazyload.destroy();
+  }
+
+  function get_active() {
+    return active;
+  }
+
+  return {
+    $content,
+    $preview,
+    set_readonly,
+    set_active,
+    get_active,
+    set_pages,
+    on_new_page_index,
+    set_page_index,
+    destroy,
+  };
+}

package/src/SlideViewer/typings.ts

@@ -0,0 +1,21 @@
+export interface SlideAttributes {
+  taskId: string;
+  url?: string;
+}
+
+export interface PreviewPage {
+  width: number;
+  height: number;
+  thumbnail: string;
+}
+
+export interface PreviewInfo {
+  width: number;
+  height: number;
+}
+
+export interface SlideInfo {
+  width: number;
+  height: number;
+  slideCount: number;
+}

package/src/SlideViewer/utils.ts

@@ -0,0 +1,37 @@
+import type { PreviewInfo, SlideAttributes, SlideInfo } from "./typings";
+
+import { DefaultUrl } from "../constants";
+import { noop, trim_slash } from "../utils";
+
+export function make_prefix(taskId: string, url?: string) {
+  return `${trim_slash(url || DefaultUrl)}/${taskId}`;
+}
+
+export async function fetch_slide_info({ taskId, url }: SlideAttributes): Promise<{
+  preview: PreviewInfo | null;
+  slide: SlideInfo;
+}> {
+  const prefix = make_prefix(taskId, url);
+  const imgSrc = `${prefix}/preview/1.png`;
+  const jsonUrl = `${prefix}/jsonOutput/slide-1.json`;
+
+  const p1 = new Promise<PreviewInfo | null>(resolve => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => resolve(null);
+    image.src = imgSrc;
+  });
+
+  const p2: Promise<SlideInfo> = fetch(jsonUrl).then(r => r.json());
+
+  return { preview: await p1, slide: await p2 };
+}
+
+export function on_visibility_change(callback: (visible: boolean) => void) {
+  if (typeof document !== "undefined") {
+    const listener = () => callback(document.visibilityState === "visible");
+    document.addEventListener("visibilitychange", listener);
+    return () => document.removeEventListener("visibilitychange", listener);
+  }
+  return noop;
+}