@netless/fastboard 0.0.10 → 0.2.0

package/src/components/PlayerControl/PlayerControl.tsx

@@ -1,158 +0,0 @@
-import type { Player } from "white-web-sdk";
-import type { CommonProps, GenericIcon } from "../../types";
-
-import clsx from "clsx";
-import React, { useEffect, useState } from "react";
-import RcSlider from "rc-slider";
-import { PlayerPhase } from "white-web-sdk";
-import { usePlayer } from "./hooks";
-import { Icon } from "../../icons";
-import { themes, TopOffset } from "../../theme";
-import { Icons } from "./icons";
-import Tippy from "@tippyjs/react";
-import { Button } from "./components/Button";
-
-export type PlayerControlProps = {
-  autoHide?: boolean;
-  player?: Player;
-} & Omit<CommonProps, "room"> &
-  GenericIcon<"play" | "pause" | "loading">;
-
-export const name = "fastboard-player-control";
-
-export function PlayerControl({
-  autoHide = false,
-  player: player_,
-  theme = "light",
-  i18n,
-  ...icons
-}: PlayerControlProps) {
-  const [currentTime, setCurrentTime] = useState(0);
-  const player = usePlayer(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={i18n?.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

@@ -1,55 +0,0 @@
-import type { Placement } from "tippy.js";
-import type { Theme } from "../../../types";
-
-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}
-        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

@@ -1,88 +0,0 @@
-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 usePlayer(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

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../types";
-
-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

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

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

package/src/components/RedoUndo.scss

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

package/src/components/RedoUndo.tsx

@@ -1,95 +0,0 @@
-import type { CommonProps, GenericIcon } from "../types";
-
-import clsx from "clsx";
-import React, { useCallback, useEffect, useState } from "react";
-import Tippy from "@tippyjs/react";
-
-import { Icon } from "../icons";
-import { Undo } from "../icons/Undo";
-import { Redo } from "../icons/Redo";
-import { TopOffset } from "../theme";
-
-export const name = "fastboard-redo-undo";
-
-export type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
-
-export function RedoUndo({
-  room,
-  theme = "light",
-  undoIcon,
-  undoIconDisable,
-  redoIcon,
-  redoIconDisable,
-  i18n,
-}: RedoUndoProps) {
-  const [writable, setWritable] = useState(false);
-  const [undoSteps, setUndoSteps] = useState(0);
-  const [redoSteps, setRedoSteps] = useState(0);
-
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      room.isWritable && (room.disableSerialization = false);
-
-      const updateWritable = () => setWritable(room?.isWritable || false);
-
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
-      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
-      return () => {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
-        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
-      };
-    }
-  }, [room]);
-
-  const disabled = !writable;
-
-  return (
-    <div className={clsx(name, theme)}>
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("undo")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "undo", theme)}
-          disabled={disabled || undoSteps === 0}
-          onClick={useCallback(() => room && room.undo(), [room])}
-        >
-          <Icon
-            fallback={<Undo theme={theme} />}
-            src={undoSteps === 0 ? undoIconDisable : undoIcon}
-            alt="[undo]"
-          />
-        </button>
-      </Tippy>
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("redo")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "redo", theme)}
-          disabled={disabled || redoSteps === 0}
-          onClick={useCallback(() => room && room.redo(), [room])}
-        >
-          <Icon
-            fallback={<Redo theme={theme} />}
-            src={redoSteps === 0 ? redoIconDisable : redoIcon}
-            alt="[redo]"
-          />
-        </button>
-      </Tippy>
-    </div>
-  );
-}

package/src/components/Root.scss

@@ -1,55 +0,0 @@
-.fastboard-root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.fastboard-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.6;
-}
-
-.fastboard-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-$unit: 8px;
-
-.fastboard-left {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: calc(100% - 48px);
-  padding: $unit * 2;
-  z-index: 201;
-  display: flex;
-  align-items: center;
-}
-
-.fastboard-bottom-left {
-  display: flex;
-  gap: 10px;
-  position: absolute;
-  bottom: $unit;
-  left: $unit;
-  padding: $unit;
-  z-index: 200;
-}
-
-.fastboard-bottom-right {
-  @extend .fastboard-bottom-left;
-  left: initial;
-  right: $unit;
-}

package/src/components/Root.tsx

@@ -1,61 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { Lock, Instance } from "../internal";
-import { Toolbar } from "./Toolbar";
-import { RedoUndo } from "./RedoUndo";
-import { ZoomControl } from "./ZoomControl";
-import { PageControl } from "./PageControl";
-
-export interface RootProps {
-  instance: Instance;
-}
-
-export function Root({ instance: app }: RootProps) {
-  const [mux] = useState(() => new Lock());
-
-  const useWhiteboard = useCallback(
-    (container: HTMLDivElement | null) =>
-      mux.schedule(
-        container ? () => app.mount(container) : () => app.unmount()
-      ),
-    [app, mux]
-  );
-
-  const {
-    Toolbar: toolbar = true,
-    RedoUndo: redo_undo = true,
-    ZoomControl: zoom_control = true,
-    PageControl: page_control = true,
-  } = app.config.layout || {};
-
-  const props = {
-    room: app.room,
-    manager: app.manager,
-    i18n: app.i18n,
-  };
-
-  return (
-    <Instance.Context.Provider value={app}>
-      <div className="fastboard-root">
-        {!app.room && <div className="fastboard-loading">Loading&hellip;</div>}
-        <div className="fastboard-view" ref={useWhiteboard} />
-        {toolbar && (
-          <div className="fastboard-left">
-            <Toolbar {...props} />
-          </div>
-        )}
-        {(redo_undo || zoom_control) && (
-          <div className="fastboard-bottom-left">
-            {redo_undo && <RedoUndo {...props} />}
-            {zoom_control && <ZoomControl {...props} />}
-          </div>
-        )}
-        {page_control && (
-          <div className="fastboard-bottom-right">
-            <PageControl {...props} />
-          </div>
-        )}
-      </div>
-    </Instance.Context.Provider>
-  );
-}