Merge pull request #57 from N1ark/main

Add color fading between songs

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`)
@@ -170,7 +189,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 +217,69 @@ 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));
+
+        if (elapsed>duration){ clearInterval(colorFadeInterval) }
+
+    }, interval);
 }
 
 let nearArtistSpanText = ""
@@ -244,7 +312,7 @@ async function songchange() {
         recent_date.setMonth(recent_date.getMonth() - 6)
         album_date = album_date.toLocaleString('default', album_date>recent_date ? { year: 'numeric', month: 'short' } : { year: 'numeric' })
         album_link = "<a title=\""+Spicetify.Player.data.track.metadata.album_title+"\" href=\""+album_uri+"\" data-uri=\""+album_uri+"\" data-interaction-target=\"album-name\" class=\"tl-cell__content\">"+Spicetify.Player.data.track.metadata.album_title+"</a>"
-        
+
         nearArtistSpanText = album_link + " • " + album_date
     } else if (Spicetify.Player.data.track.uri.includes('spotify:episode')) {
         // podcast
@@ -294,7 +362,7 @@ function pickCoverColor(img) {
             sidebarColor = swatches[lightCols[col]].getHex()
             break
         }
-    updateColors(textColor, sidebarColor)
+    updateColors(textColor, sidebarColor, true)
 }
 
 function hookCoverChange(pick) {
@@ -359,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', ' ');

dribbblish.js

@@ -232,7 +232,7 @@ DribbblishShared.config.register({
     type: "checkbox",
     key: "rightBigCover",
     name: "Right expanded cover",
-    description: "Have the expanded cover Image on the right instead of on the left.",
+    description: "Have the expanded cover Image on the right instead of on the left",
     defaultValue: true,
     onChange: (val) => {
         if (val) {
@@ -247,7 +247,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) {
@@ -264,7 +264,7 @@ waitForElement(["#main"], () => {
         data: ["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) {

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 {
@@ -1220,4 +1221,4 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 
 .main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
   color: var(--spice-subtext);
-}
+}