<template>
  <a v-if="visible" :disabled="disabled" @click="seek">
    <mdicon
      name="fast-forward-30"
      :size="icon_size"
      :title="$t('player.button.seek-forward')"
    />
  </a>
</template>

<script>
import webapi from '@/webapi'

export default {
  name: 'PlayerButtonSeekForward',
  props: {
    icon_size: { default: 16, type: Number },
    seek_ms: { required: true, type: Number }
  },

  computed: {
    disabled() {
      return (
        !this.$store.state.queue ||
        this.$store.state.queue.count <= 0 ||
        this.is_stopped ||
        this.now_playing.data_kind === 'pipe'
      )
    },
    is_stopped() {
      return this.$store.state.player.state === 'stop'
    },
    now_playing() {
      return this.$store.getters.now_playing
    },
    visible() {
      return ['podcast', 'audiobook'].includes(this.now_playing.media_kind)
    }
  },

  methods: {
    seek() {
      if (!this.disabled) {
        webapi.player_seek(this.seek_ms)
      }
    }
  }
}
</script>
