<!-- 语音通话 -->
<view class="incoming-call audio-call transition-animation" wx:if="{{callMediaType === 1}}">
  <!-- 被叫方呼叫状态 -->
  <view wx:if="{{callRole !== 'caller' && callStatus === 'calling'}}">
    <view class="invite-calling-single">
      <image class="avatar" src="{{callerUserInfo.avatar || IMG_DEFAULT_AVATAR}}" id="{{renderStreamList[0].userId}}" binderror="handleErrorImage" />
      <view class="tips">{{callerUserInfo.nick || callerUserInfo.userId}}</view>
      <view class="invite-txt">邀请你参加多人通话</view>
    </view>
    <view class="invite-other-txt">参与通话的有：</view>
    <view class="invite-other-list">
      <view class="invite-other-item" wx:for="{{renderStreamList}}" wx:key="item">
        <image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
        <view class="invite-other-item-name">{{item.displayUserInfo}}</view>
      </view>
    </view>
  </view>
  <!-- 主叫方呼叫状态 -->
  <view wx:if="{{callRole === 'caller' && callStatus === 'calling'}}">
    <swiper class="swiper" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
      <block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
        <swiper-item class="invite-calling-list">
          <view wx:for="{{renderStreamList}}" wx:key="userID" class="invite-calling-item" wx:if="{{index >= pos*4 && index < pos*4+4}}">
            <view id="{{item.userId}}" class="invite-calling-item-message" wx:if="{{!item.isEnter}}">
              <view class="invite-calling-item-loadimg">
                <image src="{{IMG_LOADING}}"></image>
              </view>
            </view>
            <image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
            <view class="player-control">
              <image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
              <view class="name">{{item.displayUserInfo}}</view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <!-- 主叫方/被叫方音频流 -->
  <view class="{{ callStatus === 'calling' ? 'pusher-audio' : '' }}">
    <swiper class="swiper" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
      <block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
        <swiper-item class="invite-calling-list">
          <view wx:for="{{renderStreamList}}" wx:key="userID" class="invite-calling-item" wx:if="{{index >= pos*4 && index < pos*4+4}}">
            <view id="{{item.userId}}" class="invite-calling-item-message">
              <view class="invite-calling-item-loadimg" wx:if="{{!item.isEnter}}">
                <image src="{{IMG_LOADING}}"></image>
              </view>
              <image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
              <view class="invite-calling-item-id">{{item.displayUserInfo}}</view>
            </view>
            <!-- 本地流 -->
            <view wx:if="{{item.userId===localUserInfo.userId}}" class="pusher-audio" data-screen="pusher" catch:tap="toggleViewSize">
              <trtc-pusher class="pusher-audio" />
              <view class="player-control">
                <image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
                <view class="name">我</view>
              </view>
            </view>
            <!-- 远端流 -->
            <view class="pusher-audio" wx:else>
              <trtc-player streamId="{{item.userId + '_0'}}" wx:if="{{ item.isAudioAvailable || item.isVideoAvailable }}" class="{{callMediaType === 1 ? 'pusher-audio' : 'pusher-ownvideo'}}" />
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <!-- 主叫方/被叫方呼叫阶段按钮 -->
  <view wx:if="{{callStatus === 'calling'}}" class="footer">
    <view wx:if="{{callRole !== 'caller'}}" class="btn-operate">
      <view class="button-container">
        <view class="call-operate" style="background-color: red" catch:tap="reject">
          <image src="{{IMG_HANGUP}}" />
        </view>
        <view style="margin-top:10px;color: #666666">挂断</view>
      </view>
      <view class="button-container">
        <view class="call-operate" catch:tap="accept">
          <image src="{{IMG_ACCEPT}}" />
        </view>
        <view style="margin-top:10px;color: #666666">接听</view>
      </view>
    </view>
    <view wx:if="{{callRole === 'caller'}}" class="btn-operate">
      <view class="button-container">
        <view class="call-operate" style="background-color: red" catch:tap="hangup">
          <image src="{{IMG_HANGUP}}" />
        </view>
        <view style="margin-top:10px;color: #666666">挂断</view>
      </view>
    </view>
  </view>
  <!-- 主叫方/被叫方通话阶段按钮 -->
  <view wx:if="{{callStatus === 'connected'}}" class="handle-btns">
    <view class="other-view black">
      <text>{{callDuration}}</text>
    </view>
    <view class="btn-list">
      <view class="button-container">
        <view class="btn-normal" bindtap="microPhoneHandler">
          <image class="btn-image" src="{{localUserInfo.isAudioAvailable? IMG_AUDIO_TRUE: IMG_AUDIO_FALSE}} "></image>
        </view>
        <view>麦克风</view>
      </view>
      <view class="button-container">
        <view class="btn-hangup" bindtap="hangup">
          <image class="btn-image" src="{{IMG_HANGUP}}"></image>
        </view>
        <view>挂断</view>
      </view>
      <view class="button-container">
        <view class="btn-normal" bindtap="toggleSoundMode">
          <image class="btn-image" src="{{isEarPhone ? IMG_SPEAKER_FALSE: IMG_SPEAKER_TRUE}} "></image>
        </view>
        <text>扬声器</text>
      </view>
    </view>
  </view>
