<!-- 语音通话 -->
<view class="incoming-call audio-call transition-animation" wx:if="{{callMediaType === 1}}">
  <!-- 主叫方呼叫状态 -->
  <swiper class="swiper" wx:if="{{callRole === 'caller' && callStatus === 'calling' }}" 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.userId !== localUserInfo.userId}}">
            <view class="invite-calling-item-loadimg">
              <image src="{{IMG_LOADING}}"></image>
            </view>
            <view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
          </view>
          <image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
          <view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
        </view>
      </swiper-item>
    </block>
  </swiper>
  <!-- 被叫方呼叫状态 -->
  <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 || item.nick || item.userId}}</view>
      </view>
    </view>
  </view>
  <!-- 主叫/被叫方通话状态 -->
  <view wx:if="{{callStatus === 'connected' }}">
    <view>
      <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 class="invite-calling-item-id">
                  {{item.displayUserInfo || item.nick || item.userId}}
                </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 || item.nick || item.userId}}</view>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="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 || item.nick || item.userId}}
                </view>
              </view>
              <view wx:else>
                <!-- 本地流 -->
                <view wx:if="{{item.userId===localUserInfo.userId}}" class="pusher-audio" data-screen="pusher" catch:tap="toggleViewSize">
                  <live-pusher class="pusher-audio" url="{{pusher.url}}" mode="{{pusher.mode}}" autopush="{{true}}" enable-camera="{{pusher.enableCamera}}" enable-mic="{{true}}" muted="{{!pusher.enableMic}}" enable-agc="{{true}}" enable-ans="{{true}}" enable-ear-monitor="{{pusher.enableEarMonitor}}" auto-focus="{{pusher.enableAutoFocus}}" zoom="{{pusher.enableZoom}}" min-bitrate="{{pusher.minBitrate}}" max-bitrate="{{pusher.maxBitrate}}" video-width="{{pusher.videoWidth}}" video-height="{{pusher.videoHeight}}" beauty="{{pusher.beautyLevel}}" whiteness="{{pusher.whitenessLevel}}" orientation="{{pusher.videoOrientation}}" aspect="{{pusher.videoAspect}}" device-position="{{pusher.frontCamera}}" remote-mirror="{{pusher.enableRemoteMirror}}" local-mirror="{{pusher.localMirror}}" background-mute="{{pusher.enableBackgroundMute}}" audio-quality="{{pusher.audioQuality}}" audio-volume-type="{{pusher.audioVolumeType}}" audio-reverb-type="{{pusher.audioReverbType}}" waiting-image="{{pusher.waitingImage}}" beauty-style="{{pusher.beautyStyle}}" filter="{{pusher.filter}}" bindstatechange="pusherStateChangeHandler" bindnetstatus="pusherNetStatus" binderror="pusherErrorHandler" bindaudiovolumenotify="pusherAudioVolumeNotify" />
                  <view class="player-control">
                    <image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
                    <view class="name">我</view>
                  </view>
                </view>
                <!-- 远端流 -->
                <view class="pusher-audio" wx:else>
                  <live-player wx:if="{{playerProcess[item.userId]}}" wx:if="{{ playerProcess[item.userId].hasAudio || playerProcess[item.userId].hasVideo }}" class="{{callMediaType === 1 ? 'pusher-audio' : 'pusher-ownvideo'}}" id="{{playerProcess[item.userId].id}}" data-userid="{{playerProcess[item.userId].userID}}" data-streamid="{{playerProcess[item.userId].streamID}}" data-streamtype="{{playerProcess[item.userId].streamType}}" src="{{playerProcess[item.userId].src}}" mode="RTC" autoplay="{{playerProcess[item.userId].autoplay}}" mute-audio="{{playerProcess[item.userId].muteAudio}}" mute-video="{{playerProcess[item.userId].muteVideo}}" orientation="{{playerProcess[item.userId].orientation}}" object-fit="{{playerProcess[item.userId].objectFit}}" background-mute="{{playerProcess[item.userId].enableBackgroundMute}}" min-cache="{{playerProcess[item.userId].minCache}}" max-cache="{{playerProcess[item.userId].maxCache}}" sound-mode="{{isEarPhone?'ear':'speaker'}}" enable-recv-message="{{playerProcess[item.userId].enableRecvMessage}}" auto-pause-if-navigate="{{playerProcess[item.userId].autoPauseIfNavigate}}" auto-pause-if-open-native="{{playerProcess[item.userId].autoPauseIfOpenNative}}" bindstatechange="playerStateChange" bindfullscreenchange="playerFullscreenChange" bindnetstatus="playNetStatus" bindaudiovolumenotify="playerAudioVolumeNotify" />
                </view>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </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="invite-call audio-call transition-animation" wx:if="{{callMediaType === 2}}">
  <!-- 通话状态 -->
  <view wx:if="{{callStatus === 'connected' }}">
    <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 || item.nick || item.userId}}</view>
            </view>
            <view wx:else>
              <!-- 本地流 -->
              <view wx:if="{{item.userId === localUserInfo.userId}}" class="play-item" data-screen="pusher">
                <live-pusher class="pusher-ownvideo" url="{{pusher.url}}" mode="{{pusher.mode}}" autopush="{{true}}" enable-camera="{{pusher.enableCamera}}" enable-mic="{{true}}" muted="{{!pusher.enableMic}}" enable-agc="{{true}}" enable-ans="{{true}}" enable-ear-monitor="{{pusher.enableEarMonitor}}" auto-focus="{{pusher.enableAutoFocus}}" zoom="{{pusher.enableZoom}}" min-bitrate="{{pusher.minBitrate}}" max-bitrate="{{pusher.maxBitrate}}" video-width="{{pusher.videoWidth}}" video-height="{{pusher.videoHeight}}" beauty="{{pusher.beautyLevel}}" whiteness="{{pusher.whitenessLevel}}" orientation="{{pusher.videoOrientation}}" aspect="{{pusher.videoAspect}}" device-position="{{pusher.frontCamera}}" remote-mirror="{{pusher.enableRemoteMirror}}" local-mirror="{{pusher.localMirror}}" background-mute="{{pusher.enableBackgroundMute}}" audio-quality="{{pusher.audioQuality}}" audio-volume-type="{{pusher.audioVolumeType}}" audio-reverb-type="{{pusher.audioReverbType}}" waiting-image="{{pusher.waitingImage}}" beauty-style="{{pusher.beautyStyle}}" filter="{{pusher.filter}}" bindstatechange="pusherStateChangeHandler" bindnetstatus="pusherNetStatus" binderror="pusherErrorHandler" bindaudiovolumenotify="pusherAudioVolumeNotify" />
                <view class="player-control">
                  <image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
                  <view class="name">我</view>
                </view>
              </view>
              <!-- 远端流 -->
              <view class="play-item" wx:else>
                <live-player class="pusher-ownvideo" wx:if="{{playerProcess[item.userId]}}" wx:if="{{ playerProcess[item.userId].hasAudio || playerProcess[item.userId].hasVideo }}" id="{{playerProcess[item.userId].id}}" data-userid="{{playerProcess[item.userId].userID}}" data-streamid="{{playerProcess[item.userId].streamID}}" data-streamtype="{{playerProcess[item.userId].streamType}}" src="{{playerProcess[item.userId].src}}" mode="RTC" autoplay="{{playerProcess[item.userId].autoplay}}" mute-audio="{{playerProcess[item.userId].muteAudio}}" mute-video="{{playerProcess[item.userId].muteVideo}}" orientation="{{playerProcess[item.userId].orientation}}" object-fit="{{playerProcess[item.userId].objectFit}}" background-mute="{{playerProcess[item.userId].enableBackgroundMute}}" min-cache="{{playerProcess[item.userId].minCache}}" max-cache="{{playerProcess[item.userId].maxCache}}" sound-mode="{{isEarPhone?'ear':'speaker'}}" enable-recv-message="{{playerProcess[item.userId].enableRecvMessage}}" auto-pause-if-navigate="{{playerProcess[item.userId].autoPauseIfNavigate}}" auto-pause-if-open-native="{{playerProcess[item.userId].autoPauseIfOpenNative}}" bindstatechange="playerStateChange" bindfullscreenchange="playerFullscreenChange" bindnetstatus="playNetStatus" bindaudiovolumenotify="playerAudioVolumeNotify" />
                  <view class="player-control">
                      <image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
                          <view class="name">{{item.displayUserInfo || item.nick || item.userId}}</view>
                    </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <!-- 邀请信息 -->
  <view class="invite-calling">
    <!-- 主叫方 -->
    <swiper class="swiper" wx:if="{{callRole === 'caller' && callStatus === 'calling' }}" 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.userId !== localUserInfo.userId}}">
              <view class="invite-calling-item-loadimg">
                <image src="{{IMG_LOADING}}"></image>
              </view>
              <view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
            </view>
            <image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
            <view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <!-- 被叫方 -->
    <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 || item.nick || item.userId}}</view>
        </view>
      </view>
    </view>
    <!-- 呼叫阶段按钮 -->
    <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 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="toggleSwitchCamera" />
            </view>
          </view>
          <text class="white">挂断</text>
        </view>
      </view>
    </view>
  </view>
</view>