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

package/src/DocsViewer/index.ts

@@ -1,368 +0,0 @@
-import { sidebarSVG } from "./icons/sidebar";
-import { arrowLeftSVG } from "./icons/arrow-left";
-import { arrowRightSVG } from "./icons/arrow-right";
-import { playSVG } from "./icons/play";
-import { pauseSVG } from "./icons/pause";
-
-import type { ILazyLoadInstance } from "vanilla-lazyload";
-import LazyLoad from "vanilla-lazyload";
-import { SideEffectManager } from "side-effect-manager";
-
-export interface DocsViewerPage {
-  src: string;
-  height: number;
-  width: number;
-  thumbnail?: string;
-}
-
-export interface DocsViewerConfig {
-  readonly: boolean;
-  onNewPageIndex: (index: number) => void;
-  onPlay?: () => void;
-}
-
-export class DocsViewer {
-  public constructor({ readonly, onNewPageIndex, onPlay }: DocsViewerConfig) {
-    this.readonly = readonly;
-    this.onNewPageIndex = onNewPageIndex;
-    this.onPlay = onPlay;
-
-    this.render();
-  }
-
-  protected readonly: boolean;
-  protected onNewPageIndex: (index: number) => void;
-  protected onPlay?: () => void;
-
-  private _pages: DocsViewerPage[] = [];
-
-  public set pages(value: DocsViewerPage[]) {
-    this._pages = value;
-    this.refreshPreview();
-    this.refreshTotalPage();
-    this.refreshBtnSidebar();
-  }
-
-  public get pages() {
-    return this._pages;
-  }
-
-  public $content!: HTMLElement;
-  public $preview!: HTMLElement;
-  public $previewMask!: HTMLElement;
-  public $footer!: HTMLElement;
-  public $pageNumberInput!: HTMLInputElement;
-  public $totalPage!: HTMLSpanElement;
-  public $btnPlay!: HTMLButtonElement;
-  public $btnSidebar!: HTMLButtonElement;
-
-  public pageIndex = 0;
-
-  public unmount(): void {
-    this.$content.remove();
-    this.$footer.remove();
-  }
-
-  public setReadonly(readonly: boolean): void {
-    this.readonly = readonly;
-    this.$content.classList.toggle(this.wrapClassName("readonly"), readonly);
-    this.$footer.classList.toggle(this.wrapClassName("readonly"), readonly);
-    this.$pageNumberInput.disabled = readonly;
-  }
-
-  public destroy(): void {
-    this.sideEffect.flushAll();
-    this.unmount();
-  }
-
-  public setPageIndex(pageIndex: number): void {
-    if (!Number.isNaN(pageIndex)) {
-      this.pageIndex = pageIndex;
-      this.$pageNumberInput.value = String(pageIndex + 1);
-    }
-  }
-
-  public refreshTotalPage(): void {
-    if (this.pages.length) {
-      this.$totalPage.textContent = " / " + this.pages.length;
-    } else {
-      this.$totalPage.textContent = "";
-    }
-  }
-
-  public setSmallBox(isSmallBox: boolean): void {
-    if (this.isSmallBox !== isSmallBox) {
-      this.isSmallBox = isSmallBox;
-      this.$footer.classList.toggle(this.wrapClassName("float-footer"), isSmallBox);
-    }
-  }
-
-  public render(): HTMLElement {
-    this.renderContent();
-    this.renderFooter();
-    return this.$content;
-  }
-
-  protected renderContent(): HTMLElement {
-    if (!this.$content) {
-      const $content = document.createElement("div");
-      $content.className = this.wrapClassName("content");
-      this.$content = $content;
-
-      if (this.readonly) {
-        $content.classList.add(this.wrapClassName("readonly"));
-      }
-
-      $content.appendChild(this.renderPreviewMask());
-      $content.appendChild(this.renderPreview());
-    }
-    return this.$content;
-  }
-
-  private previewLazyLoad?: ILazyLoadInstance;
-
-  protected renderPreview(): HTMLElement {
-    if (!this.$preview) {
-      const $preview = document.createElement("div");
-      $preview.className = this.wrapClassName("preview") + " tele-fancy-scrollbar";
-      this.$preview = $preview;
-      this.sideEffect.add(() => {
-        this.previewLazyLoad = new LazyLoad({
-          container: this.$preview,
-          elements_selector: `.${this.wrapClassName("preview-page>img")}`,
-        });
-        return () => this.previewLazyLoad?.destroy();
-      });
-
-      this.refreshPreview();
-
-      this.sideEffect.addEventListener($preview, "click", ev => {
-        if (this.readonly) {
-          return;
-        }
-        const pageIndex = (ev.target as HTMLElement).dataset?.pageIndex;
-        if (pageIndex) {
-          ev.preventDefault();
-          ev.stopPropagation();
-          ev.stopImmediatePropagation();
-          this.onNewPageIndex(Number(pageIndex));
-          this.togglePreview(false);
-        }
-      });
-    }
-
-    return this.$preview;
-  }
-
-  private refreshPreview() {
-    const { $preview } = this;
-    const pageClassName = this.wrapClassName("preview-page");
-    const pageNameClassName = this.wrapClassName("preview-page-name");
-    while ($preview.firstChild) {
-      $preview.firstChild.remove();
-    }
-
-    this.pages.forEach((page, i) => {
-      const previewSRC = page.thumbnail ?? (page.src.startsWith("ppt") ? void 0 : page.src);
-      if (!previewSRC) {
-        return;
-      }
-
-      const pageIndex = String(i);
-
-      const $page = document.createElement("a");
-      $page.className = pageClassName + " " + this.wrapClassName(`preview-page-${i}`);
-      $page.setAttribute("href", "#");
-      $page.dataset.pageIndex = pageIndex;
-
-      const $name = document.createElement("span");
-      $name.className = pageNameClassName;
-      $name.textContent = String(i + 1);
-      $name.dataset.pageIndex = pageIndex;
-
-      const $img = document.createElement("img");
-      $img.width = page.width;
-      $img.height = page.height;
-      $img.dataset.src = previewSRC;
-      $img.dataset.pageIndex = pageIndex;
-
-      $page.appendChild($img);
-      $page.appendChild($name);
-      $preview.appendChild($page);
-    });
-
-    this.previewLazyLoad?.update();
-  }
-
-  protected renderPreviewMask(): HTMLElement {
-    if (!this.$previewMask) {
-      this.$previewMask = document.createElement("div");
-      this.$previewMask.className = this.wrapClassName("preview-mask");
-      this.sideEffect.addEventListener(this.$previewMask, "click", ev => {
-        if (this.readonly) {
-          return;
-        }
-        if (ev.target === this.$previewMask) {
-          this.togglePreview(false);
-        }
-      });
-    }
-    return this.$previewMask;
-  }
-
-  public setPaused = () => {
-    this.$btnPlay.classList.toggle(this.wrapClassName("footer-btn-playing"), false);
-  };
-
-  public setPlaying = () => {
-    this.$btnPlay.classList.toggle(this.wrapClassName("footer-btn-playing"), true);
-  };
-
-  public refreshBtnSidebar() {
-    this.$btnSidebar.style.display = this.pages.length > 0 ? "" : "none";
-  }
-
-  protected renderFooter(): HTMLElement {
-    if (!this.$footer) {
-      const $footer = document.createElement("div");
-      $footer.className = this.wrapClassName("footer");
-      this.$footer = $footer;
-
-      if (this.readonly) {
-        $footer.classList.add(this.wrapClassName("readonly"));
-      }
-
-      if (this.isSmallBox) {
-        $footer.classList.add(this.wrapClassName("float-footer"));
-      }
-
-      const $btnSidebar = this.renderFooterBtn("btn-sidebar", sidebarSVG(this.namespace));
-      this.sideEffect.addEventListener($btnSidebar, "click", () => {
-        if (this.readonly) {
-          return;
-        }
-        this.togglePreview();
-      });
-      this.$btnSidebar = $btnSidebar;
-      this.$btnSidebar.style.display = "none";
-      this.$footer.appendChild($btnSidebar);
-
-      const $pageJumps = document.createElement("div");
-      $pageJumps.className = this.wrapClassName("page-jumps");
-
-      const $btnPageBack = this.renderFooterBtn("btn-page-back", arrowLeftSVG(this.namespace));
-      this.sideEffect.addEventListener($btnPageBack, "click", () => {
-        if (this.readonly) {
-          return;
-        }
-        this.onNewPageIndex(this.pageIndex - 1);
-      });
-      $pageJumps.appendChild($btnPageBack);
-
-      if (this.onPlay) {
-        const $btnPlay = this.renderFooterBtn(
-          "btn-page-play",
-          playSVG(this.namespace),
-          pauseSVG(this.namespace)
-        );
-        this.$btnPlay = $btnPlay;
-        this.sideEffect.addEventListener($btnPlay, "click", () => {
-          if (this.readonly) {
-            return;
-          }
-          this.setPlaying();
-          if (this.onPlay) {
-            this.onPlay();
-          }
-        });
-
-        $pageJumps.appendChild($btnPlay);
-      }
-
-      const $btnPageNext = this.renderFooterBtn("btn-page-next", arrowRightSVG(this.namespace));
-      this.sideEffect.addEventListener($btnPageNext, "click", () => {
-        if (this.readonly) {
-          return;
-        }
-        this.onNewPageIndex(this.pageIndex + 1);
-      });
-      $pageJumps.appendChild($btnPageNext);
-
-      const $pageNumber = document.createElement("div");
-      $pageNumber.className = this.wrapClassName("page-number");
-
-      const $pageNumberInput = document.createElement("input");
-      $pageNumberInput.className = this.wrapClassName("page-number-input");
-      $pageNumberInput.value = String(this.pageIndex + 1);
-      if (this.readonly) {
-        $pageNumberInput.disabled = true;
-      }
-      this.$pageNumberInput = $pageNumberInput;
-      this.sideEffect.addEventListener($pageNumberInput, "focus", () => {
-        $pageNumberInput.select();
-      });
-      this.sideEffect.addEventListener($pageNumberInput, "change", () => {
-        if (this.readonly) {
-          return;
-        }
-        if ($pageNumberInput.value) {
-          this.onNewPageIndex(Number($pageNumberInput.value) - 1);
-        }
-      });
-
-      const $totalPage = document.createElement("span");
-      this.$totalPage = $totalPage;
-
-      $pageNumber.appendChild($pageNumberInput);
-      $pageNumber.appendChild($totalPage);
-
-      this.$footer.appendChild($pageJumps);
-      this.$footer.appendChild($pageNumber);
-    }
-    return this.$footer;
-  }
-
-  protected renderFooterBtn(
-    className: string,
-    $icon: SVGElement,
-    $iconActive?: SVGElement
-  ): HTMLButtonElement {
-    const $btn = document.createElement("button");
-    $btn.className = this.wrapClassName("footer-btn") + " " + this.wrapClassName(className);
-
-    $btn.appendChild($icon);
-
-    if ($iconActive) {
-      $btn.appendChild($iconActive);
-    }
-
-    return $btn;
-  }
-
-  protected togglePreview(isShowPreview?: boolean): void {
-    this.isShowPreview = isShowPreview ?? !this.isShowPreview;
-    this.$content.classList.toggle(this.wrapClassName("preview-active"), this.isShowPreview);
-    if (this.isShowPreview) {
-      const $previewPage = this.$preview.querySelector<HTMLElement>(
-        "." + this.wrapClassName(`preview-page-${this.pageIndex}`)
-      );
-      if ($previewPage) {
-        this.$preview.scrollTo({
-          top: $previewPage.offsetTop - 16,
-        });
-      }
-    }
-  }
-
-  protected wrapClassName(className: string): string {
-    return `${this.namespace}-${className}`;
-  }
-
-  protected namespace = "netless-app-slide";
-
-  protected isShowPreview = false;
-
-  protected isSmallBox = false;
-
-  protected sideEffect = new SideEffectManager();
-}

