Merge remote-tracking branch 'origin/master'

src/store/contacts/index.ts

@@ -4,6 +4,7 @@ import { userStates } from 'AnyR/states/wsStates'
 const useContactsStore = defineStore('contacts', {
     state: (): ContactsState => {
         return {
+            fullScreen: false, //是否全屏
             showContactsWait: false, //是否等待接通
             chooseContactsItem: undefined, //当前选中的联系人
             allContactsList: [] //所有联系人
@@ -51,6 +52,15 @@ const useContactsStore = defineStore('contacts', {
         //获取全部联系人
         setUserList(info: ContactsItemDto[]) {
             this.allContactsList = info
+        },
+        //视频全屏
+        handleFullScreen() {
+            if (!this.fullScreen) {
+                document.documentElement.requestFullscreen()
+            } else {
+                document.exitFullscreen()
+            }
+            this.fullScreen = !this.fullScreen
         }
     },
 

src/store/contacts/types.ts

@@ -7,6 +7,7 @@ export interface ContactsItemDto {
     [propName: string]: any
 }
 export interface ContactsState {
+    fullScreen?: boolean
     showContactsWait: boolean
     chooseContactsItem?: ContactsItemDto
     allContactsList: ContactsItemDto[]

src/views/layout/index.vue

@@ -2,7 +2,7 @@
     <div class="h-full">
         <a-layout class="h-full">
             <!-- 头部区域 -->
-            <g-header></g-header>
+            <g-header v-if="!fullScreen"></g-header>
             <!-- 内容区域 -->
             <a-layout class="h-[calc(100%-60px)]">
                 <!-- 视频等待遮罩 -->
@@ -29,7 +29,7 @@ import { activedTheme } from '../../../project.ui.config'
 
 //显示通话等待
 const contactsStore = useContactsStore()
-const { showContactsWait } = storeToRefs(contactsStore)
+const { showContactsWait, fullScreen } = storeToRefs(contactsStore)
 //是否展示菜单
 const route = useRoute()
 const getShowMenu = computed(() => {

src/views/remote/videoCall/index.vue

 <template>
     <a-row class="h-full flex-nowrap" :gap="16">
-        <a-col :flex="3" class="h-full">
+        <a-col :flex="3" class="h-full" v-if="!fullScreen">
             <contacts-info :showGroup="false"></contacts-info>
         </a-col>
-        <a-col :flex="10" class="h-full">
+        <a-col :flex="10" class="h-full ml-4">
             <video-info></video-info>
         </a-col>
-        <a-col :flex="3" class="h-full">
+        <a-col :flex="3" class="h-full" v-if="!fullScreen">
             <video-chat></video-chat>
         </a-col>
     </a-row>
@@ -16,5 +16,11 @@
 import ContactsInfo from '../contacts/contactsInfo.vue'
 import VideoInfo from './videoInfo.vue'
 import VideoChat from './videoChat.vue'
+import useContactsStore from '@/store/contacts/'
+import { storeToRefs } from 'pinia'
+
+//视频全屏
+const contactsStore = useContactsStore()
+const { fullScreen } = storeToRefs(contactsStore)
 </script>
 <style lang="less" scoped></style>

src/views/remote/videoCall/videoInfo.vue

 <template>
-    <div class="g-block ml-4">
+    <div class="g-block">
         <div class="flex justify-end items-center mb-4 px-4">
             <a-space size="medium">
-                <div class="tool py-[9px] bg-fill-bg1">
+                <!-- <div class="tool py-[9px] bg-fill-bg1">
                     <global-icon icon="view-gallery" :size="12"></global-icon>
                     <span class="ml-1 color-text-2">视图</span>
-                </div>
-                <div class="tool py-[9px] bg-fill-bg1">
+                </div> -->
+                <div class="tool py-[9px] bg-fill-bg1" @click="handleFullScreen">
+                    <template v-if="fullScreen">
+                        <global-icon icon="fullscreen-exit" :size="16"></global-icon>
+                        <span class="ml-1 color-text-2">取消全屏</span>
+                    </template>
+                    <template v-else>
                         <global-icon icon="fullscreen" :size="16"></global-icon>
                         <span class="ml-1 color-text-2">全屏</span>
+                    </template>
                 </div>
             </a-space>
         </div>
@@ -23,7 +29,9 @@
 import VideoSlider from './videoSlider.vue'
 import VideoTools from './videoTools.vue'
 import { allOtherChattersIdSet } from 'AnyR/states/chatChannelStates'
-import { computed, ref, onMounted } from 'vue'
+import useContactsStore from '@/store/contacts/'
+import { storeToRefs } from 'pinia'
+import { useFullscreen } from '@vueuse/core'
 
 const inCenterUserVideoId = ref('')
 
@@ -36,12 +44,23 @@ function idChangedHere(id: any) {
 }
 
 const userVideoContainerSet = computed(function () {
-    const onTopUserSet = allOtherChattersIdSet.value.filter((a: any) => a !== inCenterUserVideoId.value);
+    const onTopUserSet = allOtherChattersIdSet.value.filter((a: any) => a !== inCenterUserVideoId.value)
     return {
         onTopUserSet,
         inCenter: inCenterUserVideoId.value
     }
 })
+
+//全屏
+const contactsStore = useContactsStore()
+const { isFullscreen } = useFullscreen()
+watch(isFullscreen, (value) => {
+    contactsStore.$patch({ fullScreen: value })
+})
+const { fullScreen } = storeToRefs(contactsStore)
+const handleFullScreen = () => {
+    contactsStore.handleFullScreen()
+}
 </script>
 <style lang="less" scoped>
 .tool {