Merge pull request #81 from JulienMaille/prettierrc

Add prettier action

.github/workflows/prettier.yml

@@ -0,0 +1,26 @@
+name: Prettier
+
+on: 
+  pull_request:
+  push:
+    branches:
+    - master
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        # Make sure the actual branch is checked out when running on pull requests
+        ref: ${{ github.head_ref }}
+        # This is important to fetch the changes to the previous commit
+        fetch-depth: 0
+
+    - name: Prettify code
+      uses: creyD/prettier_action@v4.0
+      with:
+        prettier_options: --write **/*.{js,css}
+        same_commit: True

.prettierignore

@@ -0,0 +1 @@
+Vibrant.min.js

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "endOfLine": "crlf",
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "printWidth": 999999
+}

dribbblish-dynamic.js

@@ -1,11 +1,11 @@
-let current = '2.6.0'
+let current = "2.6.0";
 
 /* css is injected so this works with untouched user.css from Dribbblish */
 /* progressbar tooltip text color */
 document.styleSheets[0].insertRule(`
     .playback-bar .prog-tooltip {
         color: var(--spice-sidebar-text) !important;
-    }`)
+    }`);
 
 /* edit button of CustomApps */
 document.styleSheets[0].insertRule(`
@@ -14,33 +14,33 @@ document.styleSheets[0].insertRule(`
     .lyrics-tabBar-header button.switch {
         background-color: rgba(var(--spice-rgb-subtext), 0.15) !important;
         color: var(--spice-text);
-    }`)
+    }`);
 
 document.styleSheets[0].insertRule(`
     .reddit-sort-container button.switch:hover,
     .new-releases-header button.switch:hover,
     .lyrics-tabBar-header button.switch:hover {
         background-color: rgba(var(--spice-rgb-subtext), 0.3) !important;
-    }`)
+    }`);
 
 document.styleSheets[0].insertRule(`
     .lyrics-lyricsContainer-LyricsBackground {
         background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important;
-    }`)
+    }`);
 
 /* big cover opacity on hover */
 document.styleSheets[0].insertRule(`
     .main-coverSlotExpanded-container:hover .cover-art,
     .main-coverSlotExpanded-container:hover img {
         opacity: 0.5;
-    }`)
+    }`);
 
 document.styleSheets[0].insertRule(`
     .main-navBar-navBar a:hover,
     .main-navBar-navBar a:hover span,
     .main-buddyFeed-activityMetadata a:hover {
         color: var(--spice-shadow) !important;
-    }`)
+    }`);
 
 document.styleSheets[0].insertRule(`
     .collection-collectionEntityHeroCard-likedSongs,
