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

package/src/components/Fastboard.tsx

@@ -1,108 +0,0 @@
-import type { FastboardApp } from "@netless/fastboard-core";
-import type { ForwardedRef } from "react";
-import type { Language, Theme } from "../typings";
-
-import React, { forwardRef, useCallback, useEffect } from "react";
-import { createI18n, I18nContext } from "../i18n";
-import { useAsyncValue, useForceUpdate } from "../internal";
-import { FastboardAppContext, ThemeContext, useFastboardApp, useHideControls } from "./hooks";
-import { PageControl } from "./PageControl";
-import { RedoUndo } from "./RedoUndo";
-import { Toolbar } from "./Toolbar";
-import { ZoomControl } from "./ZoomControl";
-import { hideAll } from "./tippy-util";
-
-export interface FastboardProps {
-  app?: FastboardApp | null;
-  theme?: Theme;
-  layout?: { Toolbar?: boolean; RedoUndo?: boolean; ZoomControl?: boolean; PageControl?: boolean };
-  language?: Language;
-}
-
-export type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export type WithForwardedRef<T = HTMLDivElement> = { forwardedRef: ForwardedRef<T> };
-
-export const Fastboard = /* @__PURE__ */ forwardRef<HTMLDivElement, FastboardProps & DivProps>(
-  function Fastboard({ app, theme, layout, language, ...restProps }, ref) {
-    if (!app) {
-      return <div className="fastboard-root" ref={ref} {...restProps} />;
-    }
-
-    return (
-      <FastboardAppContext.Provider value={app}>
-        <FastboardInternal forwardedRef={ref} {...{ theme, layout, language }} {...restProps} />
-      </FastboardAppContext.Provider>
-    );
-  }
-);
-
-function FastboardInternal({
-  forwardedRef,
-  language,
-  layout = {},
-  theme = "light",
-  children,
-  ...restProps
-}: Omit<FastboardProps, "app"> & DivProps & WithForwardedRef) {
-  const app = useFastboardApp();
-  const forceUpdate = useForceUpdate();
-  const i18n = useAsyncValue(() => createI18n({ language }));
-
-  useEffect(() => {
-    if (i18n) i18n.changeLanguage(language);
-    forceUpdate();
-  }, [forceUpdate, i18n, language]);
-
-  useEffect(() => {
-    app.manager.setPrefersColorScheme(theme);
-  }, [app, theme]);
-
-  const useWhiteboard = useCallback(
-    (container: HTMLDivElement | null) => {
-      if (container && app) app.bindContainer(container);
-    },
-    [app]
-  );
-
-  const hideControls = useHideControls();
-  const showControls = !hideControls;
-
-  const {
-    Toolbar: toolbar = showControls || hideControls === "toolbar-only",
-    RedoUndo: redo_undo = showControls,
-    ZoomControl: zoom_control = showControls,
-    PageControl: page_control = showControls,
-  } = layout;
-
-  return (
-    <ThemeContext.Provider value={theme}>
-      <I18nContext.Provider value={i18n}>
-        <div {...restProps} className="fastboard-root" ref={forwardedRef}>
-          <div className="fastboard-view" ref={useWhiteboard} onTouchStartCapture={hideAll} />
-          {children ? (
-            children
-          ) : (
-            <>
-              {toolbar && (
-                <div className="fastboard-left">
-                  <Toolbar />
-                </div>
-              )}
-              {(redo_undo || zoom_control) && (
-                <div className="fastboard-bottom-left">
-                  {redo_undo && <RedoUndo />}
-                  {zoom_control && <ZoomControl />}
-                </div>
-              )}
-              {page_control && (
-                <div className="fastboard-bottom-right">
-                  <PageControl />
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </I18nContext.Provider>
-    </ThemeContext.Provider>
-  );
-}

package/src/components/PageControl/PageControl.scss

@@ -1,84 +0,0 @@
-$name: "fastboard-page-control";
-
-.#{$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;
-  }
-}
-
-.#{$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}-text {
-  line-height: 24px;
-}
-
-.#{$name}-page,
-.#{$name}-slash,
-.#{$name}-page-count {
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-}

package/src/components/PageControl/PageControl.tsx

@@ -1,101 +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 { Left } from "../../icons/Left";
-import { Right } from "../../icons/Right";
-import { WhiteboardAdd } from "../../icons/WhiteboardAdd";
-import { TopOffset } from "../../theme";
-import { 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) {
-  theme = useTheme(theme);
-  const { t } = useTranslation();
-
-  const writable = useWritable();
-  const { pageIndex, pageCount, ...actions } = usePageControl();
-
-  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={<Left theme={theme} />} src={disabled ? prevIconDisable : prevIcon} alt="[prev]" />
-        </button>
-      </Tippy>
-      <span className={clsx(`${name}-text`, theme)}>
-        <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>
-      </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={<Right 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={<WhiteboardAdd theme={theme} />}
-            src={disabled ? addIconDisable : addIcon}
-            alt="[add]"
-          />
-        </button>
-      </Tippy>
-    </div>
-  );
-}

package/src/components/PageControl/hooks.ts

@@ -1,24 +0,0 @@
-import { useCallback } from "react";
-import { useFastboardApp, useFastboardValue } from "../hooks";
-
-export function usePageControl() {
-  const app = useFastboardApp();
-  const pageIndex = useFastboardValue(app.sceneIndex);
-  const pageCount = useFastboardValue(app.sceneLength);
-
-  const addPage = useCallback(async () => {
-    await app.manager.switchMainViewToWriter();
-    app.room.putScenes(app.manager.mainViewSceneDir, [{}], pageIndex + 1);
-    await app.manager.setMainViewSceneIndex(pageIndex + 1);
-  }, [app, pageIndex]);
-
-  const prevPage = useCallback(async () => {
-    await app.manager.setMainViewSceneIndex(pageIndex - 1);
-  }, [app, pageIndex]);
-
-  const nextPage = useCallback(async () => {
-    await app.manager.setMainViewSceneIndex(pageIndex + 1);
-  }, [app, pageIndex]);
-
-  return { pageIndex, pageCount, prevPage, nextPage, addPage };
-}

package/src/components/PageControl/index.ts

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

package/src/components/PlayerControl/PlayerControl.scss

@@ -1,146 +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(5px);
-  -webkit-backdrop-filter: blur(5px);
-  z-index: 100;
-
-  &.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(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;
-  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: 100%;
-    height: 100%;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.light:not(:disabled):hover {
-    background-color: #ebf2ff;
-  }
-
-  &.dark:not(:disabled):hover {
-    background-color: #383b42;
-  }
-
-  &.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: 14px;
-    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: 14px;
-  font-variant-numeric: tabular-nums;
-}

package/src/components/PlayerControl/PlayerControl.tsx

@@ -1,131 +0,0 @@
-import type { FastboardPlayer } from "@netless/fastboard-core";
-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?: FastboardPlayer;
-} & 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_?.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

@@ -1,44 +0,0 @@
-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?: "top" | "right"; // not using tippy.js's placement to satisfy dts
-}>;
-
-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>
-  );
-});