优化

pages/meeting/index.scss

@@ -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;
+        &-text {
-        margin: 0 2rpx;
+          flex-grow: 1;
-        white-space: nowrap;
+          color: white;
-        text-overflow: ellipsis;
+          font-size: 14rpx;
-        overflow: hidden;
+          margin: 0 2rpx;
-        width: 0;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          width: 0;
+        }
       }
-    }
 
-    &-image {
+      &-image {
-      display: flex;
+        display: flex;
-      align-items: center;
+        align-items: center;
-      flex-shrink: 0;
+        flex-shrink: 0;
 
-      &-icon {
+        &-icon {
-        width: 16rpx;
+          width: 16rpx;
-        height: 16rpx;
+          height: 16rpx;
+        }
       }
     }
   }
@@ -291,6 +351,7 @@
     flex-grow: 1;
     overflow-y: auto;
     padding: 0 10rpx;
+    box-sizing: border-box;
 
     &-view {
       color: white;

pages/meeting/index.ts

@@ -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
+        })
+      })
   }
 })

pages/meeting/index.wxml

@@ -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-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" wx:else />
+            <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">
-      <view class="user-popup-view-avatar">
+      <view class="user-popup-view-view" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" wx:if="{{item.isRoom}}">
-        <t-avatar size="36rpx">{{item.avatarName}}</t-avatar>
+        <view class="user-popup-view-view-avatar">
-        <text class="user-popup-view-avatar-text">{{item.userName}}</text>
+          <t-avatar size="36rpx">{{item.avatarName}}</t-avatar>
-      </view>
+          <text class="user-popup-view-view-avatar-text">{{item.userName}}</text>
-      <view class="user-popup-view-image">
+        </view>
-        <image src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="user-popup-view-image-icon" />
+        <view class="user-popup-view-view-image">
-        <image src="/assets/{{item.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-image-icon" />
+          <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}}

utils/agora.ts

@@ -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)
+  }
 }