Students
/
ITRadio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix player

This commit is contained in:
Stepan Fedyanin 2024-06-13 07:32:32 +05:00
parent 97cfdb508a
commit f433380466
4 changed files with 114 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/boot/main.js
View File

@ -73,6 +73,7 @@ export default boot(async ({ app, router }) => {
}), }),
toggle: createInput(toggle, { toggle: createInput(toggle, {
props: ['placeholder', 'disabled', 'readonly'], props: ['placeholder', 'disabled', 'readonly'],
emits: ['toggle']
}), }),
}, },
}; };

43
client/src/components/inputs/toggle.vue
View File

@ -1,27 +1,42 @@
<template> <template>
<input <input
class="input field__checkbox-input" class="input field__checkbox-input"
:id="props.context.id" :id="context.id"
:value="props.context._value" :checked="context._value"
:disabled="disabled" :disabled="disabled"
:readonly="readonly" :readonly="readonly"
type="checkbox" type="checkbox"
@change="change"
> >
<label class="field__checkbox-label" :for="props.context.id"> <label class="field__checkbox-label" :for="context.id">
{{ props.context.label }} {{ context.label }}
</label> </label>
</template> </template>
<script setup> <script>
import { defineProps, ref, onUpdated, computed } from 'vue'; import {defineProps, ref, onUpdated, computed} from 'vue';
const props = defineProps({ export default {
context: { props: {
type: Object, context: {
default: () => {} 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> </script>

150
client/src/components/player.vue
View File

@ -10,17 +10,17 @@
<button v-else @click="handlerPlay" class="button player__btn m--play"> <button v-else @click="handlerPlay" class="button player__btn m--play">
</button> </button>
<div class="player__executor"> <div class="player__executor">
{{currentPlay.title || '—'}} {{ currentPlay.title || '—' }}
<span>{{currentPlay.artist || '—'}}</span> <span>{{ currentPlay.artist || '—' }}</span>
</div> </div>
<div class="player__favorites" :class="[isFavorites&&'m--active']" @click="handlerFavorites"> <div class="player__favorites" :class="[isFavorites&&'m--active']" @click="handlerFavorites">
</div> </div>
<div class="player__tools"> <div class="player__tools">
{{isLive}}
<FormKit <FormKit
v-model="isLive" v-model="isLive"
type="toggle" type="toggle"
label="Включить мою музыку" label="Включить мою музыку"
@change="changeLive"
/> />
<div class="player__volume"> <div class="player__volume">
<span @click="setVolume"/> <span @click="setVolume"/>
@ -50,88 +50,98 @@ export default {
audioUrl: 'http://82.97.242.49:18000/radio.mp3', audioUrl: 'http://82.97.242.49:18000/radio.mp3',
isFavorites: false, isFavorites: false,
isPlayRadio: true, isPlayRadio: true,
connection: null, connection: null,
isLive: false isLive: !this.$store.state.currentPlay.live,
} }
}, },
computed:{ computed: {
user() { user() {
return this.$store.state.user; return this.$store.state.user;
}, },
currentPlay(){ currentPlay() {
return this.$store.state.currentPlay return this.$store.state.currentPlay
}, },
player(){ player() {
return this.$store.state.player return this.$store.state.player
} }
}, },
watch:{ watch: {
'currentPlay': { 'currentPlay': {
immediate: true, immediate: false,
handler() { handler() {
console.debug('this.currentPlay.live',!this.currentPlay.live) if (this.isLive!==!this.currentPlay.live){
this.isLive = !this.currentPlay.live this.isLive = !this.currentPlay.live;
}, }
} },
}, },
created() { },
this.connectionPlayer(); created() {
}, this.connectionPlayer();
mounted() { },
// if (!this.player.target){ mounted() {
this.$store.dispatch('initPlayer'); if (!this.player.target) {
// } this.$store.dispatch('initPlayer');
}
}, },
methods: { methods: {
connectionPlayer() { connectionPlayer() {
if (this.connection) { if (this.connection) {
this.connection.removePlay(); this.connection.removePlay();
} }
this.connection = new Player(); this.connection = new Player();
this.connection.init(); this.connection.init();
this.connection.onHandler(this.getPlaying); this.connection.onHandler(this.getPlaying);
}, },
getPlaying (e){ getPlaying(e) {
const jsonData = JSON.parse(e.data) const jsonData = JSON.parse(e.data)
if (jsonData?.pub?.data){ if (jsonData?.pub?.data) {
const data = jsonData?.pub?.data; const data = jsonData?.pub?.data;
if (this.currentPlay.live){ if (this.currentPlay.live) {
if (data.np.station.listen_url!==this.player.target.src){ if (data.np.station.listen_url !== this.player.target.src) {
this.$store.dispatch('changePlayer', data.np.station.listen_url); this.$store.dispatch('changePlayer', data.np.station.listen_url);
} }
this.$store.dispatch('setCurrentPlay', {...data.np.now_playing.song, live: false}); this.$store.dispatch('setCurrentPlay', {...data.np.now_playing.song, live: true});
} }
} }
}, },
updateProgress(){ updateProgress() {
console.log(this.$refs.player.currentTime) console.log(this.$refs.player.currentTime)
console.log(this.$refs.player.duration) console.log(this.$refs.player.duration)
}, },
handlerPlay() { handlerPlay() {
this.$store.dispatch('handlerPlayer', {play: true}); this.$store.dispatch('handlerPlayer', {play: true});
}, },
handlerPause() { handlerPause() {
this.$store.dispatch('handlerPlayer', {pause: true}); this.$store.dispatch('handlerPlayer', {pause: true});
}, },
handlerFavorites(){ handlerFavorites() {
if (this.user?.id){ if (this.user?.id) {
this.isFavorites = !this.isFavorites; this.isFavorites = !this.isFavorites;
const params = {...this.currentPlay, azura_id:this.currentPlay.id}; const params = {...this.currentPlay, azura_id: this.currentPlay.id};
app.createFavoriteForUser(params).then(()=>{ app.createFavoriteForUser(params).then(() => {
}) })
}else { } else {
this.$emit('shopAuthentication', true) this.$emit('shopAuthentication', true)
} }
}, },
setVolume(){ setVolume() {
this.$store.dispatch('handlerPlayer', {volume: 100}); this.$store.dispatch('handlerPlayer', {volume: 100});
}, },
changeVolume() { 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> </script>

4
client/src/store/index.js
View File

@ -22,7 +22,7 @@ export default createStore({
player:{ player:{
target: null, target: null,
volume: 50, volume: 50,
live: false, live: true,
} }
} }
}, },
@ -53,7 +53,7 @@ export default createStore({
state.player.target.src = ''; state.player.target.src = '';
state.player.target.preload = 'auto'; state.player.target.preload = 'auto';
state.player.target.controls = true; state.player.target.controls = true;
console.log(state.player.target) console.log('initPlayer',state.player.target)
}, },
changePlayer(state, params){ changePlayer(state, params){
state.player.target.src = params; state.player.target.src = params;