需要添加直播接口
This commit is contained in:
cbb
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<view class="bottom-drawer-container" v-if="modelValue">
|
||||
<view class="drawer-overlay" @tap="close"></view>
|
||||
<view class="bottom-drawer" :class="{ 'drawer-open': modelValue }">
|
||||
<view class="drawer-header">
|
||||
<text style="color: rgba(213, 224, 242, 1); font-size: 32rpx;">选择连麦方式</text>
|
||||
<text
|
||||
style="font-size: 24rpx; font-weight: 400; color: rgba(124, 133, 166, 1); margin-top: 20rpx;">选择连麦方式，主播同意后接通</text>
|
||||
</view>
|
||||
|
||||
<view class="drawer-content">
|
||||
<view class="drawer-actions">
|
||||
<view style="height: 2rpx; color: rgba(79, 88, 107, 0.3); width: 750rpx; background: #fff; opacity: 0.2;">
|
||||
</view>
|
||||
<view style="display: flex; flex-direction: row; align-items: center; padding: 30rpx;"
|
||||
@click="handleSendCoGuest('video')">
|
||||
<image src="/static/images/mode.png" style="width: 36rpx; height: 36rpx;"></image>
|
||||
<text
|
||||
style="font-size: 32rpx; font-weight: 400; color: rgba(213, 224, 242, 1); padding-left: 10rpx;">申请视频连麦</text>
|
||||
</view>
|
||||
<view style="height: 2rpx; color: rgba(79, 88, 107, 0.3); width: 750rpx; background: #fff; opacity: 0.2;">
|
||||
</view>
|
||||
<view style="display: flex; flex-direction: row; align-items: center; padding: 30rpx;"
|
||||
@click="handleSendCoGuest('mic')">
|
||||
<image src="/static/images/live-comic.png" style="width: 36rpx; height: 36rpx;"></image>
|
||||
<text
|
||||
style="font-size: 32rpx; font-weight: 400; color: rgba(213, 224, 242, 1); padding-left: 10rpx;">申请语音连麦</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="divider-line-container">
|
||||
<view class="divider-line"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, onMounted, ref, onUnmounted } from 'vue';
|
||||
|
||||
import { useDeviceState } from "@/uni_modules/tuikit-atomic-x/state/DeviceState";
|
||||
import { useCoGuestState } from "@/uni_modules/tuikit-atomic-x/state/CoGuestState";
|
||||
import { useLoginState } from "@/uni_modules/tuikit-atomic-x/state/LoginState";
|
||||
const { loginUserInfo } = useLoginState()
|
||||
const currentCoGuestType = ref('')
|
||||
const {
|
||||
// 响应式状态 - 麦克风相关
|
||||
microphoneStatus, microphoneStatusReason, microphoneLastError, hasPublishAudioPermission, captureVolume,
|
||||
// 响应式状态 - 摄像头相关
|
||||
cameraStatus, cameraStatusReason, cameraLastError,
|
||||
// 响应式状态 - 其他设备相关
|
||||
currentAudioRoute, isScreenSharing, isFrontCamera, screenStatus, screenStatusReason,
|
||||
// 操作方法 - 麦克风相关，callback在params中
|
||||
openLocalMicrophone, closeLocalMicrophone, muteLocalAudio, unmuteLocalAudio, setAudioRoute,
|
||||
// 操作方法 - 摄像头相关，callback在params中
|
||||
openLocalCamera, closeLocalCamera, switchCamera, switchMirror, updateVideoQuality,
|
||||
// 操作方法 - 屏幕共享相关，callback在params中
|
||||
startScreenShare, stopScreenShare,
|
||||
} = useDeviceState(uni?.$liveID);
|
||||
const {
|
||||
// 响应式状态
|
||||
invitees, applicants,
|
||||
applyForSeat,
|
||||
addCoGuestHostListener, removeCoGuestHostListener,
|
||||
addCoGuestGuestListener, removeCoGuestGuestListener
|
||||
} = useCoGuestState(uni?.$liveID);
|
||||
|
||||
|
||||
const defaultAvatarURL = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
liveID: {
|
||||
type: String,
|
||||
},
|
||||
userID: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
seatIndex: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const close = () => {
|
||||
emit('update:modelValue', false);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
addCoGuestGuestListener(uni.$liveID, 'onGuestApplicationResponded', handleGuestApplicationResponded)
|
||||
addCoGuestGuestListener(uni.$liveID, 'onGuestApplicationNoResponse', handleGuestApplicationNoResponse)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
currentCoGuestType.value = ''
|
||||
removeCoGuestGuestListener(uni.$liveID, 'onGuestApplicationResponded', handleGuestApplicationResponded)
|
||||
removeCoGuestGuestListener(uni.$liveID, 'onGuestApplicationNoResponse', handleGuestApplicationNoResponse)
|
||||
})
|
||||
|
||||
|
||||
const handleGuestApplicationResponded = {
|
||||
callback: (event) => {
|
||||
const res = JSON.parse(event)
|
||||
if (res.isAccept) {
|
||||
uni.$localGuestStatus = 'CONNECTED'
|
||||
if (currentCoGuestType.value === 'video') {
|
||||
openLocalCamera({
|
||||
isFront: true,
|
||||
success: () => {
|
||||
console.log('openLocalCamera success.');
|
||||
},
|
||||
fail: (errCode, errMsg) => {
|
||||
console.error(`openLocalCamera fail errCode: ${errCode}, errMsg: ${errMsg}`);
|
||||
},
|
||||
});
|
||||
}
|
||||
openLocalMicrophone({
|
||||
success: () => {
|
||||
console.log('openLocalMicrophone success.');
|
||||
},
|
||||
fail: (errCode, errMsg) => {
|
||||
console.error(`openLocalMicrophone fail errCode: ${errCode}, errMsg: ${errMsg}`);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.$localGuestStatus = 'IDLE'
|
||||
uni.showToast({
|
||||
title: '上麦申请被拒绝',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleGuestApplicationNoResponse = {
|
||||
callback: (event) => {
|
||||
const res = JSON.parse(event)
|
||||
if (res.reason === 'TIMEOUT') {
|
||||
uni.$localGuestStatus = 'IDLE'
|
||||
uni.showToast({
|
||||
title: '上麦申请超时',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
const handleSendCoGuest = (type : string) => {
|
||||
console.log(`goGuest localStatus: ${uni.$localGuestStatus}`);
|
||||
currentCoGuestType.value = type
|
||||
if (uni.$localGuestStatus === 'USER_APPLYING') {
|
||||
console.log(`cancel userID: ${props?.userID}`);
|
||||
uni.showToast({
|
||||
title: '你已提交了连麦申请 \n请勿重复申请',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
position: 'center',
|
||||
});
|
||||
close();
|
||||
return
|
||||
}
|
||||
if (uni.$localGuestStatus === 'IDLE') {
|
||||
uni.showToast({
|
||||
title: '你提交了连麦申请 \n请等待主播同意',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
position: 'center',
|
||||
});
|
||||
applyForSeat({
|
||||
liveID: props.liveID,
|
||||
seatIndex: props.seatIndex, // 申请上麦传 -1, 随机分配麦位, xinlxin 反馈
|
||||
timeout: 30,
|
||||
});
|
||||
uni.$localGuestStatus = 'USER_APPLYING'
|
||||
close();
|
||||
return
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bottom-drawer-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.drawer-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bottom-drawer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(34, 38, 46, 1);
|
||||
border-top-left-radius: 32rpx;
|
||||
border-top-right-radius: 32rpx;
|
||||
transform: translateY(100%);
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease;
|
||||
flex-direction: column;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.drawer-open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 48rpx;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawer-header-title {
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.drawer-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* justify-content: space-around; */
|
||||
/* justify-content: flex-start; */
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 40rpx;
|
||||
flex: 1;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.action-btn-image-container {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-color: rgba(43, 44, 48, 1);
|
||||
margin-bottom: 12rpx;
|
||||
border-radius: 25rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn-image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.action-btn-content {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.divider-line-container {
|
||||
height: 68rpx;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
width: 268rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 200rpx;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
bottom: 16rpx;
|
||||
}
|
||||
|
||||
.camera-mic-setting {
|
||||
flex: 1;
|
||||
background-color: #1f1024;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user