@netless/fastboard 0.0.11 → 0.2.1

package/src/WhiteboardApp.ts

@@ -1,146 +0,0 @@
-import type { ConversionResponse, SceneDefinition } from "white-web-sdk";
-import type {
-  InsertDocsParams,
-  InsertMediaParams,
-  Language,
-  Layout,
-  WhiteboardAppConfig,
-} from "./internal";
-import { genUID, Instance, makeSlideParams } from "./internal";
-
-export type {
-  Language,
-  Layout,
-  WhiteboardAppConfig,
-  InsertMediaParams,
-  InsertDocsParams,
-};
-
-export class WhiteboardApp {
-  private readonly _instance: Instance;
-
-  public constructor(readonly config: WhiteboardAppConfig) {
-    this._instance = new Instance(config);
-  }
-
-  public get room() {
-    return this._instance.room;
-  }
-
-  public get manager() {
-    return this._instance.manager;
-  }
-
-  public get sdk() {
-    return this._instance.sdk;
-  }
-
-  public get i18n() {
-    return this._instance.i18n;
-  }
-
-  public get target(): HTMLElement | null {
-    return this._instance.target;
-  }
-
-  public get collector(): HTMLElement | null {
-    return this._instance.collector;
-  }
-
-  public bindElement(target?: HTMLElement | null) {
-    this._instance.bindElement(target || null);
-  }
-
-  public bindCollector(collector?: HTMLElement | null) {
-    this._instance.bindCollector(collector || null);
-  }
-
-  public get layout() {
-    return this._instance.config.layout;
-  }
-
-  public updateLayout(layout?: Layout | undefined) {
-    this._instance.updateLayout(layout);
-  }
-
-  public insertMedia(params: InsertMediaParams) {
-    this._instance.insertMedia(params);
-  }
-
-  /**
-   * Insert PDF/PPTX from conversion result.
-   * @param status https://developer.netless.link/server-en/home/server-conversion#get-query-task-conversion-progress
-   */
-  public insertDocs(
-    filename: string,
-    status: ConversionResponse
-  ): Promise<string | undefined>;
-
-  /**
-   * Manual way.
-   */
-  public insertDocs(params: InsertDocsParams): Promise<string | undefined>;
-
-  public insertDocs(
-    arg1: string | InsertDocsParams,
-    arg2?: ConversionResponse
-  ) {
-    if (typeof arg1 === "object" && "fileType" in arg1) {
-      return this._instance.insertDocs(arg1);
-    } else if (arg2 && arg2.status !== "Finished") {
-      throw new Error("[WhiteboardApp] cannot insert a converting doc");
-    } else if (arg2 && arg2.progress) {
-      const scenes: SceneDefinition[] = arg2.progress.convertedFileList.map(
-        (f, i) => ({
-          name: String(i + 1),
-          ppt: {
-            src: f.conversionFileUrl,
-            width: f.width,
-            height: f.height,
-            previewURL: f.preview,
-          },
-        })
-      );
-      const uid = genUID();
-      const scenePath = `/${arg2.uuid}/${uid}`;
-      const { scenesWithoutPPT, taskId, url } = makeSlideParams(scenes);
-      if (taskId && url) {
-        return this._instance.insertDocs({
-          fileType: "pptx",
-          scenePath,
-          taskId,
-          title: arg1,
-          url,
-          scenes: scenesWithoutPPT,
-        });
-      } else {
-        return this._instance.insertDocs({
-          fileType: "pdf",
-          scenePath,
-          scenes,
-          title: arg1,
-        });
-      }
-    }
-  }
-
-  public insertCodeEditor() {
-    return this._instance.insertCodeEditor();
-  }
-
-  public insertGeoGebra() {
-    return this._instance.insertGeoGebra();
-  }
-
-  public insertCountdown() {
-    return this._instance.insertCountdown();
-  }
-
-  public changeLanguage(language: Language) {
-    return this._instance.changeLanguage(language);
-  }
-
-  public dispose() {
-    return this._instance.dispose();
-  }
-}

package/src/behaviors/register-apps.ts

