Browse Source

fix:(解决同屏带看非leader角色引起)

gemercheung 2 years ago
parent
commit
ca5cb724d5
1 changed files with 43 additions and 37 deletions
  1. 43 37
      src/components/RTC/PageRtcLive.vue

+ 43 - 37
src/components/RTC/PageRtcLive.vue

@@ -35,7 +35,6 @@
         class="saySomething"
         @click="onFocus"
       >
-
         <!-- <i class="speakIcon"
            :class="{'dis':!user_info.IsWords}"></i> -->
         <span v-if="user_info.IsWords">说点什么~</span>
@@ -91,8 +90,7 @@
             videoDeviceId ? '' : 'disabled',
           ]"
         ></div> -->
-        
-        
+
         <div
           v-if="user_info.Role == 'leader' && sceneList.length > 1"
           @click="showScenes = !showScenes"
@@ -140,7 +138,8 @@
               <div class="userMsg">
                 <div class="avatar">
                   <img
-                    :src="user_info.Avatar ||
+                    :src="
+                      user_info.Avatar ||
                       require('@/assets/images/rtcLive/avatar_small@2x.png')
                     "
                     alt=""
@@ -170,7 +169,8 @@
               <div class="userMsg">
                 <div class="avatar">
                   <img
-                    :src="user_info.Avatar ||
+                    :src="
+                      user_info.Avatar ||
                       require('@/assets/images/rtcLive/avatar_small@2x.png')
                     "
                     alt=""
@@ -209,9 +209,9 @@
     </div>
   </teleport>
 
-  <SceneList 
-    v-if="showScenes && sceneList.length > 1" 
-    @close="showScenes = false" 
+  <SceneList
+    v-if="showScenes && sceneList.length > 1"
+    @close="showScenes = false"
     @changeScene="changeScene"
   />
 </template>
@@ -228,8 +228,13 @@ import {
   nextTick,
   watchEffect,
 } from "vue";
-import SceneList from '../Controls/Panel/scene-list.vue'
-import { enterRoom, changeScene as changeSceneRaw, currentScene, sceneList } from '@/store/room'
+import SceneList from "../Controls/Panel/scene-list.vue";
+import {
+  enterRoom,
+  changeScene as changeSceneRaw,
+  currentScene,
+  sceneList,
+} from "@/store/room";
 import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import { Dialog } from "@/global_components/";
@@ -241,12 +246,11 @@ import Trtccom from "./Trtccom.vue";
 import browser from "@/utils/browser";
 import wxShare from "@/utils/wxshare";
 import defaultAvatar from "@/assets/images/avatar_default.png";
-import { isMiniApp } from '@/env'
-import { initialMini } from './mini-platform'
-import Icon from '@/components/icon/index.vue'
+import { isMiniApp } from "@/env";
+import { initialMini } from "./mini-platform";
+import Icon from "@/components/icon/index.vue";
 import { useMusicPlayer } from "@/utils/sound";
 
-
 const emit = defineEmits(["openDialog", "closeSocket"]);
 
 const store = useStore();
@@ -317,13 +321,13 @@ const audioDeviceId = computed(() => store.getters["rtc/audioDeviceId"]);
 
 const disabledAudio = computed(() => {
   if (isMiniApp) {
-    return false
+    return false;
   } else {
-    return audioDeviceId.value
+    return audioDeviceId.value;
   }
-})
+});
 
-watchEffect(() => console.error(disabledAudio.value))
+watchEffect(() => console.error(disabledAudio.value));
 
 const connectStatus = ref(0);
 const isBrushes = ref(false);
@@ -374,7 +378,7 @@ const tags = computed(() => {
 
 const onClickShare = () => {
   if (isMiniApp) {
-    mini.enterShare()
+    mini.enterShare();
   } else {
     openDialog("dialogShare", shareLink.value);
   }
@@ -473,7 +477,7 @@ const setUserJoin = async (res) => {
   // self.user_info = res.user;
   user_list.value = res.members.reduce(function (tempArr, item) {
     if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
-      console.log(item)
+      console.log(item);
       tempArr.push(item);
     }
     return tempArr;
@@ -494,15 +498,16 @@ const setUserJoin = async (res) => {
   };
   if (role.value == "leader") {
     chatList.value.push(data);
-    socket.value.emit('action', { type: 'changeScene', data: currentScene.value })
+    socket.value.emit("action", {
+      type: "changeScene",
+      data: currentScene.value,
+    });
   }
 
   await nextTick();
   try {
     chatAutoScroll();
   } catch (error) {}
-
-
 };
 const changeFile = (e) => {
   let file = e.target.files[0];
@@ -724,9 +729,9 @@ const startFollow = (app) => {
   const leaderInfo = ref({});
   // 加入房間成功
   socket.value.on("join", (data) => {
-    console.log(data)
+    console.log(data);
     // showAvatar.value = true;
-    enterRoom()
+    enterRoom();
     let meblist = data.members.reduce(function (tempArr, item) {
       if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
         tempArr.push(item);
@@ -760,7 +765,6 @@ const startFollow = (app) => {
 
     isJoined.value = true;
 
-    
     setTimeout(() => {
       if (!isMiniApp) {
         isRunRTC.value = true;
@@ -932,21 +936,24 @@ const startFollow = (app) => {
           location.replace(url);
         }
       }
-    } else if (data.type === 'changeScene') {
-      changeSceneRaw(data.data)
+    } else if (data.type === "changeScene") {
+      changeSceneRaw(data.data);
     }
   });
 
   // 同屏帶看
   socket.value.on("sync", (data) => {
-    if (role.value == "customer") {
+    console.log("同屏帶看", role.value);
+    // ['follower','customer']
+    if (role.value !== "leader") {
       app.Connect.follow.receive(data);
     }
   });
 
   // 畫筆
   socket.value.on("paint", (data) => {
-    if (role.value == "customer") {
+    // ['follower','customer']
+    if (role.value !== "leader") {
       app.Connect.paint.receive(data);
     }
   });
@@ -962,7 +969,6 @@ let onfollowPaint = async (data) => {
   socket.value.emit("paint", data);
 };
 
-
 onMounted(async () => {
   let app = await getApp();
   startFollow(app);
@@ -976,17 +982,17 @@ onUnmounted(async () => {
   app.Connect.follow.off("data", onfollowData);
 });
 
-const mini = isMiniApp && initialMini(audioMuted)
-const showScenes = ref(false)
+const mini = isMiniApp && initialMini(audioMuted);
+const showScenes = ref(false);
 const changeScene = (scene) => {
   socket.value.emit("action", {
     type: "changeScene",
     data: scene,
   });
   setTimeout(() => {
-    changeSceneRaw(scene)
-  }, 500)
-}
+    changeSceneRaw(scene);
+  }, 500);
+};
 </script>
 
 <style scoped lang="scss">
@@ -1545,7 +1551,7 @@ const changeScene = (scene) => {
 }
 
 .disable {
-  opacity: .5;
+  opacity: 0.5;
   pointer-events: none;
 }
 </style>