fix(whiteboard): replay mode bugs

cspell.config.js

@@ -110,6 +110,7 @@ module.exports = {
         "plyr", // @netless/app-plyr
         "lukeed", // @luckeed/uuid
         "EXTINF",
+        "mpegurl", // hls.js
 
         // less
         "isstring",

packages/flat-components/src/components/FlatIcons/icons/SVGRecordList.tsx

@@ -0,0 +1,45 @@
+import "../style.less";
+import React from "react";
+import { FlatIconProps } from "../types";
+
+export const SVGRecordList: React.FC<FlatIconProps> = ({
+    active,
+    className = "",
+    ...restProps
+}) => {
+    return (
+        <svg
+            className={`${className} flat-icon ${active ? "is-active" : ""}`}
+            fill="none"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...restProps}
+        >
+            <circle className="flat-icon-fill-color" cx="19" cy="8" fill="#5D6066" r="1" />
+            <circle className="flat-icon-fill-color" cx="19" cy="12" fill="#5D6066" r="1" />
+            <circle className="flat-icon-fill-color" cx="19" cy="16" fill="#5D6066" r="1" />
+            <path
+                className="flat-icon-stroke-color"
+                d="M4 8H16"
+                stroke="#5D6066"
+                strokeWidth="1.25"
+            />
+            <path
+                className="flat-icon-stroke-color"
+                d="M4 12H16"
+                stroke="#5D6066"
+                strokeWidth="1.25"
+            />
+            <path
+                className="flat-icon-stroke-color"
+                d="M4 16H16"
+                stroke="#5D6066"
+                strokeWidth="1.25"
+            />
+        </svg>
+    );
+};
+
+export default SVGRecordList;

packages/flat-components/src/components/FlatIcons/index.ts

@@ -95,6 +95,7 @@ export * from "./icons/SVGPlay";
 export * from "./icons/SVGPlus";
 export * from "./icons/SVGQuestion";
 export * from "./icons/SVGRecord";
+export * from "./icons/SVGRecordList";
 export * from "./icons/SVGRecordStop";
 export * from "./icons/SVGRedo";
 export * from "./icons/SVGReset";

packages/flat-i18n/locales/en.json

@@ -485,5 +485,10 @@
     "first-page": "This is the first page",
     "last-page": "This is the last page",
     "page": "Page {{page}}"
+  },
+  "record-nth": "Part {{nth}}",
+  "replay-page": {
+    "loading": "Loading",
+    "playing": "Now Playing"
   }
 }

packages/flat-i18n/locales/zh-CN.json

@@ -485,5 +485,10 @@
     "first-page": "已达第一页",
     "last-page": "已达最后一页",
     "page": "当前页数: {{page}}"
+  },
+  "record-nth": "第 {{nth}} 段",
+  "replay-page": {
+    "loading": "加载中",
+    "playing": "正在播放"
   }
 }

packages/flat-pages/package.json

@@ -17,7 +17,6 @@
     "@netless/flat-service-provider-agora-rtm": "workspace:*",
     "@netless/flat-services": "workspace:*",
     "@netless/flat-stores": "workspace:*",
-    "@netless/sync-player": "^1.0.4",
     "antd": "^4.22.8",
     "axios": "^0.26.1",
     "classnames": "^2.3.1",

packages/flat-pages/src/ReplayPage/ReplayList.tsx

@@ -6,8 +6,9 @@ import { observer } from "mobx-react-lite";
 import React, { useCallback, useEffect, useState } from "react";
 
 import { ClassroomReplayStore } from "@netless/flat-stores";
-import { SVGRecord, SVGPause, SVGPlay, useSafePromise } from "flat-components";
+import { SVGPause, SVGPlay, useSafePromise, SVGRecordList } from "flat-components";
 import { LoadingOutlined } from "@ant-design/icons";