@@ -56,7 +56,7 @@ document.styleSheets[0].insertRule(`
     .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
     .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
         color: var(--spice-sidebar-text) !important;
-    }`)
+    }`);
 
 /* Config settings */
 
@@ -98,136 +98,145 @@ waitForElement(["#main"], () => {
 
 function capitalizeFirstLetter(string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
-  }
+}
 
 function copyToClipboard(text) {
-    var input = document.createElement('textarea');
+    var input = document.createElement("textarea");
     input.style.display = "fixed";
     input.innerHTML = text;
     document.body.appendChild(input);
     input.select();
-    var result = document.execCommand('copy');
+    var result = document.execCommand("copy");
     document.body.removeChild(input);
     return result;
 }
 
 /* js */
 function getAlbumInfo(uri) {
-    return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`)
+    return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`);
 }
 
 function isLight(hex) {
-    var [r,g,b] = hexToRgb(hex).map(Number)
+    var [r, g, b] = hexToRgb(hex).map(Number);
-    const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-    return brightness > 128
+    return brightness > 128;
 }
 
 function hexToRgb(hex) {
-    var bigint = parseInt(hex.replace("#",""), 16)
+    var bigint = parseInt(hex.replace("#", ""), 16);
-    var r = (bigint >> 16) & 255
+    var r = (bigint >> 16) & 255;
-    var g = (bigint >> 8) & 255
+    var g = (bigint >> 8) & 255;
-    var b = bigint & 255
+    var b = bigint & 255;
-    return [r, g, b]
+    return [r, g, b];
 }
 
 function rgbToHex([r, g, b]) {
-    const rgb = (r << 16) | (g << 8) | (b << 0)
+    const rgb = (r << 16) | (g << 8) | (b << 0);
-    return '#' + (0x1000000 + rgb).toString(16).slice(1)
+    return "#" + (0x1000000 + rgb).toString(16).slice(1);
 }
 
-const LightenDarkenColor = (h, p) => '#' + [1, 3, 5].map(s => parseInt(h.substr(s, 2), 16)).map(c => parseInt((c * (100 + p)) / 100)).map(c => (c < 255 ? c : 255)).map(c => c.toString(16).padStart(2, '0')).join('')
+const LightenDarkenColor = (h, p) =>
+    "#" +
+    [1, 3, 5]
+        .map((s) => parseInt(h.substr(s, 2), 16))
+        .map((c) => parseInt((c * (100 + p)) / 100))
+        .map((c) => (c < 255 ? c : 255))
+        .map((c) => c.toString(16).padStart(2, "0"))
+        .join("");
 
 function rgbToHsl([r, g, b]) {
-    r /= 255, g /= 255, b /= 255
+    (r /= 255), (g /= 255), (b /= 255);
-    var max = Math.max(r, g, b), min = Math.min(r, g, b)
+    var max = Math.max(r, g, b),
-    var h, s, l = (max + min) / 2
+        min = Math.min(r, g, b);
+    var h,
+        s,
+        l = (max + min) / 2;
     if (max == min) {
-        h = s = 0 // achromatic
+        h = s = 0; // achromatic
     } else {
-        var d = max - min
+        var d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch (max) {
-            case r: h = (g - b) / d + (g < b ? 6 : 0)
+            case r:
-                    break
+                h = (g - b) / d + (g < b ? 6 : 0);
-            case g: h = (b - r) / d + 2
+                break;
-                    break
+            case g:
-            case b: h = (r - g) / d + 4
+                h = (b - r) / d + 2;
-                    break
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
         }
-        h /= 6
+        h /= 6;
     }
-    return [h, s, l]
+    return [h, s, l];
 }
 
 function hslToRgb([h, s, l]) {
-    var r, g, b
+    var r, g, b;
     if (s == 0) {
-        r = g = b = l // achromatic
+        r = g = b = l; // achromatic
     } else {
         function hue2rgb(p, q, t) {
-            if (t < 0) t += 1
+            if (t < 0) t += 1;
-            if (t > 1) t -= 1
+            if (t > 1) t -= 1;
-            if (t < 1/6) return p + (q - p) * 6 * t
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
-            if (t < 1/2) return q
+            if (t < 1 / 2) return q;
-            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-            return p
+            return p;
         }
-        var q = l < 0.5 ? l * (1 + s) : l + s - l * s
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        var p = 2 * l - q
+        var p = 2 * l - q;
-        r = hue2rgb(p, q, h + 1/3)
+        r = hue2rgb(p, q, h + 1 / 3);
-        g = hue2rgb(p, q, h)
+        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1/3)
+        b = hue2rgb(p, q, h - 1 / 3);
     }
-    return [r * 255, g * 255, b * 255]
+    return [r * 255, g * 255, b * 255];
 }
 
 function setLightness(hex, lightness) {
-    hsl = rgbToHsl(hexToRgb(hex))
+    hsl = rgbToHsl(hexToRgb(hex));
-    hsl[2] = lightness
+    hsl[2] = lightness;
-    return rgbToHex(hslToRgb(hsl))
+    return rgbToHex(hslToRgb(hsl));
 }
 
-let textColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-text')
+let textColor = getComputedStyle(document.documentElement).getPropertyValue("--spice-text");
-let textColorBg = getComputedStyle(document.documentElement).getPropertyValue('--spice-main')
+let textColorBg = getComputedStyle(document.documentElement).getPropertyValue("--spice-main");
-let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-sidebar')
+let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue("--spice-sidebar");
 
 function setRootColor(name, colHex) {
-    let root = document.documentElement
+    let root = document.documentElement;
-    if (root===null) return
+    if (root === null) return;
-    root.style.setProperty('--spice-' + name, colHex)
+    root.style.setProperty("--spice-" + name, colHex);
-    root.style.setProperty('--spice-rgb-' + name, hexToRgb(colHex).join(','))
+    root.style.setProperty("--spice-rgb-" + name, hexToRgb(colHex).join(","));
 }
 
 function toggleDark(setDark) {
-    if (setDark===undefined) setDark = isLight(textColorBg)
+    if (setDark === undefined) setDark = isLight(textColorBg);
 
-    document.documentElement.style.setProperty('--is_light', setDark ? 0 : 1)
+    document.documentElement.style.setProperty("--is_light", setDark ? 0 : 1);
-    textColorBg = setDark ? "#0A0A0A" : "#FAFAFA"
+    textColorBg = setDark ? "#0A0A0A" : "#FAFAFA";
 
-    setRootColor('main', textColorBg)
+    setRootColor("main", textColorBg);
-    setRootColor('player', textColorBg)
+    setRootColor("player", textColorBg);
-    setRootColor('card', setDark ? "#040404" : "#ECECEC")
+    setRootColor("card", setDark ? "#040404" : "#ECECEC");
-    setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D")
+    setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D");
-    setRootColor('notification', setDark ? "#303030" : "#DDDDDD")
+    setRootColor("notification", setDark ? "#303030" : "#DDDDDD");
 
-    updateColors(textColor, sidebarColor)
+    updateColors(textColor, sidebarColor);
 }
 
 function checkDarkLightMode() {
     if (DribbblishShared.config.get("theme") != 2) return;
 
-    const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0])
+    const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]);
-                     + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1])
+    const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]);
-    const end =   60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0])
-                     + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1])
 
-    const now = new Date()
+    const now = new Date();
-    const time = 60 * now.getHours() + now.getMinutes()
+    const time = 60 * now.getHours() + now.getMinutes();
 
-    if (end < start)
+    if (end < start) dark = start <= time || time < end;
-        dark = start <= time || time < end
+    else dark = start <= time && time < end;
-    else
-        dark = start <= time && time < end
     toggleDark(dark);
 }
 // Run every Minute to check time and set dark / light mode
@@ -284,23 +293,23 @@ var currentSideColor;
 var colorFadeInterval = false;
 
 function updateColors(textColHex, sideColHex) {
-    let isLightBg = isLight(textColorBg)
+    let isLightBg = isLight(textColorBg);
-    if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
+    if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15); // vibrant color is always too bright for white bg mode
 
-    let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
+    let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20);
-    let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
+    let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40);
-    let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
+    let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.9 : 0.14);
-    setRootColor('text', textColHex)
+    setRootColor("text", textColHex);
-    setRootColor('button', darkerColHex)
+    setRootColor("button", darkerColHex);
-    setRootColor('button-active', darkColHex)
+    setRootColor("button-active", darkColHex);
-    setRootColor('selected-row', darkerColHex)
+    setRootColor("selected-row", darkerColHex);
-    setRootColor('tab-active', buttonBgColHex)
+    setRootColor("tab-active", buttonBgColHex);
-    setRootColor('button-disabled', buttonBgColHex)
+    setRootColor("button-disabled", buttonBgColHex);
-    setRootColor('sidebar', sideColHex)
+    setRootColor("sidebar", sideColHex);
 }
 
-let nearArtistSpanText = ""
+let nearArtistSpanText = "";
-let coverListenerInstalled = true
+let coverListenerInstalled = true;
 async function songchange() {
     try {
         // warning popup
@@ -309,105 +318,102 @@ async function songchange() {
         console.error(err);
     }
 
-    let album_uri = Spicetify.Player.data.track.metadata.album_uri
+    let album_uri = Spicetify.Player.data.track.metadata.album_uri;
-    let bgImage = Spicetify.Player.data.track.metadata.image_url
+    let bgImage = Spicetify.Player.data.track.metadata.image_url;
     if (bgImage === undefined) {
-        bgImage = "/images/tracklist-row-song-fallback.svg"
+        bgImage = "/images/tracklist-row-song-fallback.svg";
-        textColor = "#509bf5"
+        textColor = "#509bf5";
-        updateColors(textColor, textColor)
+        updateColors(textColor, textColor);
-        coverListenerInstalled = false
+        coverListenerInstalled = false;
     }
-    if (!coverListenerInstalled)
+    if (!coverListenerInstalled) hookCoverChange(true);
-        hookCoverChange(true)
 
-    if (album_uri !== undefined && !album_uri.includes('spotify:show')) {
+    if (album_uri !== undefined && !album_uri.includes("spotify:show")) {
-        const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", ""))
+        const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", ""));
 
-        let album_date = new Date(albumInfo.year, (albumInfo.month || 1)-1, albumInfo.day|| 0)
+        let album_date = new Date(albumInfo.year, (albumInfo.month || 1) - 1, albumInfo.day || 0);
-        let recent_date = new Date()
+        let recent_date = new Date();
-        recent_date.setMonth(recent_date.getMonth() - 6)
+        recent_date.setMonth(recent_date.getMonth() - 6);
-        album_date = album_date.toLocaleString('default', album_date>recent_date ? { year: 'numeric', month: 'short' } : { year: 'numeric' })
+        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>"
+        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
+        nearArtistSpanText = album_link + " • " + album_date;
-    } else if (Spicetify.Player.data.track.uri.includes('spotify:episode')) {
+    } else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) {
         // podcast
-        bgImage = bgImage.replace('spotify:image:', 'https://i.scdn.co/image/')
+        bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/");
-        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title
+        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
-    } else if (Spicetify.Player.data.track.metadata.is_local=="true") {
+    } else if (Spicetify.Player.data.track.metadata.is_local == "true") {
         // local file
-        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title
+        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
-    } else if (Spicetify.Player.data.track.provider=="ad") {
+    } else if (Spicetify.Player.data.track.provider == "ad") {
         // ad
-        nearArtistSpanText = "advertisement"
+        nearArtistSpanText = "advertisement";
-        coverListenerInstalled = false
+        coverListenerInstalled = false;
-        return
+        return;
     } else {
         // When clicking a song from the homepage, songChange is fired with half empty metadata
         // todo: retry only once?
-        setTimeout(songchange, 200)
+        setTimeout(songchange, 200);
     }
 
-    if( document.querySelector("#main-trackInfo-year")===null ) {
+    if (document.querySelector("#main-trackInfo-year") === null) {
         waitForElement([".main-trackInfo-container"], (queries) => {
-            nearArtistSpan = document.createElement("div")
+            nearArtistSpan = document.createElement("div");
-            nearArtistSpan.id = 'main-trackInfo-year'
+            nearArtistSpan.id = "main-trackInfo-year";
-            nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale")
+            nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale");
-            nearArtistSpan.innerHTML = nearArtistSpanText
+            nearArtistSpan.innerHTML = nearArtistSpanText;
-            queries[0].append(nearArtistSpan)
+            queries[0].append(nearArtistSpan);
-        })
+        });
     } else {
-        nearArtistSpan.innerHTML = nearArtistSpanText
+        nearArtistSpan.innerHTML = nearArtistSpanText;
     }
-    document.documentElement.style.setProperty('--image_url', 'url("' + bgImage + '")')
+    document.documentElement.style.setProperty("--image_url", 'url("' + bgImage + '")');
 }
 
-Spicetify.Player.addEventListener("songchange", songchange)
+Spicetify.Player.addEventListener("songchange", songchange);
 
 function pickCoverColor(img) {
-    if (!img.currentSrc.startsWith('spotify:'))
+    if (!img.currentSrc.startsWith("spotify:")) return;
-        return
+    var swatches = new Vibrant(img, 5).swatches();
-    var swatches = new Vibrant(img, 5).swatches()
+    lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"];
-    lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"]
+    darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"];
-    darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"]
 
-    mainCols = isLight(textColorBg) ? lightCols : darkCols
+    mainCols = isLight(textColorBg) ? lightCols : darkCols;
-    textColor = "#509bf5"
+    textColor = "#509bf5";
     for (var col in mainCols)
         if (swatches[mainCols[col]]) {
-            textColor = swatches[mainCols[col]].getHex()
+            textColor = swatches[mainCols[col]].getHex();
-            break
+            break;
         }
 
-    sidebarColor = "#509bf5"
+    sidebarColor = "#509bf5";
     for (var col in lightCols)
         if (swatches[lightCols[col]]) {
-            sidebarColor = swatches[lightCols[col]].getHex()
+            sidebarColor = swatches[lightCols[col]].getHex();
-            break
+            break;
         }
-    updateColors(textColor, sidebarColor)
+    updateColors(textColor, sidebarColor);
 }
 
 waitForElement([".main-nowPlayingBar-left"], (queries) => {
-    var observer = new MutationObserver(function(mutations) {
+    var observer = new MutationObserver(function (mutations) {
-        mutations.forEach(function(mutation) {
+        mutations.forEach(function (mutation) {
-            if (mutation.removedNodes.length>0)
+            if (mutation.removedNodes.length > 0) coverListenerInstalled = false;
-                coverListenerInstalled = false
         });
     });
-    observer.observe(queries[0], { childList: true })
+    observer.observe(queries[0], { childList: true });
 });
 
 function hookCoverChange(pick) {
     waitForElement([".cover-art-image"], (queries) => {
-        coverListenerInstalled = true
+        coverListenerInstalled = true;
         if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]);
         queries[0].addEventListener("load", function () {
             try {
-                pickCoverColor(queries[0])
+                pickCoverColor(queries[0]);
             } catch (error) {
-                console.error(error)
+                console.error(error);
-                setTimeout(pickCoverColor, 300, queries[0])
+                setTimeout(pickCoverColor, 300, queries[0]);
             }
         });
     });
@@ -464,6 +470,6 @@ document.styleSheets[0].insertRule(`
         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', ' ');
