多人通话中完成+2

anyremote/agora/index.js

@@ -41,7 +41,7 @@ export class Agora {
         console.log('开始订阅远端用户', user, mediaType, foundUser);
         const remoteUserIdInThisUser = this.remotePlayerPrefix + user.uid;
         if (mediaType === 'video') {
-            user?.videoTrack?.play(remoteUserIdInThisUser, {fit: 'contain', mirror: 'false'});
+            user?.videoTrack?.play(remoteUserIdInThisUser, {fit: 'contain', mirror: 'true'});
         }
         if (mediaType === 'audio') {
             user?.audioTrack?.play();
@@ -171,7 +171,7 @@ export class Agora {
     async forceReplay(id, vid) {
         const foundUser = this.AgoraClient.remoteUsers.find(i => i.uid.toString() === id.toString());
         console.log('强制播放用户', foundUser)
-        await foundUser?.videoTrack?.play(vid, {fit: 'contain', mirror: 'false'});
+        await foundUser?.videoTrack?.play(vid, {fit: 'contain', mirror: 'true'});
     }
 
     async switchDeviceForCamera(id) {

anyremote/agoraHandle.js

@@ -634,7 +634,7 @@ export class AgoraHandle {
     async archiveMark(fileData, type = 'video') {
         this.AnyRemote.sendWSFromCall(
             '-2',
-            type === 'video' ? 'ArchiveImage' : "StoreScreenShareMark",
+            'ChatImage',
             {
                 msgId: generateMessageId(),
                 tip: {

anyremote/widgets/ImageEditor/components/drawColorSelection.vue

@@ -4,8 +4,8 @@
       <i class="iconfont icon-color" :style="{color: styledColor}"></i>
     </template>
     <div class="color-block-container">
-      <div v-for="(item, index) in colorBlock" :key="index" class="color-block"
-           :style="{backgroundColor: item}" @click="confirmColorPick(index)"></div>
+      <div v-for="(bg, index) in colorBlock" :key="index" class="color-block"
+           :style="{backgroundColor: bg}" @click="confirmColorPick(index)"></div>
     </div>
   </n-popover>
 </template>

anyremote/widgets/ImageEditor/imageEditor.vue

@@ -402,7 +402,7 @@ nextTick(function() {
 i.iconfont.activated {
   color: #00AFF0;
 }
-.operation-branch i.iconfont::before {
+.operation-branch i.iconfont:not(.icon-color)::before {
   color: #ffffff !important;
 }
 </style>

src/views/remote/videoCall/videoItem.vue

 <template>
-    <div :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`" class="relative h-full">
+    <div :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`" class="relative h-full video-cont">
         <div class="absolute flex justify-between items-center p-1 top-0 left-0 w-full z-10">
             <div class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary" v-if="userDataForThis.userCallGroup == 1">
                 {{ userDataForThis.name }}
@@ -12,7 +12,8 @@
                     <global-icon :size="12" icon="writing"></global-icon>
                 </div>
                 <div class="rounded-full size-6 flex-center cursor-pointer" style="background-color: var(--color-border-1)">
-                    <global-icon :size="12" color="rgb(var(--success-6))" icon="mic"></global-icon>
+                    <global-icon v-if="!isThisUserMuted" :size="12" color="rgb(var(--success-6))" :icon="'mic'"></global-icon>
+                    <global-icon :size="12" v-else :icon="'mic-off'"></global-icon>
                 </div>
             </a-space>
         </div>
@@ -32,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { isUserHost } from 'AnyR/states/chatChannelStates'
+import { chatChannelState, isUserHost } from 'AnyR/states/chatChannelStates'
 import { userStates } from 'AnyR/states/wsStates'
 import { computed, onMounted, onUpdated } from 'vue'
 import { useAnyR } from 'AnyR/index'
@@ -42,6 +43,10 @@ const ps = defineProps({
     id: String
 })
 
+const isThisUserMuted = computed(function() {
+    return chatChannelState.value.mutedUserIdSet.includes(ps.id) || chatChannelState.value.mutedUserIdSet.includes(userStates.value.currentUserId)
+})
+
 const userDataForThis = computed(function () {
     if (ps.isSelf) {
         return {
@@ -76,4 +81,8 @@ onUpdated(function () {
     }
 })
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+:deep(.video-cont video) {
+    transform: none !important;
+}
+</style>

src/views/remote/videoCall/videoTools.vue

@@ -34,7 +34,8 @@
                     {{ userDataForThis.name }}
                 </div>
                 <div class="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
-                    <global-icon :size="12" color="rgb(var(--success-6))" icon="mic"></global-icon>
+                    <global-icon v-if="!isCenterUserMuted" :size="12" color="rgb(var(--success-6))" :icon="'mic'"></global-icon>
+                    <global-icon v-else :size="12" :icon="'mic-off'"></global-icon>
                 </div>
             </div>
             <!-- <div class="absolute top-0 left-0 right-0 bottom-0 flex-center flex-col">
@@ -101,6 +102,10 @@ const ps = defineProps<{
     id: any
 }>()
 
+const isCenterUserMuted = computed(function() {
+    return chatChannelState.value.mutedUserIdSet.includes(ps.id)
+})
+
 const firstVideoToBeAttached = ref('[data-self="remote-main"] video')
 const recordListener = function (records: any) {
     AnyR?.agora.continueMark(records)
@@ -290,4 +295,7 @@ function hangupCall() {
         opacity: 1;
     }
 }
+:deep([data-self='remote-main'] video) {
+    transform: none !important;
+}
 </style>