src/page/Meeting/ShareScreenWindow/index.tsx

@@ -6,6 +6,7 @@ import ImageUrl from '@/utils/package/imageUrl';
 import { getKeyOpenChildWindow, setKeyOpenChildWindow } from '@/utils/package/public';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
+import dayjs from 'dayjs';
 import { useEffect, useState } from "react";
 const ShareScreenWindow: React.FC = () => {
   const [footerLists, setFooterLists] = useState<any>([
@@ -46,19 +47,23 @@ const ShareScreenWindow: React.FC = () => {
       select: false,
     },
   ])
-  const [time, setTime] = useState('')
+  const [timeStr, setTimeStr] = useState(0)
   const [isExpand, setIsExpand] = useState(false)
   const [roomUserLists, setRoomUserLists] = useState<any>([])
   const channel = new BroadcastChannel('meeting_channel');
   const userInfo = JSON.parse(storage.getItem('user') as string)
+  let timeout: NodeJS.Timeout;
   useEffect(() => {
     getRoomUser()
     channel.onmessage = function (event) {
-      const { type, time, roomUserList, footerList, currentSpeakUserMe } = event.data;
+      let { type, time, roomUserList, footerList, currentSpeakUserMe } = event.data;
       const footerListTemplate = [...footerLists];
       switch (type) {
         case 'time':
-          setTime(time)
+          setTimeStr(time)
+          timeout = setInterval(() => {
+            setTimeStr(time++)
+          }, 1000)
           break;
         case 'roomUserList':
           setRoomUserLists(roomUserList)
@@ -80,8 +85,20 @@ const ShareScreenWindow: React.FC = () => {
           break;
       }
     }
+    channel.postMessage({
+      type: 'shareScreenWindowGetTime'
+    });
+    return () => {
+      clearInterval(timeout)
+    };
   }, []);
-
+  const changeCurrentSeconds = (time: number): string => {
+    const duration = dayjs.duration(time, 'seconds');
+    const hours = duration.hours(); // 整数小时
+    const minutes = duration.minutes(); // 整数分钟
+    const secondsRemaining = duration.seconds(); // 剩余的秒数
+    return `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${secondsRemaining > 9 ? secondsRemaining : '0' + secondsRemaining}`
+  }
   // 获取房间用户
   const getRoomUser = async (): Promise<void> => {
     const data = JSON.parse(storage.getItem('stateInfo') as string)
@@ -112,7 +129,7 @@ const ShareScreenWindow: React.FC = () => {
     <>
       <div className={styles.shareScreenWindow} style={{ width: isExpand ? '100%' : '100%' }}>
         <div className={styles.shareScreenWindowTitle}>
-          <span>{time} 共享中</span>
+          <span>{changeCurrentSeconds(timeStr)} 共享中</span>
           {isExpand ? <span className='drag' onClick={() => {
             channel.postMessage({
               type: 'shareScreenWindowClose'

src/page/Meeting/index.tsx

@@ -226,6 +226,15 @@ const Meeting: React.FC = () => {
         noticeWindowPostRoomManager
       } = event.data;
       switch (type) {
+        case 'shareScreenWindowGetTime':
+          setCurrentSeconds((res=>{
+            channel.postMessage({
+              type: 'time',
+              time: res,
+            });
+            return res
+          }))
+          break;
         case 'shareScreenWindowClose':
           await stopScreenCapture()
           await allUserLook(userInfo.uid, userInfo.userName)
@@ -351,10 +360,6 @@ const Meeting: React.FC = () => {
     }
     time = setInterval(() => {
       setCurrentSeconds(currentSeconds++)
-      channel.postMessage({
-        type: 'time',
-        time: changeCurrentSeconds(),
-      });
     }, 1000)
     // 首次加载图标更新
     const firstFooterList = [...footerList]