+import { FlatI18nTFunction, useTranslate } from "@netless/flat-i18n";
 
 export interface ReplayListProps {
     classroomReplayStore: ClassroomReplayStore;
@@ -16,9 +17,11 @@ export interface ReplayListProps {
 const Trigger: DropdownProps["trigger"] = ["click"];
 
 export const ReplayList = observer<ReplayListProps>(function ReplayList({ classroomReplayStore }) {
+    const t = useTranslate();
     const sp = useSafePromise();
     const { currentRecording, recordings } = classroomReplayStore;
     const [loadingRecording, setLoading] = useState(false);
+    const currentRecordingIndex = currentRecording ? recordings.indexOf(currentRecording) : -1;
 
     const loadRecording = useCallback(
         async (recording: Recording): Promise<void> => {
@@ -49,47 +52,73 @@ export const ReplayList = observer<ReplayListProps>(function ReplayList({ classr
                     onChange={classroomReplayStore.seek}
                 />
             )}
+            <Button
+                disabled={!currentRecording || loading}
+                onClick={classroomReplayStore.togglePlayPause}
+            >
+                {classroomReplayStore.isPlaying ? <SVGPause /> : <SVGPlay />}
+            </Button>
+            {currentRecording && (
+                <Tag color={loading ? "yellow" : "blue"}>
+                    <div className="replay-current-recording">
+                        {loading && <Spin indicator={<LoadingOutlined spin />} />}
+                        {loading ? t("replay-page.loading") : t("replay-page.playing")}
+                        {": "}
+                        {renderTime(t, currentRecordingIndex, currentRecording)}
+                    </div>
+                </Tag>
+            )}
+            <div className="replay-splitter"></div>
+            {classroomReplayStore.duration > 0 && (
+                <div className="replay-time">
+                    {renderPlayerTime(classroomReplayStore.currentTime)}/
+                    {renderPlayerTime(classroomReplayStore.duration)}
+                </div>
+            )}
             <span className="replay-playlist-dropdown-wrapper">
                 <Dropdown
                     className="replay-playlist-dropdown"
                     overlay={
                         <Menu
                             items={recordings.map((r, i) => ({
                                 key: i,
-                                label: renderTime(r),
+                                label: renderTime(t, i, r),
                             }))}
                             onClick={({ key }) => loadRecording(recordings[+key])}
                         />
                     }
+                    placement="topRight"
                     trigger={Trigger}
                 >
-                    <Button className="replay-select-playlist" disabled={loading} type="primary">
-                        <SVGRecord />
+                    <Button className="replay-select-playlist" disabled={loading}>
+                        <SVGRecordList />
                     </Button>
                 </Dropdown>
             </span>
-            <Button
-                disabled={!currentRecording || loading}
-                onClick={classroomReplayStore.togglePlayPause}
-            >
-                {classroomReplayStore.isPlaying ? <SVGPause /> : <SVGPlay />}
-            </Button>
-            {currentRecording && (
-                <Tag color={loading ? "yellow" : "blue"}>
-                    <div className="replay-current-recording">
-                        {loading && <Spin indicator={<LoadingOutlined spin />} />}
-                        {loading ? "Loading" : "Now Playing"}: {renderTime(currentRecording)}
-                    </div>
-                </Tag>
-            )}
-            <div className="replay-splitter"></div>
-            <div className="replay-time">
-                {format(classroomReplayStore.currentTimestamp, "hh:mm:ss")}
-            </div>
         </div>
     );
 });
 
-function renderTime({ beginTime, endTime }: Record<"beginTime" | "endTime", number>): string {
-    return format(beginTime, "Y-MM-dd hh:mm:ss") + " ~ " + format(endTime, "Y-MM-dd hh:mm:ss");
+function renderTime(
+    t: FlatI18nTFunction,
+    i: number,
+    record?: Record<"beginTime" | "endTime", number>,
+): string {
+    let string = t("record-nth", { nth: i + 1 });
+    if (record) {
+        const { beginTime, endTime } = record;
+        string += " (" + format(beginTime, "hh:mm:ss") + " ~ " + format(endTime, "hh:mm:ss") + ")";
+    }
+    return string;
+}
+
+function renderPlayerTime(ms: number): string {
+    const seconds = (ms / 1000) | 0;
+    const minutes = (seconds / 60) | 0;
+    const hours = (minutes / 60) | 0;
+    return `${pad2(hours)}:${pad2(minutes % 60)}:${pad2(seconds % 60)}`;
+}
+
+function pad2(i: number): string {
+    return i.toString().padStart(2, "0");
 }

packages/flat-pages/src/ReplayPage/index.tsx

@@ -85,10 +85,15 @@ const ReplayVideo = observer<ReplayVideoProps>(function ReplayVideo({
     const ref = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        if (user && ref.current) {
-            const video = classroomReplayStore.userVideos.get(user.userUUID);
-            if (video) {
-                ref.current.appendChild(video.el());
+        if (ref.current) {
+            while (ref.current.firstChild) {
+                ref.current.removeChild(ref.current.lastChild!);
+            }
+            if (user) {
+                const video = classroomReplayStore.userVideos.get(user.userUUID);
+                if (video) {
+                    ref.current.appendChild(video);
+                }
             }
         }
     }, [classroomReplayStore.userVideos, user]);

packages/flat-stores/package.json

@@ -14,7 +14,7 @@
     "white-web-sdk": ">=2.16"
   },
   "devDependencies": {
-    "@netless/fastboard": "1.0.0-canary.5",
+    "@netless/fastboard": "1.0.0-canary.6",
     "@netless/window-manager": "1.0.0-canary.52",
     "mobx": "^6.6.1",
     "prettier": "^2.3.0",
@@ -26,7 +26,9 @@
     "@netless/flat-i18n": "workspace:*",
     "@netless/flat-server-api": "workspace:*",
     "@netless/flat-services": "workspace:*",
+    "@netless/sync-player": "^1.0.6",
     "flat-components": "workspace:*",
+    "hls.js": "^1.2.1",
     "polly-js": "^1.8.3",
     "side-effect-manager": "^1.2.1",
     "uuid": "^8.3.2"