fix player
This commit is contained in:
Stepan Fedyanin
parent
97cfdb508a
commit
f433380466
|
|
@ -73,6 +73,7 @@ export default boot(async ({ app, router }) => {
|
|||
}),
|
||||
toggle: createInput(toggle, {
|
||||
props: ['placeholder', 'disabled', 'readonly'],
|
||||
emits: ['toggle']
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,27 +1,42 @@
|
|||
<template>
|
||||
<input
|
||||
class="input field__checkbox-input"
|
||||
:id="props.context.id"
|
||||
:value="props.context._value"
|
||||
:id="context.id"
|
||||
:checked="context._value"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
type="checkbox"
|
||||
@change="change"
|
||||
>
|
||||
<label class="field__checkbox-label" :for="props.context.id">
|
||||
{{ props.context.label }}
|
||||
<label class="field__checkbox-label" :for="context.id">
|
||||
{{ context.label }}
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, onUpdated, computed } from 'vue';
|
||||
<script>
|
||||
import {defineProps, ref, onUpdated, computed} from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
context: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
export default {
|
||||
props: {
|
||||
context: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
placeholder: this.context.placeholder || '',
|
||||
disabled: this.context.disabled || false,
|
||||
readonly: this.context.readonly || false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.context.node.input(!this.context._value);
|
||||
}
|
||||
}
|
||||
});
|
||||
const placeholder = props.context.placeholder || '';
|
||||
const disabled = props.context.disabled || false;
|
||||
const readonly = props.context.readonly || false;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,17 @@
|
|||
<button v-else @click="handlerPlay" class="button player__btn m--play">
|
||||
</button>
|
||||
<div class="player__executor">
|
||||
{{currentPlay.title || '—'}}
|
||||
<span>{{currentPlay.artist || '—'}}</span>
|
||||
{{ 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="Включить мою музыку"
|
||||
@change="changeLive"
|
||||
/>
|
||||
<div class="player__volume">
|
||||
<span @click="setVolume"/>
|
||||
|
|
@ -50,88 +50,98 @@ export default {
|
|||
audioUrl: 'http://82.97.242.49:18000/radio.mp3',
|
||||
isFavorites: false,
|
||||
isPlayRadio: true,
|
||||
connection: null,
|
||||
isLive: false
|
||||
}
|
||||
connection: null,
|
||||
isLive: !this.$store.state.currentPlay.live,
|
||||
}
|
||||
},
|
||||
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');
|
||||
// }
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user;
|
||||
},
|
||||
currentPlay() {
|
||||
return this.$store.state.currentPlay
|
||||
},
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'currentPlay': {
|
||||
immediate: false,
|
||||
handler() {
|
||||
if (this.isLive!==!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(){
|
||||
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: true});
|
||||
}
|
||||
}
|
||||
},
|
||||
updateProgress() {
|
||||
console.log(this.$refs.player.currentTime)
|
||||
console.log(this.$refs.player.duration)
|
||||
},
|
||||
handlerPlay() {
|
||||
this.$store.dispatch('handlerPlayer', {play: true});
|
||||
this.$store.dispatch('handlerPlayer', {play: true});
|
||||
},
|
||||
handlerPause() {
|
||||
this.$store.dispatch('handlerPlayer', {pause: true});
|
||||
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(()=>{
|
||||
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)
|
||||
}
|
||||
|
||||
})
|
||||
}else {
|
||||
this.$emit('shopAuthentication', true)
|
||||
}
|
||||
|
||||
},
|
||||
setVolume(){
|
||||
this.$store.dispatch('handlerPlayer', {volume: 100});
|
||||
},
|
||||
setVolume() {
|
||||
this.$store.dispatch('handlerPlayer', {volume: 100});
|
||||
},
|
||||
changeVolume() {
|
||||
this.$store.dispatch('handlerPlayer', {volume: 100});
|
||||
this.$store.dispatch('handlerPlayer', {volume: 100});
|
||||
},
|
||||
|
||||
changeLive(e) {
|
||||
console.log(e)
|
||||
if (this.currentPlay.live) {
|
||||
this.$store.dispatch('setCurrentPlay', {live: false});
|
||||
console.log('избранное')
|
||||
} else {
|
||||
this.$store.dispatch('setCurrentPlay', {live: true});
|
||||
console.log('поток')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default createStore({
|
|||
player:{
|
||||
target: null,
|
||||
volume: 50,
|
||||
live: false,
|
||||
live: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -53,7 +53,7 @@ export default createStore({
|
|||
state.player.target.src = '';
|
||||
state.player.target.preload = 'auto';
|
||||
state.player.target.controls = true;
|
||||
console.log(state.player.target)
|
||||
console.log('initPlayer',state.player.target)
|
||||
},
|
||||
changePlayer(state, params){
|
||||
state.player.target.src = params;
|
||||
|
|
@ -101,6 +101,6 @@ export default createStore({
|
|||
changePlayer(context, params){
|
||||
context.commit('changePlayer', params);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue