feat: 重构p2pPlayer组件，优化视频加载状态显示，增强用户交互体验
This commit is contained in:
fanpeng
parent
ffe0cada1c
commit
750e689caa
@ -44,23 +44,126 @@
|
||||
/>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<image
|
||||
v-if="!isVideoLoaded"
|
||||
src="https://oss-lock.xhjcn.ltd/mp/background_monitor.png"
|
||||
class="w-full h-full absolute top-0 left-0"
|
||||
></image>
|
||||
|
||||
<cover-view
|
||||
v-if="(isApp || buttonInfo) && isVideoLoaded"
|
||||
: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 }}
|
||||
<view v-if="!isVideoLoaded">
|
||||
<image
|
||||
src="https://oss-lock.xhjcn.ltd/mp/background_monitor.png"
|
||||
class="w-full h-full absolute top-0 left-0"
|
||||
></image>
|
||||
<view
|
||||
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>
|
||||
<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>
|
||||
<view class="safe-area-bottom"></view>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<iot-p2p-voice
|
||||
@ -72,105 +175,6 @@
|
||||
>
|
||||
</iot-p2p-voice>
|
||||
<!-- #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>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user