Add other view components to the audio and video components of the applet

explain

Because the audio and video components live-pusher and live-player The default level is higher , You can't display other components when you add them . But it can be added by absolute positioning .

design sketch

Add other audio and video components view

Added view Related logic

wxml file

  <view class="fold" wx:if="{{!isUserListShow}}" bindtap="_handFoldClick">
    <image src="../../../static/images/fold.png" class="fold-img"></image>
  </view>
  <view wx:else class="unfold">
    <image src="../../../static/images/unfold.png" class="fold-img" bindtap="_handFoldClick"></image>
    <view class="member-list">
      <view> Member list ：</view>
      <view>
        <view wx:if="{{playerList.length}}">
          <view wx:for="{{playerList}}" wx:key="streamID">
            <view>{{item.userID}}</view>
          </view>
        </view>
        <view>
          {{_rtcConfig.userID}}
        </view>
      </view>
    </view>
    <view>
    </view>
  </view>

wxss The style file

.fold {
  position: absolute;
  top: 50vh;
  right: 10px;
  z-index: 3;
}
.unfold {
   position: absolute;
   top: 50vh;
   right: 10px;
   z-index: 3;
   display: flex;
   flex-direction: row;
}
.unfold .member-list {
  background-color: rgba(48, 40, 40, 0.7);
   width: 160px;
   display: flex;
   flex-direction: column;
   color: honeydew;
}
.fold-img {
  height: 32px;
  width: 32px;
}

js file

  _handFoldClick() {
    this.setData({
      isUserListShow: !this.data.isUserListShow
    })
  },

The above is to add other audio and video components view Related logic of , Mainly view Absolute positioning is required .