girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 13:17:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add "Volume Control" to Lyrics Page (#1672)

Browse source 
* feat: Add "Volume Control" to Lyrics Page

* fix: fix mute button
This commit is contained in:
marcus 2022-06-21 13:45:32 +08:00 • committed by GitHub
parent a31d552788
commit 7b911c1658
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 76 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/views/lyrics.vue
View file

@ -76,26 +76,50 @@
</span> </span>
</div> </div>
</div> </div>
<div class="buttons"> <div class="top-right">
<button-icon <div class="volume-control">
:title="$t('player.like')" <button-icon :title="$t('player.mute')" @click.native="mute">
@click.native="likeATrack(player.currentTrack.id)" <svg-icon v-show="volume > 0.5" icon-class="volume" />
> <svg-icon v-show="volume === 0" icon-class="volume-mute" />
<svg-icon <svg-icon
:icon-class=" v-show="volume <= 0.5 && volume !== 0"
player.isCurrentTrackLiked ? 'heart-solid' : 'heart' icon-class="volume-half"
" />
/> </button-icon>
</button-icon> <div class="volume-bar">
<button-icon <vue-slider
:title="$t('contextMenu.addToPlaylist')" v-model="volume"
@click.native="addToPlaylist" :min="0"
> :max="1"
<svg-icon icon-class="plus" /> :interval="0.01"
</button-icon> :drag-on-click="true"
<!-- <button-icon @click.native="openMenu" title="Menu" :duration="0"
><svg-icon icon-class="more" tooltip="none"
/></button-icon> --> :dot-size="12"
></vue-slider>
</div>
</div>
<div class="buttons">
<button-icon
:title="$t('player.like')"
@click.native="likeATrack(player.currentTrack.id)"
>
<svg-icon
:icon-class="
player.isCurrentTrackLiked ? 'heart-solid' : 'heart'
"
/>
</button-icon>
<button-icon
:title="$t('contextMenu.addToPlaylist')"
@click.native="addToPlaylist"
>
<svg-icon icon-class="plus" />
</button-icon>
<!-- <button-icon @click.native="openMenu" title="Menu"
><svg-icon icon-class="more"
/></button-icon> -->
</div>
</div> </div>
</div> </div>
<div class="progress-bar"> <div class="progress-bar">
@ -260,6 +284,14 @@ export default {
currentTrack() { currentTrack() {
return this.player.currentTrack; return this.player.currentTrack;
}, },
volume: {
get() {
return this.player.volume;
},
set(value) {
this.player.volume = value;
},
},
imageUrl() { imageUrl() {
return this.player.currentTrack?.al?.picUrl + '?param=1024y1024'; return this.player.currentTrack?.al?.picUrl + '?param=1024y1024';
}, },
@ -474,6 +506,9 @@ export default {
getListPath() { getListPath() {
return getListSourcePath(); return getListSourcePath();
}, },
mute() {
this.player.mute();
},
}, },
}; };
</script> </script>
@ -591,17 +626,31 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.buttons { .top-right {
display: flex; display: flex;
align-items: center; justify-content: space-between;
button { .volume-control {
margin: 0 0 0 4px; margin: 0 10px;
display: flex;
align-items: center;
.volume-bar {
width: 84px;
}
} }
.svg-icon { .buttons {
height: 18px; display: flex;
width: 18px; align-items: center;
button {
margin: 0 0 0 4px;
}
.svg-icon {
height: 18px;
width: 18px;
}
} }
} }
} }