<view class="xg-video-container">
  <block>
    <video
      wx:if="{{customCache !== undefined}}"
      id="{{videoId}}"
      class="xg-video {{classNames}}"
      hidden="{{isHidden}}"
      src="{{currentSrc || ''}}"
      controls="{{!customControls}}"
      danmu-list="{{danmuList}}"
      danmu-btn="{{danmuBtn}}"
      enable-danmu="{{enableDanmu}}"
      autoplay="{{autoplay}}"
      loop="{{loop}}"
      muted="{{muted}}"
      initial-time="{{initialTime}}"
      page-gesture="{{pageGesture}}"
      direction="{{direction}}"
      show-progress="{{showProgress}}"
      show-fullscreen-btn="{{showFullscreenBtn}}"
      show-play-btn="{{showPlayBtn}}"
      show-center-play-btn="{{controls === 'native' && showCenterPlayBtn}}"
      enable-progress-gesture="{{enableProgressGesture}}"
      object-fit="{{objectFit}}"
      poster="{{controls === 'native' ? poster : ''}}"
      show-mute-btn="{{showMuteBtn}}"
      title="{{title}}"
      play-btn-position="{{playBtnPosition}}"
      enable-play-gesture="{{enablePlayGesture}}"
      auto-pause-if-navigate="{{autoPauseIfNavigate}}"
      auto-pause-if-open-native="{{autoPauseIfOpenNative}}"
      vslide-gesture="{{vslideGesture}}"
      vslide-gesture-in-fullscreen="{{vslideGestureInFullscreen}}"
      show-bottom-progress="{{showBottomProgress}}"
      ad-unit-id="{{adUnitId}}"
      poster-for-crawler="{{posterForCrawler}}"
      show-casting-button="{{showCastingButton}}"
      picture-in-picture-mode="{{pictureInPictureMode}}"
      picture-in-picture-show-progress="{{pictureInPictureShowProgress}}"
      enable-auto-rotation="{{enableAutoRotation}}"
      show-screen-lock-button="{{showScreenLockButton}}"
      show-snapshot-button="{{showSnapshotButton}}"
      show-background-playback-button="{{showBackgroundPlaybackButton}}"
      background-poster="{{backgroundPoster}}"
      referrer-policy="{{referrerPolicy}}"
      is-drm="{{isDrm}}"
      is-live="{{isLive}}"
      provision-url="{{provisionUrl}}"
      certificate-url="{{certificateUrl}}"
      license-url="{{licenseUrl}}"
      preferred-peak-bit-rate="{{preferredPeakBitRate}}"
      custom-cache="{{customCache}}"
      bindtap="onTap"
      bindplay="onPlay"
      bindpause="onPause"
      bindended="onEnded"
      bindtimeupdate="onTimeupdate"
      bindfullscreenchange="onFullscreenChange"
      bindwaiting="onWaiting"
      binderror="onError"
      bindprogress="onProgress"
      bindloadedmetadata="onLoadedMetadata"
      bindcontrolstoggle="onControlsToggle"
      bindenterpictureinpicture="onEnterPIP"
      bindleavepictureinpicture="onLeavePIP"
      bindseekcomplete="onSeeked"
      bindtap="onTap"
      bindtouchstart="onTouchStart"
      bindtouchend="onTouchEnd"
      bindtouchmove="onTouchMove"
    >
      <slot></slot>
      <block wx:if="{{ controls && customControls}}">
        <xg-poster wx:if="{{showPoster}}" src="{{poster}}" mode="{{posterSize}}"></xg-poster>

        <block wx:if="{{mode === 'portrait'}}">
          <slot name="floor"></slot>
          <block wx:if="{{needLoading === true}}">
            <xg-loading status="{{loading || isLoadingData ? 'show' : 'hide'}}"></xg-loading>
          </block>
          <xg-play-button
            class="xg-start-icon"
            size="large"
            isHidden="{{!isLoadingData && ((showCenterPlayBtn && !firstPlay && !autoplay) || (showPlayBtn && playBtnPosition !== 'bottom')) ? false : true}}"
            position="{{playBtnPosition === 'bottom' ? 'center' : playBtnPosition}}"
            interactState="{{interactState}}"
            mode="{{playBtnMode}}"
            paused="{{paused}}"
            videoId="{{videoId}}"
            binduseraction="handleUserAction"></xg-play-button>
          <xg-controls isHidden="{{ !isLoadingData ? false : true }}" interactState="{{interactState}}">
            <block wx:if="{{showPlayBtn === true && playBtnPosition === 'bottom'}}">
              <xg-play-button
                slot="left"
                size="middle"
                isHidden="{{false}}"
                position="{{playBtnPosition}}"
                paused="{{paused}}"
                videoId="{{videoId}}"
                binduseraction="handleUserAction"></xg-play-button>
            </block>
            <xg-progress slot="center" wx:if="{{showProgress}}"
                         videoId="{{videoId}}"
                         time-update-interval="{{timeUpdateInterval}}"
                         bindprogressdragstart="onProgressDragStart"
                         bindprogressdragend="onProgressDragEnd"
                         size="{{2}}"></xg-progress>
          </xg-controls>
          <block wx:if="{{showBottomProgress}}">
            <bottom-progress played="{{playPercent}}" buffered="{{buffered}}" videoId="{{videoId}}" isHidden="{{ isFocus ? true : false }}"></bottom-progress>
          </block>
        </block>
        <block wx:elif="{mode === 'landscape'}">
          <xg-loading status="{{loading ? 'show' : 'hide'}}"></xg-loading>
          <block wx:if="{{loadedMeta}}">
            <block wx:if="{{showCtrlOverlay}}">
            </block>
            <block wx:else>
            </block>
          </block>
        </block>
        <xg-error status="{{error && error.severity === 1 ? 'show' : 'hide'}}" error="{{error}}" onretry="onCompErrorRetry"></xg-error>
        <slot name="middle"></slot>
      </block>
    </video>
    <video
      wx:else
      id="{{videoId}}"
      class="xg-video {{classNames}}"
      hidden="{{isHidden}}"
      src="{{currentSrc || ''}}"
      controls="{{!customControls}}"
      danmu-list="{{danmuList}}"
      danmu-btn="{{danmuBtn}}"
      enable-danmu="{{enableDanmu}}"
      autoplay="{{autoplay}}"
      loop="{{loop}}"
      muted="{{muted}}"
      initial-time="{{initialTime}}"
      page-gesture="{{pageGesture}}"
      direction="{{direction}}"
      show-progress="{{showProgress}}"
      show-fullscreen-btn="{{showFullscreenBtn}}"
      show-play-btn="{{showPlayBtn}}"
      show-center-play-btn="{{controls === 'native' && showCenterPlayBtn}}"
      enable-progress-gesture="{{enableProgressGesture}}"
      object-fit="{{objectFit}}"
      poster="{{controls === 'native' ? poster : ''}}"
      show-mute-btn="{{showMuteBtn}}"
      title="{{title}}"
      play-btn-position="{{playBtnPosition}}"
      enable-play-gesture="{{enablePlayGesture}}"
      auto-pause-if-navigate="{{autoPauseIfNavigate}}"
      auto-pause-if-open-native="{{autoPauseIfOpenNative}}"
      vslide-gesture="{{vslideGesture}}"
      vslide-gesture-in-fullscreen="{{vslideGestureInFullscreen}}"
      show-bottom-progress="{{showBottomProgress}}"
      ad-unit-id="{{adUnitId}}"
      poster-for-crawler="{{posterForCrawler}}"
      show-casting-button="{{showCastingButton}}"
      picture-in-picture-mode="{{pictureInPictureMode}}"
      picture-in-picture-show-progress="{{pictureInPictureShowProgress}}"
      enable-auto-rotation="{{enableAutoRotation}}"
      show-screen-lock-button="{{showScreenLockButton}}"
      show-snapshot-button="{{showSnapshotButton}}"
      show-background-playback-button="{{showBackgroundPlaybackButton}}"
      background-poster="{{backgroundPoster}}"
      referrer-policy="{{referrerPolicy}}"
      is-drm="{{isDrm}}"
      is-live="{{isLive}}"
      provision-url="{{provisionUrl}}"
      certificate-url="{{certificateUrl}}"
      license-url="{{licenseUrl}}"
      preferred-peak-bit-rate="{{preferredPeakBitRate}}"
      bindtap="onTap"
      bindplay="onPlay"
      bindpause="onPause"
      bindended="onEnded"
      bindtimeupdate="onTimeupdate"
      bindfullscreenchange="onFullscreenChange"
      bindwaiting="onWaiting"
      binderror="onError"
      bindprogress="onProgress"
      bindloadedmetadata="onLoadedMetadata"
      bindcontrolstoggle="onControlsToggle"
      bindenterpictureinpicture="onEnterPIP"
      bindleavepictureinpicture="onLeavePIP"
      bindseekcomplete="onSeeked"
      bindtap="onTap"
      bindtouchstart="onTouchStart"
      bindtouchend="onTouchEnd"
      bindtouchmove="onTouchMove"
    >
      <slot></slot>
      <block wx:if="{{controls && customControls}}">
        <xg-poster wx:if="{{showPoster}}" src="{{poster}}" mode="{{posterSize}}"></xg-poster>

        <block wx:if="{{mode === 'portrait'}}">
          <slot name="floor"></slot>
          <block wx:if="{{needLoading === true}}">
            <xg-loading status="{{loading || isLoadingData ? 'show' : 'hide'}}"></xg-loading>
          </block>
          <xg-play-button
            class="xg-start-icon"
            size="large"
            isHidden="{{!isLoadingData && ((showCenterPlayBtn && !firstPlay && !autoplay) || (showPlayBtn && playBtnPosition !== 'bottom')) ? false : true}}"
            position="{{playBtnPosition === 'bottom' ? 'center' : playBtnPosition}}"
            interactState="{{interactState}}"
            mode="{{playBtnMode}}"
            paused="{{paused}}"
            videoId="{{videoId}}"
            binduseraction="handleUserAction"></xg-play-button>
          <xg-controls isHidden="{{ !isLoadingData && controls ? false : true }}" interactState="{{interactState}}">
            <block wx:if="{{showPlayBtn === true && playBtnPosition === 'bottom'}}">
              <xg-play-button
                slot="left"
                size="middle"
                isHidden="{{false}}"
                position="{{playBtnPosition}}"
                paused="{{paused}}"
                videoId="{{videoId}}"
                binduseraction="handleUserAction"></xg-play-button>
            </block>
            <xg-progress slot="center" wx:if="{{showProgress}}"
                         videoId="{{videoId}}"
                         bindprogressdragstart="onProgressDragStart"
                         bindprogressdragend="onProgressDragEnd"
                         size="{{2}}"></xg-progress>
          </xg-controls>
          <block wx:if="{{showBottomProgress}}">
            <bottom-progress played="{{playPercent}}" buffered="{{buffered}}" videoId="{{videoId}}" isHidden="{{ isFocus ? true : false }}"></bottom-progress>
          </block>
        </block>
        <block wx:elif="{mode === 'landscape'}">
          <xg-loading status="{{loading ? 'show' : 'hide'}}"></xg-loading>
          <block wx:if="{{loadedMeta}}">
            <block wx:if="{{showCtrlOverlay}}">
            </block>
            <block wx:else>
            </block>
          </block>
        </block>
        <xg-error status="{{error && error.severity === 1 ? 'show' : 'hide'}}" error="{{error}}" onretry="onCompErrorRetry"></xg-error>
        <slot name="middle"></slot>
      </block>
    </video>
  </block>

  <block wx:if="{{isHidden}}">
    <xg-poster src="{{poster}}" mode="{{posterSize}}"></xg-poster>
    <xg-loading wx:if="{{needLoading && isShowDataLoading}}" status="show" type="large-bg" text="{{loadingText}}"></xg-loading>
  </block>

</view>
