chore:video dialog add mins

src/components/rtc-dialog/index.vue

@@ -381,96 +381,126 @@ function handleSwitchVideo() {
   }
 }
 
+
+function handleCloseForce() {
+  if (currentChatStatus === CHAT_STATUS.CHATING) {
+    handleAudioChatEnd()
+  }
+  else {
+    handleAudioChatCancel()
+  }
+}
+
+let mins = $ref(false)
+let isMove = $ref(false)
+let isDown = $ref(false)
+function handleChangeMins() {
+  console.log('click', isMove);
+  isDown = false
+  if (isMove) {
+    isMove = false;
+    return;
+  }
+  mins = !mins
+}
+
 </script>
 
 <template>
   <UseDraggable v-if="isOpen" storage-key="chat-audio" storage-type="session" :initial-value="{ x: 584, y: 207 }"
-    class="fixed w-375px h-670px bg-hex-191919 cursor-move z-4000">
-    <div class="w-full flex justify-end items-center p-2 text-light-50 h-36px">
-      <i:clarity:window-min-line class="cursor-pointer" />
-      <i:ic:outline-close class="cursor-pointer" @click="handleClose" />
+    class="fixed bg-transparent cursor-move z-4000">
+    <div v-show="mins">
+      <el-avatar :size="90" :src="otherInfo?.avatar" @mousedown="isDown = true" @mousemove="isMove = isDown"
+        @click="handleChangeMins"></el-avatar>
     </div>
-    <div class="h-634px relative">
-      <slot>
-
-        <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING" ref="LocalPlayerContainerRef"
-          class="absolute z-6 w-144px h-174px top-80px right-10px border border-dark-50"></div>
-        <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING" ref="RemotePlayerContainerRef"
-          class="absolute z-1 inset-0"></div>
-
-
-        <div class="absolute z-11 left-0 bottom-66px text-xl flex justify-around w-full text-light-50 ">
-          <div v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT"
-            class="bg-green-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
-            @click="handleAudioChatAccept">
-            <i:ic:baseline-phone />
+    <div class="w-375px h-670px bg-hex-191919" v-show="!mins">
+      <div class="w-full flex justify-end items-center p-2 text-light-50 h-36px">
+        <i:clarity:window-min-line class="cursor-pointer" @click="handleChangeMins" />
+        <i:ic:outline-close class="cursor-pointer" @click="handleCloseForce" />
+      </div>
+      <div class="h-634px relative">
+        <slot>
+
+          <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING" ref="LocalPlayerContainerRef"
+            class="absolute z-6 w-144px h-174px top-80px right-10px border border-dark-50"></div>
+          <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING" ref="RemotePlayerContainerRef"
+            class="absolute z-1 inset-0"></div>
+
+
+          <div class="absolute z-11 left-0 bottom-66px text-xl flex justify-around w-full text-light-50 ">
+            <div v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT"
+              class="bg-green-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
+              @click="handleAudioChatAccept">
+              <i:ic:baseline-phone />
+            </div>
+            <div v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT"
+              class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
+              @click="handleAudioChatDeny">
+              <i:mdi:phone-hangup />
+            </div>
+            <div v-show="currentChatStatus === CHAT_STATUS.CHATING"
+              class="bg-hex-efefef text-hex-272636 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
+              @click="handleSwitchAudio">
+              <i:ant-design:audio-outlined v-show="audioInUse" />
+              <i:ant-design:audio-muted-outlined v-show="!audioInUse" />
+            </div>
+            <div v-show="currentChatStatus === CHAT_STATUS.CHATING"
+              class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
+              @click="handleAudioChatEnd">
+              <i:ic:outline-close></i:ic:outline-close>
+            </div>
+            <div
+              v-show="currentChatStatus === CHAT_STATUS.WAITING_OTHERS_ACCEPT || currentChatStatus === CHAT_STATUS.WAITING_BUSY"
+              class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
+              @click="handleAudioChatCancel">
+              <i:ic:outline-close></i:ic:outline-close>
+            </div>
+            <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING"
+              class="bg-hex-efefef text-hex-272636 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
+              @click="handleSwitchVideo">
+              <i:material-symbols:video-camera-back-rounded v-show="videoInUse" />
+              <i:material-symbols:video-camera-front-off-rounded v-show="!videoInUse" />
+            </div>
           </div>
