<template>
  <section
    v-if="currentTrack"
    role="complementary"
    class="player-wrapper ui bottom-player component-player"
    aria-labelledby="player-label"
  >
    <h1
      id="player-label"
      class="visually-hidden"
    >
      <translate translate-context="*/*/*">
        Audio player and controls
      </translate>
    </h1>
    <div
      class="ui inverted segment fixed-controls"
      @click.prevent.stop="toggleMobilePlayer"
    >
      <div
        :class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']"
      >
        <div
          class="buffer bar"
          :data-percent="bufferProgress"
          :style="{ 'width': bufferProgress + '%' }"
        />
        <div
          class="position bar"
          :data-percent="progress"
          :style="{ 'width': progress + '%' }"
        />
      </div>
      <div class="controls-row">
        <div class="controls track-controls queue-not-focused desktop-and-up">
          <div
            class="ui tiny image"
            @click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})"
          >
            <img
              v-if="currentTrack.cover && currentTrack.cover.urls.original"
              ref="cover"
              alt=""
              :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.urls.medium_square_crop)"
            >
            <img
              v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.urls && currentTrack.album.cover.urls.original"
              ref="cover"
              alt=""
              :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.urls.medium_square_crop)"
            >
            <img
              v-else
              alt=""
              src="../../assets/audio/default-cover.png"
            >
          </div>
          <div
            class="middle aligned content ellipsis"
            @click.stop.prevent=""
          >
            <strong>
              <router-link
                class="small header discrete link track"
                :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}"
                @click.stop.prevent=""
              >
                {{ currentTrack.title }}
              </router-link>
            </strong>
            <div class="meta">
              <router-link
                class="discrete link"
                :to="{name: 'library.artists.detail', params: {id: currentTrack.artist.id }}"
                @click.stop.prevent=""
              >
                {{ currentTrack.artist.name }}
              </router-link>
              <template v-if="currentTrack.album">
                /
                <router-link
                  class="discrete link"
                  :to="{name: 'library.albums.detail', params: {id: currentTrack.album.id }}"
                  @click.stop.prevent=""
                >
                  {{ currentTrack.album.title }}
                </router-link>
              </template>
            </div>
          </div>
        </div>
        <div class="controls track-controls queue-not-focused tablet-and-below">
          <div class="ui tiny image">
            <img
              v-if="currentTrack.cover && currentTrack.cover.urls.original"
              ref="cover"
              alt=""
              :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.urls.medium_square_crop)"
            >
            <img
              v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.urls.original"
              ref="cover"
              alt=""
              :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.urls.medium_square_crop)"
            >
            <img
              v-else
              alt=""
              src="../../assets/audio/default-cover.png"
            >
          </div>
          <div class="middle aligned content ellipsis">
            <strong>
              {{ currentTrack.title }}
            </strong>
            <div class="meta">
              {{ currentTrack.artist.name }}<template v-if="currentTrack.album">
                / {{ currentTrack.album.title }}
              </template>
            </div>
          </div>
        </div>
        <div
          v-if="$store.state.auth.authenticated"
          class="controls desktop-and-up fluid align-right"
        >
          <track-favorite-icon
            class="control white"
            :track="currentTrack"
          />
          <track-playlist-icon
            class="control white"
            :track="currentTrack"
          />
          <button
            :class="['ui', 'really', 'basic', 'circular', 'icon', 'button', 'control']"
            :aria-label="labels.addArtistContentFilter"
            :title="labels.addArtistContentFilter"
            @click="$store.dispatch('moderation/hide', {type: 'artist', target: currentTrack.artist})"
          >
            <i :class="['eye slash outline', 'basic', 'icon']" />
          </button>
        </div>
        <div class="player-controls controls queue-not-focused">
          <button
            :title="labels.previous"
            :aria-label="labels.previous"
            class="circular button control tablet-and-up"
            :disabled="!hasPrevious"
            @click.prevent.stop="$store.dispatch('queue/previous')"
          >
            <i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" />
          </button>
          <button
            v-if="!playing"
            :title="labels.play"
            :aria-label="labels.play"
            class="circular button control"
            @click.prevent.stop="resumePlayback"
          >
            <i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']" />
          </button>
          <button
            v-else
            :title="labels.pause"
            :aria-label="labels.pause"
            class="circular button control"
            @click.prevent.stop="pausePlayback"
          >
            <i :class="['ui', 'big', 'pause', {'disabled': !currentTrack}, 'icon']" />
          </button>
          <button
            :title="labels.next"
            :aria-label="labels.next"
            class="circular button control"
            :disabled="!hasNext"
            @click.prevent.stop="$store.dispatch('queue/next')"
          >
            <i :class="['ui', 'large', {'disabled': !hasNext}, 'forward step', 'icon']" />
          </button>
        </div>

        <div class="controls progress-controls queue-not-focused tablet-and-up small align-left">
          <div class="timer">
            <template v-if="!isLoadingAudio">
              <span
                class="start"
                @click.stop.prevent="setCurrentTime(0)"
              >{{ currentTimeFormatted }}</span>
              | <span class="total">{{ durationFormatted }}</span>
            </template>
          </div>
        </div>
        <div class="controls queue-controls when-queue-focused align-right">
          <div class="group">
            <volume-control class="expandable" />
            <button
              v-if="looping === 0"
              class="circular control button"
              :title="labels.loopingDisabled"
              :aria-label="labels.loopingDisabled"
              :disabled="!currentTrack"
              @click.prevent.stop="$store.commit('player/looping', 1)"
            >
              <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']" />
            </button>
            <button
              v-if="looping === 1"
              class="looping circular control button"
              :title="labels.loopingSingle"
              :aria-label="labels.loopingSingle"
              :disabled="!currentTrack"
              @click.prevent.stop="$store.commit('player/looping', 2)"
            >
              <i
                class="repeat icon"
              >
                <span class="ui circular tiny vibrant label">1</span>
              </i>
            </button>
            <button
              v-if="looping === 2"
              class="looping circular control button"
              :title="labels.loopingWhole"
              :aria-label="labels.loopingWhole"
              :disabled="!currentTrack"
              @click.prevent.stop="$store.commit('player/looping', 0)"
            >
              <i
                class="repeat icon"
              >
                <span class="ui circular tiny vibrant label">&infin;</span>
              </i>
            </button>
            <button
              class="circular control button"
              :disabled="queue.tracks.length === 0"
              :title="labels.shuffle"
              :aria-label="labels.shuffle"
              @click.prevent.stop="shuffle()"
            >
              <div
                v-if="isShuffling"
                class="ui inline shuffling inverted tiny active loader"
              />
              <i
                v-else
                :class="['ui', 'random', {'disabled': queue.tracks.length === 0}, 'icon']"
              />
            </button>
          </div>
          <div class="group">
            <div class="fake-dropdown">
              <button
                class="position circular control button desktop-and-up"
                aria-expanded="true"
                @click.stop="toggleMobilePlayer"
              >
                <i class="stream icon" />
                <translate
                  translate-context="Sidebar/Queue/Text"
                  :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}"
                >
                  %{ index } of %{ length }
                </translate>
              </button>
              <button
                class="position circular control button tablet-and-below"
                @click.stop="switchTab"
              >
                <i class="stream icon" />
                <translate
                  translate-context="Sidebar/Queue/Text"
                  :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}"
                >
                  %{ index } of %{ length }
                </translate>
              </button>

              <button
                v-if="$store.state.ui.queueFocused"
                class="circular control button close-control desktop-and-up"
                @click.stop="toggleMobilePlayer"
              >
                <i class="large down angle icon" />
              </button>
              <button
                v-else
                class="circular control button desktop-and-up"
                @click.stop="toggleMobilePlayer"
              >
                <i class="large up angle icon" />
              </button>
              <button
                v-if="$store.state.ui.queueFocused === 'player'"
                class="circular control button close-control tablet-and-below"
                @click.stop="switchTab"
              >
                <i class="large up angle icon" />
              </button>
              <button
                v-if="$store.state.ui.queueFocused === 'queue'"
                class="circular control button tablet-and-below"
                @click.stop="switchTab"
              >
                <i class="large down angle icon" />
              </button>
            </div>
            <button
              class="circular control button close-control tablet-and-below"
              @click.stop="$store.commit('ui/queueFocused', null)"
            >
              <i class="x icon" />
            </button>
          </div>
        </div>
      </div>
    </div>
    <GlobalEvents
      @keydown.p.prevent.exact="togglePlayback"
      @keydown.esc.prevent.exact="$store.commit('ui/queueFocused', null)"
      @keydown.ctrl.shift.left.prevent.exact="previous"
      @keydown.ctrl.shift.right.prevent.exact="next"
      @keydown.shift.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
      @keydown.shift.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
      @keydown.right.prevent.exact="seek (5)"
      @keydown.left.prevent.exact="seek (-5)"
      @keydown.shift.right.prevent.exact="seek (30)"
      @keydown.shift.left.prevent.exact="seek (-30)"
      @keydown.m.prevent.exact="toggleMute"
      @keydown.l.exact="$store.commit('player/toggleLooping')"
      @keydown.s.exact="shuffle"
      @keydown.f.exact="$store.dispatch('favorites/toggle', currentTrack.id)"
      @keydown.q.exact="clean"
      @keydown.e.exact="toggleMobilePlayer"
    />
  </section>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import GlobalEvents from '~/components/utils/global-events.vue'
