40 lines
833 B
Vue
40 lines
833 B
Vue
|
<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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#player-close-btn {
|
|||
|
|
top: -22.97px;
|
|||
|
|
right: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
padding: 0 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|