Merge branch 'master' of 122.112.146.86:qlintonger/standalone-anyremote

src/views/remote/videoCall/videoTools.vue

 <template>
     <div>
-        <div class="relative mb-4 flex-auto" :id="`RemoteVideo${ps.id}`">
+        <div :id="`RemoteVideo${ps.id}`" class="relative mb-4 flex-auto" @mousedown.capture="handleBlinkingStart">
+            <div class="red-ball" v-for="q in chatChannelState.blinkSpotSet" :key="q.id" @animationend="q => centerEnded(q)"></div>
             <div class="absolute flex justify-between items-center p-1 t-0 l-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">
+                <div v-if="userDataForThis.userCallGroup == 1"
+                     class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
+                    {{ userDataForThis.name }}
+                </div>
+                <div v-else
+                     class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">
                     {{ userDataForThis.name }}
                 </div>
-                <div class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))" v-else>{{ userDataForThis.name }}</div>
                 <div class="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
-                    <global-icon icon="mic" :size="12" color="rgb(var(--success-6))"></global-icon>
+                    <global-icon :size="12" color="rgb(var(--success-6))" icon="mic"></global-icon>
                 </div>
             </div>
             <!-- <div class="absolute top-0 left-0 right-0 bottom-0 flex-center flex-col">
@@ -19,19 +24,19 @@
         </div>
         <div class="flex justify-center w-full">
             <div v-if="!isUserHost" class="w-[120px] h-[72px] item" @click="hangupCall">
-                <global-icon icon="phone-hangup" :size="21" color="rgb(var(--danger-5))"></global-icon>
+                <global-icon :size="21" color="rgb(var(--danger-5))" icon="phone-hangup"></global-icon>
                 <span class="mt-1" style="color: rgb(var(--danger-5))">挂断</span>
             </div>
             <div v-else class="w-[120px] h-[72px] item" @click="endMeeting">
-                <global-icon icon="phone-hangup" :size="21" color="rgb(var(--danger-5))"></global-icon>
+                <global-icon :size="21" color="rgb(var(--danger-5))" icon="phone-hangup"></global-icon>
                 <span class="mt-1" style="color: rgb(var(--danger-5))">结束会议</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleMute">
-                <global-icon icon="mic" :size="21"></global-icon>
+                <global-icon :size="21" icon="mic"></global-icon>
                 <span class="mt-1 color-text-2">{{ isCurrentUserMuted ? '取消静音' : '静音' }}</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleVoiceChatOnly">
-                <global-icon icon="swap" :size="21"></global-icon>
+                <global-icon :size="21" icon="swap"></global-icon>
                 <span class="mt-1 color-text-2">{{ isVoiceChatOnly ? '视频模式' : '语音模式' }}</span>
             </div>
             <!-- <div class="w-[120px] h-[72px] item">
@@ -39,41 +44,59 @@
                 <span class="mt-1 color-text-2">截图</span>
             </div> -->
             <div class="w-[120px] h-[72px] item" @click="toggleScreenShare">
-                <global-icon icon="shared-screen" :size="21"></global-icon>
+                <global-icon :size="21" icon="shared-screen"></global-icon>
                 <span class="mt-1 color-text-2">
-                    {{ screenShareMetaData.byOther ? '他人正在共享' : screenShareMetaData.byCurrentUser ? '取消屏幕共享' : '屏幕共享' }}
+                    {{ screenShareMetaData.byOther ? '他人正在共享' : screenShareMetaData.byCurrentUser ? '取消屏幕共享' : '屏幕共享'
+                    }}
                 </span>
             </div>
             <div class="w-[120px] h-[72px] item">
-                <global-icon icon="record" :size="21"></global-icon>
+                <global-icon :size="21" icon="record"></global-icon>
                 <span class="mt-1 color-text-2">开始录制</span>
             </div>
-            <div class="w-[120px] h-[72px] item" v-if="isUserHost" @click="allMute">
-                <global-icon icon="mic-off" :size="21"></global-icon>
+            <div v-if="isUserHost" class="w-[120px] h-[72px] item" @click="allMute">
+                <global-icon :size="21" icon="mic-off"></global-icon>
                 <span class="mt-1 color-text-2">全体静音</span>
             </div>
-            <div class="w-[120px] h-[72px] item">
-                <global-icon icon="focus" :size="21"></global-icon>
-                <span class="mt-1 color-text-2">动态标注</span>
+            <div class="w-[120px] h-[72px] item" @click="blinkStart = !blinkStart">
+                <global-icon :size="21" icon="focus"></global-icon>
+                <span class="mt-1 color-text-2">{{!blinkStart ? '动态标注' : '取消动态标注'}}</span>
             </div>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useAnyR } from 'AnyR/index'
-import { isUserHost } from 'AnyR/states/chatChannelStates'
-import { ref } from 'vue'
-import { isCurrentUserMuted } from 'AnyR/states/chatChannelStates'
-import { screenShareMetaData } from 'AnyR/states/chatChannelStates'
-import { onMounted, onUpdated } from 'vue'
+import { isCurrentUserMuted, isUserHost, screenShareMetaData } from 'AnyR/states/chatChannelStates'
+import { onMounted, onUpdated, ref } from 'vue'
 import { userStates } from 'AnyR/states/wsStates'
+import {chatChannelState} from 'AnyR/states/chatChannelStates'
 
 const ps = defineProps<{
     id: any
 }>()
 
-const userDataForThis = computed(function () {
+const blinkStart = ref(false)
+
+function centerEnded(q: any) {
+    chatChannelState.value.blinkSpotSet = chatChannelState.value.blinkSpotSet.filter(a=>a.id !== q.id);
+}
+
+function handleBlinkingStart($e: PointerEvent) {
+    if (!blinkStart.value) return;
+    if (chatChannelState.value.blinkSpotSet.find(a=>a.id === userStates.value.currentUserId)) return;
+    const {offsetX, offsetY, target} = $e;
+    const {clientWidth, clientHeight} = target as HTMLElement;
+    const xPos = offsetX / clientWidth;
+    const yPos = offsetY / clientHeight;
+    const id = userStates.value.currentUserId;
+    AnyR?.agora.sendBlinkSpot({
+        id, xPos, yPos
+    })
+}
+
+const userDataForThis = computed(function() {
     const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id)
     return {
         name: userNow?.fromName || '--',
@@ -81,11 +104,11 @@ const userDataForThis = computed(function () {
     }
 })
 
-onMounted(function () {
+onMounted(function() {
     AnyR?.agora.forceReplay(ps.id)
 })
 
-onUpdated(function () {
+onUpdated(function() {
     AnyR?.agora.forceReplay(ps.id)
 })
 
@@ -103,7 +126,8 @@ function toggleScreenShare() {
         AnyR?.agora.screenShareHandle()
     }
     AnyR?.agora.screenShareHandle()
-    AnyR?.agora.agoraApp.toggleScreenShare(!screenShareMetaData.value.byCurrentUser, endHandle, endHandle, () => {})
+    AnyR?.agora.agoraApp.toggleScreenShare(!screenShareMetaData.value.byCurrentUser, endHandle, endHandle, () => {
+    })
 }
 
 function allMute() {
@@ -125,9 +149,29 @@ function hangupCall() {
 </script>
 <style lang="less" scoped>
 .item {
-    @apply flex-center flex-col rounded cursor-pointer;
+@apply flex-center flex-col rounded cursor-pointer;
+
     &:hover {
         background-color: var(--color-fill-2);
     }
 }
+.red-ball {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: red;
+    animation: blink 1s ease-in-out 3;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
 </style>