package/src/DocsViewer/style.scss

@@ -1,228 +0,0 @@
-@import "./variables.scss";
-
-$namespace: $slide-namespace;
-
-.#{$namespace}-content {
-  position: relative;
-  height: 100%;
-  overflow: hidden;
-}
-
-.#{$namespace}-preview-mask {
-  display: none;
-  position: absolute;
-  z-index: 200;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.#{$namespace}-preview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: absolute;
-  z-index: 300;
-  top: 0;
-  left: 0;
-  width: 33%;
-  max-width: 200px;
-  height: 100%;
-  padding-top: 10px;
-  transform: translateX(-100%);
-  background: rgba(237, 237, 240, 0.9);
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.11);
-  transition: transform 0.4s;
-}
-
-.#{$namespace}-preview-active {
-  .#{$namespace}-preview-mask {
-    display: block;
-  }
-
-  .#{$namespace}-preview {
-    transform: translateX(0);
-  }
-}
-
-.#{$namespace}-preview-page {
-  position: relative;
-  display: block;
-  width: 55%;
-  margin-bottom: 10px;
-  font-size: 0;
-  color: transparent;
-  outline: none;
-  border: 7px solid transparent;
-  border-radius: 4px;
-  transition: border-color 0.3s;
-  user-select: none;
-
-  &:hover,
-  &.#{$namespace}-preview-page-active {
-    border-color: rgba(68, 78, 96, 0.1);
-  }
-
-  & > img {
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    border-radius: 1px;
-    background-color: rgba(255, 255, 255, 1);
-    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
-  }
-}
-
-.#{$namespace}-preview-page-name {
-  position: absolute;
-  top: 1px;
-  left: -10px;
-  transform: translate(-100%);
-  text-align: right;
-  font-size: 12px;
-  color: #5f5f5f;
-  user-select: none;
-}
-
-.#{$namespace}-footer {
-  box-sizing: border-box;
-  height: 26px;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  border-top: 1px solid #eeeef7;
-  color: #191919;
-}
-
-.#{$namespace}-float-footer {
-  width: 100%;
-  min-height: 26px;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  z-index: 2000;
-  background: rgba(249, 249, 252, 0.9);
-  transition: opacity 0.4s;
-}
-
-.#{$namespace}-footer-btn {
-  box-sizing: border-box;
-  width: 26px;
-  height: 26px;
-  font-size: 0;
-  margin: 0;
-  padding: 3px;
-  border: none;
-  border-radius: 1px;
-  outline: none;
-  color: currentColor;
-  background: transparent;
-  transition: background 0.4s;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-  &:hover {
-    background: rgba(237, 237, 240, 0.9);
-  }
-
-  @media (hover: none) {
-    &:hover {
-      background: transparent !important;
-    }
-  }
-
-  & > svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  & > svg:nth-of-type(2) {
-    display: none;
-  }
-
-  &.#{$namespace}-footer-btn-playing {
-    & > svg:nth-of-type(1) {
-      display: none;
-    }
-
-    & > svg:nth-of-type(2) {
-      display: initial;
-    }
-  }
-
-  & ~ & {
-    margin-left: 15px;
-  }
-}
-
-.#{$namespace}-page-jumps {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.#{$namespace}-page-number {
-  margin-left: auto;
-  font-size: 13px;
-  user-select: none;
-  white-space: nowrap;
-  word-break: keep-all;
-}
-
-.#{$namespace}-page-number-input {
-  border: none;
-  outline: none;
-  width: 3em;
-  margin: 0;
-  padding: 0 2px;
-  text-align: right;
-  font-size: 13px;
-  line-height: 1;
-  font-weight: normal;
-  font-family: inherit;
-  border-radius: 2px;
-  color: currentColor;
-  background: transparent;
-  transition: background 0.4s;
-  user-select: text;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: #fff;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  }
-}
-
-.#{$namespace}-readonly {
-  &.#{$namespace}-footer {
-    display: none;
-  }
-}
-
-.telebox-color-scheme-dark {
-  .#{$namespace}-page-number-input {
-    color: #a6a6a8;
-  }
-  .#{$namespace}-page-number-input:active,
-  .#{$namespace}-page-number-input:focus,
-  .#{$namespace}-page-number-input:hover {
-    color: #222;
-  }
-  .#{$namespace}-footer {
-    color: #a6a6a8;
-    background: #2d2d33;
-    border-top: none;
-  }
-  .#{$namespace}-footer-btn:hover {
-    background: #212126;
-  }
-  .#{$namespace}-preview {
-    background: rgba(50, 50, 50, 0.9);
-  }
-}

