Button.vue 1.43 KB
Newer Older
1
<template>
jovuit's avatar
jovuit committed
2
  <button @click="toggleRadio" :class="['ui', 'blue', {'inverted': running}, 'icon', 'labeled', 'button']">
3
    <i class="ui feed icon"></i>
jovuit's avatar
jovuit committed
4 5
    <template v-if="running"><translate translate-context="*/Player/Button.Label/Short, Verb">Stop radio</translate></template>
    <template v-else><translate translate-context="*/Queue/Button.Label/Short, Verb">Start radio</translate></template>
6 7 8 9 10
  </button>
</template>

<script>

11
import lodash from '@/lodash'
12 13
export default {
  props: {
Agate's avatar
Agate committed
14 15
    customRadioId: {required: false},
    type: {type: String, required: false},
16
    clientOnly: {type: Boolean, default: false},
17
    objectId: {default: null}
18 19 20 21
  },
  methods: {
    toggleRadio () {
      if (this.running) {
22
        this.$store.dispatch('radios/stop')
23
      } else {
24 25 26 27 28 29
        this.$store.dispatch('radios/start', {
          type: this.type,
          objectId: this.objectId,
          customRadioId: this.customRadioId,
          clientOnly: this.clientOnly,
        })
30 31 32 33 34
      }
    }
  },
  computed: {
    running () {
35 36 37
      let state = this.$store.state.radios
      let current = state.current
      if (!state.running) {
38 39
        return false
      } else {
40
        return current.type === this.type && lodash.isEqual(current.objectId, this.objectId) && current.customRadioId === this.customRadioId
41 42 43 44 45 46 47 48 49 50 51 52
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
i {
  cursor: pointer;
}
</style>