<template>
<button :class="[ currentSong?.id === media_id ? '' : 'hidden', 'default' ]">
    <svg :class="[ playing ? 'hidden' : 'block', 'w-6 h-6' ]">
        <use xlink:href="#play"></use>
    </svg>
    <svg :class="[ playing ? 'block' : 'hidden', 'w-6 h-6' ]">
        <use xlink:href="#pause"></use>
    </svg>
</button>
<button :class="[ currentSong?.id !== media_id ? '' : 'hidden', 'default' ]">
    <svg class="w-6 h-6">
        <use xlink:href="#play"></use>
    </svg>
</button>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  components: {

   },
  props: {
    media_id: Number,
  },
    computed: {
    ...mapGetters(["playing"]),
    ...mapState({
      currentSong: (state) => state.player.currentSong,
    }),
  },
};
</script>
