From 7f8d3e6f86aebd3ca2439e25fab8d4d5932f9a75 Mon Sep 17 00:00:00 2001 From: Stepan Fedyanin Date: Thu, 20 Jun 2024 17:33:55 +0500 Subject: [PATCH] fix player + add playlist --- client/.env.development | 2 +- client/src/App.vue | 14 +- client/src/assets/css/index.scss | 1 + client/src/assets/css/mixins/form.scss | 11 +- client/src/assets/css/module/fiald.scss | 18 +++ client/src/assets/css/module/modal.scss | 8 +- client/src/assets/css/module/player.scss | 4 +- client/src/assets/css/module/playlist.scss | 81 +++++++++++ client/src/assets/css/module/profile.scss | 1 + client/src/assets/css/module/song.scss | 80 ++++++++--- client/src/assets/css/module/tabs.scss | 7 + client/src/assets/css/setting.scss | 5 +- client/src/components/app-header.vue | 2 +- .../components/{ => modal}/authentication.vue | 56 ++++---- .../components/{ => modal}/rubric-modal.vue | 0 .../src/components/modal/сhanging-user.vue | 109 +++++++++++++++ client/src/components/player.vue | 65 ++++++--- client/src/components/playlist-item.vue | 23 ++++ client/src/components/playlist-roster.vue | 37 +++++ client/src/components/rubric-block.vue | 2 +- client/src/components/song-item.vue | 14 +- client/src/components/song-list.vue | 17 ++- client/src/router/routes.js | 33 +++++ client/src/services/app.js | 45 ++++++- client/src/store/index.js | 13 +- client/src/views/playlist-edit.vue | 108 +++++++++++++++ client/src/views/playlist.vue | 11 ++ client/src/views/profile.vue | 127 +++++++++++++----- 28 files changed, 765 insertions(+), 129 deletions(-) create mode 100644 client/src/assets/css/module/playlist.scss rename client/src/components/{ => modal}/authentication.vue (79%) rename client/src/components/{ => modal}/rubric-modal.vue (100%) create mode 100644 client/src/components/modal/сhanging-user.vue create mode 100644 client/src/components/playlist-item.vue create mode 100644 client/src/components/playlist-roster.vue create mode 100644 client/src/views/playlist-edit.vue create mode 100644 client/src/views/playlist.vue diff --git a/client/.env.development b/client/.env.development index fd0530c..3829422 100644 --- a/client/.env.development +++ b/client/.env.development @@ -7,7 +7,7 @@ ROBOTS_USER_AGENT=* ROBOTS_ALLOW= ROBOTS_DISALLOW=["/"] SERVICE_SELF_URL=//it-radio.flexidev.ru -SERVICE_URL=//it-radio.flexidev.ru +SERVICE_URL=//82.97.242.49 SERVICE_URL_AUDIO=//82.97.242.49:10084 SERVICE_PROTOCOL=http SERVICE_PORT=8000 diff --git a/client/src/App.vue b/client/src/App.vue index e5eea1a..970b520 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -10,6 +10,7 @@ + diff --git a/client/src/components/player.vue b/client/src/components/player.vue index 8afca1d..54c5c2b 100644 --- a/client/src/components/player.vue +++ b/client/src/components/player.vue @@ -14,7 +14,7 @@
- + @@ -35,7 +35,7 @@ v-model="isUserMusic" type="toggle" label="Включить мою музыку" - :disabled="!user?.id" + :disabled="!user?.id || userSongList.length === 0" />
@@ -71,7 +71,6 @@ export default { components: {}, data() { return { - audioUrl: 'http://82.97.242.49:18000/radio.mp3', isFavorites: false, isPlayRadio: false, connection: null, @@ -108,7 +107,7 @@ export default { if (this.isUserMusic === this.currentPlay.live) { this.isUserMusic = !this.currentPlay.live; } - if (to.id !== from.id && this.user?.id) { + if (this.user?.id && to.id !== from.id) { this.checkSongIsFavorite(); } if (!this.currentPlay.live && to.id !== from.id) { @@ -116,6 +115,14 @@ export default { } }, }, + 'userSongList': { + immediate: false, + handler(to, from) { + if (this.user?.id && to.length !== from.length) { + this.checkSongIsFavorite(); + } + }, + }, 'isUserMusic': { immediate: false, handler() { @@ -133,16 +140,19 @@ export default { this.$store.dispatch('initPlayer'); if (this.user?.id) { this.checkSongIsFavorite(); + this.getSongList(); } this.playerInfo.progress = this.currentPlay.live ? 100 : 0; - console.log(this.currentPlay) if (!this.currentPlay.live && this.userSongList?.length > 0) { - this.$store.dispatch('setCurrentPlay', {...this.userSongList[0], live: false}); - this.getAudio(this.userSongList[0]?.azura_id); + this.$store.dispatch('setCurrentPlay', {...this.userSongList[this.currentPlay.currentIndex || 0], live: false}); + this.getAudio(this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id); if (this.player.target) { this.player.target.addEventListener('timeupdate', this.updateProgress) } } + if (!this.user?.id){ + this.$store.dispatch('setCurrentPlay', {...this.currentPlay, live: true, isLoader: true, currentIndex: null}); + } }, methods: { connectionPlayer() { @@ -154,7 +164,6 @@ export default { this.connection.onHandler(this.getPlaying); }, checkSongIsFavorite() { - console.debug(this.currentPlay.azura_id || this.currentPlay.id, this.currentPlay.title) app.getCheckFavoriteSong(this.currentPlay.azura_id || this.currentPlay.id).then(res => { this.isFavorites = res.is_favorite; }).catch(err => { @@ -177,16 +186,17 @@ export default { if (data.np.station.listen_url !== this.player.target.src) { console.log('data.np.station.listen_url', data.np.station.listen_url) this.$store.dispatch('changePlayer', data.np.station.listen_url); + const params = { + ...this.currentPlay, + ...data.np.now_playing.song, + azura_id: data.np.now_playing.song.id, + isLoader: false, + live: true, + currentIndex: null + } + delete params.unique_id; + this.$store.dispatch('setCurrentPlay', params); } - const params = { - ...this.currentPlay, - ...data.np.now_playing.song, - azura_id: data.np.now_playing.song.id, - isLoader: false, - live: true, - } - delete params.unique_id; - this.$store.dispatch('setCurrentPlay', params); } } }, @@ -197,10 +207,16 @@ export default { currentTime: this.player.target.currentTime } if (this.player.target.currentTime === this.player.target.duration){ - this.getAudio(this.userSongList[1]?.azura_id); + let currentIndex = this.currentPlay.currentIndex + 1; + if (!this.userSongList[currentIndex]?.azura_id || currentIndex === null){ + currentIndex = 0; + } + this.$store.dispatch('setCurrentPlay', {...this.currentPlay, ...this.userSongList[currentIndex], currentIndex}) } }, handlerPlay() { + console.log(this.currentPlay) + console.log(this.player) this.$store.dispatch('handlerPlayer', {play: true}); }, handlerPause() { @@ -209,13 +225,17 @@ export default { getSongList() { app.getFavoriteList().then(res => { this.$store.dispatch('setUserFavorite', {songs: res}) + console.log('res.length' ,res.length) + if (res.length === 0){ + this.$store.dispatch('setCurrentPlay', {...this.currentPlay, live: true, isLoader: true}); + } }).catch(err => { console.error(err) }) }, handlerFavorites() { if (this.user?.id) { - const params = {...this.currentPlay, azura_id: this.currentPlay.id}; + const params = {...this.currentPlay, azura_id: Number(this.currentPlay.id)?this.currentPlay.azura_id:this.currentPlay.id}; if (!this.isFavorites) { delete params.id; app.createFavoriteForUser(params).then(() => { @@ -252,7 +272,6 @@ export default { app.getAudio(id).then(res => { const blob = new Blob([res], {type: 'application/audio'}); const audioUrl = URL.createObjectURL(blob); - this.$store.dispatch('setCurrentPlay', {...this.currentPlay, isLoader: false}) this.$store.dispatch('changePlayer', audioUrl); this.player.target.addEventListener('timeupdate', this.updateProgress); @@ -263,6 +282,7 @@ export default { this.playerInfo.duration = decodedData.duration; }); }); + this.$store.dispatch('setCurrentPlay', {...this.currentPlay, isLoader: false}) }).catch(err => { this.$store.dispatch('setCurrentPlay', {...this.currentPlay, isLoader: false}) console.debug(err) @@ -271,9 +291,10 @@ export default { changeLive() { if (this.currentPlay.live) { console.log('избранное') - this.getAudio(this.userSongList[0].azura_id); this.playerInfo.progress = 0; - this.$store.dispatch('setCurrentPlay', {...this.userSongList[0], live: false, isLoader: true}); + const params = {...this.userSongList[this.currentPlay.currentIndex || 0], live: false, isLoader: true}; + if (!this.currentPlay.currentIndex) params.currentIndex = 0; + this.$store.dispatch('setCurrentPlay', params); } else { this.playerInfo.progress = 100; this.$store.dispatch('setCurrentPlay', {...this.currentPlay, live: true, isLoader: true}); diff --git a/client/src/components/playlist-item.vue b/client/src/components/playlist-item.vue new file mode 100644 index 0000000..5f08a74 --- /dev/null +++ b/client/src/components/playlist-item.vue @@ -0,0 +1,23 @@ + + + diff --git a/client/src/components/playlist-roster.vue b/client/src/components/playlist-roster.vue new file mode 100644 index 0000000..75ffe9a --- /dev/null +++ b/client/src/components/playlist-roster.vue @@ -0,0 +1,37 @@ + + + diff --git a/client/src/components/rubric-block.vue b/client/src/components/rubric-block.vue index 800c443..4844d5f 100644 --- a/client/src/components/rubric-block.vue +++ b/client/src/components/rubric-block.vue @@ -27,7 +27,7 @@ diff --git a/client/src/views/playlist.vue b/client/src/views/playlist.vue new file mode 100644 index 0000000..f80ec46 --- /dev/null +++ b/client/src/views/playlist.vue @@ -0,0 +1,11 @@ + + + diff --git a/client/src/views/profile.vue b/client/src/views/profile.vue index c245c8b..2e3a1f8 100644 --- a/client/src/views/profile.vue +++ b/client/src/views/profile.vue @@ -1,33 +1,51 @@ @@ -35,10 +53,11 @@ import AppBreadcrumbs from "@/components/app-breadcrumbs.vue"; import SongList from "@/components/song-list.vue"; import {app} from "@/services"; +import PlaylistRoster from "@/components/playlist-roster.vue"; export default { name: 'profile', - components: {SongList, AppBreadcrumbs}, + components: {PlaylistRoster, SongList, AppBreadcrumbs}, data() { return { currentTabsItem: 'music', @@ -56,15 +75,16 @@ export default { name: 'playlists' }, ], - songList: [], - showLoader: true, + showLoaderSong: false, + showLoaderPlaylist: false, + showLoaderPodcast: true, } }, computed: { user() { return this.$store.state.user; }, - userFavorite(){ + userFavorite() { return this.$store.state.userFavorite } }, @@ -78,31 +98,66 @@ export default { this.currentTabsItem = 'music'; } }, - } + }, + '$route.name': { + immediate: false, + handler(to) { + if (to === 'playlist') { + this.currentTabsItem = 'playlists' + } + }, + }, }, created() { this.getSongList(); + this.getPlaylists(); }, methods: { getSongList() { - this.showLoader = true; + this.showLoaderSong = true; app.getFavoriteList().then(res => { - this.showLoader = false; - this.$store.dispatch('setUserFavorite', {songs: res}) + this.showLoaderSong = false; + this.$store.dispatch('setUserFavorite', {songs: res}); }).catch(err => { - this.showLoader = false; + this.showLoaderSong = false; console.error(err) }) }, changeTab(tab) { this.currentTabsItem = tab; - this.$router.push({name: this.$route.name, hash: `#${tab}`}); + if (this.$route.name === 'profile') { + this.$router.push({name: this.$route.name, hash: `#${tab}`}); + } else { + this.$router.push({name: 'profile', hash: `#${tab}`}); + } }, - removeFavorites(song){ + removeFavorites(song) { + this.showLoaderSong = true; app.removeFavorites(song).then(() => { + this.showLoaderSong = false; this.getSongList(); }).catch(err => { - this.showLoader = false; + this.showLoaderSong = false; + console.error(err) + }) + }, + showRecovery() { + this.$store.dispatch('setModal', {changingUser: true}); + }, + getPlaylists() { + this.showLoaderPlaylist = true; + app.getPlaylists().then(res => { + this.showLoaderPlaylist = false; + this.$store.dispatch('setUserFavorite', {playlist: res}); + }).catch(err => { + this.showLoaderPlaylist = false; + console.error(err) + }) + }, + createPlayList() { + app.createPlaylists().then(res=>{ + this.$router.push({name: 'playlist-edit'}); + }).catch(err=>{ console.error(err) }) }