okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #153 from JaxonTekk/upcoming

Browse source 
UI Changes and Feature Additions
This commit is contained in:
cryptofyre 2022-01-19 21:27:37 -06:00 • committed by GitHub
commit 3327fae2a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 107 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/main/base/store.ts
View file

@ -24,6 +24,8 @@ export class ConfigStore {
},
"audio": {
"volume": 1,
"lastVolume": 1,
"muted": false,
"quality": "990",
"seamless_audio": true,
"normalization": false,

1
src/renderer/assets/feather/volume-2.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 354 B

1
src/renderer/assets/feather/volume.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>
Side by side

After

Width:  |  Height:  |  Size: 275 B

1
src/renderer/assets/volume-down.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 710 B

1
src/renderer/assets/volume-up.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

24
src/renderer/index.js
View file

@ -525,8 +525,17 @@ const app = new Vue({
}
}
MusicKitInterop.init()
// Set the volume
this.mk.volume = this.cfg.audio.volume
// Set the volume
// Check the value of this.cfg.audio.muted
if( !this.cfg.audio.muted )
{
// Set the mk.volume to the last stored volume data
this.mk.volume = this.cfg.audio.volume
} else if( this.cfg.audio.muted ) {
// Set mk.volume to -1 (setting to 0 wont work, so temp solution setting to -1)
this.mk.volume = -1;
}
// ipcRenderer.invoke('getStoreValue', 'audio.volume').then((value) => {
// self.mk.volume = value
// })
@ -2997,6 +3006,17 @@ const app = new Vue({
}
}
},
muteButtonPressed() {
if( this.cfg.audio.muted ) {
this.mk.volume = this.cfg.audio.lastVolume;
this.cfg.audio.muted = false;
} else {
this.cfg.audio.lastVolume = this.cfg.audio.volume;
this.mk.volume = 0;
this.cfg.audio.muted = true;
}
},
async apiCall(url, callback) {
const xmlHttp = new XMLHttpRequest();

75
src/renderer/style.less
View file

@ -854,12 +854,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin-right: 6px;
}
.app-chrome-item.volume-icon {
opacity: 0.7;
background-image: url(http://localhost:9000/assets/volume-up.svg);
.volume-button {
background-image: url("./assets/feather/volume-2.svg");
height: 15px;
width: 30px;
padding: 0px;
background: transparent;
border: 0px;
border-radius: 0px;
box-shadow: unset;
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
opacity: 0.70;
border-radius: 6px;
}
.volume-button:active, .volume-button--small:active {
transform: scale(0.9);
}
.volume-button.active, .volume-button--small.active {
background-image: url("./assets/feather/volume.svg");
}
.volume-button--small {
border-radius: 6px;
color: inherit;
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
height: 15px;
width: 30px;
border: 0px;
box-shadow: unset;
opacity: 0.70;
background-image: url("./assets/feather/volume-2.svg");
}
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
@ -1399,6 +1430,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 32px;
border: 0px;
box-shadow: unset;
opacity: 0.70;
}
.playback-button:hover,
@ -1474,12 +1506,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.player-volume-glyph.decrease {
background-image: url("./assets/volume-down.svg");
background-image: url("./assets/volume.svg");
opacity: 0.5;
}
.player-volume-glyph.increase {
background-image: url("./assets/volume-up.svg");
background-image: url("./assets/volume-2.svg");
opacity: 0.5;
}
@ -4207,6 +4239,29 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 100%
}
.volume-button--small {
border-radius: 6px;
color: inherit;
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
height: 15px;
width: 30px;
border: 0px;
box-shadow: unset;
opacity: 0.70;
background-image: url("./assets/feather/volume-2.svg");
}
.volume-button--small:active {
transform: scale(0.9);
}
.volume-button--small.active {
background-image: url("./assets/feather/volume.svg");
}
input[type=range] {
-webkit-appearance: none;
height: 4px;
@ -4332,6 +4387,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 5vh;
justify-content: space-evenly;
.volume {
background-image: url("./assets/feathers/volume.svg");
padding: 0.5vh;
width: 2vh;
height: 2vh;
background-origin: content-box;
background-repeat: no-repeat;
}
.queue {
background-image: url("./assets/list.svg");
padding: 0.5vh;
@ -4395,6 +4459,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.song-artist {
font-size: 0.875em;
font-weight: 400;
}
.song-name {

2
src/renderer/views/components/fullscreen.ejs
View file

@ -78,8 +78,8 @@
</div>
</div>
<div class="app-chrome-item volume display--large">
<div class="app-chrome-item volume-icon"></div>
<div class="input-container">
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
<input type="range" class="slider" @wheel="app.volumeWheel" step="0.01" min="0" max="1" v-model="app.mk.volume"
v-if="typeof app.mk.volume != 'undefined'">
</div>

13
src/renderer/views/main.ejs
View file

@ -91,13 +91,14 @@
</div>
<div class="song-artist"
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
<div class="item-navigate song-artist" style="display: inline-block;"
<div class="item-navigate song-artist" style="display: inline-block"
:style="[chrome.progresshover ? {'opacity': '0'} : {'opacity' : '1'} ]"
@click="getNowPlayingItemDetailed(`artist`)">
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-artist item-navigate" style="display: inline-block;"
@click="getNowPlayingItemDetailed('album')"
v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
<div class="song-artist item-navigate" style="display: inline-block"
:style="[chrome.progresshover ? {'opacity': '0'} : {'opacity' : '1'}]"
@click="getNowPlayingItemDetailed('album')" v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
<div class="separator" style="display: inline-block;">{{"—"}}</div>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
@ -132,7 +133,7 @@
</div>
<div class="app-chrome--right">
<div class="app-chrome-item volume display--large">
<div class="app-chrome-item volume-icon"></div>
<button class="volume-button--small volume" @click="muteButtonPressed()" :class="{'active': this.cfg.audio.volume == 0}"></button>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
@ -296,7 +297,7 @@
</div>
<div class="app-chrome-item volume">
<div class="input-container">
<div class="app-chrome-item volume-icon"></div>
<button class="volume-button--small volume" @click="muteButtonPressed()" :class="{'active': this.cfg.audio.volume == 0}"></button>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">

5
src/web-remote/style.css
View file

@ -321,12 +321,12 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.player-volume-glyph.decrease {
background-image: url("./assets/volume-down.svg");
background-image: url("./assets/volume.svg");
opacity: 0.5;
}
.player-volume-glyph.increase {
background-image: url("./assets/volume-up.svg");
background-image: url("./assets/volume-2.svg");
opacity: 0.5;
}
@ -1002,6 +1002,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.player-song-artist {
font-size: 1.25em;
font-weight: 400;
}
.search-panel {}
.md-footer {