138 lines
3.8 KiB
Vue
138 lines
3.8 KiB
Vue
<template>
|
|
<div class="player">
|
|
<div class="player__cover">
|
|
<img :src="currentPlay.art" alt="player"/>
|
|
</div>
|
|
<div class="player__content">
|
|
<div class="player__top">
|
|
<button v-if="currentPlay.isPlay" @click="handlerPause" class="button player__btn m--pause">
|
|
</button>
|
|
<button v-else @click="handlerPlay" class="button player__btn m--play">
|
|
</button>
|
|
<div class="player__executor">
|
|
{{currentPlay.title || '—'}}
|
|
<span>{{currentPlay.artist || '—'}}</span>
|
|
</div>
|
|
<div class="player__favorites" :class="[isFavorites&&'m--active']" @click="handlerFavorites">
|
|
</div>
|
|
<div class="player__tools">
|
|
{{isLive}}
|
|
<FormKit
|
|
v-model="isLive"
|
|
type="toggle"
|
|
label="Включить мою музыку"
|
|
/>
|
|
<div class="player__volume">
|
|
<span @click="setVolume"/>
|
|
<input type="range" v-model="player.volume" @change="changeVolume">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="player__bottom">
|
|
<div class="player__time m--ether">
|
|
Эфир
|
|
</div>
|
|
<div class="player__progress">
|
|
<input :disabled="player.live" type="range" v-model="player.progress">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {audio as Player, app} from "@/services";
|
|
|
|
export default {
|
|
name: 'player',
|
|
data() {
|
|
return {
|
|
audioUrl: 'http://82.97.242.49:18000/radio.mp3',
|
|
isFavorites: false,
|
|
isPlayRadio: true,
|
|
connection: null,
|
|
isLive: false
|
|
}
|
|
},
|
|
computed:{
|
|
user() {
|
|
return this.$store.state.user;
|
|
},
|
|
currentPlay(){
|
|
return this.$store.state.currentPlay
|
|
},
|
|
player(){
|
|
return this.$store.state.player
|
|
}
|
|
},
|
|
watch:{
|
|
'currentPlay': {
|
|
immediate: true,
|
|
handler() {
|
|
console.debug('this.currentPlay.live',!this.currentPlay.live)
|
|
this.isLive = !this.currentPlay.live
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
this.connectionPlayer();
|
|
},
|
|
mounted() {
|
|
// if (!this.player.target){
|
|
this.$store.dispatch('initPlayer');
|
|
// }
|
|
},
|
|
methods: {
|
|
connectionPlayer() {
|
|
if (this.connection) {
|
|
this.connection.removePlay();
|
|
}
|
|
this.connection = new Player();
|
|
this.connection.init();
|
|
this.connection.onHandler(this.getPlaying);
|
|
},
|
|
getPlaying (e){
|
|
const jsonData = JSON.parse(e.data)
|
|
if (jsonData?.pub?.data){
|
|
const data = jsonData?.pub?.data;
|
|
if (this.currentPlay.live){
|
|
if (data.np.station.listen_url!==this.player.target.src){
|
|
this.$store.dispatch('changePlayer', data.np.station.listen_url);
|
|
}
|
|
this.$store.dispatch('setCurrentPlay', {...data.np.now_playing.song, live: false});
|
|
}
|
|
}
|
|
},
|
|
updateProgress(){
|
|
console.log(this.$refs.player.currentTime)
|
|
console.log(this.$refs.player.duration)
|
|
},
|
|
handlerPlay() {
|
|
this.$store.dispatch('handlerPlayer', {play: true});
|
|
},
|
|
handlerPause() {
|
|
this.$store.dispatch('handlerPlayer', {pause: true});
|
|
},
|
|
handlerFavorites(){
|
|
if (this.user?.id){
|
|
this.isFavorites = !this.isFavorites;
|
|
const params = {...this.currentPlay, azura_id:this.currentPlay.id};
|
|
app.createFavoriteForUser(params).then(()=>{
|
|
|
|
})
|
|
}else {
|
|
this.$emit('shopAuthentication', true)
|
|
}
|
|
|
|
},
|
|
setVolume(){
|
|
this.$store.dispatch('handlerPlayer', {volume: 100});
|
|
},
|
|
changeVolume() {
|
|
this.$store.dispatch('handlerPlayer', {volume: 100});
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|