@@ -1,39 +0,0 @@
-import { WindowManager } from "@netless/window-manager";
-
-WindowManager.register({
-  kind: "Slide",
-  appOptions: {
-    // turn on to show debug controller
-    debug: false,
-  },
-  src: async () => {
-    const app = await import("@netless/app-slide");
-    return app.default ?? app;
-  },
-});
-
-WindowManager.register({
-  kind: "Monaco",
-  src: async () => {
-    const app = await import("@netless/app-monaco");
-    return app.default ?? app;
-  },
-});
-WindowManager.register({
-  kind: "Countdown",
-  src: async () => {
-    const app = await import("@netless/app-countdown");
-    return app.default ?? app;
-  },
-});
-WindowManager.register({
-  kind: "GeoGebra",
-  src: async () => {
-    const app = await import("@netless/app-geogebra");
-    return app.default ?? app;
-  },
-  appOptions: {
-    HTML5Codebase:
-      "https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d",
-  },
-});

package/src/behaviors/style.ts

@@ -1,17 +0,0 @@
-import { applyStyles } from "../internal";
-import style from "../style.scss?inline";
-
-const newEl = applyStyles(style);
-
-if (import.meta.hot) {
-  import.meta.hot.dispose(data => {
-    data.el = newEl;
-  });
-  import.meta.hot.accept(() => {
-    const oldEl = import.meta.hot?.data.el;
-    if (oldEl) {
-      oldEl.innerText = newEl.innerText;
-      newEl.remove();
-    }
-  });
-}

package/src/components/PageControl/PageControl.scss

@@ -1,80 +0,0 @@
-$name: "fastboard-page-control";
-
-.#{$name} {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-
-  &.light {
-    color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
-  }
-
-  &.dark {
-    color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
-  }
-}
-
-.#{$name}-btn {
-  appearance: none;
-  cursor: pointer;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  background-color: transparent;
-  border-radius: 4px;
-  font-size: 24px;
-  line-height: 1;
-
-  svg,
-  img {
-    width: 1em;
-    height: 1em;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
-  }
-
-  &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
-  }
-}
-
-.#{$name}-cut-line {
-  height: 24px;
-  width: 0.5px;
-
-  &.light {
-    background-color: #e7e7e7;
-  }
-
-  &.dark {
-    background-color: rgba(255, 255, 255, 0.15);
-  }
-}
-
-.#{$name}-slash {
-  opacity: 0.6;
-}
-
-.#{$name}-page,
-.#{$name}-slash,
-.#{$name}-page-count {
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}

package/src/components/PageControl/PageControl.tsx

@@ -1,110 +0,0 @@
-import type { CommonProps, GenericIcon } from "../../types";
-
-import clsx from "clsx";
-import React from "react";
-import Tippy from "@tippyjs/react";
-
-import { TopOffset } from "../../theme";
-import { Icon } from "../../icons";
-import { FilePlus } from "../../icons/FilePlus";
-import { ChevronLeft } from "../../icons/ChevronLeft";
-import { ChevronRight } from "../../icons/ChevronRight";
-import { useWritable } from "../hooks";
-import { usePageControl } from "./hooks";
-
-export const name = "fastboard-page-control";
-
-export type PageControlProps = CommonProps &
-  GenericIcon<"add" | "prev" | "next">;
-
-export function PageControl({
-  room,
-  manager,
-  theme = "light",
-  addIcon,
-  addIconDisable,
-  prevIcon,
-  prevIconDisable,
-  nextIcon,
-  nextIconDisable,
-  i18n,
-}: PageControlProps) {
-  const writable = useWritable(room);
-  const { pageIndex, pageCount, ...actions } = usePageControl(room, manager);
-
-  const disabled = !writable;
-
-  return (
-    <div className={clsx(name, theme)}>
-      {/* <span className={clsx(`${name}-cut-line`, theme)} />{" "} */}
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("prevPage")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "prev", theme)}
-          disabled={disabled || pageIndex === 0}
-          onClick={actions.prevPage}
-        >
-          <Icon
-            fallback={<ChevronLeft theme={theme} />}
-            src={disabled ? prevIconDisable : prevIcon}
-            alt="[prev]"
-          />
-        </button>
-      </Tippy>
-      <span className={clsx(`${name}-page`, theme)}>
-        {pageCount === 0 ? "\u2026" : pageIndex + 1}
-      </span>
-      <span className={clsx(`${name}-slash`, theme)}>/</span>
-      <span className={clsx(`${name}-page-count`, theme)}>{pageCount}</span>
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("nextPage")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "next", theme)}
-          disabled={disabled || pageIndex === pageCount - 1}
-          onClick={actions.nextPage}
-        >
-          <Icon
-            fallback={<ChevronRight theme={theme} />}
-            src={disabled ? nextIconDisable : nextIcon}
-            alt="[next]"
-          />
-        </button>
-      </Tippy>
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("addPage")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "add", theme)}
-          disabled={disabled}
-          onClick={actions.addPage}
-        >
-          <Icon
-            fallback={<FilePlus theme={theme} />}
-            src={disabled ? addIconDisable : addIcon}
-            alt="[add]"
-          />
-        </button>
-      </Tippy>
-    </div>
-  );
-}

