From 9ded9817ee7ff6633eab009de6f31e57f3944a24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oscar=20Sj=C3=B6stedt?= Date: Thu, 7 Oct 2021 20:02:49 +0100 Subject: [PATCH 1/3] Add color fading - Add color fading, by using a JS interval that changes the color every 10ms. - Add option in Dribbblish settings to change the fading duration. - Fixed a few types in the Dribbblish settings. Thanks for making such an awesome extension! --- dribbblish-dynamic.js | 83 ++++++++++++++++++++++++++++++++++--------- dribbblish.js | 19 ++++++++-- user.css | 2 +- 3 files changed, 84 insertions(+), 20 deletions(-) diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js index 4c5713c..9796f06 100644 --- a/dribbblish-dynamic.js +++ b/dribbblish-dynamic.js @@ -170,7 +170,7 @@ function toggleDark(setDark) { setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D") setRootColor('notification', setDark ? "#303030" : "#DDDDDD") - updateColors(textColor, sidebarColor) + updateColors(textColor, sidebarColor, false) } /* Init with current system light/dark mode */ @@ -198,20 +198,70 @@ DribbblishShared.config.register({ } }); -function updateColors(textColHex, sideColHex) { - let isLightBg = isLight(textColorBg) - if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode +var currentColor; +var currentSideColor; +var colorFadeInterval = false; - let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20) - let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40) - let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14) - setRootColor('text', textColHex) - setRootColor('button', darkerColHex) - setRootColor('button-active', darkColHex) - setRootColor('selected-row', darkerColHex) - setRootColor('tab-active', buttonBgColHex) - setRootColor('button-disabled', buttonBgColHex) - setRootColor('sidebar', sideColHex) +function updateColors(textColHex, sideColHex, animate=false) { + let update = (textColHex, sideColHex) => { + currentColor = textColHex; + currentSideColor = sideColHex; + + let isLightBg = isLight(textColorBg) + if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode + + let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20) + let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40) + let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14) + setRootColor('text', textColHex) + setRootColor('button', darkerColHex) + setRootColor('button-active', darkColHex) + setRootColor('selected-row', darkerColHex) + setRootColor('tab-active', buttonBgColHex) + setRootColor('button-disabled', buttonBgColHex) + setRootColor('sidebar', sideColHex) + }; + + clearInterval(colorFadeInterval); // clear any interval that might be running + + if(!animate) { + update(textColHex, sideColHex); + return; + } + + let clamp = (num,min,max) => Math.min(Math.max(num, min), max); + let lerp = (a,b,u) => (1-u) * a + u * b; + let toMS = s => parseFloat(s) * (/\ds$/.test(s) ? 1000 : 1); + + let interval = 10; // 10 ms between each call + var duration = toMS(getComputedStyle(document.documentElement).getPropertyValue("--song-transition-speed")); + if(duration < 1) duration = 1; + let startC1 = hexToRgb(currentColor); + let startC2 = hexToRgb(currentSideColor); + + let endC1 = hexToRgb(textColHex); + let endC2 = hexToRgb(sideColHex); + + var start; + + colorFadeInterval = setInterval(function(){ + if(!start) { start = performance.now() } + let elapsed = performance.now()-start; + let ratio = clamp(elapsed/duration, 0, 1) + + let currentC1 = []; + let currentC2 = []; + for(var i = 0; i < 3; i++){ + currentC1[i] = lerp(startC1[i], endC1[i], ratio); + currentC2[i] = lerp(startC2[i], endC2[i], ratio); + } + + update(rgbToHex(currentC1), rgbToHex(currentC2)); + + console.log(elapsed+">"+duration+"->"+(elapsed>duration)) + if (elapsed>duration){ clearInterval(colorFadeInterval) } + + }, interval); } let nearArtistSpanText = "" @@ -294,7 +344,7 @@ function pickCoverColor(img) { sidebarColor = swatches[lightCols[col]].getHex() break } - updateColors(textColor, sidebarColor) + updateColors(textColor, sidebarColor, true) } function hookCoverChange(pick) { @@ -363,6 +413,7 @@ document.styleSheets[0].addRule('.Root__top-container::before', backface-visibility: hidden; will-change: transform; opacity: calc(0.07 + 0.03 * var(--is_light, 0)); - z-index: +3;`) + z-index: +3; + transition: background-image var(--song-transition-speed) linear;`) document.documentElement.style.setProperty('--warning_message', ' '); diff --git a/dribbblish.js b/dribbblish.js index 9c57af4..d498dee 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -131,7 +131,7 @@ DribbblishShared.config.register({ type: "checkbox", key: "rightBigCover", name: "Right expanded cover", - description: "Have the expanded cover Image on the right instead of onn the left.", + description: "Have the expanded cover Image on the right instead of on the left", defaultValue: true, onChange: (val) => { if (val) { @@ -146,7 +146,7 @@ DribbblishShared.config.register({ type: "checkbox", key: "roundSidebarIcons", name: "Round Sidebar Icons", - description: "If the Sidebar Iconns should be round instead of square", + description: "If the Sidebar Icons should be round instead of square", defaultValue: false, onChange: (val) => { if (val) { @@ -157,13 +157,26 @@ DribbblishShared.config.register({ } }); +DribbblishShared.config.register({ + type: "select", + options: ["No fade", "0.25s", "0.5s", "1s", "5s"], + key: "fadeDuration", + name: "Color Fade Duration", + description: "Select the duration of the color fading transition", + defaultValue: 0, + onChange: (val) => { + let values = ["0s", "0.25s", "0.5s", "1s", "5s"]; + document.documentElement.style.setProperty("--song-transition-speed", values[val]); + } +}); + waitForElement(["#main"], () => { DribbblishShared.config.register({ type: "select", options: ["None", "None (With Top Padding)", "Solid", "Transparent"], key: "winTopBar", name: "Windows Top Bar", - description: "Have differennt top Bars (Ore none at all)", + description: "Have different top Bars (or none at all)", defaultValue: 0, onChange: (val) => { switch (val) { diff --git a/user.css b/user.css index 368c0ce..b667a0a 100644 --- a/user.css +++ b/user.css @@ -8,6 +8,7 @@ --playbar-movement-anim-speed: 0.5s; --image-radius: 10px; --sidebar-icons-border-radius: 50%; + --song-transition-speed: 3s; } @font-face { @@ -1068,4 +1069,3 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container { .main-actionBar-ActionBarRow button:not(.main-playButton-primary) { color: var(--spice-subtext); -} \ No newline at end of file From 1e128d7d831f22f1715fceb2a9ab8535bca69a60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oscar=20Sj=C3=B6stedt?= Date: Thu, 7 Oct 2021 20:04:17 +0100 Subject: [PATCH 2/3] Add missing } at end of user.css --- user.css | 1 + 1 file changed, 1 insertion(+) diff --git a/user.css b/user.css index b667a0a..7eda485 100644 --- a/user.css +++ b/user.css @@ -1069,3 +1069,4 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container { .main-actionBar-ActionBarRow button:not(.main-playButton-primary) { color: var(--spice-subtext); +} From 81e49efbc56679ccbd64fa5ad7934e796f98a463 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oscar=20Sj=C3=B6stedt?= Date: Fri, 8 Oct 2021 13:25:51 +0100 Subject: [PATCH 3/3] Update to 2.4 - Changed config element to a slider, that is now declared in dribbblish-dynamic.js. - Removed log statement. - Added background-image transition. --- dribbblish-dynamic.js | 21 ++++++++++++++++++++- dribbblish.js | 17 ----------------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js index 94e98f1..1e7e706 100644 --- a/dribbblish-dynamic.js +++ b/dribbblish-dynamic.js @@ -71,6 +71,25 @@ document.styleSheets[0].insertRule(` color: var(--spice-sidebar-text) !important; }`) +/* Config settings */ + +DribbblishShared.config.register({ + type: "slider", + data: { + "min": 0, + "max": 10, + "step": 0.1, + "suffix": "s" + }, + key: "fadeDuration", + name: "Color Fade Duration", + description: "Select the duration of the color fading transition", + defaultValue: 0.5, + onChange: (val) => { + document.documentElement.style.setProperty("--song-transition-speed", val+"s"); + } +}); + /* js */ function getAlbumInfo(uri) { return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`) @@ -258,7 +277,6 @@ function updateColors(textColHex, sideColHex, animate=false) { update(rgbToHex(currentC1), rgbToHex(currentC2)); - console.log(elapsed+">"+duration+"->"+(elapsed>duration)) if (elapsed>duration){ clearInterval(colorFadeInterval) } }, interval); @@ -409,6 +427,7 @@ document.styleSheets[0].insertRule(` will-change: transform; opacity: calc(0.07 + 0.03 * var(--is_light, 0)); z-index: +3; + transition: background-image var(--song-transition-speed) linear; }`) document.documentElement.style.setProperty('--warning_message', ' '); diff --git a/dribbblish.js b/dribbblish.js index 2491356..631d465 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -258,23 +258,6 @@ DribbblishShared.config.register({ } }); -DribbblishShared.config.register({ - type: "slider", - data: { - "min": 0, - "max": 10, - "step": 0.1, - "suffix": "s" - }, - key: "fadeDuration", - name: "Color Fade Duration", - description: "Select the duration of the color fading transition", - defaultValue: 0.5, - onChange: (val) => { - document.documentElement.style.setProperty("--song-transition-speed", val+"s"); - } -}); - waitForElement(["#main"], () => { DribbblishShared.config.register({ type: "select",