129 lines
4.6 KiB
Vue
129 lines
4.6 KiB
Vue
<template>
|
||
<!-- 主叫等待对方接听的悬浮窗；1v1 私聊 320×540；群通话切大窗 720×560 -->
|
||
<div
|
||
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl overflow-hidden shadow-[0_12px_36px_rgba(0,0,0,0.35)] z-[1000] flex flex-col text-white bg-gradient-to-b from-[#2a2a2c] to-[#1a1a1c]"
|
||
:class="isGroup ? 'w-[720px] h-[560px]' : 'w-[320px] h-[540px]'"
|
||
>
|
||
<div class="flex relative flex-1 justify-center items-center">
|
||
<!-- 视频呼叫：自己摄像头预览铺底，对方头像悬浮顶部 -->
|
||
<video
|
||
v-if="isVideo && localStream"
|
||
ref="localVideoRef"
|
||
class="absolute inset-0 object-cover w-full h-full scale-x-[-1]"
|
||
autoplay
|
||
muted
|
||
playsinline
|
||
></video>
|
||
<div
|
||
class="flex relative z-[1] flex-col gap-4 items-center"
|
||
:class="{ 'self-start mt-16': isVideo }"
|
||
>
|
||
<UserAvatar
|
||
:url="peerAvatar"
|
||
:name="peerNickname"
|
||
:size="96"
|
||
radius="8px"
|
||
:clickable="false"
|
||
/>
|
||
<div class="text-[17px] font-medium">{{ peerNickname || '对方' }}</div>
|
||
<div class="text-13px text-white/60">等待对方接受邀请……</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部操作区：麦克风 / 取消 / (摄像头 | 扬声器) -->
|
||
<div class="flex flex-shrink-0 gap-4 justify-around items-center pt-4 px-5 pb-5">
|
||
<div
|
||
class="flex flex-col gap-2 items-center cursor-pointer select-none"
|
||
@click="$emit('toggle-mic')"
|
||
>
|
||
<!-- ant-design 系列里 mic 有 audio-muted-outlined 变体；speaker / camera 没有 muted 变体，off 态借 tabler:*-off 表达斜线 -->
|
||
<span
|
||
class="flex justify-center items-center w-12 h-12 rounded-full"
|
||
:class="micEnabled ? 'bg-white text-[#1a1a1c]' : 'bg-white/15 text-white'"
|
||
>
|
||
<Icon
|
||
:icon="micEnabled ? 'ant-design:audio-outlined' : 'ant-design:audio-muted-outlined'"
|
||
:size="22"
|
||
/>
|
||
</span>
|
||
<span class="text-xs text-white/70 whitespace-nowrap">
|
||
{{ micEnabled ? '麦克风已开' : '麦克风已关' }}
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="flex flex-col gap-2 items-center cursor-pointer select-none"
|
||
@click="$emit('cancel')"
|
||
>
|
||
<span
|
||
class="flex justify-center items-center w-12 h-12 text-white rounded-full bg-[#f04a4a]"
|
||
>
|
||
<Icon icon="ant-design:phone-outlined" :size="22" class="rotate-[135deg]" />
|
||
</span>
|
||
<span class="text-xs text-white/70 whitespace-nowrap">取消</span>
|
||
</div>
|
||
<div
|
||
v-if="isVideo"
|
||
class="flex flex-col gap-2 items-center cursor-pointer select-none"
|
||
@click="$emit('toggle-camera')"
|
||
>
|
||
<span
|
||
class="flex justify-center items-center w-12 h-12 rounded-full"
|
||
:class="cameraEnabled ? 'bg-white text-[#1a1a1c]' : 'bg-white/15 text-white'"
|
||
>
|
||
<Icon
|
||
:icon="cameraEnabled ? 'ant-design:video-camera-outlined' : 'tabler:video-off'"
|
||
:size="22"
|
||
/>
|
||
</span>
|
||
<span class="text-xs text-white/70 whitespace-nowrap">
|
||
{{ cameraEnabled ? '摄像头已开' : '摄像头已关' }}
|
||
</span>
|
||
</div>
|
||
<div
|
||
v-else
|
||
class="flex flex-col gap-2 items-center cursor-pointer select-none"
|
||
@click="$emit('toggle-speaker')"
|
||
>
|
||
<span
|
||
class="flex justify-center items-center w-12 h-12 rounded-full"
|
||
:class="speakerEnabled ? 'bg-white text-[#1a1a1c]' : 'bg-white/15 text-white'"
|
||
>
|
||
<Icon
|
||
:icon="speakerEnabled ? 'ant-design:sound-outlined' : 'tabler:volume-off'"
|
||
:size="22"
|
||
/>
|
||
</span>
|
||
<span class="text-xs text-white/70 whitespace-nowrap">
|
||
{{ speakerEnabled ? '扬声器已开' : '扬声器已关' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Icon from '@/components/Icon/src/Icon.vue'
|
||
import UserAvatar from '../user/UserAvatar.vue'
|
||
import { useMediaStreamElement } from '../../composables/useMediaStreamElement'
|
||
|
||
const props = defineProps<{
|
||
peerNickname?: string
|
||
peerAvatar?: string
|
||
isGroup?: boolean
|
||
isVideo: boolean
|
||
micEnabled: boolean
|
||
cameraEnabled: boolean
|
||
speakerEnabled: boolean
|
||
localStream?: MediaStream | null // 本地视频流；视频呼叫预览铺底
|
||
}>()
|
||
|
||
defineEmits<{
|
||
cancel: []
|
||
'toggle-mic': []
|
||
'toggle-camera': []
|
||
'toggle-speaker': []
|
||
}>()
|
||
|
||
const localVideoRef = useMediaStreamElement<HTMLVideoElement>(() => props.localStream)
|
||
</script>
|