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

5
src/i18n/README.md
View file

@ -443,3 +443,8 @@ Update 03/06/2022 11:40 UTC
* `settings.option.connectivity.discordRPC.reload`: Added to `en_US`
* `settings.option.connectivity.discordRPC.reconnectedToUser`: Added to `en_US`
Update 10/06/2022 20:00 UTC
* `settings.option.visual.purplePodcastPlaybackBar`: Added to `en_US`

1
src/i18n/en_US.json
View file

@ -456,6 +456,7 @@
"settings.option.visual.windowStyle": "Window Style",
"settings.option.visual.customAccentColor": "Custom Accent Color",
"settings.option.visual.accentColor": "Accent Color",
"settings.option.visual.purplePodcastPlaybackBar": "Purple Playback Bar for Podcasts",
"settings.option.visual.windowColor": "Window Tint Color",
"settings.option.visual.windowBackgroundStyle": "Window Background Style",
"settings.header.visual.windowBackgroundStyle.none": "None",

1
src/i18n/hu_HU.json
View file

@ -441,6 +441,7 @@
"settings.header.visual": "Vizuális",
"settings.header.visual.description": "A Cider vizuális beállításainak módosítása.",
"settings.option.visual.windowStyle": "Ablakelrendezés",
"settings.option.visual.purplePodcastPlaybackBar": "Lila lejátszási sáv a Podcastoknál",
"settings.option.visual.windowBackgroundStyle": "Ablakháttér stílusa",
"settings.header.visual.windowBackgroundStyle.none": "Sehol",
"settings.header.visual.windowBackgroundStyle.artwork": "Borító",

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

@ -209,7 +209,8 @@ export class Store {
"uiScale": 1.0,
"windowColor": "#000000",
"customAccentColor": false,
"accentColor": "#fc3c44"
"accentColor": "#fc3c44",
"purplePodcastPlaybackBar": false
},
"lyrics": {
"enable_mxm": false,

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>