Merge pull request #158 from gms10ur/upcoming

Saving of hide/show user info & minor ui tweaks
This commit is contained in:
vapormusic 2022-01-20 09:19:52 +07:00 committed by GitHub
commit 976d96e2a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 84 additions and 24 deletions

View file

@ -55,7 +55,8 @@ export class ConfigStore {
"animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never
"animated_artwork_qualityLevel": 1,
"bg_artwork_rotation": false,
"hw_acceleration": "default" // default, webgpu, disabled
"hw_acceleration": "default", // default, webgpu, disabled
"showuserinfo": true
},
"lyrics": {
"enable_mxm": false,

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -257,7 +257,7 @@ const app = new Vue({
tmpVar: [],
notification: false,
chrome: {
hideUserInfo: ipcRenderer.sendSync("is-dev"),
hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
artworkReady: false,
userinfo: {
"id": "",
@ -496,6 +496,11 @@ const app = new Vue({
this.$forceUpdate()
if (this.isDev) {
this.mk.privateEnabled = true
// Hide UserInfo if Dev mode
this.chrome.hideUserInfo = true
} else {
// Get Hide User from Settings
this.chrome.hideUserInfo = !this.cfg.visual.showuserinfo
}
if (this.cfg.visual.hw_acceleration == "disabled") {
document.body.classList.add("no-gpu")
@ -3242,6 +3247,15 @@ const app = new Vue({
return 0 !== s && (h = s > 0 ? "-" : "+"),
`${h}${leadingZeros(n, 2)}:${leadingZeros(d, 2)}`
},
toggleHideUserInfo() {
if(this.chrome.hideUserInfo) {
this.cfg.visual.showuserinfo = true
this.chrome.hideUserInfo = false
} else {
this.cfg.visual.showuserinfo = false
this.chrome.hideUserInfo = true
}
}
}
})
@ -3506,4 +3520,4 @@ async function webGPU() {
webGPU().then()
let screenWidth = screen.width;
let screenHeight = screen.height;
let screenHeight = screen.height;

View file

@ -2026,9 +2026,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.md-btn {
background: rgba(100, 100, 100, 0.5);
padding: 4px 12px;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
font-size: 16px;
border: 1px solid rgb(100 100 100 / 35%);
color: #eee;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
@ -2062,6 +2062,40 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
}
.md-ico-play {
content:url("./assets/playPng.png");
width: 10px;
height: 12px;
margin-right: 1px;
align-self: center;
}
.md-ico-shuffle {
content:url("./assets/shufflePng.png");
width: 15px;
height: 13px;
margin-right: 1px;
align-self: center;
}
.md-ico-remove {
content:url("./assets/feather/x-circlePng.png");
width: 16px;
height: 16px;
margin-right: 1px;
margin-bottom: -1.5px;
align-self: center;
}
.md-ico-add {
content:url("./assets/feather/plus.svg");
width: 16px;
height: 16px;
margin-right: 1px;
margin-bottom: -1.5px;
align-self: center;
}
.md-select {
width: 100%;
padding: 6px;

View file

@ -221,7 +221,7 @@
<transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened">
<div class="usermenu-body">
<button class="usermenu-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
<button class="usermenu-item" @click="toggleHideUserInfo()">
<div class="row nopadding">
<div class="col nopadding">
Show Personal Info
@ -315,7 +315,7 @@
<template v-if="chrome.userinfo.id">
<div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
</div>
<div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
<div class="handle-text text-overflow-elipsis">{{ chrome.userinfo.attributes.handle
}}
</div>
</template>

View file

@ -62,20 +62,20 @@
</div>
</template>
<div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
<button class="md-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 0; play()">
<button class="md-btn" style="min-width: 100px;"
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
Play
</button>
<button class="md-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 1;play()">
<button class="md-btn" style="min-width: 100px;"
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
Shuffle
</button>
<button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()">
<button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
</button>
<button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
<button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
Confirm?
</button>
<button class="more-btn-round" style="float:right;" @click="menu">
@ -98,20 +98,20 @@
</div>
<div class="col-auto flex-center">
<div>
<button class="md-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 0; play()">
<button class="md-btn" style="min-width: 100px;"
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
Play
</button>
<button class="md-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 1;play()">
<button class="md-btn" style="min-width: 100px;"
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
Shuffle
</button>
<button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()">
<button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
</button>
<button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
<button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
Confirm?
</button>
</div>
@ -482,4 +482,4 @@
}
})
</script>
</script>

View file

@ -103,6 +103,14 @@
</select>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Show Personal Info
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.visual.showuserinfo" v-on:change="toggleUserInfo" switch/>
</div>
</div>
<div class="md-option-header">
<span>Lyrics</span>
</div>
@ -605,6 +613,9 @@
},
changeAudioQuality : function(){
app.mk.bitrate = app.cfg.audio.quality
},
toggleUserInfo : function(){
app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
}
}
})