@netless/fastboard-react 0.2.7 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "0.2.7",
+  "version": "0.2.10",
   "description": "A UI kit built on top of @netless/fastboard.",
   "main": "dist/index.js",
   "files": [
@@ -11,7 +11,7 @@
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
     "framer-motion": "^6.2.8",
-    "i18next": "^21.6.12",
+    "i18next": "^21.6.13",
     "rc-slider": "^9.7.5"
   },
   "peerDependencies": {
@@ -22,11 +22,11 @@
     "white-web-sdk": ">=2.16.0"
   },
   "devDependencies": {
-    "@netless/fastboard-core": "0.2.7",
-    "@netless/window-manager": "^0.4.7",
+    "@netless/fastboard-core": "0.2.10",
+    "@netless/window-manager": "^0.4.10",
     "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "sass": "^1.49.8",
+    "@types/react-dom": "^17.0.13",
+    "sass": "^1.49.9",
     "tippy.js": "^6.3.7",
     "tsup": "^5.11.13",
     "white-web-sdk": "^2.16.10"
@@ -37,5 +37,5 @@
     "check": "tsc --noEmit"
   },
   "module": "dist/index.mjs",
-  "types": "src/index.ts"
+  "types": "dist/index.d.ts"
 }

package/src/components/Fastboard.scss

@@ -36,6 +36,11 @@
 
 .fastboard-bottom-right {
   @extend .fastboard-bottom-left;
-  left: initial;
+  left: auto;
+  right: 8px;
+}
+
+.fastboard-bottom {
+  @extend .fastboard-bottom-left;
   right: 8px;
 }

package/src/components/Fastboard.tsx

