<template>
  <div>
    <div id="player-spacer" v-if="$store.state.playerActive"></div>
    <div id="player-holder" v-if="$store.state.playerActive">
      <b-button variant="danger" id="player-close-btn" size="sm" squared @click="closePlayer">×</b-button>
      <iframe :src="$store.state.playerUrl" width="100%" height="80px" frameborder="0" allowtransparency="true"
              allow="encrypted-media"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: "SpotifyPlayer",
  methods: {
    closePlayer() {
      this.$store.dispatch('closePlayer');
    }
  }
}
</script>

<style scoped>
#player-holder {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background-color: black;
  z-index: 10;
}

#player-close-btn {
  top: -22.97px;
  right: 0;
  position: absolute;
  padding: 0 6px;
}

</style>