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> |