停止分享

src/page/Meeting/index.module.scss

@@ -276,7 +276,19 @@
           }
         }
 
-        @include meetingContent()
+        @include meetingContent();
+
+        .meetingContentSwiperCardShare {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          z-index: 2;
+          transform: translate(-50%, -50%);
+          background-color: rgba(0, 0, 0, 0.5);
+          color: white;
+          padding: 10px 20px;
+          white-space: nowrap;
+        }
       }
 
       .meetingContentBodyRight {

src/page/Meeting/index.tsx

@@ -819,7 +819,11 @@ const Meeting: React.FC = () => {
                         key={index}
                         onClick={() => {
                           setCurrentVideoId(item.uid)
-                          renderVideo(item.uid)
+                          if (String(isShare) === item.screenShareId) {
+                            renderVideo(item.screenShareId)
+                          } else {
+                            renderVideo(item.uid)
+                          }
                         }}
                       >
                         <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.uid ? styles.active : ''}`} id={`video-${item.uid}`}>
@@ -829,6 +833,9 @@ const Meeting: React.FC = () => {
                         </div>
                         {meetingContentUser(item)}
                         {item.enableCamera ? null : meetingContentError(currentVideoId, item)}
+                        {String(isShare) === item.screenShareId ? <div className={styles.meetingContentSwiperCardShare}>
+                          屏幕分享中
+                        </div> : null}
                       </div> : null
                   )
                 }
@@ -1042,13 +1049,26 @@ const Meeting: React.FC = () => {
                         <Popover key={rowIndex}
                           content={
                             <div className='meetingContentFooterPopover'>
-                              {user.roleId === '1' ? <div onClick={async () => {
-                                await onInvoke('sendOper', {
-                                  roomNum: state.channelId,
-                                  type: 1,
-                                })
-                                leaveChannel(true)
-                              }}>全员结束会议</div> : null}
+                              {user.roleId === '1' ?
+                                <Popconfirm
+                                  title="提示"
+                                  description={`结束会议后，所有人将退出，是否结束？`}
+                                  onConfirm={async () => {
+                                    await onInvoke('sendOper', {
+                                      roomNum: state.channelId,
+                                      type: 1,
+                                    })
+                                    leaveChannel(true)
+                                  }}
+                                  onCancel={() => {
+
+                                  }}
+                                  okText="结束"
+                                  cancelText="取消"
+                                >
+                                  <div>全员结束会议</div>
+                                </Popconfirm>
+                                : null}
                               <div onClick={() => leaveChannel()}>仅自己离开</div>
                               <div onClick={() => { setOpen(false) }}>取消</div>
                             </div>
@@ -1111,7 +1131,7 @@ const Meeting: React.FC = () => {
               }} style={{ backgroundColor: '#31353A', marginRight: '14px' }}>取消</Button>
               {isShare ? <Popconfirm
                 title="提示"
-                description={`用户${isShareUser?.userName}正在屏幕，是否继续共享？`}
+                description={`这将停止[${isShareUser?.userName}]的共享，是否继续？`}
                 open={isSharePopConfirm}
                 onConfirm={async () => {
                   setIsSharePopConfirm(false)

src/utils/package/agora.ts

@@ -81,7 +81,7 @@ const agora = {
   },
   // 本地加入
   setupLocalVideo: async (item: any) => {
-    if (item.view.childNodes.length === 1) {
+    if (item.view?.childNodes.length === 1) {
       await rtcEngine.setupLocalVideo({
         renderMode: agora.getRrenderMode(item.uid),
         sourceType: item.sourceType,
@@ -93,7 +93,7 @@ const agora = {
   },
   // 远端加入
   setupRemoteVideoJoin: async (item: any) => {
-    if (item.view.childNodes.length === 1) {
+    if (item.view?.childNodes.length === 1) {
       await rtcEngine.setupRemoteVideo(
         {
           renderMode: agora.getRrenderMode(item.uid),

src/utils/package/signalr.ts

@@ -47,6 +47,7 @@ export const onInvitation = (callBack: Function) => {
 }
 export const onSignalr = (callBack: Function) => {
   if (connection) {
+    // 聊天
     connection.on("ReceiveMessage", (uid: string, userName: string, message: string) => {
       callBack({
         key: 'ReceiveMessage',
@@ -58,22 +59,26 @@ export const onSignalr = (callBack: Function) => {
         key: 'RefreshUserList'
       })
     });
+    // 扩展操作
     connection.on("Operation", (type: number) => {
       callBack({
         key: 'Operation',
         type
       })
     });
+    // 全员离开房间
     connection.on("ForceExitRoom", () => {
       callBack({
         key: 'ForceExitRoom',
       })
     });
+    // 全员看他
     connection.on("ShowUser", () => {
       callBack({
         key: 'ShowUser',
       })
     });
+    // 更新视图模式
     connection.on("RefreshView", (type: string) => {
       callBack({
         key: 'RefreshView',