@netless/fastboard-react 0.1.0

package/src/components/PageControl/PageControl.tsx

@@ -0,0 +1,105 @@
+import type { CommonProps, GenericIcon } from "../../typings";
+
+import Tippy from "@tippyjs/react";
+import clsx from "clsx";
+import React from "react";
+
+import { useTranslation } from "../../i18n";
+import { Icon } from "../../icons";
+import { ChevronLeft } from "../../icons/ChevronLeft";
+import { ChevronRight } from "../../icons/ChevronRight";
+import { FilePlus } from "../../icons/FilePlus";
+import { TopOffset } from "../../theme";
+import { useFastboardApp, useTheme, useWritable } from "../hooks";
+import { usePageControl } from "./hooks";
+
+export const name = "fastboard-page-control";
+
+export type PageControlProps = CommonProps & GenericIcon<"add" | "prev" | "next">;
+
+export function PageControl({
+  theme,
+  addIcon,
+  addIconDisable,
+  prevIcon,
+  prevIconDisable,
+  nextIcon,
+  nextIconDisable,
+}: PageControlProps) {
+  const app = useFastboardApp();
+
+  theme = useTheme(theme);
+  const { t } = useTranslation();
+
+  const writable = useWritable();
+  const { pageIndex, pageCount, ...actions } = usePageControl(app.room, app.manager);
+
+  const disabled = !writable;
+
+  return (
+    <div className={clsx(name, theme)}>
+      {/* <span className={clsx(`${name}-cut-line`, theme)} />{" "} */}
+      <Tippy
+        className="fastboard-tip"
+        content={t("prevPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        delay={[1000, 400]}
+        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={t("nextPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        delay={[1000, 400]}
+        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={t("addPage")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        delay={[1000, 400]}
+        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

@@ -0,0 +1,67 @@
+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

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

package/src/components/PlayerControl/PlayerControl.scss

@@ -0,0 +1,145 @@
+$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;
+}

package/src/components/PlayerControl/PlayerControl.tsx

@@ -0,0 +1,131 @@
+import type { Player } from "white-web-sdk";
+import type { CommonProps, GenericIcon } from "../../typings";
+
+import Tippy from "@tippyjs/react";
+import clsx from "clsx";
+import RcSlider from "rc-slider";
+import React, { useEffect, useState } from "react";
+import { PlayerPhase } from "white-web-sdk";
+
+import { useTranslation } from "../../i18n";
+import { Icon } from "../../icons";
+import { themes, TopOffset } from "../../theme";
+import { useTheme } from "../hooks";
+import { Button } from "./components/Button";
+import { usePlayerControl } from "./hooks";
+import { Icons } from "./icons";
+
+export type PlayerControlProps = {
+  autoHide?: boolean;
+  player?: Player;
+} & Omit<CommonProps, "room"> &
+  GenericIcon<"play" | "pause" | "loading">;
+
+export const name = "fastboard-player-control";
+
+export function PlayerControl({ theme, autoHide = false, player: player_, ...icons }: PlayerControlProps) {
+  theme = useTheme(theme);
+  const { t } = useTranslation();
+
+  const [currentTime, setCurrentTime] = useState(0);
+  const player = usePlayerControl(player_);
+
+  useEffect(() => {
+    setCurrentTime(player.currentTime);
+  }, [player.currentTime]);
+
+  useEffect(() => {
+    if (player.currentTime !== currentTime) {
+      player.seekToProgressTime(currentTime);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentTime]);
+
+  const isLoading = player.phase === PlayerPhase.WaitingFirstFrame || player.phase === PlayerPhase.Buffering;
+  const isPlaying = player.phase === PlayerPhase.Playing;
+
+  const { activeColor } = themes[theme];
+
+  return (
+    <div className={clsx(name, theme, { "auto-hide": autoHide })}>
+      <button
+        className={clsx(`${name}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme)}
+        disabled={isLoading}
+        onClick={player.togglePlay}
+      >
+        <Icon
+          fallback={
+            isLoading ? (
+              <Icons.Loading theme={theme} />
+            ) : isPlaying ? (
+              <Icons.Pause theme={theme} />
+            ) : (
+              <Icons.Play theme={theme} />
+            )
+          }
+          src={isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon}
+          alt={isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"}
+        />
+      </button>
+      <span className={clsx(`${name}-slider`, { loading: isLoading }, theme)}>
+        <RcSlider
+          disabled={isLoading}
+          trackStyle={{ background: activeColor }}
+          handleStyle={{ border: `1px solid ${activeColor}` }}
+          value={currentTime}
+          onChange={setCurrentTime}
+          min={0}
+          max={player.totalTime}
+          step={100}
+        />
+      </span>
+      <span className={clsx(`${name}-current`, theme)}>{renderTime(player.currentTime)}</span>
+      <span className={clsx(`${name}-slash`, theme)}>/</span>
+      <span className={clsx(`${name}-total`, theme)}>{renderTime(player.totalTime)}</span>
+      <span className={`${name}-btn-interactive`}>
+        <Tippy
+          className="fastboard-tip"
+          content={renderSpeeds(player)}
+          theme={theme}
+          placement="top-end"
+          trigger="click"
+          offset={TopOffset}
+          arrow={false}
+          interactive
+        >
+          <Button content={t("speed")} theme={theme} disabled={isLoading}>
+            <span className={clsx(`${name}-speed-text`, theme)}>{player.speed}x</span>
+          </Button>
+        </Tippy>
+      </span>
+    </div>
+  );
+}
+
+function renderTime(ms: number) {
+  let seconds = ms / 1000;
+  const minutes = Math.floor(seconds / 60);
+  seconds = Math.floor(seconds) % 60;
+
+  return `${String(minutes).padStart(2, "0")}` + `:${String(seconds).padStart(2, "0")}`;
+}
+
+const Speeds = [2.0, 1.5, 1.25, 1.0, 0.75, 0.5];
+
+function renderSpeeds({ speed: current, setSpeed }: { speed: number; setSpeed: (speed: number) => void }) {
+  return (
+    <div className={clsx(`${name}-panel`, "speed")}>
+      {Speeds.map(speed => (
+        <button
+          className={clsx(`${name}-btn`, "speed", {
+            active: speed === current,
+          })}
+          key={speed}
+          onClick={() => setSpeed(speed)}
+        >
+          {speed}x
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/PlayerControl/components/Button.tsx

@@ -0,0 +1,45 @@
+import type { Placement } from "tippy.js";
+import type { Theme } from "../../../typings";
+
+import clsx from "clsx";
+import React, { forwardRef, type PropsWithChildren } from "react";
+import Tippy from "@tippyjs/react";
+
+import { TopOffset } from "../../../theme";
+
+type ButtonProps = PropsWithChildren<{
+  theme: Theme;
+  content: React.ReactNode;
+  disabled?: boolean;
+  active?: boolean;
+  onClick?: () => void;
+  interactive?: boolean;
+  placement?: Placement;
+}>;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { theme, content, disabled, active, onClick, interactive, placement = "top", children } = props;
+
+  return (
+    <Tippy
+      className="fastboard-tip"
+      content={content}
+      interactive={interactive}
+      theme={theme}
+      disabled={disabled}
+      placement={placement}
+      offset={TopOffset}
+      delay={[1000, 400]}
+      duration={300}
+    >
+      <button
+        ref={ref}
+        className={clsx("fastboard-player-control-btn", theme, { active })}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {children}
+      </button>
+    </Tippy>
+  );
+});

package/src/components/PlayerControl/hooks.ts

@@ -0,0 +1,88 @@
+import type { DependencyList } from "react";
+import type { Player } from "white-web-sdk";
+
+import { useCallback, useEffect, useState } from "react";
+import { PlayerPhase } from "white-web-sdk";
+import { useLastValue } from "../../internal/hooks";
+
+const EMPTY_ARRAY: DependencyList = [];
+
+function useForceUpdate() {
+  const [, forceUpdate_] = useState({});
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
+}
+
+export function usePlayerControl(player?: Player | null) {
+  const togglePlay = useCallback(() => {
+    if (player) {
+      switch (player.phase) {
+        case PlayerPhase.WaitingFirstFrame:
+        case PlayerPhase.Pause:
+        case PlayerPhase.Ended: {
+          player.play();
+          break;
+        }
+        case PlayerPhase.Playing: {
+          player.pause();
+          break;
+        }
+      }
+    }
+  }, [player]);
+
+  const seekToProgressTime = useCallback(
+    (time: number) => {
+      if (player) {
+        player.seekToProgressTime(time);
+      }
+    },
+    [player]
+  );
+
+  const lastPlayer = useLastValue(player);
+
+  const forceUpdate = useForceUpdate();
+
+  const setSpeed = useCallback(
+    (speed: number) => {
+      if (player) {
+        player.playbackSpeed = speed;
+        forceUpdate();
+      }
+    },
+    [forceUpdate, player]
+  );
+
+  useEffect(() => {
+    if (!lastPlayer && player) {
+      forceUpdate();
+    }
+  }, [forceUpdate, lastPlayer, player]);
+
+  useEffect(() => {
+    if (player) {
+      player.callbacks.on("onPhaseChanged", forceUpdate);
+      player.callbacks.on("onProgressTimeChanged", forceUpdate);
+      return () => {
+        player.callbacks.off("onPhaseChanged", forceUpdate);
+        player.callbacks.off("onProgressTimeChanged", forceUpdate);
+      };
+    }
+  }, [forceUpdate, player]);
+
+  const phase = player ? player.phase : PlayerPhase.WaitingFirstFrame;
+  const currentTime = player ? player.progressTime : 0;
+  const totalTime = player ? player.timeDuration : 0;
+  const speed = player ? player.playbackSpeed : 1;
+
+  return {
+    phase,
+    currentTime,
+    totalTime,
+    speed,
+    setSpeed,
+    togglePlay,
+    seekToProgressTime,
+  };
+}

package/src/components/PlayerControl/icons/Loading.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Loading = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z" fill={stroke}></path>
+    </svg>
+  );
+};

package/src/components/PlayerControl/icons/Pause.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Pause = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path d="M14 19h4V5h-4M6 19h4V5H6v14z" fill={stroke}></path>
+    </svg>
+  );
+};

package/src/components/PlayerControl/icons/Play.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Play = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <path d="M8 5.14v14l11-7l-11-7z" fill={stroke}></path>
+    </svg>
+  );
+};

package/src/components/PlayerControl/icons/index.ts

@@ -0,0 +1,10 @@
+import { memo } from "react";
+import { Loading } from "./Loading";
+import { Pause } from "./Pause";
+import { Play } from "./Play";
+
+export const Icons = {
+  Play: memo(Play),
+  Pause: memo(Pause),
+  Loading: memo(Loading),
+};

package/src/components/PlayerControl/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { PlayerControl, type PlayerControlProps } from "./PlayerControl";

package/src/components/RedoUndo/RedoUndo.scss

@@ -0,0 +1,56 @@
+$name: "fastboard-redo-undo";
+
+.#{$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);
+  }
+}