update

src/components/basic/miniMap.vue

@@ -14,8 +14,9 @@
   </teleport>
 </template>
 <script lang="ts">
-  import { defineComponent, onMounted, ref, watch } from 'vue';
+  import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
   import { useI18n } from '/@/hooks/useI18n';
+  import { useRtcStore } from '/@/store/modules/rtc';
   import { propTypes } from '/@/utils/propTypes';
   const refMiniMap = ref<Nullable<string>>(null);
   const ifShow = ref(false);
@@ -33,6 +34,9 @@
     },
     emits: ['changeMode', 'toggleMap'],
     setup(props, { emit }) {
+      const rtcStore = useRtcStore();
+      const isLeader = computed(() => rtcStore.isLeader);
+
       const { t } = useI18n();
       onMounted(() => {
         watch(
@@ -54,19 +58,26 @@
       });
 
       const toggleMap = () => {
-        isCollapse.value = !isCollapse.value;
-        emit('toggleMap', isCollapse.value);
-        let $minmap = document.querySelector('[xui_min_map]');
-        if ($minmap) {
-          if (!isCollapse.value) {
-            $minmap.classList.remove('collapse');
-          } else {
-            $minmap.classList.add('collapse');
+        debugger;
+        if (unref(isLeader)) {
+          isCollapse.value = !isCollapse.value;
+          emit('toggleMap', isCollapse.value);
+          let $minmap = document.querySelector('[xui_min_map]');
+          if ($minmap) {
+            if (!isCollapse.value) {
+              $minmap.classList.remove('collapse');
+            } else {
+              $minmap.classList.add('collapse');
+            }
           }
         }
       };
       const changeMode = () => {
-        emit('changeMode', 'dollhouse');
+        console.log('unref(isLeader)', unref(isLeader));
+        debugger;
+        if (unref(isLeader)) {
+          emit('changeMode', 'dollhouse');
+        }
       };
 
       return {

src/components/chatRoom/controls/actions.ts

@@ -132,7 +132,6 @@ function handleUserJoin(members?: UserInfoType[], user?: UserInfoType) {
   });
   const rtcStore = useRtcStore();
 
-  // const { closeSocket } = useSocket();
   members && rtcStore.setMemberList(members);
   const isMaxAlert = rtcStore.memberList.length > Number(import.meta.env.VITE_ROOM_MEMBER);
 
@@ -153,6 +152,13 @@ function handleUserJoin(members?: UserInfoType[], user?: UserInfoType) {
     };
     if (rtcStore.isLeader) {
       rtcStore.addToChatList(data);
+      // const { socket } = useSocket();
+      // const { currentScene } = useRoom();
+
+      // socket.emit('action', {
+      //   type: 'changeScene',
+      //   data: currentScene.value,
+      // });
     }
   }
 }

src/components/chatRoom/controls/join.ts

@@ -1,5 +1,6 @@
 import consolaGlobalInstance from 'consola';
 import sortBy from 'lodash-es/sortBy';
+import { unref } from 'vue';
 // import { unref } from 'vue';
 // import Dialog from '/@/components/basic/dialog';
 // import { getApp } from '/@/hooks/userApp';
@@ -54,21 +55,29 @@ export function handleJoin(data: any) {
   } else {
     members && rtcStore.setMemberList(members);
   }
-  const { currentScene } = useRoom();
-  if (rtcStore.isLeader) {
-    socket.emit('action', {
-      type: 'changeScene',
-      data: currentScene.value,
-    });
-  }
+  // const { currentScene } = useRoom();
+  // console.log('currentScene', unref(currentScene));
+  // if (rtcStore.isLeader) {
+  //   socket.emit('action', {
+  //     type: 'changeScene',
+  //     data: unref(currentScene),
+  //   });
+  // }
 
-  if (!rtcStore.isLeader) {
-    setTimeout(() => {
+  setTimeout(() => {
+    if (!rtcStore.isLeader) {
       socket.emit('action', {
         type: 'user-init',
       });
-    }, 1500);
-  }
+    } else {
+      const { currentScene } = useRoom();
+      console.log('currentScene', unref(currentScene));
+      socket.emit('action', {
+        type: 'changeScene',
+        data: unref(currentScene),
+      });
+    }
+  }, 1500);
 }
 
 const banLaterEnterer = (members: UserInfoType[], user: UserInfoType) => {

src/components/chatRoom/dialog/base.vue

@@ -158,7 +158,7 @@
       .dialog_desc {
         font-size: 0.42rem;
         color: #fff;
-        padding: 0.56rem 0;
+        padding: 0.56rem 0.4rem;
         text-align: center;
       }
 

src/components/chatRoom/index.vue

@@ -202,9 +202,9 @@
     const { createRTCSocket } = useRtcSdk();
 
     (async () => {
+      await initialRoom();
       await createRTCSocket();
     })();
-    initialRoom();
     callback && callback();
   };
   console.log('initParams', rtcStore.userId);

src/components/chatRoom/sceneList.vue

@@ -57,16 +57,16 @@
     position: absolute;
   }
   .scene-list-bg {
-    height: 100%;
-    background: rgba(0, 0, 0, 0);
+    height: 100vh;
+    background: rgb(0, 0, 0, 0);
     border-radius: 10px 10px 0px 0px;
     bottom: 0;
     left: 0;
     right: 0;
-    display: flex;
-    flex-direction: column;
-    z-index: 99998;
-    position: fixed;
+    display: block;
+    z-index: 999;
+    top: -100vh;
+    position: absolute;
   }
 
   .header {

src/hooks/useRoom.ts

@@ -93,7 +93,7 @@ const shopAxios = axios.create({
 export const initialRoom = async () => {
   const res = await shopAxios.get('/takelook/roomInfo', { params: { roomId } });
   room.value = res.data.data;
-  console.log(room.value);
+  console.log('initialRoom', unref(room));
 };
 
 export const enterRoom = async () => {

src/hooks/useTRTC.ts

@@ -4,6 +4,7 @@ import TRTC from 'trtc-js-sdk';
 import type { LocalStream, Client, RemoteStream } from 'trtc-js-sdk';
 import { useRtcStore } from '/@/store/modules/rtc';
 import Dialog from '/@/components/basic/dialog';
+import { useI18n } from './useI18n';
 
 let localClient: Client;
 let localStream: LocalStream;
@@ -329,6 +330,7 @@ function handleStreamAdded(event) {
 async function handleStreamSubscribed(event) {
   const remoteStream = event.stream;
   const rtcStore = useRtcStore();
+  const { t } = useI18n();
   const remoteUserId = remoteStream.getUserId();
   const remoteId = remoteStream.getId();
   if (remoteUserId == rtcStore.userId) {
@@ -349,6 +351,17 @@ async function handleStreamSubscribed(event) {
       });
     } catch (error) {
       remoteStream.resume();
+      rtcStore.showBaseDialog(
+        {
+          title: t('base.tips'),
+          desc: '继续访问该页面需要获取您摄像头及麦克风的权限。',
+          okTxt: t('base.confirm'),
+          closeTxt: t('base.cancel'),
+        },
+        () => {
+          remoteStream.resume();
+        },
+      );
       // Dialog.confirm({
       //   showCloseIcon: false,
       //   okText: '确定',