@netless/fastboard 0.0.8 → 0.1.0

package/src/components/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.tsx

@@ -1,181 +0,0 @@
-import type { RoomState, ViewVisionMode } from "white-web-sdk";
-import type { CommonProps, GenericIcon } from "../types";
-
-import clsx from "clsx";
-import React, { useCallback, useEffect, useState } 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";
-
-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, setWritable] = useState(false);
-  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 (room?.isWritable) {
-      if (manager) {
-        manager.setMainViewSceneIndex(pageIndex - 1);
-      } else {
-        room.pptPreviousStep();
-      }
-    }
-  }, [room, manager, pageIndex]);
-
-  const nextPage = useCallback(() => {
-    if (room?.isWritable) {
-      if (manager) {
-        manager.setMainViewSceneIndex(pageIndex + 1);
-      } else {
-        room.pptNextStep();
-      }
-    }
-  }, [room, manager, pageIndex]);
-
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-    }
-
-    const onRoomStateChanged = (modifyState: Partial<RoomState>) => {
-      if (modifyState.sceneState) {
-        setPageIndex(modifyState.sceneState.index);
-        setPageCount(modifyState.sceneState.scenes.length);
-      }
-    };
-
-    const onMainViewModeChanged = (mode: number) => {
-      if (room && mode === (0 as ViewVisionMode.Writable)) {
-        setPageIndex(room.state.sceneState.index);
-        setPageCount(room.state.sceneState.scenes.length);
-      }
-    };
-
-    const updateWritable = () => setWritable(room?.isWritable || false);
-
-    if (room) {
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      manager?.callbacks.on("mainViewModeChange", onMainViewModeChanged);
-    }
-
-    return () => {
-      if (room) {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        manager?.callbacks.off("mainViewModeChange", onMainViewModeChanged);
-      }
-    };
-  }, [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={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={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={addPage}
-        >
-          <Icon
-            fallback={<FilePlus theme={theme} />}
-            src={disabled ? addIconDisable : addIcon}
-            alt="[add]"
-          />
-        </button>
-      </Tippy>
-    </div>
-  );
-}

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;
-}

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,95 +0,0 @@
-import type { DependencyList } from "react";
-import type { Player } from "white-web-sdk";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { PlayerPhase } from "white-web-sdk";
-
-const EMPTY_ARRAY: DependencyList = [];
-
-function useForceUpdate() {
-  const [, forceUpdate_] = useState({});
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
-}
-
-function useLastValue<T>(value: T) {
-  const ref = useRef<T>(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
-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,
-  };
-}