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

Implemented purple playback bar for Podcasts

Browse source 
- Added a settings toggle for it
- Added 1 language string to en_US and the i18n README
- Translated string to hu_HU
- Changed CSS background color for playback bar dot to songProgressColor
This commit is contained in:
Amaru8 2022-06-10 22:27:26 +02:00
parent 619a0b16ad
commit 574641ae74
7 changed files with 33 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/main/vueapp.js
View file

@ -294,6 +294,8 @@ const app = new Vue({
if (this.cfg.visual.customAccentColor) {
finalStyle["--keyColor"] = this.cfg.visual.accentColor
finalStyle["--songProgressColor"] = this.cfg.visual.accentColor
} else if (this.cfg.visual.purplePodcastPlaybackBar && MusicKit.getInstance().nowPlayingItem?.type == "podcast-episodes") {
finalStyle["--songProgressColor"] = '#6929D0'
}
return finalStyle
},

24
src/renderer/style.less
View file

@ -1420,7 +1420,7 @@ div[data-type="musicVideo"] .info-rect .title::before {
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
@ -1429,7 +1429,7 @@ div[data-type="musicVideo"] .info-rect .title::before {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
}
}
@ -1614,12 +1614,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
@ -2159,12 +2159,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
@ -2409,7 +2409,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
@ -2418,7 +2418,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
}
}
@ -2547,12 +2547,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
@ -2820,7 +2820,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
@ -2829,7 +2829,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
}
}

10
src/renderer/views/pages/settings.ejs
View file

@ -436,7 +436,7 @@
{{$root.getLz('settings.option.visual.customAccentColor')}}
</div>
<div class="md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.visual.customAccentColor" switch/>
<input type="checkbox" v-model="app.cfg.visual.customAccentColor" :disabled="app.cfg.visual.purplePodcastPlaybackBar" switch/>
</div>
</div>
<div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
@ -447,6 +447,14 @@
<input type="color" v-model="app.cfg.visual.accentColor"/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.purplePodcastPlaybackBar')}}
</div>
<div class="md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.visual.purplePodcastPlaybackBar" :disabled="app.cfg.visual.customAccentColor" switch/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>