@netless/fastboard-react 0.2.11 → 0.3.0-canary.0

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

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

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

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

@@ -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,2 +0,0 @@
-export * from "./hooks";
-export { PlayerControl, type PlayerControlProps } from "./PlayerControl";

package/src/components/RedoUndo/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(5px);
-  -webkit-backdrop-filter: blur(5px);
-
-  &.light {
-    color: #333;
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid #e5e8f0;
-  }
-
-  &.dark {
-    color: #ddd;
-    background-color: #14181e;
-    border: 1px solid #383b42;
-  }
-}
-
-.#{$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: 100%;
-    height: 100%;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.light:not(:disabled):hover {
-    background-color: #ebf2ff;
-  }
-
-  &.dark:not(:disabled):hover {
-    background-color: #383b42;
-  }
-}

package/src/components/RedoUndo/RedoUndo.tsx

@@ -1,76 +0,0 @@
-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 { Redo } from "../../icons/Redo";
-import { Undo } from "../../icons/Undo";
-import { TopOffset } from "../../theme";
-import { useTheme, useWritable } from "../hooks";
-import { useRedoUndo } from "./hooks";
-
-export const name = "fastboard-redo-undo";
-
-export type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
-
-export function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable }: RedoUndoProps) {
-  theme = useTheme(theme);
-  const { t } = useTranslation();
-
-  const writable = useWritable();
-  const { redoSteps, undoSteps, redo, undo } = useRedoUndo();
-
-  const disabled = !writable;
-
-  return (
-    <div className={clsx(name, theme)}>
-      <Tippy
-        className="fastboard-tip"
-        content={t("undo")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        delay={[1000, 400]}
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "undo", theme)}
-          disabled={disabled || undoSteps === 0}
-          onClick={undo}
-        >
-          <Icon
-            fallback={<Undo theme={theme} />}
-            src={undoSteps === 0 ? undoIconDisable : undoIcon}
-            alt="[undo]"
-          />
-        </button>
-      </Tippy>
-      <Tippy
-        className="fastboard-tip"
-        content={t("redo")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        delay={[1000, 400]}
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "redo", theme)}
-          disabled={disabled || redoSteps === 0}
-          onClick={redo}
-        >
-          <Icon
-            fallback={<Redo theme={theme} />}
-            src={redoSteps === 0 ? redoIconDisable : redoIcon}
-            alt="[redo]"
-          />
-        </button>
-      </Tippy>
-    </div>
-  );
-}

package/src/components/RedoUndo/hooks.ts

@@ -1,18 +0,0 @@
-import { useCallback } from "react";
-import { useFastboardApp, useFastboardValue } from "../hooks";
-
-export function useRedoUndo() {
-  const app = useFastboardApp();
-  const undoSteps = useFastboardValue(app.canUndoSteps);
-  const redoSteps = useFastboardValue(app.canRedoSteps);
-
-  const undo = useCallback(() => {
-    app.undo();
-  }, [app]);
-
-  const redo = useCallback(() => {
-    app.redo();
-  }, [app]);
-
-  return { redoSteps, undoSteps, redo, undo };
-}

package/src/components/RedoUndo/index.ts

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

package/src/components/ReplayFastboard.tsx

@@ -1,36 +0,0 @@
-import type { FastboardPlayer } from "@netless/fastboard-core";
-import type { DivProps } from "./Fastboard";
-import type { Theme } from "../typings";
-
-import React, { forwardRef, useCallback } from "react";
-import { PlayerControl } from "./PlayerControl";
-
-export interface ReplayFastboardProps {
-  player?: FastboardPlayer | null;
-  theme?: Theme;
-  autoHideControl?: boolean;
-}
-
-export const ReplayFastboard = /* @__PURE__ */ forwardRef<HTMLDivElement, ReplayFastboardProps & DivProps>(
-  function ReplayFastboard({ player, theme = "light", autoHideControl = false, ...restProps }, ref) {
-    const useWhiteboard = useCallback(
-      (container: HTMLDivElement | null) => {
-        if (container && player) player.bindContainer(container);
-      },
-      [player]
-    );
-
-    if (!player) {
-      return <div className="fastboard-root" ref={ref} {...restProps} />;
-    }
-
-    return (
-      <div className="fastboard-root" ref={ref} {...restProps}>
-        <div className="fastboard-view" ref={useWhiteboard} />
-        <div className="fastboard-bottom">
-          <PlayerControl player={player} theme={theme} autoHide={autoHideControl} />
-        </div>
-      </div>
-    );
-  }
-);

package/src/components/Toolbar/Content.tsx

@@ -1,89 +0,0 @@
-import clsx from "clsx";
-import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { Icon } from "../../icons";
-
-import { clamp } from "../../internal";
-import { CleanButton, ClickerButton, EraserButton, SelectorButton } from "./components/ApplianceButtons";
-import { AppsButton } from "./components/AppsButton";
-import { PencilButton } from "./components/PencilButton";
-import { ShapesButton } from "./components/ShapesButton";
-import { TextButton } from "./components/TextButton";
-import { DownButton, UpButton } from "./components/UpDownButtons";
-import { ItemHeight, ItemsCount, MaxHeight, MinHeight } from "./const";
-import { name, ToolbarContext } from "./Toolbar";
-
-import collapsePNG from "./components/assets/collapsed.png";
-
-export interface ContextProps {
-  onCollapse: () => void;
-}
-
-export function Content({ onCollapse }: ContextProps) {
-  const { theme, icons, writable } = useContext(ToolbarContext);
-  const ref = useRef<HTMLDivElement>(null);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [parentHeight, setParentHeight] = useState(0);
-  const disabled = !writable;
-
-  const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
-  const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
-  const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
-  const disableScrollUp = scrollTop === 0;
-  const disableScrollDown = scrollTop === scrollBuffer;
-
-  const scrollTo = useCallback(
-    (height: number) => {
-      setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
-    },
-    [scrollBuffer, scrollTop]
-  );
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = scrollTop;
-    }
-  }, [scrollTop]);
-
-  useEffect(() => {
-    const container = ref.current?.parentElement?.parentElement;
-    if (container) {
-      const { paddingTop, paddingBottom } = getComputedStyle(container);
-      const padding = parseInt(paddingTop) + parseInt(paddingBottom) || 0;
-      const resizeObserver = new ResizeObserver(() => {
-        setParentHeight(container.getBoundingClientRect().height - padding);
-      });
-      resizeObserver.observe(container);
-      return () => resizeObserver.disconnect();
-    }
-  }, []);
-
-  return (
-    <>
-      {needScroll && <UpButton scrollTo={scrollTo} disabled={disableScrollUp} />}
-      <div
-        ref={ref}
-        className={clsx(`${name}-section`)}
-        style={{
-          height: `${sectionHeight}px`,
-          overflow: needScroll ? "hidden" : "visible",
-        }}
-      >
-        <ClickerButton />
-        <SelectorButton />
-        <PencilButton />
-        <TextButton />
-        <ShapesButton />
-        <EraserButton />
-        <CleanButton />
-        <AppsButton />
-      </div>
-      {needScroll && <DownButton scrollTo={scrollTo} disabled={disableScrollDown} />}
-      <div className={clsx("fastboard-toolbar-mask", theme)} onClick={onCollapse}>
-        <Icon
-          fallback={<img draggable={false} className={clsx(`${name}-mask-btn`, theme)} src={collapsePNG} />}
-          src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
-        />
-      </div>
-    </>
-  );
-}