import { useSyncConfigStore } from 'src/stores/sync_config.js'

const VideoAttachment = {
  props: ['attachment', 'controls'],
  data() {
    return {
      blocksSuspend: false,
      // Start from true because removing "loop" property seems buggy in Vue
      hasAudio: true,
    }
  },
  computed: {
    loopVideo() {
      if (useSyncConfigStore().mergedConfig.loopVideoSilentOnly) {
        return !this.hasAudio
      }
      return useSyncConfigStore().mergedConfig.loopVideo
    },
  },
  methods: {
    onPlaying(e) {
      this.setHasAudio(e)
      if (this.loopVideo) {
        this.$emit('play', { looping: true })
        return
      }
      this.$emit('play')
    },
    onPaused() {
      this.$emit('pause')
    },
    setHasAudio(e) {
      const target = e.srcElement || e.target
      // If hasAudio is false, we've already marked this video to not have audio,
      // a video can't gain audio out of nowhere so don't bother checking again.
      if (!this.hasAudio) return
      if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
        // non-zero if video has audio track
        if (target.webkitAudioDecodedByteCount > 0) return
      }
      if (typeof target.mozHasAudio !== 'undefined') {
        // true if video has audio track
        if (target.mozHasAudio) return
      }
      if (typeof target.audioTracks !== 'undefined') {
        if (target.audioTracks.length > 0) return
      }
      this.hasAudio = false
    },
  },
}

export default VideoAttachment