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

package/src/SlideViewer/footer.ts

@@ -0,0 +1,169 @@
+import { class_name } from "../constants";
+import { arrowLeftSVG, arrowRightSVG, pauseSVG, playSVG, sidebarSVG } from "../icons";
+import { hc, noop, wrap_class } from "../utils";
+import { saveSVG } from "../icons/save";
+import { spinnerSVG } from "../icons/spinner";
+
+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 = hc("div", "footer");
+
+  const $btnSidebar = hc("button", "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 = hc("div", "page-jumps");
+
+  const $btnPageBack = hc("button", "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 = hc("button", "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 = window.setTimeout(() => {
+      $btnPlay.classList.remove(wrap_class("footer-btn-playing"));
+    }, 500);
+  };
+  $pageJumps.appendChild($btnPlay);
+
+  const $btnPageNext = hc("button", "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 = hc("div", "page-number");
+
+  const $pageNumberInput = hc("input", "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 = hc("span", "total-page");
+  $totalPage.textContent = " / ";
+
+  $pageNumber.appendChild($pageNumberInput);
+  $pageNumber.appendChild($totalPage);
+
+  $footer.appendChild($pageJumps);
+  $footer.appendChild($pageNumber);
+
+  const class_readonly = wrap_class("readonly");
+
+  let saveToPdf: (progressCallback: (p: number) => void) => void = noop;
+  const on_save_to_pdf = (callback: (progressCallback: (p: number) => void) => void) => {
+    saveToPdf = callback;
+  };
+  const progressCallback = (p: number) => {
+    if (p < 99) {
+      spinnerIcon.style.display = "block";
+      saveIcon.style.display = "none";
+      const progress = spinnerIcon.querySelector("[data-id]");
+      if (progress) {
+        progress.textContent = p.toString().padStart(2, "0");
+      }
+    } else {
+      spinnerIcon.style.display = "none";
+      saveIcon.style.display = "block";
+    }
+  };
+  const saveIcon = saveSVG(class_name);
+  const spinnerIcon = spinnerSVG(class_name);
+  spinnerIcon.style.display = "none";
+  const $saveBtn = hc("button", "footer-btn");
+  $saveBtn.appendChild(saveIcon);
+  $saveBtn.onclick = function () {
+    saveToPdf(progressCallback);
+  };
+  $saveBtn.appendChild(spinnerIcon);
+
+  // $footer.appendChild($saveBtn);
+
+  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,
+    on_save_to_pdf,
+  };
+}

package/src/SlideViewer/index.ts

@@ -0,0 +1,329 @@
+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;
+  renderStart: void;
+  renderEnd: void;
+}
+
+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;
+
+  _slideTitle = "";
+  _getWhiteSnapshot:
+    | ((index: number, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void)
+    | null = null;
+
+  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);
+    this.footer.on_save_to_pdf(this.toPdf);
+
+    // 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("renderStart", () => {
+      if (this._destroyed) return;
+      this.events.emit("renderStart");
+    });
+
+    this.slide.on("slideChange", page => {
+      if (this._destroyed) return;
+      this.setPage(page);
+      this.$overlay.style.opacity = "";
+
+      // renderStart -> renderEnd -> slideChange
+      // So we just treat `slideChange` as `renderEnd`
+      this.events.emit("renderEnd");
+    });
+
+    // TODO: export `once()` in the slide package.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (this.slide as any).once("renderEnd", () => {
+      // ready = first render end
+      if (!this._ready) {
+        setTimeout(() => {
+          this._ready = true;
+          resolveReady();
+        }, 1000);
+      }
+    });
+
+    // 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");
+  }
+
+  toPdf = async (progressCallback: (progress: number) => void) => {
+    const MAX = 1920;
+    const resizeCanvas = document.createElement("canvas");
+    const resizeCtx = resizeCanvas.getContext("2d");
+    const { slideCount, width, height } = this.slide;
+    let pdfWidth = Math.floor(width);
+    let pdfHeight = Math.floor(height);
+    if (pdfWidth > MAX) {
+      pdfWidth = MAX;
+      pdfHeight = Math.floor((height * pdfWidth) / width);
+    }
+    if (pdfHeight > MAX) {
+      pdfHeight = MAX;
+      pdfWidth = Math.floor((width * pdfHeight) / height);
+    }
+    resizeCanvas.width = pdfWidth;
+    resizeCanvas.height = pdfHeight;
+
+    const whiteSnapshotCanvas = document.createElement("canvas");
+    whiteSnapshotCanvas.width = width;
+    whiteSnapshotCanvas.height = height;
+    const whiteCtx = whiteSnapshotCanvas.getContext("2d");
+    if (!whiteCtx || !this._getWhiteSnapshot || !resizeCtx) {
+      return null;
+    }
+
+    const orientation = pdfWidth > pdfHeight ? "l" : "p";
+    const { jsPDF } = await import("jspdf");
+
+    const pdf = new jsPDF({
+      format: [pdfWidth, pdfHeight],
+      orientation,
+      compress: true,
+    });
+
+    for (let i = 1; i <= slideCount; i++) {
+      const slideSnapshot = await this.slide.snapshotWithTimingEnd(i);
+
+      if (slideSnapshot) {
+        const img = document.createElement("img");
+        img.src = slideSnapshot;
+        await new Promise(resolve => (img.onload = resolve));
+        resizeCtx.drawImage(img, 0, 0, pdfWidth, pdfHeight);
+      }
+      whiteCtx.clearRect(0, 0, width, height);
+      this._getWhiteSnapshot(i, whiteSnapshotCanvas, whiteCtx);
+      try {
+        const whiteSnapshot = whiteSnapshotCanvas.toDataURL("image/png");
+        const whiteImg = document.createElement("img");
+        whiteImg.src = whiteSnapshot;
+        await new Promise(resolve => (whiteImg.onload = resolve));
+        resizeCtx.drawImage(whiteImg, 0, 0, pdfWidth, pdfHeight);
+      } catch (e) {
+        // ignore
+      }
+
+      const outputDataUrl = resizeCanvas.toDataURL("image/jpeg", 0.6);
+      if (i > 1) {
+        pdf.addPage();
+      }
+      pdf.addImage(outputDataUrl, "JPEG", 0, 0, pdfWidth, pdfHeight, "", "FAST");
+      resizeCtx.clearRect(0, 0, pdfWidth, pdfHeight);
+      progressCallback(Math.ceil((i / slideCount) * 100));
+    }
+    const dataUrl = pdf.output("arraybuffer");
+    const blob = new Blob([dataUrl]);
+    const downloadUrl = URL.createObjectURL(blob);
+    const element = document.createElement("a");
+    element.setAttribute("href", downloadUrl);
+    element.setAttribute("download", `${this._slideTitle || "snapshot"}.pdf`);
+    element.style.display = "none";
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+    window.postMessage({ type: "@app-slide/_download_pdf_", buf: dataUrl });
+  };
+}

package/src/SlideViewer/sidebar.ts

@@ -0,0 +1,140 @@
+import type { ILazyLoadInstance } from "vanilla-lazyload";
+import type { PreviewPage } from "./typings";
+
+import LazyLoad from "vanilla-lazyload";
+import { append, h, hc, noop, 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 = hc("div", "content");
+
+  const $previewMask = hc("div", "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 = hc("div", "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);
+
+  let lazyload: ILazyLoadInstance | undefined;
+
+  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);
+      if (active && !lazyload) {
+        lazyload = new LazyLoad({
+          container: $preview,
+          elements_selector: `.${wrap_class("preview-page>img")}`,
+        });
+      }
+    }
+  }
+
+  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.alt = `page-${i}`;
+        $img.dataset.src = page.thumbnail;
+        $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;
+}