<template>
    <div class="trtc-pusher-container">
      <live-pusher
        class="trtc-pusher"
        :url="pusher.url"
        mode="HD"
        :autopush="pusher.autopush"
        :enable-camera="pusher.enableCamera"
        :enable-mic="pusher.enableMic"
        :muted="pusher.muted"
        :enable-agc="pusher.enableAgc"
        :enable-ans="pusher.enableAns"
        :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"
        :fps="pusher.fps"
        :filter="pusher.filter"
        @statechange="handleStateChange"
        @netstatus="handleNetStatus"
        @error="handleError"
        @bgmstart="handleBGMStart"
        @bgmprogress="handleBGMProgress"
        @bgmcomplete="handleBGMComplete"
        @audiovolumenotify="handleAudioVolumeNotify"
      />
      <live-player class="trtc-player" :sound-mode="soundMode"></live-player>
    </div>
  </template>
  
  <script>
  import TRTCCloud from '@tencentcloud/trtc-cloud-wx'
  
  const trtcCloud = TRTCCloud.getTRTCShareInstance()
  const trtc = trtcCloud.trtc
  const InterfaceEventEmitter = trtcCloud.InterfaceEventEmitter
  
  export default {
    name: 'TRTCPusher',
    data() {
      return {
        pusher: {},
        soundMode: ''
      }
    },
    mounted() {
      trtcCloud.logger.info('trtc-pusher attached')
      this.bindTRTCCloudEvent()
      InterfaceEventEmitter.emit('pusherDomReady', true)
    },
    beforeUnmount() {
      this.executeCleanup()
    },
    beforeDestroy() {
      this.executeCleanup()
    },
    methods: {
      executeCleanup() {
        trtcCloud.logger.info('trtc-pusher detached')
        InterfaceEventEmitter.emit('pusherDomReady', false)
        this.unbindTRTCCloudEvent()
        trtcCloud.exitRoom()
      },
      pusherAttributesChange(event) {
        const { pusher, callback } = event
        this.pusher = { ...this.pusher, ...pusher }
        callback && this.$nextTick(callback)
      },
      playerAudioRouteChange(event) {
        const { soundMode, callback } = event
        this.soundMode = soundMode
        callback && callback()
      },
      bindTRTCCloudEvent() {
        InterfaceEventEmitter.on('pusherAttributesChange', this.pusherAttributesChange)
        InterfaceEventEmitter.on('playerAudioRouteChange', this.playerAudioRouteChange)
      },
      unbindTRTCCloudEvent() {
        InterfaceEventEmitter.off('pusherAttributesChange', this.pusherAttributesChange)
        InterfaceEventEmitter.off('playerAudioRouteChange', this.playerAudioRouteChange)
      },
      handleStateChange(event) {
        trtc.pusherEventHandler(event)
      },
      handleNetStatus(event) {
        trtc.pusherNetStatusHandler(event)
      },
      handleError(event) {
        trtc.pusherErrorHandler(event)
      },
      handleBGMStart(event) {
        trtc.pusherBGMStartHandler(event)
      },
      handleBGMProgress(event) {
        trtc.pusherBGMProgressHandler(event)
      },
      handleBGMComplete(event) {
        trtc.pusherBGMCompleteHandler(event)
      },
      handleAudioVolumeNotify(event) {
        if (!trtcCloud.isEnterRoom) return
        trtc.pusherAudioVolumeNotify(event)
      }
    }
  }
  </script>
  
  <style scoped>
  .trtc-pusher-container {
    height: 100%;
    width: 100%;
    position: relative;
  }
  
  .trtc-pusher {
    height: 100%;
    width: 100%;
  }
  
  .trtc-player {
    width: 0;
    height: 0;
    display: flex;
  }
  </style>
  