diff --git a/.idea/php.xml b/.idea/php.xml new file mode 100644 index 0000000..f324872 --- /dev/null +++ b/.idea/php.xml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/package.json b/client/package.json index 9c614b0..0215ee3 100644 --- a/client/package.json +++ b/client/package.json @@ -29,7 +29,6 @@ "scrolltrigger": "^1.0.1", "swiper": "^11.1.3", "vue": "^3.3.13", - "vue-content-loader": "^2.0.1", "vue-final-modal": "^4.5.4", "vue-router": "^4.0.0", "vuex": "^4.0.1", diff --git a/client/src/assets/css/module/app-header.scss b/client/src/assets/css/module/app-header.scss index afb120d..c5b3cfb 100644 --- a/client/src/assets/css/module/app-header.scss +++ b/client/src/assets/css/module/app-header.scss @@ -7,6 +7,7 @@ @mixin responsive-l { top: 0; } + &__wrapper { padding: 40px 20px 10px; width: 100%; @@ -39,7 +40,6 @@ &__menu { display: flex; align-items: center; - gap: 50px; transition: transform .3s ease; @mixin responsive-xl { gap: 20px; @@ -64,6 +64,21 @@ &-item { + margin: 0 25px; + + &.m--tools { + margin: 0 10px 0 25px; + } + + @mixin responsive-xl { + margin: 0 10px; + &.m--tools { + margin: 0 5px 0 10px; + } + } + @mixin responsive-l { + + } } &-link { @@ -75,6 +90,31 @@ background-image: var(--linear-gradient); } } + + &-icon { + background: none; + border: none; + width: 24px; + height: 24px; + cursor: url("./assets/img/icon/cursor.svg"), auto; + transition: all .3s ease; + + &.m--profile { + background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-primary) no-repeat 100%; + + &:hover { + background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-white) no-repeat 100%; + } + } + + &.m--exit { + background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-primary) no-repeat 100%; + + &:hover { + background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-white) no-repeat 100%; + } + } + } } &__btn { @@ -89,14 +129,17 @@ height: 24px; position: relative; display: none; + &:hover { cursor: url("./assets/img/icon/cursor.svg"), auto; } - &.m--menu{ + + &.m--menu { position: absolute; right: 15px; top: 15px; } + &.m--active { span { display: none; diff --git a/client/src/assets/css/module/player.scss b/client/src/assets/css/module/player.scss index bf8cd4f..9f12c8b 100644 --- a/client/src/assets/css/module/player.scss +++ b/client/src/assets/css/module/player.scss @@ -30,7 +30,8 @@ display: flex; flex-direction: column; margin-left: 20px; - + min-width: 135px; + gap: 0.25rem; span { color: var(--color-white-opacity); } @@ -41,6 +42,9 @@ height: 27px; background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) no-repeat 100%; margin-left: var(--space-between-block); + &.m--skeleton{ + background: none; + } &:hover { cursor: url("./assets/img/icon/cursor.svg"), auto; } @@ -60,7 +64,7 @@ color: var(--color-white-opacity); font-weight: 500; position: relative; - + min-width: 105px; &.m--ether { padding-right: 10px; @@ -68,7 +72,7 @@ content: ''; position: absolute; border-radius: 50%; - right: 0; + left: 40px; top: 0; width: 5px; height: 5px; @@ -81,6 +85,9 @@ gap: var(--space-between-block); align-items: center; margin-left: auto; + &.m--skeleton{ + min-width: 200px; + } } &__volume{ display: flex; @@ -192,5 +199,9 @@ background-size: contain; } } + + &.m--skeleton{ + background: none; + } } } diff --git a/client/src/assets/css/module/song.scss b/client/src/assets/css/module/song.scss index 3046873..a1b99a9 100644 --- a/client/src/assets/css/module/song.scss +++ b/client/src/assets/css/module/song.scss @@ -67,6 +67,7 @@ margin: auto; background: svg-load('./assets/img/icon/favorites.svg', fill=$color-primary) no-repeat 100%; background-size: contain; + transition: all .3s ease; } &:hover:after { @@ -83,6 +84,7 @@ margin: auto; background: svg-load('./assets/img/icon/add-icon.svg', fill=$color-primary) no-repeat 100%; background-size: contain; + transition: all .3s ease; } &:hover:after { @@ -99,6 +101,7 @@ margin: auto; background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%; background-size: contain; + transition: all .3s ease; } &:hover:after { @@ -116,6 +119,7 @@ margin: auto; background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%; background-size: contain; + transition: all .3s ease; } &:hover:after { diff --git a/client/src/assets/css/setting.scss b/client/src/assets/css/setting.scss index d92b786..d16d478 100644 --- a/client/src/assets/css/setting.scss +++ b/client/src/assets/css/setting.scss @@ -5,9 +5,10 @@ $document-width-s: 730px; $document-width-xs: 640px; $document-width-xxs: 480px; $color-primary: #5E5BFC; +$color-white: #FFFFFF; :root { --color-black: #232323; - --color-white: #FFFFFF; + --color-white: $color-white; --color-white-darker: #E7E7E7; --color-white-opacity: #BBB9CA; --bg-wrapper-modal: #000000E5; diff --git a/client/src/assets/img/icon/exit-icon.svg b/client/src/assets/img/icon/exit-icon.svg new file mode 100644 index 0000000..8d7d7ca --- /dev/null +++ b/client/src/assets/img/icon/exit-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/img/icon/user-icon.svg b/client/src/assets/img/icon/user-icon.svg new file mode 100644 index 0000000..78c55d2 --- /dev/null +++ b/client/src/assets/img/icon/user-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/components/app-header.vue b/client/src/components/app-header.vue index 8231164..c757501 100644 --- a/client/src/components/app-header.vue +++ b/client/src/components/app-header.vue @@ -24,7 +24,7 @@ {{ item.title }} - +
@@ -81,10 +81,18 @@ export default { class: 'header__btn' }, { - name: 'home', + name: 'profile', role: 'auth', + icon: 'm--profile', action: 'profile', - class: 'header__btn' + class:'m--tools' + }, + { + name: 'exit', + role: 'auth', + icon: 'm--exit', + action: 'exit', + class:'m--tools' }, ], showMenu: true, @@ -123,6 +131,10 @@ export default { if (methods==='profile'){ this.next('profile') } + if(methods==='exit'){ + this.$store.dispatch('deathUser'); + this.next('home') + } }, next(name){ this.$router.push({name}) diff --git a/client/src/components/authentication.vue b/client/src/components/authentication.vue index abae861..55879ce 100644 --- a/client/src/components/authentication.vue +++ b/client/src/components/authentication.vue @@ -89,14 +89,6 @@ export default { formLogin: {}, formRegistration: {}, registerForm: [ - { - $formkit: 'text', - name: 'first_name', - label: 'ваше имя', - placeholder: 'Ваше Имя', - validation: 'required', - outerClass: 'field--required' - }, { $formkit: 'text', name: 'email', @@ -112,6 +104,14 @@ export default { placeholder: 'Придумайте пароль', validation: 'required', outerClass: 'field--required' + }, + { + $formkit: 'password', + name: 'repeatPassword', + label: 'Повторите пароль', + placeholder: 'Повторите пароль', + validation: 'required', + outerClass: 'field--required' } ], loginForm: [ @@ -144,7 +144,7 @@ export default { changeTab(tab) { this.currentTabsItem = tab; }, - submitHandler() { + submitHandler(data, node) { if (this.currentTabsItem === 'login') { app.loginUser(this.formLogin).then(res=>{ this.$store.dispatch('setToken', res); @@ -156,21 +156,38 @@ export default { console.log(err) }) }).catch(err=>{ - console.log(err) + node.setErrors( + [err.detail], + err.error + ) }) } else { - app.createUser(this.formRegistration).then(res=>{ - this.$store.dispatch('setToken', res); - app.user().then(user=>{ - this.$store.dispatch('setUser', user); - this.close(); - this.next('profile'); + if (this.formRegistration.password === this.formRegistration.repeatPassword){ + app.createUser(this.formRegistration).then(res=>{ + this.$store.dispatch('setToken', res); + app.user().then(user=>{ + this.$store.dispatch('setUser', user); + this.close(); + this.next('profile'); + }).catch(err=>{ + console.log(err) + }) }).catch(err=>{ + node.setErrors( + [err.detail], + err.error + ) console.log(err) }) - }).catch(err=>{ - console.log(err) - }) + }else { + node.setErrors( + ['Пароли не совпадают'], + { + password: '', + repeatPassword: '', + } + ) + } } }, diff --git a/client/src/components/player-loader.vue b/client/src/components/player-loader.vue deleted file mode 100644 index 54b06d3..0000000 --- a/client/src/components/player-loader.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - diff --git a/client/src/components/player.vue b/client/src/components/player.vue index a8f043d..8afca1d 100644 --- a/client/src/components/player.vue +++ b/client/src/components/player.vue @@ -1,72 +1,87 @@ diff --git a/client/src/components/rubric-modal.vue b/client/src/components/rubric-modal.vue index 976043e..9774808 100644 --- a/client/src/components/rubric-modal.vue +++ b/client/src/components/rubric-modal.vue @@ -31,7 +31,7 @@
{{rubrik.description}}
- + diff --git a/client/src/components/song-item.vue b/client/src/components/song-item.vue index fb7caf2..5e16585 100644 --- a/client/src/components/song-item.vue +++ b/client/src/components/song-item.vue @@ -20,7 +20,7 @@ {{song.artist}}
- +
@@ -71,6 +71,9 @@ export default { }, handlerSelectSong(){ this.$emit('selectSong', {...this.song, live: false}) + }, + removeSong(){ + this.$emit('removeSong', this.song); } } } diff --git a/client/src/components/song-list.vue b/client/src/components/song-list.vue index c2e2031..db7774f 100644 --- a/client/src/components/song-list.vue +++ b/client/src/components/song-list.vue @@ -4,11 +4,12 @@ v-for="song in songList" :key="song" :song="song" - :playSong="!currentPlay.live && song.id === currentPlay.id? currentPlay.isPlay: false" - :selectSong="!currentPlay.live && song.id === currentPlay.id" + :playSong="song.azura_id === currentPlay.azura_id? currentPlay.isPlay: false" + :selectSong="song.azura_id === currentPlay.azura_id" @selectSong="handlerSelectSong" @playSong="handlerPlaySong" @pauseSong="handlerPauseSong" + @removeSong="removeSong" /> @@ -35,15 +36,22 @@ export default { }, methods: { handlerSelectSong(params) { - this.$store.dispatch('setCurrentPlay', {...this.currentPlay, ...params}); + this.$store.dispatch('setCurrentPlay', {...this.currentPlay, ...params, isLoader: true}); + console.log('handlerSelectSong') }, handlerPlaySong(params) { this.$store.dispatch('setCurrentPlay', params); - + console.log('handlerPlaySong') + // this.$store.dispatch('handlerPlayer', {pause: true}); }, handlerPauseSong(params) { this.$store.dispatch('setCurrentPlay', params); + console.log('handlerPauseSong') + // this.$store.dispatch('handlerPlayer', {play: true}); }, + removeSong(song){ + this.$emit('removeSong', song) + } } } diff --git a/client/src/index.template.html b/client/src/index.template.html index c17b7b5..16eea2c 100644 --- a/client/src/index.template.html +++ b/client/src/index.template.html @@ -1,20 +1,20 @@ - + - - - - - - - - - - -
- + + + + + + + + + + +
+ diff --git a/client/src/router/index.js b/client/src/router/index.js index ac2c728..4364822 100644 --- a/client/src/router/index.js +++ b/client/src/router/index.js @@ -41,7 +41,7 @@ export default route(function (/* { store, ssrContext } */) { Router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth) && !process.env.SERVER) { - if (store.state.user && store.state.user.id) { + if (store.state.user && store.state.user?.id) { next(); } else { next({ name: 'home' }); diff --git a/client/src/services/app.js b/client/src/services/app.js index a0e8048..806f9f2 100644 --- a/client/src/services/app.js +++ b/client/src/services/app.js @@ -88,6 +88,14 @@ export default class extends REST { }); } + static removeFavorites(params) { + return this._post(`radio/song/delete_song`, {}, params).then((data) => { + return data; + }).catch((error) => { + throw new RESTError(error, 'Ошибка при получении рубрик'); + }); + } + diff --git a/client/src/store/index.js b/client/src/store/index.js index 42253ba..c0fbcbd 100644 --- a/client/src/store/index.js +++ b/client/src/store/index.js @@ -19,12 +19,13 @@ export default createStore({ id: 1 }, currentPlay: { - isPlay: false + isPlay: false, + isLoader: false, + live: true, + volume: 50, }, player: { target: null, - volume: 50, - live: true, }, userFavorite: { podcast: [], @@ -60,12 +61,16 @@ export default createStore({ state.player.target.src = ''; state.player.target.preload = 'auto'; state.player.target.controls = true; + state.player.target.volume = 0.5; console.log('initPlayer', state.player.target) }, changePlayer(state, params) { const awaitPlay = () => { if (state.player.target.readyState >= 4) { - state.player.target.play(); + if (state.currentPlay.isPlay){ + state.player.target.play(); + } + state.currentPlay.isLoader = false; state.player.target.removeEventListener('canplaythrough', awaitPlay); } else { awaitPlay(); @@ -74,9 +79,10 @@ export default createStore({ state.player.target.src = params; state.player.src = params; - if (state.currentPlay.isPlay){ - state.player.target.addEventListener('canplaythrough', awaitPlay) - } + console.log(state.player.target.src) + // state.currentPlay.isLoader = true; + state.player.target.addEventListener('canplaythrough', awaitPlay) + }, handlerPlayer(state, params) { if (params.pause) { @@ -84,9 +90,10 @@ export default createStore({ state.player.target.pause(); } if (params.play) { - state.currentPlay.isPlay = true; - console.log(state.player.target.readyState) - state.player.target.play(); + if (state.player.target.readyState >= 3){ + state.currentPlay.isPlay = true; + state.player.target.play(); + } } if (params.volume) { state.player.target.volume = params.volume; diff --git a/client/src/views/profile.vue b/client/src/views/profile.vue index 7a5fe15..c245c8b 100644 --- a/client/src/views/profile.vue +++ b/client/src/views/profile.vue @@ -26,7 +26,7 @@ Загрузка данных - + @@ -97,6 +97,14 @@ export default { changeTab(tab) { this.currentTabsItem = tab; this.$router.push({name: this.$route.name, hash: `#${tab}`}); + }, + removeFavorites(song){ + app.removeFavorites(song).then(() => { + this.getSongList(); + }).catch(err => { + this.showLoader = false; + console.error(err) + }) } } }