@@ -10,6 +10,7 @@ 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;
@@ -58,7 +59,7 @@ function FastboardInternal({
 
   const useWhiteboard = useCallback(
     (container: HTMLDivElement | null) => {
-      if (container && app) app.manager.bindContainer(container);
+      if (container && app) app.bindContainer(container);
     },
     [app]
   );
@@ -77,11 +78,7 @@ function FastboardInternal({
     <ThemeContext.Provider value={theme}>
       <I18nContext.Provider value={i18n}>
         <div {...restProps} className="fastboard-root" ref={forwardedRef}>
-          <div
-            className="fastboard-view"
-            ref={useWhiteboard}
-            onPointerDownCapture={focusThisElementImmediate}
-          />
+          <div className="fastboard-view" ref={useWhiteboard} onTouchStartCapture={hideAll} />
           {children ? (
             children
           ) : (
@@ -109,7 +106,3 @@ function FastboardInternal({
     </ThemeContext.Provider>
   );
 }
-
-function focusThisElementImmediate(ev: React.PointerEvent<HTMLDivElement>) {
-  ev.currentTarget.focus();
-}

package/src/components/PageControl/PageControl.scss

@@ -6,19 +6,19 @@ $name: "fastboard-page-control";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -37,8 +37,8 @@ $name: "fastboard-page-control";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -47,11 +47,11 @@ $name: "fastboard-page-control";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 }
 
@@ -72,9 +72,13 @@ $name: "fastboard-page-control";
   opacity: 0.6;
 }
 
+.#{$name}-text {
+  line-height: 24px;
+}
+
 .#{$name}-page,
 .#{$name}-slash,
 .#{$name}-page-count {
-  font-size: 12px;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }

package/src/components/PageControl/PageControl.tsx

@@ -6,9 +6,9 @@ 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 { 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";
@@ -52,16 +52,14 @@ export function PageControl({
           disabled={disabled || pageIndex === 0}
           onClick={actions.prevPage}
         >
-          <Icon
-            fallback={<ChevronLeft theme={theme} />}
-            src={disabled ? prevIconDisable : prevIcon}
-            alt="[prev]"
-          />
+          <Icon fallback={<Left 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>
+      <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")}
@@ -77,11 +75,7 @@ export function PageControl({
           disabled={disabled || pageIndex === pageCount - 1}
           onClick={actions.nextPage}
         >
-          <Icon
-            fallback={<ChevronRight theme={theme} />}
-            src={disabled ? nextIconDisable : nextIcon}
-            alt="[next]"
-          />
+          <Icon fallback={<Right theme={theme} />} src={disabled ? nextIconDisable : nextIcon} alt="[next]" />
         </button>
       </Tippy>
       <Tippy
@@ -95,7 +89,11 @@ export function PageControl({
         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]" />
+          <Icon
+            fallback={<WhiteboardAdd theme={theme} />}
+            src={disabled ? addIconDisable : addIcon}
+            alt="[add]"
+          />
         </button>
       </Tippy>
     </div>

package/src/components/PlayerControl/PlayerControl.scss

@@ -7,8 +7,9 @@ $name: "fastboard-player-control";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  z-index: 100;
 
   &.auto-hide {
     opacity: 0;
@@ -45,14 +46,14 @@ $name: "fastboard-player-control";
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -74,8 +75,8 @@ $name: "fastboard-player-control";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -84,11 +85,11 @@ $name: "fastboard-player-control";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 
   &.loading {
@@ -113,7 +114,7 @@ $name: "fastboard-player-control";
     width: initial;
     height: initial;
     user-select: none;
-    font-size: 12px;
+    font-size: 14px;
     padding: 4px;
     justify-content: flex-end;
 
@@ -140,6 +141,6 @@ $name: "fastboard-player-control";
 .#{$name}-slash,
 .#{$name}-total,
 .#{$name}-speed-text {
-  font-size: 12px;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }

package/src/components/PlayerControl/PlayerControl.tsx

@@ -1,4 +1,4 @@
-import type { Player } from "white-web-sdk";
+import type { FastboardPlayer } from "@netless/fastboard-core";
 import type { CommonProps, GenericIcon } from "../../typings";
 
 import Tippy from "@tippyjs/react";
@@ -17,7 +17,7 @@ import { Icons } from "./icons";
 
 export type PlayerControlProps = {
   autoHide?: boolean;
-  player?: Player;
+  player?: FastboardPlayer;
 } & Omit<CommonProps, "room"> &
   GenericIcon<"play" | "pause" | "loading">;
 
@@ -28,7 +28,7 @@ export function PlayerControl({ theme, autoHide = false, player: player_, ...ico
   const { t } = useTranslation();
 
   const [currentTime, setCurrentTime] = useState(0);
-  const player = usePlayerControl(player_);
+  const player = usePlayerControl(player_?.player);
 
   useEffect(() => {
     setCurrentTime(player.currentTime);

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

@@ -1,4 +1,3 @@
-import type { Placement } from "tippy.js";
 import type { Theme } from "../../../typings";
 
 import clsx from "clsx";
@@ -14,7 +13,7 @@ type ButtonProps = PropsWithChildren<{
   active?: boolean;
   onClick?: () => void;
   interactive?: boolean;
-  placement?: Placement;
+  placement?: "top" | "right"; // not using tippy.js's placement to satisfy dts
 }>;
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {

package/src/components/RedoUndo/RedoUndo.scss

@@ -6,19 +6,19 @@ $name: "fastboard-redo-undo";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -37,8 +37,8 @@ $name: "fastboard-redo-undo";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -47,10 +47,10 @@ $name: "fastboard-redo-undo";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 }

package/src/components/ReplayFastboard.tsx

@@ -0,0 +1,36 @@
+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/Toolbar.scss

@@ -9,8 +9,8 @@ $name: "fastboard-toolbar";
   gap: 4px;
   position: absolute;
   z-index: 100;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   .rc-slider {
     padding: 6px 0;
@@ -36,17 +36,18 @@ $name: "fastboard-toolbar";
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
-  }
-
-  &.expanded {
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
+    background-color: #14181e;
+    border: 1px solid #383b42;
+  }
+
+  &.expanded {
+    border: 1px solid rgba(0, 0, 0, 0.15);
   }
 
   &.expanded:hover {
@@ -108,11 +109,11 @@ $name: "fastboard-toolbar";
     }
 
     &.light:not(:disabled):hover {
-      background-color: rgba(51, 129, 255, 0.1);
+      background-color: #ebf2ff;
     }
 
     &.dark:not(:disabled):hover {
-      background-color: rgba(51, 129, 255, 0.25);
+      background-color: #383b42;
     }
   }
 
@@ -152,12 +153,12 @@ $name: "fastboard-toolbar";
     }
   }
 
-  &-section + &-mask {
+  &-section ~ &-mask {
     opacity: 0;
     transition: 0.5s opacity 0.4s;
   }
 
-  &-section:hover + &-mask,
+  &-section:hover ~ &-mask,
   &-mask:hover {
     opacity: 1;
     transition: 0.2s opacity;
@@ -172,7 +173,7 @@ $name: "fastboard-toolbar";
     gap: 8px;
 
     &.apps {
-      width: 240px - 8px * 2;
+      width: 240px + 8px * 2;
     }
   }
 
@@ -206,14 +207,33 @@ $name: "fastboard-toolbar";
     }
   }
 
+  &-app-icon-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-app-icon-mask {
+    position: absolute;
+    width: 36px;
+    height: 36px;
+    animation: fastboard-app-loading-rotate 0.5s linear infinite;
+    transform-origin: center;
+  }
+
   &-app-is-loading {
-    opacity: 0.8;
     cursor: wait;
+    button:disabled {
+      cursor: wait;
+    }
   }
 
   &-app-is-failed {
-    opacity: 0.5;
     cursor: not-allowed;
+    button:disabled {
+      cursor: not-allowed;
+    }
   }
 
   &-app-icon {
@@ -228,7 +248,7 @@ $name: "fastboard-toolbar";
     }
 
     &-text {
-      font-size: 12px;
+      font-size: 14px;
       color: #5d5d5d;
       overflow: hidden;
       white-space: nowrap;
@@ -312,3 +332,12 @@ $name: "fastboard-toolbar";
     left: 0;
   }
 }
+
+@keyframes fastboard-app-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Toolbar/components/AppsButton.tsx

@@ -12,6 +12,7 @@ import { Icons } from "../icons";
 import { ToolbarContext } from "../Toolbar";
 import { Button } from "./Button";
 import { useFastboardApp } from "../../hooks";
+import { Loading } from "../icons/Loading";
 
 export interface AppsButtonProps {
   content?: React.ReactNode;
@@ -104,22 +105,30 @@ interface AppIconProps {
 }
 
 function AppIcon({ title, src, alt, appStatus, onClick }: AppIconProps) {
+  const { theme } = useContext(ToolbarContext);
   const { status = "idle", reason } = appStatus || {};
   const loading = status === "loading";
   const failed = status === "failed";
   const unifiedTitle = loading ? "loading" : failed ? reason : title;
 
   return (
-    <span
-      className={clsx("fastboard-toolbar-app-icon", {
-        "fastboard-toolbar-app-is-loading": loading,
-        "fastboard-toolbar-app-is-failed": failed,
-      })}
-    >
-      <Button disabled={failed} placement="top" content={unifiedTitle} onClick={onClick}>
-        <img src={src} alt={alt} title={unifiedTitle} />
-      </Button>
-      <span className="fastboard-toolbar-app-icon-text">{title}</span>
-    </span>
+    <div className="fastboard-toolbar-app-icon-wrapper">
+      <span
+        className={clsx("fastboard-toolbar-app-icon", {
+          "fastboard-toolbar-app-is-loading": loading,
+          "fastboard-toolbar-app-is-failed": failed,
+        })}
+      >
+        <Button disabled={failed || loading} placement="top" content={unifiedTitle} onClick={onClick}>
+          <img src={src} alt={alt} title={unifiedTitle} />
+        </Button>
+        <span className="fastboard-toolbar-app-icon-text">{title}</span>
+      </span>
+      {loading && (
+        <span className="fastboard-toolbar-app-icon-mask">
+          <Loading theme={theme} />
+        </span>
+      )}
+    </div>
   );
 }

package/src/components/Toolbar/components/Button.tsx

@@ -1,4 +1,3 @@
-import type { Placement } from "tippy.js";
 import type { PropsWithChildren } from "react";
 
 import clsx from "clsx";
@@ -14,7 +13,7 @@ type ButtonProps = PropsWithChildren<{
   active?: boolean;
   onClick?: () => void;
   interactive?: boolean;
-  placement?: Placement;
+  placement?: "top" | "right"; // not using tippy.js's placement to satisfy dts
 }>;
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {

package/src/components/Toolbar/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 fill={stroke} d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8Z"></path>
+    </svg>
+  );
+};