fix(service-providers): disable app collector when not allow drawing (#…

…1836) * fix(service-providers): disable app collector when not allow drawing - upgrade window-manager: disable scrolling when not allow drawing * refactor(flat-components): hide outline of users panel buttons * upgrade window-manager * refactor(flat-pages): update collector on permission change * refactor(flat-components): show users count on chat panel * chore(service-providers): error to warn
netless-io · Feb 9, 2023 · b0d328b · b0d328b
1 parent b22f7c5
commit b0d328b
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 25 deletions.
diff --git a/packages/flat-components/src/components/ChatPanel/ChatPanel.stories.tsx b/packages/flat-components/src/components/ChatPanel/ChatPanel.stories.tsx
@@ -34,6 +34,7 @@ const users = (() => {
     return chance.shuffle(users);
 })();
 Overview.args = {
+    totalUserCount: faker.datatype.number(),
     unreadCount: faker.datatype.number(),
     isCreator: faker.datatype.boolean(),
     isBan: faker.datatype.boolean(),

diff --git a/packages/flat-components/src/components/ChatPanel/index.tsx b/packages/flat-components/src/components/ChatPanel/index.tsx
@@ -6,7 +6,8 @@ import { useTranslate } from "@netless/flat-i18n";
 import { ChatMessages, ChatMessagesProps } from "./ChatMessages";
 import { ChatTabTitle, ChatTabTitleProps } from "./ChatTabTitle";
 
-export type ChatPanelProps = ChatTabTitleProps & Omit<ChatMessagesProps, "visible">;
+export type ChatPanelProps = { totalUserCount?: number } & ChatTabTitleProps &
+    Omit<ChatMessagesProps, "visible">;
 
 export const ChatPanel = /* @__PURE__ */ observer<ChatPanelProps>(function ChatPanel(props) {
     const t = useTranslate();
@@ -17,6 +18,11 @@ export const ChatPanel = /* @__PURE__ */ observer<ChatPanelProps>(function ChatP
                 <ChatTabTitle>
                     <span>{t("messages")}</span>
                 </ChatTabTitle>
+                {props.totalUserCount && (
+                    <span className="chat-tab-subtitle">
+                        {t("total-users-count", { count: props.totalUserCount })}
+                    </span>
+                )}
             </div>
             <ChatMessages {...props} visible />
         </div>

diff --git a/packages/flat-components/src/components/ChatPanel/style.less b/packages/flat-components/src/components/ChatPanel/style.less
@@ -5,7 +5,8 @@
 
     .ant-tabs {
         height: 100%;
-        & > .ant-tabs-nav .ant-tabs-nav-list {
+
+        &>.ant-tabs-nav .ant-tabs-nav-list {
             width: 100%;
             justify-content: space-around;
         }
@@ -20,7 +21,7 @@
         color: var(--primary-strong);
     }
 
-    .ant-tabs-top > .ant-tabs-nav::before {
+    .ant-tabs-top>.ant-tabs-nav::before {
         border-bottom-color: var(--grey-1);
     }
 
@@ -59,15 +60,25 @@
     border-bottom: 1px solid var(--grey-1);
 }
 
+.chat-tab-subtitle {
+    flex: 1;
+    text-align: right;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--text);
+}
+
 .flat-color-scheme-dark {
     .chat-panel {
         .ant-tabs-ink-bar {
             background: var(--primary-strong);
         }
-        .ant-tabs-top > .ant-tabs-nav::before {
+
+        .ant-tabs-top>.ant-tabs-nav::before {
             border-bottom-color: var(--grey-8);
         }
     }
+
     .chat-panel-header {
         border-bottom-color: var(--grey-8);
     }

diff --git a/packages/flat-components/src/components/UsersPanel/style.less b/packages/flat-components/src/components/UsersPanel/style.less
@@ -58,12 +58,14 @@
         background-color: #F9F9F9;
         box-shadow: inset 0px -1px 0px #E5E8F0;
     }
+
     th {
         text-align: left;
         padding: 8px 0 8px 16px;
         min-width: 128px;
         font-weight: 400;
     }
+
     td {
         text-align: left;
         padding: 12px 0 12px 16px;
@@ -81,6 +83,7 @@
 .users-panel-list-item {
     font-size: 0;
     position: relative;
+
     &::after {
         content: "";
         position: absolute;
@@ -134,7 +137,8 @@
 .users-panel-small-btn {
     padding: 0;
 
-    &.is-cancel, &.is-hand {
+    &.is-cancel,
+    &.is-hand {
         color: var(--text-weak);
     }
 
@@ -153,6 +157,7 @@
     padding: 0;
     background: none;
     border-radius: 50%;
+    outline: none;
     overflow: hidden;
     font-size: 0;
     vertical-align: text-top;
@@ -171,6 +176,7 @@
 
     &.is-mic {
         background: rgba(0, 0, 0, 0.5);
+
         &.is-muted {
             background: none;
         }
@@ -201,6 +207,7 @@
             box-shadow: inset 0px -1px 0px var(--grey-8);
         }
     }
+
     .users-panel-list-item::after {
         background-color: var(--grey-9);
     }

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -22,6 +22,7 @@
   "end": "End",
   "me": "(Me)",
   "messages": "Chat",
+  "total-users-count": "Online {{count}}",
   "raise-your-hand": "Raise hand",
   "raise-hand": "Raise hand",
   "raised-hand": "Hand raised",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -33,6 +33,7 @@
   "me": "(我)",
   "cancel-hand-raising": "取消举手",
   "messages": "聊天",
+  "total-users-count": "在线人数 {{count}}",
   "users": "用户列表",
   "confirmation-of-the-end-of-classes": "确定结束上课",
   "end-of-class-tips": "一旦结束上课，所有用户自动退出房间，并且自动结束课程和录制（如有），不能继续直播。",

diff --git a/packages/flat-pages/src/components/ChatPanel/index.tsx b/packages/flat-pages/src/components/ChatPanel/index.tsx
@@ -19,6 +19,7 @@ export const ChatPanel = observer<ChatPanelProps>(function ChatPanel({ classRoom
             loadMoreRows={noop}
             messages={classRoomStore.chatStore.messages}
             openCloudStorage={() => classRoomStore.toggleCloudStoragePanel(true)}
+            totalUserCount={classRoomStore.users.totalUserCount}
             unreadCount={classRoomStore.users.handRaisingJoiners.length || null}
             userUUID={classRoomStore.userUUID}
             onBanChange={classRoomStore.onToggleBan}

diff --git a/packages/flat-pages/src/components/Whiteboard.tsx b/packages/flat-pages/src/components/Whiteboard.tsx
@@ -192,7 +192,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
             {room && (
                 <div
                     className={classNames("whiteboard-container", {
-                        "is-readonly": !whiteboardStore.isWritable,
+                        "is-readonly": !whiteboardStore.allowDrawing,
                     })}
                     onDragOver={onDragOver}
                     onDrop={onDrop}

diff --git a/packages/flat-stores/package.json b/packages/flat-stores/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@netless/fastboard": "1.0.0-canary.8",
-    "@netless/window-manager": "1.0.0-canary.73",
+    "@netless/window-manager": "1.0.0-canary.75",
     "mobx": "^6.6.1",
     "prettier": "^2.7.1",
     "react": "^17.0.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/service-providers/agora-cloud-recording/src/cloud-recording.ts b/service-providers/agora-cloud-recording/src/cloud-recording.ts
@@ -119,7 +119,8 @@ export class AgoraCloudRecording extends IServiceRecording {
 
     public async stopRecording(): Promise<void> {
         if (this.roomInfo === null) {
-            throw new Error("should call joinRoom() before stopRecording()");
+            console.warn("should call joinRoom() before stopRecording()");
+            return;
         }
 
         await this.queryRecordingStatus();

diff --git a/service-providers/fastboard/package.json b/service-providers/fastboard/package.json
@@ -16,7 +16,7 @@
     "@netless/flat-service-provider-file-convert-netless": "workspace:*",
     "@netless/flat-services": "workspace:*",
     "@netless/white-snapshot": "^0.4.2",
-    "@netless/window-manager": "1.0.0-canary.73",
+    "@netless/window-manager": "1.0.0-canary.75",
     "side-effect-manager": "^1.2.1",
     "value-enhancer": "^1.3.2",
     "white-web-sdk": "npm:[email protected]"

diff --git a/service-providers/fastboard/src/index.ts b/service-providers/fastboard/src/index.ts
@@ -121,6 +121,7 @@ export class Fastboard extends IServiceWhiteboard {
                 }
                 room.disableDeviceInputs = !allowDrawing;
                 room.disableCameraTransform = !allowDrawing;
+                app.manager.setReadonly(!allowDrawing);
             }),
             combine([this._app$, isWritable$]).subscribe(([app, isWritable]) => {
                 const room = app?.room;