feat: 重构p2pPlayer组件，优化视频加载状态显示，增强用户交互体验
This commit is contained in:
fanpeng
parent
ffe0cada1c
commit
750e689caa
@ -44,23 +44,126 @@
|
|||||||
/>
|
/>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</view>
|
</view>
|
||||||
<image
|
<view v-if="!isVideoLoaded">
|
||||||
v-if="!isVideoLoaded"
|
<image
|
||||||
src="https://oss-lock.xhjcn.ltd/mp/background_monitor.png"
|
src="https://oss-lock.xhjcn.ltd/mp/background_monitor.png"
|
||||||
class="w-full h-full absolute top-0 left-0"
|
class="w-full h-full absolute top-0 left-0"
|
||||||
></image>
|
></image>
|
||||||
|
<view
|
||||||
<cover-view
|
class="fixed bottom-[calc(48rpx+env(safe-area-inset-bottom))] w-full flex justify-center"
|
||||||
v-if="(isApp || buttonInfo) && isVideoLoaded"
|
>
|
||||||
:style="{
|
<up-loading-icon
|
||||||
top: isApp ? '60px' : buttonInfo.bottom + 15 + 'px'
|
size="70rpx"
|
||||||
}"
|
:vertical="true"
|
||||||
class="bg-[rgba(0,0,0,0.35)] rounded-full px-4 py-1.5 fixed right-32"
|
textSize="28rpx"
|
||||||
>
|
text="连接中"
|
||||||
<cover-view class="text-white text-xs" @click="showQualitySelector">
|
mode="circle"
|
||||||
{{ range[index].name }}
|
></up-loading-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<cover-view v-if="isVideoLoaded">
|
||||||
|
<cover-view
|
||||||
|
:style="{
|
||||||
|
top: isApp ? '60px' : buttonInfo.bottom + 15 + 'px'
|
||||||
|
}"
|
||||||
|
class="bg-[rgba(0,0,0,0.35)] rounded-full px-4 py-1.5 fixed right-32"
|
||||||
|
>
|
||||||
|
<cover-view class="text-white text-xs" @click="showQualitySelector">
|
||||||
|
{{ range[index].name }}
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view
|
||||||
|
class="fixed bottom-[calc(32rpx+env(safe-area-inset-bottom))] left-1/2 -translate-x-1/2 w-622"
|
||||||
|
>
|
||||||
|
<cover-view
|
||||||
|
class="bg-[rgba(0,0,0,0.3)] rounded-xl p-4 shadow-lg"
|
||||||
|
style="background-color: rgba(0, 0, 0, 0.3)"
|
||||||
|
>
|
||||||
|
<cover-view class="flex items-center justify-around mx-15">
|
||||||
|
<cover-view class="relative">
|
||||||
|
<cover-image
|
||||||
|
v-show="isMute"
|
||||||
|
src="https://oss-lock.xhjcn.ltd/mp/icon_mute.png"
|
||||||
|
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
||||||
|
></cover-image>
|
||||||
|
<cover-image
|
||||||
|
v-show="!isMute"
|
||||||
|
src="https://oss-lock.xhjcn.ltd/mp/icon_not_mute.png"
|
||||||
|
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
||||||
|
></cover-image>
|
||||||
|
<cover-view
|
||||||
|
@click="toggleMute"
|
||||||
|
class="absolute top-0 left-0 w-full h-full size-48 p-2"
|
||||||
|
></cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="relative">
|
||||||
|
<cover-image
|
||||||
|
src="https://oss-lock.xhjcn.ltd/mp/icon_screenshot.png"
|
||||||
|
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
||||||
|
></cover-image>
|
||||||
|
<cover-view
|
||||||
|
@click="handleScreenshot"
|
||||||
|
class="absolute top-0 left-0 w-full h-full"
|
||||||
|
></cover-view>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="flex items-center justify-between text-white mt-2 px-10">
|
||||||
|
<cover-view class="flex flex-col items-center">
|
||||||
|
<cover-view
|
||||||
|
class="bg-white w-80 h-80 rounded-full flex items-center justify-center relative"
|
||||||
|
>
|
||||||
|
<cover-image
|
||||||
|
:src="
|
||||||
|
isVoice
|
||||||
|
? 'https://oss-lock.xhjcn.ltd/mp/icon_microphone.png'
|
||||||
|
: 'https://oss-lock.xhjcn.ltd/mp/icon_no_microphone.png'
|
||||||
|
"
|
||||||
|
class="w-55 h-55"
|
||||||
|
></cover-image>
|
||||||
|
<cover-view
|
||||||
|
@click="toggleVoice"
|
||||||
|
class="absolute top-0 left-0 w-full h-full"
|
||||||
|
></cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">{{
|
||||||
|
isVoice ? '点击停止' : '点击说话'
|
||||||
|
}}</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="flex flex-col items-center">
|
||||||
|
<cover-view
|
||||||
|
class="bg-[#eb292b] w-80 h-80 rounded-full flex items-center justify-center relative"
|
||||||
|
>
|
||||||
|
<cover-image
|
||||||
|
src="https://oss-lock.xhjcn.ltd/mp/icon_hang_up.png"
|
||||||
|
class="w-60 h-60"
|
||||||
|
></cover-image>
|
||||||
|
<cover-view
|
||||||
|
@click="handleHangUp"
|
||||||
|
class="absolute top-0 left-0 w-full h-full"
|
||||||
|
></cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">挂断</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="flex flex-col items-center">
|
||||||
|
<cover-view
|
||||||
|
class="bg-[#63b8af] w-80 h-80 rounded-full flex items-center justify-center relative"
|
||||||
|
>
|
||||||
|
<cover-image
|
||||||
|
src="https://oss-lock.xhjcn.ltd/mp/icon_lock_white.png"
|
||||||
|
class="w-60 h-60"
|
||||||
|
></cover-image>
|
||||||
|
<cover-view
|
||||||
|
@click="handleLock"
|
||||||
|
class="absolute top-0 left-0 w-full h-full"
|
||||||
|
></cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">开锁</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
</cover-view>
|
</cover-view>
|
||||||
</cover-view>
|
</cover-view>
|
||||||
|
<view class="safe-area-bottom"></view>
|
||||||
|
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
<iot-p2p-voice
|
<iot-p2p-voice
|
||||||
@ -72,105 +175,6 @@
|
|||||||
>
|
>
|
||||||
</iot-p2p-voice>
|
</iot-p2p-voice>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
|
||||||
<cover-view
|
|
||||||
v-if="isVideoLoaded"
|
|
||||||
class="fixed bottom-[calc(32rpx+env(safe-area-inset-bottom))] bg-[rgba(0,0,0,0.3)] rounded-xl p-4 shadow-lg left-1/2 -translate-x-1/2 w-622"
|
|
||||||
>
|
|
||||||
<cover-view class="flex items-center justify-around mx-15">
|
|
||||||
<cover-view class="relative">
|
|
||||||
<cover-image
|
|
||||||
v-show="isMute"
|
|
||||||
src="https://oss-lock.xhjcn.ltd/mp/icon_mute.png"
|
|
||||||
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
|
||||||
></cover-image>
|
|
||||||
<cover-image
|
|
||||||
v-show="!isMute"
|
|
||||||
src="https://oss-lock.xhjcn.ltd/mp/icon_not_mute.png"
|
|
||||||
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
|
||||||
></cover-image>
|
|
||||||
<cover-view
|
|
||||||
@click="toggleMute"
|
|
||||||
class="absolute top-0 left-0 w-full h-full size-48 p-2"
|
|
||||||
></cover-view>
|
|
||||||
</cover-view>
|
|
||||||
<cover-view class="relative">
|
|
||||||
<cover-image
|
|
||||||
src="https://oss-lock.xhjcn.ltd/mp/icon_screenshot.png"
|
|
||||||
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
|
||||||
></cover-image>
|
|
||||||
<cover-view
|
|
||||||
@click="handleScreenshot"
|
|
||||||
class="absolute top-0 left-0 w-full h-full"
|
|
||||||
></cover-view>
|
|
||||||
</cover-view>
|
|
||||||
</cover-view>
|
|
||||||
<cover-view class="flex items-center justify-between text-white mt-2 px-10">
|
|
||||||
<cover-view class="flex flex-col items-center">
|
|
||||||
<cover-view
|
|
||||||
class="bg-white w-80 h-80 rounded-full flex items-center justify-center relative"
|
|
||||||
>
|
|
||||||
<cover-image
|
|
||||||
:src="
|
|
||||||
isVoice
|
|
||||||
? 'https://oss-lock.xhjcn.ltd/mp/icon_microphone.png'
|
|
||||||
: 'https://oss-lock.xhjcn.ltd/mp/icon_no_microphone.png'
|
|
||||||
"
|
|
||||||
class="w-55 h-55"
|
|
||||||
></cover-image>
|
|
||||||
<cover-view
|
|
||||||
@click="toggleVoice"
|
|
||||||
class="absolute top-0 left-0 w-full h-full"
|
|
||||||
></cover-view>
|
|
||||||
</cover-view>
|
|
||||||
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">{{
|
|
||||||
isVoice ? '点击停止' : '点击说话'
|
|
||||||
}}</cover-view>
|
|
||||||
</cover-view>
|
|
||||||
<cover-view class="flex flex-col items-center">
|
|
||||||
<cover-view
|
|
||||||
class="bg-[#eb292b] w-80 h-80 rounded-full flex items-center justify-center relative"
|
|
||||||
>
|
|
||||||
<cover-image
|
|
||||||
src="https://oss-lock.xhjcn.ltd/mp/icon_hang_up.png"
|
|
||||||
class="w-60 h-60"
|
|
||||||
></cover-image>
|
|
||||||
<cover-view
|
|
||||||
@click="handleHangUp"
|
|
||||||
class="absolute top-0 left-0 w-full h-full"
|
|
||||||
></cover-view>
|
|
||||||
</cover-view>
|
|
||||||
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">挂断</cover-view>
|
|
||||||
</cover-view>
|
|
||||||
<cover-view class="flex flex-col items-center">
|
|
||||||
<cover-view
|
|
||||||
class="bg-[#63b8af] w-80 h-80 rounded-full flex items-center justify-center relative"
|
|
||||||
>
|
|
||||||
<cover-image
|
|
||||||
src="https://oss-lock.xhjcn.ltd/mp/icon_lock_white.png"
|
|
||||||
class="w-60 h-60"
|
|
||||||
></cover-image>
|
|
||||||
<cover-view
|
|
||||||
@click="handleLock"
|
|
||||||
class="absolute top-0 left-0 w-full h-full"
|
|
||||||
></cover-view>
|
|
||||||
</cover-view>
|
|
||||||
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">开锁</cover-view>
|
|
||||||
</cover-view>
|
|
||||||
</cover-view>
|
|
||||||
</cover-view>
|
|
||||||
<view
|
|
||||||
v-if="!isVideoLoaded"
|
|
||||||
class="fixed bottom-[calc(48rpx+env(safe-area-inset-bottom))] w-full flex justify-center"
|
|
||||||
>
|
|
||||||
<up-loading-icon
|
|
||||||
size="70rpx"
|
|
||||||
:vertical="true"
|
|
||||||
textSize="28rpx"
|
|
||||||
text="连接中"
|
|
||||||
mode="circle"
|
|
||||||
></up-loading-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user