marking
/
WGShare.Client.Wx
19
0
Fork 0
Code Pull Requests Actions Releases 2 Activity

优化

This commit is contained in:
yj 2024-11-22 14:32:04 +08:00
parent 6d78bd48cf
commit d10b979bea
5 changed files with 157 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/icon10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

105
pages/meeting/index.scss
View File

@ -32,9 +32,39 @@
flex-shrink: 0;
}
&-audio {
flex-shrink: 0;
position: relative;
width: 16rpx;
height: 16rpx;
&-image {
width: 100%;
height: 100%;
}
&-stateImage {
position: absolute;
width: 100%;
height: 0%;
bottom: 0;
left: 0;
overflow: hidden;
&-image {
position: absolute;
bottom: 0;
left: 0;
width: 16rpx;
height: 16rpx;
}
}
}
&-text {
color: white;
font-size: 12rpx;
margin-left: 2rpx;
}
}
}
@ -195,9 +225,33 @@
width: 60rpx;
box-sizing: border-box;
&-image {
&-view {
position: relative;
width: 22rpx;
height: 22rpx;
&-image {
width: 100%;
height: 100%;
}
&-audioImage {
width: 100%;
height: 0%;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
overflow: hidden;
&-image {
position: absolute;
bottom: 0;
left: 0;
width: 22rpx;
height: 22rpx;
}
}
}
&-text {
@ -235,36 +289,42 @@
&-view {
overflow-y: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4rpx 10rpx;
box-sizing: border-box;
flex-grow: 1;
&-avatar {
&-view {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: space-between;
margin-bottom: 10rpx;
&-text {
&-avatar {
display: flex;
align-items: center;
flex-grow: 1;
color: white;
font-size: 14rpx;
margin: 0 2rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 0;
&-text {
flex-grow: 1;
color: white;
font-size: 14rpx;
margin: 0 2rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 0;
}
}
}
&-image {
display: flex;
align-items: center;
flex-shrink: 0;
&-image {
display: flex;
align-items: center;
flex-shrink: 0;
&-icon {
width: 16rpx;
height: 16rpx;
&-icon {
width: 16rpx;
height: 16rpx;
}
}
}
}
@ -291,6 +351,7 @@
flex-grow: 1;
overflow-y: auto;
padding: 0 10rpx;
box-sizing: border-box;
&-view {
color: white;

42
pages/meeting/index.ts
View File

@ -69,6 +69,8 @@ Page({
channelId: '',
roomInfo: '',
roomUserList: [],
audioList: [],
userVolume: 0,
chatList: [],
isAdmin: 0,
currentUid: '',
@ -96,11 +98,17 @@ Page({
this.setData({
isAdmin: roomUserList.filter((item: any) => (role.ID.includes(item.roleId) || item.isRoomManager) && item.isRoom).length,
userNumer: roomUserList.filter((item: any) => item.isRoom).length,
audioList: roomUserList.map(item => {
return {
volume: 0,
uid: item.uid,
}
})
})
},
'footerList.**': function (footerList) {
const footerListTemplate = [...footerList];
footerListTemplate[3].show = !footerListTemplate[6].active
footerListTemplate[3].show = footerListTemplate[2].active
this.setData({
footerList: footerListTemplate
})
@ -172,6 +180,7 @@ Page({
this.setData({
chatList: [...this.data.chatList, item]
})
this.scrollToBottom()
break;
// 扩展操作
case 'Operation':
@ -557,6 +566,7 @@ Page({
chatPopupVisible: true,
noViewChatList: 0
})
this.scrollToBottom()
break;
case '成员':
this.setData({
@ -626,10 +636,24 @@ Page({
}
},
playerStateChange(e) {
// console.log(e);
},
recorderStateChange(e) {
// console.log(e);
},
playerAudioVolumenotify(e) {
const { uid } = e.currentTarget.dataset;
const { volume } = e.detail;
const audioListTemp = [...this.data.audioList]
const percentage = (volume / 100) * 100
const item = audioListTemp.find(row => row.uid == uid)
if (item) {
item.volume = Math.floor(percentage) + '%'
}
this.setData({
audioList: audioListTemp,
userVolume: audioListTemp.find(row => row.uid == this.data.user.uid).volume
})
},
clickChangeVideo(e) {
const { item } = e.currentTarget.dataset;
@ -718,6 +742,7 @@ Page({
}],
messageStr: ''
})
this.scrollToBottom()
} else {
this.message('请输入文字！').error()
}
@ -726,5 +751,16 @@ Page({
this.setData({
isFullscreen: !this.data.isFullscreen
})
},
scrollToBottom() {
wx.createSelectorQuery()
.select('#chatView')
.node()
.exec((res) => {
const scrollView = res[0].node;
scrollView.scrollTo({
top: 10000000000000
})
})
}
})

49
pages/meeting/index.wxml
View File

@ -25,7 +25,7 @@
<view class="meeting-content-video-user-view" style=" background:{{currentUser.roleId === '1' || currentUser.roleId === '3'? '#FDC229' : '#3F51B5' }}">
<image src="/assets/icon9.png" class="meeting-content-video-user-view-image" />
</view>
<image src="/assets/{{currentUser.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="meeting-content-video-user-image" />
<image wx:if="{{!currentUser.enableMicr}}" src="/assets/{{currentUser.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="meeting-content-video-user-image" />
<text class="meeting-content-video-user-text">{{currentUser.userName}}</text>
</view>
</view>
@ -38,14 +38,20 @@
</view>
</view>
<view class="meeting-content-smallvideo-box-view-canvas" wx:if="{{item.src}}">
<live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" bindstatechange="recorderStateChange" background-mute enable-mic="{{footerList[1].active}}" enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" face-thinness="{{0.5}}" skin-whiteness="{{0.5}}" skin-smoothness="{{0.5}}" />
<live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" wx:else />
<live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" bindstatechange="recorderStateChange" background-mute enable-mic="{{footerList[1].active}}" enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" beauty='{{9}}' whiteness='{{9}}' />
<live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" wx:else />
</view>
<view class="meeting-content-smallvideo-box-view-user">
<view class="meeting-content-smallvideo-box-view-user-view" style=" background:{{ item.roleId === '1' || item.roleId === '3' ? '#FDC229' : '#3F51B5' }}">
<image src="/assets/icon9.png" class="meeting-content-smallvideo-box-view-user-view-image" />
</view>
<image src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="meeting-content-smallvideo-box-view-user-image" />
<image wx:if="{{!item.enableMicr}}" src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="meeting-content-smallvideo-box-view-user-image" />
<view class="meeting-content-smallvideo-box-view-user-audio" wx:else>
<image src="/assets/icon2.png" class="meeting-content-smallvideo-box-view-user-audio-image" />
<view class="meeting-content-smallvideo-box-view-user-audio-stateImage" style="height:{{audioList[index].volume}}">
<image src="/assets/icon10.png" class="meeting-content-smallvideo-box-view-user-audio-stateImage-image" />
</view>
</view>
<text class="meeting-content-smallvideo-box-view-user-text">{{item.userName}}</text>
</view>
<view class="meeting-content-smallvideo-box-view-share" wx:if="{{item.shareSrc}}">
@ -56,9 +62,14 @@
</view>
</view>
<view class="meeting-footer" wx:if="{{!isFullscreen}}">
<view class="meeting-footer-left">
<view class="meeting-footer-left">`
<view class="meeting-footer-left-view" wx:for="{{footerList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bind:tap="changeFooterList" data-index='{{index}}' wx:if="{{item.show}}">
<image class="meeting-footer-left-view-image" src="{{item.active ? item.icon : item.iconActive}}" />
<view class="meeting-footer-left-view-view">
<image class="meeting-footer-left-view-view-image" src="{{item.active ? item.icon : item.iconActive}}" />
<view class="meeting-footer-left-view-view-audioImage" wx:if="{{item.title === '静音' && footerList[1].active}}" style="height:{{userVolume}}">
<image src="/assets/icon10.png" class="meeting-footer-left-view-view-audioImage-image" />
</view>
</view>
<text class="meeting-footer-left-view-text" wx:if="{{item.title === '成员'}}">{{item.title}}({{userNumer}}) </text>
<text class="meeting-footer-left-view-text" wx:elif="{{item.title === '翻转'}}">{{item.title}}</text>
<text class="meeting-footer-left-view-text" wx:elif="{{item.title === '聊天'}}">{{item.title}}{{noViewChatList ? '('+noViewChatList+')' : '' }}
@ -74,29 +85,31 @@
<t-message id="t-message" />
<t-dialog visible="{{applySpeakDialog}}" content="该操作需向管理员申请发言权限" confirm-btn="{{ { content: '确定', variant: 'base', theme: 'primary' } }}" cancel-btn="取消" data-type="applySpeakDialog" bind:confirm="closeDialog" bind:cancel="closeDialog" style="transform: scale(0.5) translate3d(-50%, -50%, 0);" close-btn="{{false}}" />
<t-dialog visible="{{leaveDialog}}" content="确定离开房间吗？" confirm-btn="{{ { content: '确定', variant: 'base', theme: 'primary' } }}" cancel-btn="取消" data-type="leaveDialog" bind:confirm="closeDialog" bind:cancel="closeDialog" style="transform: scale(0.5) translate3d(-50%, -50%, 0);" close-btn="{{false}}" />
<t-popup visible="{{userPopupVisible}}" bind:visible-change="onVisibleChange" placement="right" prevent-scroll-through='{{false}}'>
<t-popup visible="{{userPopupVisible}}" bind:visible-change="onVisibleChange" placement="right">
<view class="user-popup">
<view class="user-popup-title">
成员
</view>
<view class="user-popup-view" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" wx:if="{{item.isRoom}}">
<view class="user-popup-view-avatar">
<t-avatar size="36rpx">{{item.avatarName}}</t-avatar>
<text class="user-popup-view-avatar-text">{{item.userName}}</text>
</view>
<view class="user-popup-view-image">
<image src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="user-popup-view-image-icon" />
<image src="/assets/{{item.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-image-icon" />
<view class="user-popup-view">
<view class="user-popup-view-view" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" wx:if="{{item.isRoom}}">
<view class="user-popup-view-view-avatar">
<t-avatar size="36rpx">{{item.avatarName}}</t-avatar>
<text class="user-popup-view-view-avatar-text">{{item.userName}}</text>
</view>
<view class="user-popup-view-view-image">
<image src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="user-popup-view-view-image-icon" />
<image src="/assets/{{item.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-view-image-icon" />
</view>
</view>
</view>
</view>
</t-popup>
<t-popup visible="{{chatPopupVisible}}" bind:visible-change="onVisibleChange" placement="right" prevent-scroll-through='{{false}}'>
<t-popup visible="{{chatPopupVisible}}" bind:visible-change="onVisibleChange" placement="right">
<view class="chat-popup">
<view class="chat-popup-title">
聊天
</view>
<view class="chat-popup-list" id="chatView">
<scroll-view scroll-y="true" class="chat-popup-list" id="chatView" enhanced>
<view class="chat-popup-list-view" wx:for="{{chatList}}" data-item="{{item}}" wx:key="index" style="text-align: {{item.me ? 'right' : 'left'}}">
<text style="color: #666;font-size: 10rpx;margin-right: 4rpx;" wx:if="{{item.me}}">({{item.timestamp}})</text>
<text>{{item.me ? item.message : item.userName}}</text>
@ -104,7 +117,7 @@
<text>{{item.me ? item.userName : item.message}}</text>
<text style="color: #666;font-size: 10rpx;margin-left: 4rpx;" wx:if="{{!item.me}}">({{item.timestamp}})</text>
</view>
</view>
</scroll-view>
<view class="chat-popup-button">
<view wx:for="{{commonlyChatList}}" data-item="{{item}}" wx:key="index" class="chat-popup-button-view" bind:tap="sendMeg">
{{item}}

4
utils/agora.ts
View File

@ -71,4 +71,8 @@ export const agora = {
unmuteLocal: async (target: string) => {
await client.unmuteLocal(target)
},
// 设置订阅的视频流类型。 0 大流 1 小流
setRemoteVideoStreamType: async (uid: number, streamType: 0 | 1) => {
await client.setRemoteVideoStreamType(uid, streamType)
}
}