взорвал логику переключения звука в плеере, добавил иконку при состоянии, когда звук в ноль
This commit is contained in:
Norbaev
parent
08f5022929
commit
a4c5208a5f
|
|
@ -9,12 +9,12 @@ module.exports = {
|
|||
'postcss-color-function': {},
|
||||
'postcss-font-weights': {},
|
||||
'postcss-inline-svg': {
|
||||
paths: ['./src']
|
||||
paths: ['./src'],
|
||||
},
|
||||
'postcss-math': {
|
||||
functionName: 'calculate'
|
||||
functionName: 'calculate',
|
||||
},
|
||||
'postcss-conditionals': {},
|
||||
'postcss-preset-env': {}
|
||||
}
|
||||
}
|
||||
'postcss-preset-env': {},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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%;
|
||||
background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF)
|
||||
no-repeat 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -96,12 +98,22 @@
|
|||
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,12 +206,14 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_798_574)">
|
||||
<path d="M20.807 4.29C20.7141 4.19709 20.6038 4.12339 20.4824 4.07311C20.361 4.02283 20.2309 3.99695 20.0995 3.99695C19.9681 3.99695 19.838 4.02283 19.7166 4.07311C19.5952 4.12339 19.4849 4.19709 19.392 4.29C19.2991 4.38291 19.2254 4.49322 19.1751 4.61461C19.1248 4.736 19.0989 4.86611 19.0989 4.9975C19.0989 5.1289 19.1248 5.25901 19.1751 5.3804C19.2254 5.50179 19.2991 5.61209 19.392 5.705C21.059 7.37591 21.9951 9.63977 21.9951 12C21.9951 14.3602 21.059 16.6241 19.392 18.295C19.2044 18.4826 19.0989 18.7371 19.0989 19.0025C19.0989 19.2679 19.2044 19.5224 19.392 19.71C19.5796 19.8976 19.8341 20.0031 20.0995 20.0031C20.3649 20.0031 20.6194 19.8976 20.807 19.71C22.8488 17.6636 23.9954 14.8908 23.9954 12C23.9954 9.1092 22.8488 6.33643 20.807 4.29Z" fill="white"/>
|
||||
<path d="M18.1 7.29104C18.0071 7.1978 17.8967 7.12378 17.7752 7.07319C17.6537 7.02261 17.5234 6.99645 17.3918 6.99622C17.2602 6.99599 17.1298 7.02168 17.0081 7.07184C16.8864 7.122 16.7758 7.19563 16.6825 7.28854C16.5893 7.38145 16.5153 7.49182 16.4647 7.61334C16.4141 7.73485 16.3879 7.86515 16.3877 7.99677C16.3875 8.1284 16.4132 8.25878 16.4633 8.38048C16.5135 8.50218 16.5871 8.6128 16.68 8.70604C17.5528 9.58013 18.043 10.7648 18.043 12C18.043 13.2352 17.5528 14.42 16.68 15.294C16.5871 15.3873 16.5135 15.4979 16.4633 15.6196C16.4132 15.7413 16.3875 15.8717 16.3877 16.0033C16.3879 16.1349 16.4141 16.2652 16.4647 16.3867C16.5153 16.5083 16.5893 16.6186 16.6825 16.7115C16.8708 16.8992 17.126 17.0043 17.3918 17.0039C17.5234 17.0036 17.6537 16.9775 17.7752 16.9269C17.8967 16.8763 18.0071 16.8023 18.1 16.709C19.3473 15.4593 20.0479 13.7657 20.0479 12C20.0479 10.2343 19.3473 8.54078 18.1 7.29104Z" fill="white"/>
|
||||
<path d="M13.82 0.199989C10.7793 0.771257 8.07468 2.48984 6.266 4.99999H5C3.67457 5.0021 2.40403 5.52957 1.4668 6.46679C0.529579 7.40402 0.00211562 8.67456 0 9.99999L0 14C0.00211562 15.3254 0.529579 16.596 1.4668 17.5332C2.40403 18.4704 3.67457 18.9979 5 19H6.266C8.07504 21.5098 10.7795 23.2282 13.82 23.8C13.8796 23.8116 13.9403 23.8173 14.001 23.817C14.2662 23.817 14.5206 23.7116 14.7081 23.5241C14.8956 23.3366 15.001 23.0822 15.001 22.817V1.18599C15.0014 1.03912 14.9694 0.893979 14.9073 0.760871C14.8453 0.627764 14.7546 0.509962 14.6419 0.415837C14.5292 0.321712 14.3971 0.253576 14.255 0.21627C14.113 0.178965 13.9644 0.173406 13.82 0.199989ZM13 21.535C10.7944 20.8319 8.89788 19.3912 7.629 17.455C7.53834 17.3155 7.41432 17.2009 7.26817 17.1214C7.12201 17.042 6.95835 17.0002 6.792 17H5C4.20435 17 3.44129 16.6839 2.87868 16.1213C2.31607 15.5587 2 14.7956 2 14V9.99999C2 9.20434 2.31607 8.44128 2.87868 7.87867C3.44129 7.31606 4.20435 6.99999 5 6.99999H6.8C6.96617 6.99997 7.12971 6.95854 7.27585 6.87945C7.42198 6.80035 7.54611 6.68609 7.637 6.54699C8.90329 4.61123 10.7969 3.16993 13 2.46499V21.535Z" fill="white"/>
|
||||
<path d="M21 2L3 22" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_798_574">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -55,8 +55,22 @@
|
|||
/>
|
||||
<q-skeleton v-if="loaderPlay" class="player__tools m--skeleton" />
|
||||
<div v-else class="player__volume">
|
||||
<span @click="changeVolume('set')" />
|
||||
<input type="range" v-model="songVolume" @change="changeVolume" />
|
||||
<span
|
||||
@click="toggleVolume"
|
||||
:class="
|
||||
this.songVolume === 0
|
||||
? 'player__volume-off'
|
||||
: 'player__volume-on'
|
||||
"
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
v-model="songVolume"
|
||||
@input="changeVolume"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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,16 +366,34 @@ 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
|
||||
|
|
@ -370,10 +403,7 @@ export default {
|
|||
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,
|
||||
);
|
||||
this.player.target.addEventListener('timeupdate', this.updateProgress);
|
||||
|
||||
blob.arrayBuffer().then((buffer) => {
|
||||
var audioContext = new (window.AudioContext ||
|
||||
|
|
@ -426,6 +456,5 @@ export default {
|
|||
if (!paddedSeconds) paddedSeconds = '00';
|
||||
return `${paddedMinutes}:${paddedSeconds}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue