test

src/assets/theme.editor.scss

@@ -87,6 +87,8 @@ body {
   position: absolute;
   left: 0;
   top: 0;
+  bottom: 0;
+  right: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -150,7 +152,6 @@ body {
 
 .ui-view-layout {
   width: 100%;
-  height: 100%;
   visibility: hidden;
   &.show {
     visibility: visible;

src/components/chatRoom/chatroom.scss

@@ -606,8 +606,8 @@
 //   position: relative;
 //   z-index: 10000;
 // }
-@media screen and (min-width: 768px) {
-  .scene-list {
-    max-width: 11rem;
+@media screen and (max-width: 768px) {
+  #PageRtcLive .controlBar .control_btn > div{
+    margin-right: 0.16rem;
   }
 }

src/components/chatRoom/controls/actions.ts

@@ -318,6 +318,8 @@ const handleUserLeave = (user?: UserInfoType, members?: UserInfoType[]) => {
     if (rtcStore.isLeader) {
       console.log('主持人看到', data);
       rtcStore.addToChatList(data);
+      const { muteVideoLeader } = useRtcSdk();
+      muteVideoLeader.value = false;
     } else {
       console.log('参与者看到', data);
       user.Role == 'leader' && rtcStore.addToChatList(data);
@@ -384,22 +386,25 @@ interface RoomValidTimeType {
 const handleRoomValidTime = (data: RoomValidTimeType) => {
   const rtcStore = useRtcStore();
   const appStore = useAppStore();
+  const { t } = useI18n();
   appStore.setRoomValidTime(data.ttl);
   if (rtcStore.isLeader) {
     const seconds = data.ttl;
-    if (seconds > 0) {
-      const time = dayjs.duration(seconds, 'seconds').format('mm:ss');
-      console.log('time', time);
-      const { t } = useI18n();
-      const msg = String(t('base.roomTimeOut')).replace(new RegExp('%time%', 'g'), time);
-      const chat: ChatContentType = {
-        role: 'leader',
-        mode: '',
-        Nickname: t('base.tips'),
-        UserId: rtcStore.userId,
-        text: msg,
-      };
-      rtcStore.addToChatList(chat);
+    if (seconds > 5) {
+      setTimeout(() => {
+        const time = dayjs.duration(seconds - 1, 'seconds').format('mm:ss');
+        console.log('time', time);
+        const timeString = time == '00:00' ? '60:00' : time;
+        const msg = String(t('base.roomTimeOut')).replace(new RegExp('%time%', 'g'), timeString);
+        const chat: ChatContentType = {
+          role: 'leader',
+          mode: '',
+          Nickname: t('base.tips'),
+          UserId: rtcStore.userId,
+          text: msg,
+        };
+        rtcStore.addToChatList(chat);
+      }, 500);
     }
   }
 };

src/components/chatRoom/index.vue

@@ -9,14 +9,17 @@
     <div class="member_number" v-if="isPanoramaMode">
       <div class="members"></div>
       <span>{{ members.length }}{{ t('base.view') }}</span>
+      <span v-if="isPanoramaMode && roomCounter > 0 && isNativeLeader"
+        >&nbsp; {{ dayjs.duration(roomCounter, 'seconds').format('mm:ss') }}</span
+      >
     </div>
     <!-- 视频头像 start -->
-    <Camera />
+    <Camera v-show="isPanoramaMode" />
     <!-- 视频头像 end -->
     <!-- {{ selfRoomStatus }} -->
-    <div class="room_valid" v-if="isPanoramaMode && roomCounter > 0 && isNativeLeader">
+    <!-- <div class="room_valid" v-if="isPanoramaMode && roomCounter > 0 && isNativeLeader">
       <span>{{ dayjs.duration(roomCounter, 'seconds').format('mm:ss') }}</span>
-    </div>
+    </div> -->
     <!-- 当前人数 end -->
     <!-- 控制条 start -->
     <div class="controlBar" v-if="!showInput">

src/locales/lang/en/base.ts

@@ -37,5 +37,5 @@ export default {
   baseError1: 'The scene is calculating, please try again later',
   baseError2: 'Abnormal studio, please contact the host.',
   roomTimeOut:
-    'the valid duration of the studio is %time% minutes; after %time% minutes, the Livestream will automatically end; please pay attention to the remaining time above. Thank you.',
+    'the valid duration of the studio is %time%; after %time%, the Livestream will automatically end; please pay attention to the remaining time above. Thank you.',
 };

src/locales/lang/zh/base.ts

@@ -35,6 +35,5 @@ export default {
   connecting: '连接中...',
   baseError1: '该场景正在计算中，请稍后再试',
   baseError2: '房间异常，请联系主持人',
-  roomTimeOut:
-    '房间有效时长为%time%分钟，%time%分钟后将自动结束此次带看，请及时关注上方的剩余时长，谢谢！',
+  roomTimeOut: '房间有效时长为%time%，%time%后将自动结束此次带看，请及时关注上方的剩余时长，谢谢！',
 };

src/main.ts

@@ -8,6 +8,7 @@ import { setupStore } from '/@/store';
 import App from './App.vue';
 import registerComponent from '/@/components/registerComponent';
 import { setupI18n } from '/@/locales/setupI18n';
+import ClickOutSide from '/@/utils/ClickOutSide';
 // import Components from "./global_components";
 
 async function bootstrap() {
@@ -17,7 +18,7 @@ async function bootstrap() {
   setupStore(app);
   app.use(registerComponent);
   await setupI18n(app);
-
+  app.directive('click-outside', ClickOutSide);
   app.mount('#app');
 }
 

src/utils/ClickOutSide.ts

@@ -0,0 +1,41 @@
+// @ts-nocheck
+//TODO 称植browser
+let nodeList = {};
+
+function createDocumentHandler(el, binding) {
+  return function (e) {
+    const target = e.target;
+    if (el.contains(target)) {
+      return false;
+    }
+    if (binding.arg) {
+      binding.value(e);
+    }
+  };
+}
+
+const handler = (e) => {
+  const { documentHandler } = nodeList;
+  if (documentHandler) {
+    documentHandler(e);
+  }
+};
+
+window.addEventListener('click', handler);
+const ClickOutSide = {
+  beforeMount(el, binding) {
+    nodeList = {
+      documentHandler: createDocumentHandler(el, binding),
+    };
+  },
+  updated(el, binding) {
+    nodeList = {
+      documentHandler: createDocumentHandler(el, binding),
+    };
+  },
+  unmounted() {
+    window.removeEventListener('click', handler);
+  },
+};
+
+export default ClickOutSide;