github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2024-11-22 13:31:17 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/lyrics.vue
View File

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