</view>
<!-- 视频通话 -->
<view class="audio-call transition-animation" wx:if="{{callMediaType === 2}}">
   <!-- 被叫方呼叫状态 -->
  <view wx:if="{{callRole !== 'caller' && callStatus === 'calling' }}">
    <view class="invite-calling-single">
      <image class="avatar" src="{{callerUserInfo.avatar || IMG_DEFAULT_AVATAR}}" id="{{renderStreamList[0].userId}}" binderror="handleErrorImage" />
      <view class="tips">{{ callerUserInfo.nick || callerUserInfo.userId }}</view>
      <view class="invite-txt">邀请你参加多人通话</view>
    </view>
    <view class="invite-other-txt">参与通话的有：</view>
    <view class="invite-other-list">
      <view class="invite-other-item" wx:for="{{renderStreamList}}" wx:key="item">
        <image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
        <view class="invite-other-item-name">{{ item.displayUserInfo}}</view>
      </view>
    </view>
  </view>
   <!-- 主叫方呼叫状态 -->
  <view wx:if="{{callRole === 'caller' && callStatus === 'calling'}}">
    <swiper class="swiper" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
      <block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
        <swiper-item class="invite-calling-list">
          <view wx:for="{{renderStreamList}}" wx:key="userID" class="invite-calling-item" wx:if="{{index >= pos*4 && index < pos*4+4}}">
            <view id="{{item.userId}}" class="invite-calling-item-message" wx:if="{{!item.isEnter}}">
              <view class="invite-calling-item-loadimg">
                <image src="{{IMG_LOADING}}"></image>
              </view>
            </view>
            <image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
            <view class="player-control">
              <image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
              <view class="name">{{item.displayUserInfo}}</view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <!-- 主叫方/被叫方视频流-->
  <view class="{{ callStatus === 'calling' ? 'pusher-audio' : '' }}">
    <swiper class="swiper" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
      <block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
        <swiper-item class="invite-calling-list">
          <view wx:for="{{renderStreamList}}" wx:key="userID" class="invite-calling-item" wx:if="{{index >= pos*4 && index < pos*4+4}}">
            <view id="{{item.userId}}" class="invite-calling-item-message" wx:if="{{!item.isEnter}}">
              <view class="invite-calling-item-loadimg">
                <image src="{{IMG_LOADING}}"></image>
              </view>
              <image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
              <view class="invite-calling-item-id">{{item.displayUserInfo}}</view>
            </view>
            <!-- 本地流 -->
            <view wx:if="{{item.userId === localUserInfo.userId}}" class="play-item" data-screen="pusher">
              <trtc-pusher class="pusher-ownvideo" />
              <view class="player-control">
                <image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
                <view class="name">我</view>
              </view>
            </view>
            <!-- 远端流 -->
            <view class="play-item" wx:else>
              <trtc-player class="pusher-ownvideo" streamId="{{item.userId + '_0'}}" wx:if="{{ item.isAudioAvailable || item.isVideoAvailable }}" class="{{callMediaType === 1 ? 'pusher-audio' : 'pusher-ownvideo'}}" />
              <view class="player-control">
                <image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
                <view class="name">{{item.displayUserInfo}}</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="invite-calling">
    <!-- 主叫方/被叫方呼叫阶段按钮 -->
    <view wx:if="{{callStatus === 'calling' }}" class="footer">
      <view class="btn-operate" wx:if="{{callRole === 'caller'}}">
        <view class="btn-operate-item">
          <view class="btn-container">
            <view class="call-operate" catch:tap="hangup">
              <image src="{{IMG_HANGUP}}" />
            </view>
          </view>
          <text style="color: #666666">挂断</text>
        </view>
      </view>
      <view class="btn-operate" wx:if="{{callRole !== 'caller'}}">
        <view class="btn-operate-item">
          <view class="call-operate" style="background-color: red" catch:tap="reject">
            <image src="{{IMG_HANGUP}}" />
          </view>
          <text style="color: #666666">挂断</text>
        </view>
        <view class="btn-operate-item">
          <view class="call-operate" catch:tap="accept">
            <image src="{{IMG_ACCEPT}}" />
          </view>
          <text style="color: #666666">接听</text>
        </view>
      </view>
    </view>
    <!-- 主叫方/被叫方通话阶段按钮 -->
    <view wx:if="{{callStatus === 'connected' }}" class="handle-btns">
      <view class="other-view white">
        <text>{{callDuration}}</text>
      </view>
      <view class="btn-list">
        <view class="button-container">
          <view class="btn-normal" bindtap="microPhoneHandler">
            <image class="btn-image" src="{{localUserInfo.isAudioAvailable ? IMG_AUDIO_TRUE: IMG_AUDIO_FALSE}} "></image>
          </view>
          <view class="white">麦克风</view>
        </view>
        <view class="button-container">
          <view class="btn-normal" bindtap="toggleSoundMode">
            <image class="btn-image" src="{{isEarPhone ? IMG_SPEAKER_FALSE: IMG_SPEAKER_TRUE}} "></image>
          </view>
          <text class="white">扬声器</text>
        </view>
        <view class="button-container">
          <view class="btn-normal" bindtap="cameraHandler">
            <image class="btn-image" src="{{localUserInfo.isVideoAvailable? IMG_CAMERA_TRUE: IMG_CAMERA_FALSE}} "></image>
          </view>
          <text class="white">摄像头</text>
        </view>
      </view>
      <view class="btn-list">
        <view class="btn-list-item other-view">
          <view class="btn-container">
            <view wx:if="{{enableVirtualBackground}}" class="btn-virtualBackground">
              <image src="{{IMG_VIRTUALBACKGROUND_MINI}}" catch:tap="setBlurBackground" />
            </view>
            <view class="btn-hangup" bindtap="hangup">
              <image class="btn-image" src="{{IMG_HANGUP}}"></image>
            </view>
            <view wx:if="{{pusher.enableCamera}}" class="invite-calling-header-left">
              <image src="{{IMG_SWITCH_CAMERA}}" data-device="{{pusher.frontCamera}}" catch:tap="switchCamera" />
            </view>
          </view>
          <text class="white">挂断</text>
        </view>
      </view>
    </view>
  </view>
</view>