netless-io · syt-honey · May 4, 2023 · May 4, 2023 · May 4, 2023
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/IconMic.tsx b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/IconMic.tsx
@@ -55,6 +55,7 @@ export const IconMic = /* @__PURE__ */ React.memo<IconMicProps>(function IconMic
 
     return (
         <svg
+            className="flat-icon"
             fill="none"
             height="24"
             viewBox="0 0 24 24"

diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGMuteAll.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGMuteAll.tsx
@@ -0,0 +1,34 @@
+import "../style.less";
+import React from "react";
+import { FlatIconProps } from "../types";
+
+export const SVGMuteAll: 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}
+        >
+            <path
+                className="flat-icon-fill-color"
+                clipRule="evenodd"
+                d="M8.098 18.553c.294.047.595.072.902.072v-.974l-.902.902Zm-1.072-4.231-.895.895A3.61 3.61 0 0 1 5.375 13V7a3.625 3.625 0 0 1 7.186-.682 3.634 3.634 0 0 1 3.307-.839l-4.493 4.494V9c0-.74.221-1.427.601-2h-.601a2.375 2.375 0 1 0-4.75 0v6c0 .49.148.944.401 1.322Zm2.69 2.613 1.008-1.007a4.377 4.377 0 0 0 8.65-.928v-1h1.25v1a5.625 5.625 0 0 1-10.908 1.935Zm1.669-1.668 1.24-1.24V15a2.375 2.375 0 1 0 4.75 0V9.276l1.145-1.145c.069.278.105.57.105.869v6a3.625 3.625 0 0 1-7.24.267Zm-5.788.483-.887.888A5.603 5.603 0 0 1 3.375 13v-1h1.25v1c0 1.042.364 1.999.972 2.75Z"
+                fill="#5D6066"
+                fillRule="evenodd"
+            />
+            <path
+                className="flat-icon-stroke-color"
+                d="M4.93 19.071 19.072 4.929"
+                stroke="#5D6066"
+                strokeLinejoin="round"
+                strokeWidth="1.25"
+            />
+        </svg>
+    );
+};
+
+export default SVGMuteAll;
diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGRestore.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGRestore.tsx
@@ -0,0 +1,40 @@
+import "../style.less";
+import React from "react";
+import { FlatIconProps } from "../types";
+
+export const SVGRestore: 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}
+        >
+            <path
+                className="flat-icon-stroke-color"
+                d="M17 7H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Z"
+                stroke="#5D6066"
+                strokeLinejoin="round"
+                strokeWidth="1.25"
+            />
+            <path
+                className="flat-icon-fill-color"
+                d="m15 10-7.202.464 4.003 6.005L15 10Zm-8.653 6.52 4.32-2.88-.694-1.04-4.32 2.88.694 1.04Z"
+                fill="#5D6066"
+            />
+            <path
+                className="flat-icon-stroke-color"
+                d="M8 5h11a2 2 0 0 1 2 2v7"
+                stroke="#5D6066"
+                strokeDasharray="1 1"
+                strokeLinejoin="round"
+                strokeWidth="1.25"
+            />
+        </svg>
+    );
+};
+
+export default SVGRestore;
diff --git a/packages/flat-components/src/components/FlatIcons/index.ts b/packages/flat-components/src/components/FlatIcons/index.ts
@@ -139,3 +139,5 @@ export * from "./icons/SVGShare";
 export * from "./icons/SVGBoard";
 export * from "./icons/SVGBoardOff";
 export * from "./icons/SVGCup";
+export * from "./icons/SVGRestore";
+export * from "./icons/SVGMuteAll";
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -651,5 +651,7 @@
     "week": "Last Week",
     "month": "Last Month",
     "year": "Last Year"
-  }
+  },
+  "reward": "reward",
+  "restore-windows": "restore windows"
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -651,5 +651,7 @@
     "week": "最近七天",
     "month": "最近一月",
     "year": "最近一年"
-  }
+  },
+  "reward": "奖杯",
+  "restore-windows": "复位"
 }
diff --git a/packages/flat-pages/src/components/Shortcuts/Shortcuts.less b/packages/flat-pages/src/components/Shortcuts/Shortcuts.less
@@ -3,10 +3,14 @@
     padding: 8px;
     opacity: 0;
     z-index: 100;
-    transform: translate(-50%, -80%);
+    transform: translate(-50%, -12%);
     transition: opacity 0.1s;
 }
 
