diff --git a/client/postcss.config.cjs b/client/postcss.config.cjs index 4ac40cd..b27c076 100644 --- a/client/postcss.config.cjs +++ b/client/postcss.config.cjs @@ -1,20 +1,20 @@ module.exports = { - parser: 'postcss', - plugins: { - 'postcss-import': {}, - 'postcss-mixins': {}, - 'postcss-nested': {}, - 'postcss-simple-vars': {}, - 'postcss-hexrgba': {}, - 'postcss-color-function': {}, - 'postcss-font-weights': {}, - 'postcss-inline-svg': { - paths: ['./src'] - }, - 'postcss-math': { - functionName: 'calculate' - }, - 'postcss-conditionals': {}, - 'postcss-preset-env': {} - } -} + parser: 'postcss', + plugins: { + 'postcss-import': {}, + 'postcss-mixins': {}, + 'postcss-nested': {}, + 'postcss-simple-vars': {}, + 'postcss-hexrgba': {}, + 'postcss-color-function': {}, + 'postcss-font-weights': {}, + 'postcss-inline-svg': { + paths: ['./src'], + }, + 'postcss-math': { + functionName: 'calculate', + }, + 'postcss-conditionals': {}, + 'postcss-preset-env': {}, + }, +}; diff --git a/client/src/assets/css/module/player.scss b/client/src/assets/css/module/player.scss index 12ff961..931ca61 100644 --- a/client/src/assets/css/module/player.scss +++ b/client/src/assets/css/module/player.scss @@ -34,7 +34,7 @@ span { color: var(--color-white-opacity); } - &.m--skeleton{ + &.m--skeleton { min-width: 135px; } } @@ -42,16 +42,18 @@ &__favorites { width: 27px; height: 27px; - background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) no-repeat 100%; + background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) + no-repeat 100%; margin-left: var(--space-between-block); - &.m--skeleton{ + &.m--skeleton { background: none; } &:hover { - cursor: url("./assets/img/icon/cursor.svg"), auto; + cursor: url('./assets/img/icon/cursor.svg'), auto; } - &.m--active{ - background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%; + &.m--active { + background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) + no-repeat 100%; } } @@ -82,26 +84,36 @@ } } } - &__tools{ + &__tools { display: flex; gap: var(--space-between-block); align-items: center; margin-left: auto; - &.m--skeleton{ + &.m--skeleton { min-width: 200px; } } - &__volume{ + &__volume { display: flex; align-items: center; position: relative; gap: 10px; - span{ + &-on { width: 24px; height: 24px; - background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat 100%; + background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat + 100%; &:hover { - cursor: url("./assets/img/icon/cursor.svg"), auto; + cursor: url('./assets/img/icon/cursor.svg'), auto; + } + } + &-off { + width: 24px; + height: 24px; + background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF) + no-repeat 100%; + &:hover { + cursor: url('./assets/img/icon/cursor.svg'), auto; } } input { @@ -116,7 +128,7 @@ margin: 0; &:hover { - cursor: url("./assets/img/icon/cursor.svg"), auto; + cursor: url('./assets/img/icon/cursor.svg'), auto; } &::-webkit-slider-thumb, @@ -145,7 +157,7 @@ margin: 0; &:hover { - cursor: url("./assets/img/icon/cursor.svg"), auto; + cursor: url('./assets/img/icon/cursor.svg'), auto; } &::-webkit-slider-thumb, @@ -175,12 +187,14 @@ width: 18px; height: 18px; margin: auto; - background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%; + background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat + 100%; background-size: contain; } &:hover:after { - background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%; + background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) + no-repeat 100%; background-size: contain; } } @@ -192,17 +206,19 @@ width: 18px; height: 18px; margin: auto; - background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%; + background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) + no-repeat 100%; background-size: contain; } &:hover:after { - background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%; + background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) + no-repeat 100%; background-size: contain; } } - &.m--skeleton{ + &.m--skeleton { background: none; } } diff --git a/client/src/assets/img/icon/volume-off.svg b/client/src/assets/img/icon/volume-off.svg new file mode 100644 index 0000000..8a52483 --- /dev/null +++ b/client/src/assets/img/icon/volume-off.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/client/src/components/player.vue b/client/src/components/player.vue index e1a1587..25d48ca 100644 --- a/client/src/components/player.vue +++ b/client/src/components/player.vue @@ -55,8 +55,22 @@ />
- - + +
@@ -98,7 +112,7 @@ export default { isPlayRadio: false, connection: null, isUserMusic: !this.$store.state.currentPlay.live, - songVolume: this.$store.state.currentPlay.volume, + songVolume: 0.5, playerInfo: { progress: 0, currentTime: 0, @@ -160,7 +174,7 @@ export default { this.connectionPlayer(); }, mounted() { - this.$store.dispatch('initPlayer'); + this.$store.dispatch('initPlayer', { volume: this.songVolume }); if (this.user?.id) { this.checkSongIsFavorite(); this.getSongList(); @@ -254,17 +268,18 @@ export default { if (dataUrl !== playerUrl) { // console.log('data.np.station.listen_url', dataUrl); this.$store.dispatch('changePlayer', dataUrl); - console.log(this.player); + // console.log(this.player); const params = { ...this.currentPlay, + // Инфа про текущий трек ...data.np.now_playing.song, azura_id: data.np.now_playing.song.id, isLoader: false, live: true, currentIndex: null, }; - console.log('params in getPlaying ', params); - delete params.unique_id; + // console.log('params in getPlaying ', params); + // delete params.unique_id; this.$store.dispatch('setCurrentPlay', params); } } @@ -351,81 +366,95 @@ export default { this.$emit('shopAuthentication', true); } }, - changeVolume(type) { - let volume = this.songVolume; - if (type === 'set') { - volume = this.songVolume === 0 ? 0.9 : 0.01; - this.songVolume = this.songVolume === 0 ? 100 : 0; + // changeVolume(type) { + // let volume = this.songVolume; + // console.log(volume); + // console.log(this.songVolume); + // if (type === 'set') { + // volume = this.songVolume === 0 ? 0.9 : 0.01; + // this.songVolume = this.songVolume === 0 ? 100 : 0; + // } else { + // volume = this.songVolume / 100; + // } + // if (volume === 0) volume = 0.01; + // this.$store.dispatch('handlerPlayer', { volume }); + // }, + changeVolume() { + console.log(this.songVolume); + this.$store.dispatch('handlerPlayer', { volume: this.songVolume }); + }, + toggleVolume() { + if (this.songVolume === 0) { + this.songVolume = 1; + console.log(this.songVolume); + this.$store.dispatch('handlerPlayer', { volume: this.songVolume }); } else { - volume = this.songVolume / 100; + this.songVolume = 0.0; + console.log(this.songVolume); + this.$store.dispatch('handlerPlayer', { volume: this.songVolume }); } - if (volume === 0) volume = 0.01; - this.$store.dispatch('handlerPlayer', { volume }); }, - getAudio(id) { - app - .getAudio(id) - .then((res) => { - console.log('res в методе getAudio', res); - const blob = new Blob([res], { type: 'application/audio' }); - const audioUrl = URL.createObjectURL(blob); - this.$store.dispatch('changePlayer', audioUrl); - this.player.target.addEventListener( - 'timeupdate', - this.updateProgress, - ); + }, + getAudio(id) { + app + .getAudio(id) + .then((res) => { + console.log('res в методе getAudio', res); + const blob = new Blob([res], { type: 'application/audio' }); + const audioUrl = URL.createObjectURL(blob); + this.$store.dispatch('changePlayer', audioUrl); + this.player.target.addEventListener('timeupdate', this.updateProgress); - blob.arrayBuffer().then((buffer) => { - var audioContext = new (window.AudioContext || - window.webkitAudioContext)(); - audioContext.decodeAudioData(buffer, (decodedData) => { - this.playerInfo.duration = decodedData.duration; - }); + blob.arrayBuffer().then((buffer) => { + var audioContext = new (window.AudioContext || + window.webkitAudioContext)(); + audioContext.decodeAudioData(buffer, (decodedData) => { + 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); }); - }, - changeLive() { - if (this.currentPlay.live) { - console.log('избранное'); - this.playerInfo.progress = 0; - 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, + isLoader: false, }); - console.log('поток'); - } - }, - getTime(value) { - let minutes = Math.floor(value / 60); - let seconds = Math.round(value % 60); + }) + .catch((err) => { + this.$store.dispatch('setCurrentPlay', { + ...this.currentPlay, + isLoader: false, + }); + console.debug(err); + }); + }, + changeLive() { + if (this.currentPlay.live) { + console.log('избранное'); + this.playerInfo.progress = 0; + 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, + }); + console.log('поток'); + } + }, + getTime(value) { + let minutes = Math.floor(value / 60); + let seconds = Math.round(value % 60); - let paddedMinutes = minutes < 10 ? '0' + minutes : minutes; - let paddedSeconds = seconds < 10 ? '0' + seconds : seconds; - if (!paddedMinutes) paddedMinutes = '00'; - if (!paddedSeconds) paddedSeconds = '00'; - return `${paddedMinutes}:${paddedSeconds}`; - }, + let paddedMinutes = minutes < 10 ? '0' + minutes : minutes; + let paddedSeconds = seconds < 10 ? '0' + seconds : seconds; + if (!paddedMinutes) paddedMinutes = '00'; + if (!paddedSeconds) paddedSeconds = '00'; + return `${paddedMinutes}:${paddedSeconds}`; }, }; diff --git a/client/src/store/index.js b/client/src/store/index.js index 155b7b6..4851531 100644 --- a/client/src/store/index.js +++ b/client/src/store/index.js @@ -26,7 +26,7 @@ export default createStore({ isPlay: false, isLoader: false, live: true, - volume: 50, + // volume: 0.5, currentIndex: null, }, player: { @@ -61,12 +61,15 @@ export default createStore({ setPlayer(state, params) { state.player = { ...state.player, ...params }; }, - initPlayer(state) { + initPlayer(state, { volume }) { + // console.log(params); state.player.target = document.createElement('audio'); + console.log(state.player.target); state.player.target.src = ''; state.player.target.preload = 'auto'; state.player.target.controls = true; - state.player.target.volume = 0.5; + // По умолчанию создается с volume 1 + state.player.target.volume = volume; }, changePlayer(state, params) { const awaitPlay = () => { @@ -87,6 +90,7 @@ export default createStore({ state.player.target.addEventListener('canplaythrough', awaitPlay); }, handlerPlayer(state, params) { + console.log('hanlerPlayer', params); if (params.pause) { state.currentPlay.isPlay = false; state.player.target.pause(); @@ -98,8 +102,10 @@ export default createStore({ state.player.target.play(); } } - if (params.volume) { + if ('volume' in params) { + // console.log('handlerPlayer', params.volume); state.player.target.volume = params.volume; + // console.log('audio.volume', state.player.target.volume); } }, setUserFavorite(state, params) { @@ -126,8 +132,8 @@ export default createStore({ setPlayer(context, params) { context.commit('setPlayer', params); }, - initPlayer(context) { - context.commit('initPlayer'); + initPlayer(context, params) { + context.commit('initPlayer', params); }, handlerPlayer(context, params) { context.commit('handlerPlayer', params);