import { toLinearVolumeScale } from '~/audio/volume.js'
import { Howl, Howler } from 'howler'
import { throttle, reverse } from 'lodash-es'
import axios from 'axios'
import VolumeControl from './VolumeControl.vue'
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
import updateQueryString from '~/composables/updateQueryString'

export default {
  components: {
    VolumeControl,
    TrackFavoriteIcon,
    TrackPlaylistIcon,
    GlobalEvents
  },
  data () {
    return {
      isShuffling: false,
      sliderVolume: this.volume,
      showVolume: false,
      currentSound: null,
      dummyAudio: null,
      isUpdatingTime: false,
      sourceErrors: 0,
      progressInterval: null,
      maxPreloaded: 3,
      preloadDelay: 15,
      listenDelay: 15,
      listeningIsSubmitted: false,
      soundsCache: [],
      soundId: null,
      playTimeout: null,
      nextTrackPreloaded: false
    }
  },
  computed: {
    ...mapState({
      currentIndex: state => state.queue.currentIndex,
      playing: state => state.player.playing,
      isLoadingAudio: state => state.player.isLoadingAudio,
      volume: state => state.player.volume,
      looping: state => state.player.looping,
      duration: state => state.player.duration,
      bufferProgress: state => state.player.bufferProgress,
      errored: state => state.player.errored,
      currentTime: state => state.player.currentTime,
      queue: state => state.queue
    }),
    ...mapGetters({
      currentTrack: 'queue/currentTrack',
      hasNext: 'queue/hasNext',
      hasPrevious: 'queue/hasPrevious',
      emptyQueue: 'queue/isEmpty',
      durationFormatted: 'player/durationFormatted',
      currentTimeFormatted: 'player/currentTimeFormatted',
      progress: 'player/progress'
    }),
    updateProgressThrottled () {
      return throttle(this.updateProgress, 50)
    },
    labels () {
      const audioPlayer = this.$pgettext('Sidebar/Player/Hidden text', 'Media player')
      const previous = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Previous track')
      const play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play')
      const pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause')
      const next = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Next track')
      const unmute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Unmute')
      const mute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Mute')
      const expandQueue = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Expand queue')
      const loopingDisabled = this.$pgettext('Sidebar/Player/Icon.Tooltip',
        'Looping disabled. Click to switch to single-track looping.'
      )
      const loopingSingle = this.$pgettext('Sidebar/Player/Icon.Tooltip',
        'Looping on a single track. Click to switch to whole queue looping.'
      )
      const loopingWhole = this.$pgettext('Sidebar/Player/Icon.Tooltip',
        'Looping on whole queue. Click to disable looping.'
      )
      const shuffle = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Shuffle your queue')
      const clear = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Clear your queue')
      const addArtistContentFilter = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
      return {
        audioPlayer,
        previous,
        play,
        pause,
        next,
        unmute,
        mute,
        loopingDisabled,
        loopingSingle,
        loopingWhole,
        shuffle,
        clear,
        expandQueue,
        addArtistContentFilter
      }
    }
  },
  watch: {
    currentTrack: {
      async handler (newValue, oldValue) {
        if (newValue === oldValue) {
          return
        }
        this.nextTrackPreloaded = false
        clearTimeout(this.playTimeout)
        if (this.currentSound) {
          this.currentSound.pause()
        }
        this.$store.commit('player/isLoadingAudio', true)
        this.playTimeout = setTimeout(async () => {
          await this.loadSound(newValue, oldValue)
        }, 100)
        this.updateMetadata()
      },
      immediate: false
    },
    volume: {
      immediate: true,
      handler (newValue) {
        this.sliderVolume = newValue
        Howler.volume(toLinearVolumeScale(newValue))
      }
    },
    sliderVolume (newValue) {
      this.$store.commit('player/volume', newValue)
    },
    playing: async function (newValue) {
      if (this.currentSound) {
        if (newValue === true) {
          this.soundId = this.currentSound.play(this.soundId)
        } else {
          this.currentSound.pause(this.soundId)
        }
      } else {
        await this.loadSound(this.currentTrack, null)
      }

      this.observeProgress(newValue)
    },
    currentTime (newValue) {
      if (!this.isUpdatingTime) {
        this.setCurrentTime(newValue)
      }
      this.isUpdatingTime = false
    },
    emptyQueue (newValue) {
      if (newValue) {
        Howler.unload()
      }
    }
  },
  mounted () {
    this.$store.dispatch('player/updateProgress', 0)
    this.$store.commit('player/playing', false)
    this.$store.commit('player/isLoadingAudio', false)
    Howler.unload() // clear existing cache, if any
    this.nextTrackPreloaded = false
    // this is needed to unlock audio playing under some browsers,
    // cf https://github.com/goldfire/howler.js#mobilechrome-playback
    // but we never actually load those audio files
    this.dummyAudio = new Howl({
      preload: false,
      autoplay: false,
      src: ['noop.webm', 'noop.mp3']
    })
    if (this.currentTrack) {
      this.getSound(this.currentTrack)
      this.updateMetadata()
    }
    // Add controls for notification drawer
    if ('mediaSession' in navigator) {
      navigator.mediaSession.setActionHandler('play', this.resumePlayback)
      navigator.mediaSession.setActionHandler('pause', this.pausePlayback)
      navigator.mediaSession.setActionHandler('seekforward', this.seekForward)
      navigator.mediaSession.setActionHandler('seekbackward', this.seekBackward)
      navigator.mediaSession.setActionHandler('nexttrack', this.next)
      navigator.mediaSession.setActionHandler('previoustrack', this.previous)
    }
  },
  beforeDestroy () {
    this.dummyAudio.unload()
    this.observeProgress(false)
  },
  destroyed () {
  },
  methods: {
    ...mapActions({
      resumePlayback: 'player/resumePlayback',
      pausePlayback: 'player/pausePlayback',
      togglePlayback: 'player/togglePlayback',
      mute: 'player/mute',
      unmute: 'player/unmute',
      clean: 'queue/clean',
      toggleMute: 'player/toggleMute'
    }),
    async getTrackData (trackData) {
      // use previously fetched trackData
      if (trackData.uploads.length) return trackData

      // we don't have any information for this track, we need to fetch it
      return axios.get(`tracks/${trackData.id}/`)
        .then(
          response => response.data,
          () => null
        )
    },
    shuffle () {
      const disabled = this.queue.tracks.length === 0
      if (this.isShuffling || disabled) {
        return
      }
      const self = this
      const msg = this.$pgettext('Content/Queue/Message', 'Queue shuffled!')
      this.isShuffling = true
      setTimeout(() => {
        self.$store.dispatch('queue/shuffle', () => {
          self.isShuffling = false
          self.$store.commit('ui/addMessage', {
            content: msg,
            date: new Date()
          })
        })
      }, 100)
    },
    next () {
      const self = this
      this.$store.dispatch('queue/next').then(() => {
        self.$emit('next')
      })
    },
    previous () {
      const self = this
      this.$store.dispatch('queue/previous').then(() => {
        self.$emit('previous')
      })
    },
    handleError ({ sound, error }) {
      this.$store.commit('player/isLoadingAudio', false)
      this.$store.dispatch('player/trackErrored')
    },
    getSound (trackData) {
      const cached = this.getSoundFromCache(trackData)
      if (cached) {
        return cached.sound
      }
      const srcs = this.getSrcs(trackData)
      const self = this
      const sound = new Howl({
        src: srcs.map((s) => { return s.url }),
        format: srcs.map((s) => { return s.type }),
        autoplay: false,
        loop: false,
        html5: true,
        preload: true,
        onend: function () {
          self.ended()
        },
        onunlock: function () {
          if (self.$store.state.player.playing && self.sound) {
            self.soundId = self.sound.play(self.soundId)
          }
        },
        onload: function () {
          const sound = this
          const node = this._sounds[0]._node
          node.addEventListener('progress', () => {
            if (sound !== self.currentSound) {
              return
            }
            self.updateBuffer(node)
          })
        },
        onplay: function () {
          if (this !== self.currentSound) {
            this.stop()
            return
          }
          const t = self.currentSound.seek()
          const d = self.currentSound.duration()
          if (t <= (d / 2)) {
            self.listeningIsSubmitted = false
          }
          self.$store.commit('player/isLoadingAudio', false)
          self.$store.commit('player/resetErrorCount')
          self.$store.commit('player/errored', false)
          self.$store.commit('player/duration', this.duration())
        },
        onloaderror: function (sound, error) {
          self.removeFromCache(this)
          if (this !== self.currentSound) {
            return
          }
          console.log('Error while playing:', sound, error)
          self.handleError({ sound, error })
        }
      })
      this.addSoundToCache(sound, trackData)
      return sound
    },
    getSrcs: function (trackData) {
      const a = document.createElement('audio')
      const allowed = ['probably', 'maybe']
      const sources = trackData.uploads.filter(u => {
        const canPlay = a.canPlayType(u.mimetype)
        return allowed.indexOf(canPlay) > -1
      }).map(u => {
        return {
          type: u.extension,
          url: this.$store.getters['instance/absoluteUrl'](u.listen_url)
        }
      })
      a.remove()
      // We always add a transcoded MP3 src at the end
      // because transcoding is expensive, but we want browsers that do
      // not support other codecs to be able to play it :)
      sources.push({
        type: 'mp3',
        url: updateQueryString(
          this.$store.getters['instance/absoluteUrl'](trackData.listen_url),
          'to',
          'mp3'
        )
      })
      if (this.$store.state.auth.authenticated) {
        // we need to send the token directly in url
        // so authentication can be checked by the backend
        // because for audio files we cannot use the regular Authentication
        // header
        let param = 'jwt'
        let value = this.$store.state.auth.token
        if (this.$store.state.auth.scopedTokens && this.$store.state.auth.scopedTokens.listen) {
          // used scoped tokens instead of JWT to reduce the attack surface if the token
          // is leaked
          param = 'token'
          value = this.$store.state.auth.scopedTokens.listen
        }
        sources.forEach(e => {
          e.url = updateQueryString(e.url, param, value)
        })
      }
      return sources
    },

    updateBuffer (node) {
      // from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
      let range = 0
      const bf = node.buffered
      const time = node.currentTime
      try {
        while (!(bf.start(range) <= time && time <= bf.end(range))) {
          range += 1
        }
      } catch (IndexSizeError) {
        return
      }
      let loadPercentage
      const start = bf.start(range)
      const end = bf.end(range)
      if (range === 0) {
        // easy case, no user-seek
        const loadStartPercentage = start / node.duration
        const loadEndPercentage = end / node.duration
        loadPercentage = loadEndPercentage - loadStartPercentage
      } else {
        const loaded = end - start
        const remainingToLoad = node.duration - start
        // user seeked a specific position in the audio, our progress must be
        // computed based on the remaining portion of the track
        loadPercentage = loaded / remainingToLoad
      }
      if (loadPercentage * 100 === this.bufferProgress) {
        return
      }
      this.$store.commit('player/bufferProgress', loadPercentage * 100)
    },
    updateProgress: function () {
      this.isUpdatingTime = true
      if (this.currentSound && this.currentSound.state() === 'loaded') {
        const t = this.currentSound.seek()
        const d = this.currentSound.duration()
        this.$store.dispatch('player/updateProgress', t)
        this.updateBuffer(this.currentSound._sounds[0]._node)
        const toPreload = this.$store.state.queue.tracks[this.currentIndex + 1]
        if (!this.nextTrackPreloaded && toPreload && !this.getSoundFromCache(toPreload) && (t > this.preloadDelay || d - t < 30)) {
          this.getSound(toPreload)
          this.nextTrackPreloaded = true
        }
        if (t > (d / 2)) {
          if (!this.listeningIsSubmitted) {
            this.$store.dispatch('player/trackListened', this.currentTrack)
            this.listeningIsSubmitted = true
          }
        }
      }
    },
    seek (step) {
      if (step > 0) {
        // seek right
        if (this.currentTime + step < this.duration) {
          this.$store.dispatch('player/updateProgress', (this.currentTime + step))
        } else {
          this.next() // parenthesis where missing here
        }
      } else {
        // seek left
        const position = Math.max(this.currentTime + step, 0)
        this.$store.dispatch('player/updateProgress', position)
      }
    },
    seekForward () {
      this.seek(5)
    },
    seekBackward () {
      this.seek(-5)
    },
    observeProgress: function (enable) {
      const self = this
      if (enable) {
        if (self.progressInterval) {
          clearInterval(self.progressInterval)
        }
        self.progressInterval = setInterval(() => {
          self.updateProgress()
        }, 1000)
      } else {
        clearInterval(self.progressInterval)
      }
    },
    setCurrentTime (t) {
      if (t < 0 || t > this.duration) {
        return
      }
      if (!this.currentSound || !this.currentSound._sounds[0]) {
        return
      }
      if (t === this.currentSound.seek()) {
        return
      }
      if (t === 0) {
        this.updateProgressThrottled.cancel()
      }
      this.currentSound.seek(t)
      // If player is paused update progress immediately to ensure updated UI
      if (!this.$store.state.player.playing) {
        this.updateProgress()
      }
    },
    ended: function () {
      const onlyTrack = this.$store.state.queue.tracks.length === 1
      if (this.looping === 1 || (onlyTrack && this.looping === 2)) {
        this.currentSound.seek(0)
        this.$store.dispatch('player/updateProgress', 0)
        this.soundId = this.currentSound.play(this.soundId)
      } else {
        this.$store.dispatch('player/trackEnded', this.currentTrack)
      }
    },
    getSoundFromCache (trackData) {
      return this.soundsCache.filter((d) => {
        if (d.track.id !== trackData.id) {
          return false
        }

        return true
      })[0]
    },
    addSoundToCache (sound, trackData) {
      const data = {
        date: new Date(),
        track: trackData,
        sound: sound
      }
      this.soundsCache.push(data)
      this.checkCache()
    },
    checkCache () {
      const self = this
      const toKeep = []
      reverse(this.soundsCache).forEach((e) => {
        if (toKeep.length < self.maxPreloaded) {
          toKeep.push(e)
        } else {
          e.sound.unload()
        }
      })
      this.soundsCache = reverse(toKeep)
    },
    removeFromCache (sound) {
      const toKeep = []
      this.soundsCache.forEach((e) => {
        if (e.sound === sound) {
          e.sound.unload()
        } else {
          toKeep.push(e)
        }
      })
      this.soundsCache = toKeep
    },
    async loadSound (newValue, oldValue) {
      let trackData = newValue
      const oldSound = this.currentSound
      if (oldSound && trackData !== oldValue) {
        oldSound.stop(this.soundId)
        this.soundId = null
      }
      if (!trackData) {
        return
      }
      if (!this.isShuffling && trackData !== oldValue) {
        trackData = await this.getTrackData(trackData)
        if (trackData == null) {
          this.handleError({})
        }
        this.currentSound = this.getSound(trackData)
        this.$store.commit('player/isLoadingAudio', true)
        this.soundId = this.currentSound.play()
        this.$store.commit('player/errored', false)
        this.$store.commit('player/playing', true)
        this.$store.dispatch('player/updateProgress', 0)
        this.observeProgress(true)
      }
    },
    toggleMobilePlayer () {
      if (['queue', 'player'].indexOf(this.$store.state.ui.queueFocused) > -1) {
        this.$store.commit('ui/queueFocused', null)
      } else {
        this.$store.commit('ui/queueFocused', 'player')
      }
    },
    switchTab () {
      if (this.$store.state.ui.queueFocused === 'player') {
        this.$store.commit('ui/queueFocused', 'queue')
      } else {
        this.$store.commit('ui/queueFocused', 'player')
      }
    },
    updateMetadata () {
      // If the session is playing as a PWA, populate the notification
      // with details from the track
      if (this.currentTrack && 'mediaSession' in navigator) {
        const metadata = {
          title: this.currentTrack.title,
          artist: this.currentTrack.artist.name
        }
        if (this.currentTrack.album && this.currentTrack.album.cover) {
          metadata.album = this.currentTrack.album.title
          metadata.artwork = [
            { src: this.currentTrack.album.cover.urls.original, sizes: '96x96', type: 'image/png' },
            { src: this.currentTrack.album.cover.urls.original, sizes: '128x128', type: 'image/png' },
            { src: this.currentTrack.album.cover.urls.original, sizes: '192x192', type: 'image/png' },
            { src: this.currentTrack.album.cover.urls.original, sizes: '256x256', type: 'image/png' },
            { src: this.currentTrack.album.cover.urls.original, sizes: '384x384', type: 'image/png' },
            { src: this.currentTrack.album.cover.urls.original, sizes: '512x512', type: 'image/png' }
          ]
        }
        navigator.mediaSession.metadata = new window.MediaMetadata(metadata)
      }
    }
  }
}
</script>