+.avatar-shortcuts-wrapper.SmallClass {
+    transform: translate(-50%, -80%);
+}
+
 .avatar-shortcuts-wrapper.active,
 .avatar-shortcuts-wrapper:hover {
     opacity: 100;

diff --git a/packages/flat-pages/src/components/Shortcuts/Shortcuts.tsx b/packages/flat-pages/src/components/Shortcuts/Shortcuts.tsx
@@ -4,10 +4,12 @@ import classNames from "classnames";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { listen } from "@wopjs/dom";
+import { useWindowSize } from "react-use";
 import { validate } from "uuid";
 
+import { useTranslate } from "@netless/flat-i18n";
 import { ClassroomStore } from "@netless/flat-stores";
-import { SVGBoard, SVGBoardOff, SVGCup } from "flat-components";
+import { SVGBoard, SVGBoardOff, SVGCup, SVGMuteAll, SVGRestore } from "flat-components";
 import { useBoundingRect } from "./hooks";
 
 export interface ShortcutsProps {
@@ -16,20 +18,26 @@ export interface ShortcutsProps {
 }
 
 export const Shortcuts = observer<ShortcutsProps>(function Shortcuts({ classroom, location }) {
+    const t = useTranslate();
     const [target, setTarget] = useState<HTMLElement | null>(null);
     const activeUser = useMemo(
         () => classroom.users.cachedUsers.get(classroom.hoveringUserUUID || "") || null,
         [classroom.hoveringUserUUID, classroom.users.cachedUsers],
     );
+    const { height: windowHeight } = useWindowSize();
     const rect = useBoundingRect(target);
+    const isAvatarWindow = useMemo(() => target?.classList.contains("window-main"), [target]);
     const style = useMemo<React.CSSProperties | undefined>(
         () =>
             rect && activeUser
-                ? location === "top-right"
+                ? location === "top-right" && !isAvatarWindow
                     ? { top: rect.top + 4, right: 4 }
-                    : { left: rect.left + rect.width / 2, top: rect.bottom }
+                    : {
+                          left: rect.left + rect.width / 2,
+                          top: rect.bottom + 42 < windowHeight ? rect.bottom : rect.top,
+                      }
                 : { left: -9999, top: -9999 },
-        [activeUser, location, rect],
+        [rect, activeUser, location, isAvatarWindow, windowHeight],
     );
 
     useEffect(() => {
@@ -95,30 +103,55 @@ export const Shortcuts = observer<ShortcutsProps>(function Shortcuts({ classroom
         return null;
     }
 
-    // no owner actions
-    if (activeUser?.userUUID === classroom.ownerUUID) {
+    // no actions for left users
+    if (activeUser?.hasLeft) {
         return null;
     }
 
+    const className = isAvatarWindow ? undefined : location;
+
     return (
         <div
-            className={classNames("avatar-shortcuts-wrapper", location, { active: !!activeUser })}
+            className={classNames("avatar-shortcuts-wrapper", className, classroom.roomType, {
+                active: !!activeUser,
+            })}
             data-user={activeUser?.userUUID}
             style={style}
             onPointerLeave={() => classroom.setHoveringUserUUID(null)}
         >
-            <div className={classNames("avatar-shortcuts", location)}>
-                <button
-                    className="avatar-shortcuts-btn"
-                    title="toggle whiteboard"
-                    onClick={toggleWhiteboard}
-                >
-                    {activeUser?.wbOperate ? <SVGBoard /> : <SVGBoardOff />}
-                </button>
-                <button className="avatar-shortcuts-btn" title="reward" onClick={reward}>
-                    <SVGCup />
-                </button>
-            </div>
+            {activeUser?.userUUID === classroom.ownerUUID ? (
+                // owner actions: restore windows, mute all
+                <div className={classNames("avatar-shortcuts", className)}>
+                    <button
+                        className="avatar-shortcuts-btn"
+                        title={t("restore-windows")}
+                        onClick={classroom.minimizeAllUserWindows}
+                    >
+                        <SVGRestore />
+                    </button>
+                    <button
+                        className="avatar-shortcuts-btn"
+                        title={t("all-mute-mic")}
+                        onClick={classroom.muteAll}
+                    >
+                        <SVGMuteAll />
+                    </button>
+                </div>
+            ) : (
+                // joiner actions: toggle whiteboard, reward
+                <div className={classNames("avatar-shortcuts", className)}>
+                    <button
+                        className="avatar-shortcuts-btn"
+                        title={t("whiteboard-access")}
+                        onClick={toggleWhiteboard}
+                    >
+                        {activeUser?.wbOperate ? <SVGBoard /> : <SVGBoardOff />}
+                    </button>
+                    <button className="avatar-shortcuts-btn" title={t("reward")} onClick={reward}>
+                        <SVGCup />
+                    </button>
+                </div>
+            )}
         </div>
     );
 });
diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -825,6 +825,12 @@ export class ClassroomStore {
         }
     };
 
+    public minimizeAllUserWindows = (): void => {
+        if (this.isCreator && this.userWindowsStorage) {
+            this.userWindowsStorage.resetState();
+        }
+    };
+
     public createAvatarWindow = (userUUID: string, window: Omit<UserWindow, "z">): void => {
         if (this.isCreator && this.userWindowsStorage) {
             if (this.emptyArrayAsNull(this.userWindowsStorage.state.grid)) {