-          <div v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT"
-            class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
-            @click="handleAudioChatDeny">
-            <i:mdi:phone-hangup />
+          <!--  -->
+          <div class="pt-24 flex_center flex-col text-light-50 space-y-4">
+            <!-- <div>{{ CHAT_STATUS[currentChatStatus] }}</div> -->
+            <el-avatar v-show="mode === 'audio' || (mode === 'video' && currentChatStatus !== CHAT_STATUS.CHATING)"
+              :size="158" :src="otherInfo?.avatar"></el-avatar>
+            <div v-show="mode === 'audio' || (mode === 'video' && currentChatStatus !== CHAT_STATUS.CHATING)">{{
+              otherInfo?.realname
+            }}</div>
+            <!-- <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"> -->
+            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
+              v-show="currentChatStatus === CHAT_STATUS.WAITING_OTHERS_ACCEPT">
+              <div>正在等待对方接受邀请</div>
+              <i:line-md:loading-alt-loop class="text-xl" />
+            </div>
+            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
+              v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT">
+              <div>邀请你语音通话...</div>
+            </div>
+            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
+              v-show="currentChatStatus === CHAT_STATUS.WAITING_BUSY">
+              <div class="text-red-500">对方忙线中</div>
+              <div class="text-red-500">请稍后再试</div>
+              <i:line-md:loading-alt-loop class="text-xl" />
+            </div>
+            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
+              v-show="currentChatStatus === CHAT_STATUS.WAITING_ACCEPT">
+              <div>接通中...</div>
+            </div>
+            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
+              v-show="mode === 'audio' && currentChatStatus === CHAT_STATUS.CHATING">
+              <div>正在通话中</div>
+              <div>{{ formatOffsetSec(offsetTime) }}</div>
+            </div>
+            <!-- </div> -->
           </div>
-          <div v-show="currentChatStatus === CHAT_STATUS.CHATING"
-            class="bg-hex-efefef text-hex-272636 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
-            @click="handleSwitchAudio">
-            <i:ant-design:audio-outlined v-show="audioInUse" />
-            <i:ant-design:audio-muted-outlined v-show="!audioInUse" />
-          </div>
-          <div v-show="currentChatStatus === CHAT_STATUS.CHATING"
-            class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
-            @click="handleAudioChatEnd">
-            <i:ic:outline-close></i:ic:outline-close>
-          </div>
-          <div
-            v-show="currentChatStatus === CHAT_STATUS.WAITING_OTHERS_ACCEPT || currentChatStatus === CHAT_STATUS.WAITING_BUSY"
-            class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
-            @click="handleAudioChatCancel">
-            <i:ic:outline-close></i:ic:outline-close>
-          </div>
-          <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING"
-            class="bg-hex-efefef text-hex-272636 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
-            @click="handleSwitchVideo">
-            <i:material-symbols:video-camera-back-rounded v-show="videoInUse" />
-            <i:material-symbols:video-camera-front-off-rounded v-show="!videoInUse" />
-          </div>
-        </div>
-        <!--  -->
-        <div class="pt-24 flex_center flex-col text-light-50 space-y-4">
-          <!-- <div>{{ CHAT_STATUS[currentChatStatus] }}</div> -->
-          <el-avatar v-show="mode === 'audio' || (mode === 'video' && currentChatStatus !== CHAT_STATUS.CHATING)"
-            :size="158" :src="otherInfo?.avatar"></el-avatar>
-          <div v-show="mode === 'audio' || (mode === 'video' && currentChatStatus !== CHAT_STATUS.CHATING)">{{
-            otherInfo?.realname
-          }}</div>
-          <!-- <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"> -->
-          <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
-            v-show="currentChatStatus === CHAT_STATUS.WAITING_OTHERS_ACCEPT">
-            <div>正在等待对方接受邀请</div>
-            <i:line-md:loading-alt-loop class="text-xl" />
-          </div>
-          <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
-            v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT">
-            <div>邀请你语音通话...</div>
-          </div>
-          <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
-            v-show="currentChatStatus === CHAT_STATUS.WAITING_BUSY">
-            <div class="text-red-500">对方忙线中</div>
-            <div class="text-red-500">请稍后再试</div>
-            <i:line-md:loading-alt-loop class="text-xl" />
-          </div>
-          <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
-            v-show="currentChatStatus === CHAT_STATUS.WAITING_ACCEPT">
-            <div>接通中...</div>
-          </div>
-          <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
-            v-show="mode === 'audio' && currentChatStatus === CHAT_STATUS.CHATING">
-            <div>正在通话中</div>
-            <div>{{ formatOffsetSec(offsetTime) }}</div>
-          </div>
-          <!-- </div> -->
-        </div>
-      </slot>
+        </slot>
+      </div>
     </div>
+
   </UseDraggable>
 </template>
 

src/utils/time.ts

@@ -17,7 +17,6 @@ export function formatOffsetSec(s: number):string {
   const h = Math.floor(s / 3600)
   const m = Math.floor(s % 3600 / 60)
   const ss = Math.floor(s % 3600 % 60)
-  console.log(`${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${ss < 10 ? '0' + ss : ss}`);
   return `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${ss < 10 ? '0' + ss : ss}`
 }