package/src/DocsViewer/variables.scss

@@ -1 +0,0 @@
-$slide-namespace: "netless-app-slide";

package/src/SlideController/helpers.ts

@@ -1,48 +0,0 @@
-import type { AppContext, Room } from "@netless/window-manager";
-import type { ScenePathType } from "white-web-sdk";
-import type { Slide } from "@netless/slide";
-import type { DocsViewerPage } from "../DocsViewer";
-import type { Attributes } from "../typings";
-
-export function createDocsViewerPages(slide: Slide): DocsViewerPage[] {
-  const { width, height, slideCount, slideState } = slide;
-  const { taskId, url } = slideState;
-  const pages: DocsViewerPage[] = [];
-  for (let i = 1; i <= slideCount; ++i) {
-    pages.push({ width, height, thumbnail: `${url}/${taskId}/preview/${i}.png`, src: "ppt" });
-  }
-  return pages;
-}
-
-// because `renderSlide()` is slow, but switching between scenes in whiteboard is fast
-// so here we make scenes sync with slide page
-export function syncSceneWithSlide(
-  room: Room,
-  context: AppContext<Attributes>,
-  slide: Slide,
-  baseScenePath: string
-) {
-  const page = slide.slideState.currentSlideIndex;
-  if (!(page > 0) || !context.getIsWritable()) return;
-
-  const scenePath = [baseScenePath, page].join("/");
-
-  if (room.scenePathType(scenePath) !== ("page" as ScenePathType.Page)) {
-    room.removeScenes(baseScenePath);
-    const count = slide.slideCount;
-    const scenes: { name: string }[] = [];
-    for (let i = 1; i <= count; ++i) scenes.push({ name: `${i}` });
-    room.putScenes(baseScenePath, scenes);
-  }
-
-  let currentScenePath: string;
-  if (context.getBox().focus) {
-    currentScenePath = room.state.sceneState.scenePath;
-  } else {
-    currentScenePath = context.getView()?.focusScenePath || "";
-  }
-
-  if (currentScenePath !== scenePath) {
-    context.setScenePath(scenePath);
-  }
-}