package/src/components/PageControl/hooks.ts

@@ -1,70 +0,0 @@
-import type { Room, RoomState } from "white-web-sdk";
-import type { WindowManager } from "@netless/window-manager";
-import { useCallback, useEffect, useState } from "react";
-
-export function usePageControl(
-  room?: Room | null,
-  manager?: WindowManager | null
-) {
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageCount, setPageCount] = useState(0);
-
-  const addPage = useCallback(async () => {
-    if (manager && room) {
-      await manager.switchMainViewToWriter();
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      await manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (!manager && room) {
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      room.setSceneIndex(pageIndex + 1);
-    }
-  }, [room, manager, pageIndex]);
-
-  const prevPage = useCallback(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex - 1);
-    } else if (room) {
-      room.pptPreviousStep();
-    }
-  }, [room, manager, pageIndex]);
-
-  const nextPage = useCallback(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (room) {
-      room.pptNextStep();
-    }
-  }, [room, manager, pageIndex]);
-
-  useEffect(() => {
-    if (room) {
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-
-      if (manager) {
-        manager.emitter.on("mainViewSceneIndexChange", setPageIndex);
-
-        return () => {
-          manager.emitter.off("mainViewSceneIndexChange", setPageIndex);
-        };
-      } else {
-        const onRoomStateChanged = (modifyState: Partial<RoomState>) => {
-          if (modifyState.sceneState) {
-            setPageIndex(modifyState.sceneState.index);
-            setPageCount(modifyState.sceneState.scenes.length);
-          }
-        };
-
-        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-
-        return () => {
-          room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        };
-      }
-    }
-  }, [room, manager]);
-
-  return { pageIndex, pageCount, prevPage, nextPage, addPage };
-}

package/src/components/PageControl/index.ts

@@ -1,2 +0,0 @@
-export * from "./hooks";
-export { name, PageControl, type PageControlProps } from "./PageControl";

package/src/components/PlayerControl/PlayerControl.scss

@@ -1,145 +0,0 @@
-$name: "fastboard-player-control";
-
-.#{$name} {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-
-  &.auto-hide {
-    opacity: 0;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .rc-slider-disabled {
-    background: transparent;
-    opacity: 0.5;
-  }
-
-  .rc-slider-rail,
-  .rc-slider-track {
-    height: 2px;
-  }
-
-  .tippy-content {
-    padding: 8px;
-  }
-  .tippy-box {
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    background-color: rgba($color: #333, $alpha: 0.95);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(2px);
-  }
-  .tippy-box[data-theme~="light"] {
-    background-color: rgba($color: #fff, $alpha: 0.95);
-    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
-  }
-
-  &.light {
-    color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
-  }
-
-  &.dark {
-    color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
-  }
-}
-
-.#{$name}-btn {
-  appearance: none;
-  cursor: pointer;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  min-width: 24px;
-  height: 24px;
-  background-color: transparent;
-  border-radius: 4px;
-  font-size: 24px;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  svg,
-  img {
-    width: 1em;
-    height: 1em;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
-  }
-
-  &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
-  }
-
-  &.loading {
-    animation: fastboard-player-control-rotate 0.5s linear infinite;
-  }
-
-  @keyframes fastboard-player-control-rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}
-
-.#{$name}-panel {
-  padding: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: stretch;
-  gap: 4px;
-
-  .#{$name}-btn {
-    width: initial;
-    height: initial;
-    user-select: none;
-    font-size: 12px;
-    padding: 4px;
-    justify-content: flex-end;
-
-    &.active {
-      color: #3381ff;
-    }
-  }
-}
-
-.#{$name}-slider {
-  width: 100%;
-  padding: 0 7px;
-
-  &.loading {
-    cursor: not-allowed;
-  }
-}
-
-.#{$name}-slash {
-  opacity: 0.6;
-}
-
-.#{$name}-current,
-.#{$name}-slash,
-.#{$name}-total,
-.#{$name}-speed-text {
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}