+document.documentElement.style.setProperty("--warning_message", " ");

dribbblish.js

@@ -567,11 +567,9 @@ waitForElement([".Root__main-view"], ([mainView]) => {
     mainView.prepend(shadow);
 });
 
-waitForElement([
+waitForElement([".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"], ([resizer]) => {
-    ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
-], ([resizer]) => {
     const observer = new MutationObserver(updateVariable);
-    observer.observe(resizer, { attributes: true, attributeFilter: ["value"]});
+    observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
     function updateVariable() {
         let value = resizer.value;
         if (value < 121) {
@@ -580,8 +578,7 @@ waitForElement([
         } else {
             document.documentElement.classList.remove("sidebar-hide-text");
         }
-        document.documentElement.style.setProperty(
+        document.documentElement.style.setProperty("--sidebar-width", value + "px");
-            "--sidebar-width", value + "px");
     }
     updateVariable();
 });
@@ -589,11 +586,9 @@ waitForElement([
 waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
     const observer = new ResizeObserver(updateVariable);
     observer.observe(resizeHost);
-    function updateVariable([ event ]) {
+    function updateVariable([event]) {
-        document.documentElement.style.setProperty(
+        document.documentElement.style.setProperty("--main-view-width", event.contentRect.width + "px");
-            "--main-view-width", event.contentRect.width + "px");
+        document.documentElement.style.setProperty("--main-view-height", event.contentRect.height + "px");
-        document.documentElement.style.setProperty(
-            "--main-view-height", event.contentRect.height + "px");
         if (event.contentRect.width < 700) {
             document.documentElement.classList.add("minimal-player");
         } else {
@@ -639,7 +634,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
     updateProgTime();
 
     Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
-        const isExternal = state.devices.some(a => a.is_active);
+        const isExternal = state.devices.some((a) => a.is_active);
         if (isExternal) {
             root.classList.add("is-connectBarVisible");
         } else {
@@ -653,53 +648,44 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
     document.body.appendChild(filePickerForm);
     /** @type {HTMLInputElement} */
     const filePickerInput = filePickerForm.childNodes[0];
-    filePickerInput.accept = [
+    filePickerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(",");
-        "image/jpeg",
-        "image/apng",
-        "image/avif",
-        "image/gif",
-        "image/png",
-        "image/svg+xml",
-        "image/webp"
-    ].join(",");
 
     filePickerInput.onchange = () => {
         if (!filePickerInput.files.length) return;
 
         const file = filePickerInput.files[0];
-        const reader = new FileReader;
+        const reader = new FileReader();
         reader.onload = (event) => {
             const result = event.target.result;
             const id = Spicetify.URI.from(filePickerInput.uri).id;
             try {
-                localStorage.setItem(
+                localStorage.setItem("dribbblish:folder-image:" + id, result);
-                    "dribbblish:folder-image:" + id,
-                    result
-                );
             } catch {
                 Spicetify.showNotification("File too large");
             }
             DribbblishShared.loadPlaylistImage?.call();
-        }
+        };
         reader.readAsDataURL(file);
-    }
+    };
 
-    new Spicetify.ContextMenu.Item("Remove folder image",
+    new Spicetify.ContextMenu.Item(
+        "Remove folder image",
         ([uri]) => {
             const id = Spicetify.URI.from(uri).id;
             localStorage.removeItem("dribbblish:folder-image:" + id);
             DribbblishShared.loadPlaylistImage?.call();
         },
         ([uri]) => Spicetify.URI.isFolder(uri),
-        "x",
+        "x"
     ).register();
-    new Spicetify.ContextMenu.Item("Choose folder image",
+    new Spicetify.ContextMenu.Item(
+        "Choose folder image",
         ([uri]) => {
             filePickerInput.uri = uri;
             filePickerForm.reset();
             filePickerInput.click();
         },
         ([uri]) => Spicetify.URI.isFolder(uri),
-        "edit",
+        "edit"
     ).register();
 })();

user.css

@@ -39,30 +39,29 @@
     font-weight: 500;
 }
 
-
 /* smooth color transitions */
 @property --spice-sidebar {
-  syntax: '<color>';
+    syntax: "<color>";
-  initial-value: magenta;
+    initial-value: magenta;
-  inherits: true;
+    inherits: true;
 }
 
 @property --spice-main {
-  syntax: '<color>';
+    syntax: "<color>";
-  initial-value: magenta;
+    initial-value: magenta;
-  inherits: true;
+    inherits: true;
 }
 
 @property --spice-text {
-  syntax: '<color>';
+    syntax: "<color>";
-  initial-value: magenta;
+    initial-value: magenta;
-  inherits: true;
+    inherits: true;
 }
 
 @property --spice-button {
-  syntax: '<color>';
+    syntax: "<color>";
-  initial-value: magenta;
+    initial-value: magenta;
-  inherits: true;
+    inherits: true;
 }
 
 :root {
@@ -71,8 +70,8 @@
 }
 
 body {
-    --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
+    --glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
-    --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
+    --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
     font-family: var(--glue-font-family);
     letter-spacing: normal;
 }
@@ -114,7 +113,7 @@ body {
 
 .lyrics-lyricsContainer-LyricsLine {
     font-family: var(--glue-font-family);
-    letter-spacing: -.03em !important;
+    letter-spacing: -0.03em !important;
 }
 
 .main-rootlist-rootlistDivider {
@@ -128,13 +127,13 @@ input {
     color: var(--spice-text) !important;
 }
 
-input[type=range] {
+input[type="range"] {
     -webkit-appearance: none;
     background: transparent;
     padding: 0px;
 }
 
-input[type=range]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 16px;
     height: 16px;
@@ -143,12 +142,12 @@ input[type=range]::-webkit-slider-thumb {
     background-color: var(--spice-text);
 }
 
-input[type=range]::-webkit-slider-thumb:hover,
+input[type="range"]::-webkit-slider-thumb:hover,
-input[type=range]::-webkit-slider-thumb:active {
+input[type="range"]::-webkit-slider-thumb:active {
     filter: brightness(80%);
 }
 
-input[type=range]::after {
+input[type="range"]::after {
     z-index: 9999;
     content: attr(tooltip);
     position: absolute;
@@ -165,64 +164,64 @@ input[type=range]::after {
     opacity: 0;
 }
 
-input[type=range]:hover::after,
+input[type="range"]:hover::after,
-input[type=range]:active::after {
+input[type="range"]:active::after {
     opacity: 1;
 }
 
-input[type=range]:focus {
+input[type="range"]:focus {
     outline: none;
 }
 
-input[type=range]::-webkit-slider-runnable-track {
+input[type="range"]::-webkit-slider-runnable-track {
     width: 100%;
     height: 8px;
-    background-color: rgba(var(--spice-rgb-text), .2);
+    background-color: rgba(var(--spice-rgb-text), 0.2);
     border-radius: 50vw;
 }
 
-input[type=number],
+input[type="number"],
-input[type=text],
+input[type="text"],
-input[type=time] {
+input[type="time"] {
     height: 32px;
     border: none;
     border-radius: 4px !important;
     padding: 0px 10px;
-    background-color: rgba(var(--spice-rgb-selected-row), .4) !important;
+    background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
     color: var(--spice-subtext) !important;
 }
 
-input[type=number]:hover,
+input[type="number"]:hover,
-input[type=number]:active,
+input[type="number"]:active,
-input[type=text]:hover,
+input[type="text"]:hover,
-input[type=text]:active,
+input[type="text"]:active,
-input[type=time]:hover,
+input[type="time"]:hover,
-input[type=time]:active {
+input[type="time"]:active {
-    background-color: rgba(var(--spice-rgb-selected-row), .6) !important;
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
 }
 
 input[type="time"]::-webkit-calendar-picker-indicator {
     filter: invert(calc(1 - var(--is_light)));
 }
 
-input[type=color] {
+input[type="color"] {
     position: relative;
     padding: 0px;
     border: none;
 }
 
-input[type=color]::before {
+input[type="color"]::before {
     z-index: -1;
     content: "";
     position: absolute;
     inset: -5px;
     border-radius: 4px;
-    background-color: rgba(var(--spice-rgb-selected-row), .4);
+    background-color: rgba(var(--spice-rgb-selected-row), 0.4);
 }
 
-input[type=color]:hover::before,
+input[type="color"]:hover::before,
-input[type=color]:active::before {
+input[type="color"]:active::before {
-    background-color: rgba(var(--spice-rgb-selected-row), .6);
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6);
 }
 
 .x-searchInput-searchInputSearchIcon,
@@ -235,8 +234,7 @@ input[type=color]:active::before {
 .x-actionBarBackground-background,
 .main-actionBarBackground-background,
 .main-entityHeader-overlay,
-.main-entityHeader-backgroundColor
+.main-entityHeader-backgroundColor {
-{
     background-color: unset !important;
     background-image: unset !important;
 }
@@ -245,7 +243,8 @@ input[type=color]:active::before {
     color: white;
 }
 
-.connect-title, .connect-header {
+.connect-title,
+.connect-header {
     display: none;
 }
 
@@ -298,7 +297,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .main-entityHeader-background.main-entityHeader-overlay:after {
-    background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main));
+    background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
 }
 
 .artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
@@ -347,7 +346,8 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
     -webkit-box-shadow: unset;
 }
 
-.main-cardImage-imagePlaceholder, .main-cardImage-image {
+.main-cardImage-imagePlaceholder,
+.main-cardImage-image {
     border-radius: var(--cover-border-radius);
 }
 
@@ -491,7 +491,7 @@ html {
 .main-rootlist-rootlistContent span,
 .main-navBar-entryPoints span {
     z-index: 999;
-    color: var(--spice-sidebar-text)
+    color: var(--spice-sidebar-text);
 }
 
 .main-navBar-navBarItem svg {
@@ -504,7 +504,7 @@ html {
     padding: 0px;
 }
 
-#spicetify-show-list >* {
+#spicetify-show-list > * {
     padding: 0 8px;
 }
 
@@ -600,15 +600,15 @@ html.sidebar-hide-text .GlueDropTarget span {
     backdrop-filter: invert(0.25);
 }
 
-input:checked~.x-toggle-indicatorWrapper {
+input:checked ~ .x-toggle-indicatorWrapper {
     background-color: rgba(var(--spice-rgb-button), 0.4);
 }
 
-input:hover:checked~.x-toggle-indicatorWrapper {
+input:hover:checked ~ .x-toggle-indicatorWrapper {
     background-color: rgba(var(--spice-rgb-button), 0.5) !important;
 }
 
-input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
+input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
     background-color: transparent;
     backdrop-filter: invert(0.4);
 }
@@ -655,7 +655,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
 .progress-bar {
     --progress-bar-height: 2px;
     --fg-color: var(--spice-button);
-    --bg-color: rgba(var(--spice-rgb-text), .2);
+    --bg-color: rgba(var(--spice-rgb-text), 0.2);
 }
 
 .progress-bar__slider {
@@ -674,7 +674,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
 }
 
 .progress-bar:not(:active) .progress-bar__slider {
-    transition-property: left,opacity;
+    transition-property: left, opacity;
 }
 
 .playback-bar .prog-tooltip {
@@ -770,9 +770,9 @@ img.playlist-picture {
 }
 
 .main-rootlist-rootlistItem {
-    padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width));
+    padding-left: calc(var(--indentation) * var(--left-sidebar-item-indentation-width));
     padding-right: 0;
-    transition: padding-left .5s ease;
+    transition: padding-left 0.5s ease;
 }
 
 html.sidebar-hide-text .main-rootlist-rootlistItem {
@@ -849,7 +849,7 @@ li.GlueDropTarget {
     padding-top: 32px;
 }
 
-#main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container {
+#main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir="ltr"] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container {
     padding-right: 167px;
 }
 
@@ -926,7 +926,7 @@ li.GlueDropTarget {
 }
 
 .dribbblish-config-area:empty {
-    display: none
+    display: none;
 }
 
 .dribbblish-config-area > h2 {
@@ -967,7 +967,7 @@ li.GlueDropTarget {
     padding-left: 16px;
 }
 
-.dribbblish-config-item[hidden=true] {
+.dribbblish-config-item[hidden="true"] {
     display: none;
 }
 
@@ -1048,19 +1048,19 @@ li.GlueDropTarget {
 }
 
 /* Spotify style player bar */
-#main[player-controls=spotify] .main-nowPlayingBar-left {
+#main[player-controls="spotify"] .main-nowPlayingBar-left {
     order: 0;
 }
 
-#main[player-controls=spotify] .main-nowPlayingBar-center {
+#main[player-controls="spotify"] .main-nowPlayingBar-center {
     order: 1;
 }
 
-#main[player-controls=spotify] .main-nowPlayingWidget-nowPlaying {
+#main[player-controls="spotify"] .main-nowPlayingWidget-nowPlaying {
     justify-content: left;
 }
 
-#main[player-controls=spotify] .player-controls {
+#main[player-controls="spotify"] .player-controls {
     justify-content: center;
 }
 
@@ -1138,7 +1138,7 @@ span.main-userWidget-displayName,
 
 /** Sidebar config */
 #dribs-hidden-list {
-    background-color: rgba(var(--spice-rgb-main), .3);
+    background-color: rgba(var(--spice-rgb-main), 0.3);
 }
 
 #dribs-sidebar-config {
@@ -1238,16 +1238,16 @@ span.main-userWidget-displayName,
     color: var(--spice-sidebar-text) !important;
 }
 
-div.GlueDropTarget.personal-library  {
+div.GlueDropTarget.personal-library {
     padding: 0px;
 }
-div.GlueDropTarget.personal-library >* {
+div.GlueDropTarget.personal-library > * {
     padding: 0 16px;
     height: 56px;
     border-radius: 4px;
 }
 
-div.GlueDropTarget.personal-library >*.active {
+div.GlueDropTarget.personal-library > *.active {
     background: transparent;
 }
 
@@ -1319,18 +1319,18 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 
 .main-dropDown-dropDown,
 .x-sortBox-sortDropdown {
-    background-color: rgba(var(--spice-rgb-selected-row), .4) !important;
+    background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
     color: var(--spice-subtext);
 }
 
 .main-dropDown-dropDown:hover,
 .x-sortBox-sortDropdown:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), .6) !important;
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
 }
 
 .connect-device-list-item:focus,
 .connect-device-list-item:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), .3);
+    background-color: rgba(var(--spice-rgb-selected-row), 0.3);
 }
 
 .bookmark-filter {
@@ -1355,7 +1355,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 }
 
 .main-userWidget-dropDownMenu > li > button {
-    color: rgba(var(--spice-rgb-selected-row), .7);
+    color: rgba(var(--spice-rgb-selected-row), 0.7);
     padding-left: 8px;
     text-decoration: none;
 }
@@ -1375,7 +1375,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 }
 
 .main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
-  color: var(--spice-subtext);
+    color: var(--spice-subtext);
 }
 
 /* explicit icon */