dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-07 08:40:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #81 from JulienMaille/prettierrc

Browse source 
Add prettier action
This commit is contained in:
Erik 2021-10-25 01:13:54 +02:00 committed by GitHub
commit 43ffd943d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 1910 additions and 1885 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
.github/workflows/prettier.yml vendored Normal file
View file

@ -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

1
.prettierignore Normal file
View file

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

6
.prettierrc Normal file
View file

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

944
dribbblish-dynamic.js
View file

@ -1,469 +1,475 @@
let current = '2.6.0' let current = "2.6.0";
/* css is injected so this works with untouched user.css from Dribbblish */ /* css is injected so this works with untouched user.css from Dribbblish */
/* progressbar tooltip text color */ /* progressbar tooltip text color */
document.styleSheets[0].insertRule(` document.styleSheets[0].insertRule(`
.playback-bar .prog-tooltip { .playback-bar .prog-tooltip {
color: var(--spice-sidebar-text) !important; color: var(--spice-sidebar-text) !important;
}`) }`);
/* edit button of CustomApps */ /* edit button of CustomApps */
document.styleSheets[0].insertRule(` document.styleSheets[0].insertRule(`
.reddit-sort-container button.switch, .reddit-sort-container button.switch,
.new-releases-header button.switch, .new-releases-header button.switch,
.lyrics-tabBar-header button.switch { .lyrics-tabBar-header button.switch {
background-color: rgba(var(--spice-rgb-subtext), 0.15) !important; background-color: rgba(var(--spice-rgb-subtext), 0.15) !important;
color: var(--spice-text); color: var(--spice-text);
}`) }`);
document.styleSheets[0].insertRule(` document.styleSheets[0].insertRule(`
.reddit-sort-container button.switch:hover, .reddit-sort-container button.switch:hover,
.new-releases-header button.switch:hover, .new-releases-header button.switch:hover,
.lyrics-tabBar-header button.switch:hover { .lyrics-tabBar-header button.switch:hover {
background-color: rgba(var(--spice-rgb-subtext), 0.3) !important; background-color: rgba(var(--spice-rgb-subtext), 0.3) !important;
}`) }`);
document.styleSheets[0].insertRule(` document.styleSheets[0].insertRule(`
.lyrics-lyricsContainer-LyricsBackground { .lyrics-lyricsContainer-LyricsBackground {
background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important; background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important;
}`) }`);
/* big cover opacity on hover */ /* big cover opacity on hover */
document.styleSheets[0].insertRule(` document.styleSheets[0].insertRule(`
.main-coverSlotExpanded-container:hover .cover-art, .main-coverSlotExpanded-container:hover .cover-art,
.main-coverSlotExpanded-container:hover img { .main-coverSlotExpanded-container:hover img {
opacity: 0.5; opacity: 0.5;
}`) }`);
document.styleSheets[0].insertRule(` document.styleSheets[0].insertRule(`
.main-navBar-navBar a:hover, .main-navBar-navBar a:hover,
.main-navBar-navBar a:hover span, .main-navBar-navBar a:hover span,
.main-buddyFeed-activityMetadata a:hover { .main-buddyFeed-activityMetadata a:hover {
color: var(--spice-shadow) !important; color: var(--spice-shadow) !important;
}`) }`);
document.styleSheets[0].insertRule(` document.styleSheets[0].insertRule(`
.collection-collectionEntityHeroCard-likedSongs, .collection-collectionEntityHeroCard-likedSongs,
.collection-collectionEntityHeroCard-likedSongs .main-cardHeader-link, .collection-collectionEntityHeroCard-likedSongs .main-cardHeader-link,
.collection-collectionEntityHeroCard-likedSongs .collection-collectionEntityHeroCard-descriptionContainer, .collection-collectionEntityHeroCard-likedSongs .collection-collectionEntityHeroCard-descriptionContainer,
.x-heroCategoryCard-heroTitle, .x-heroCategoryCard-heroTitle,
.main-rootlist-expandArrow:focus, .main-rootlist-expandArrow:focus,
.main-rootlist-expandArrow:hover, .main-rootlist-expandArrow:hover,
.main-rootlist-textWrapper:focus, .main-rootlist-textWrapper:focus,
.main-rootlist-textWrapper:hover, .main-rootlist-textWrapper:hover,
.main-contextMenu-menuHeading, .main-contextMenu-menuHeading,
.main-contextMenu-menuItemButton, .main-contextMenu-menuItemButton,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
color: var(--spice-sidebar-text) !important; color: var(--spice-sidebar-text) !important;
}`) }`);
/* Config settings */ /* Config settings */
DribbblishShared.config.register({ DribbblishShared.config.register({
area: "Animations & Transitions", area: "Animations & Transitions",
type: "slider", type: "slider",
key: "fadeDuration", key: "fadeDuration",
name: "Color Fade Duration", name: "Color Fade Duration",
description: "Select the duration of the color fading transition", description: "Select the duration of the color fading transition",
defaultValue: 0.5, defaultValue: 0.5,
data: { data: {
min: 0, min: 0,
max: 10, max: 10,
step: 0.1, step: 0.1,
suffix: "s" suffix: "s"
}, },
onChange: (val) => document.documentElement.style.setProperty("--song-transition-speed", val + "s") onChange: (val) => document.documentElement.style.setProperty("--song-transition-speed", val + "s")
}); });
// waitForElement because Spicetify is not initialized at startup // waitForElement because Spicetify is not initialized at startup
waitForElement(["#main"], () => { waitForElement(["#main"], () => {
DribbblishShared.config.register({ DribbblishShared.config.register({
area: { name: "About", order: 999 }, area: { name: "About", order: 999 },
type: "button", type: "button",
key: "aboutDribbblish", key: "aboutDribbblish",
name: "Info", name: "Info",
description: ` description: `
OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version} OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}
Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple} Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}
Dribbblish: v${current} Dribbblish: v${current}
`, `,
data: "Copy", data: "Copy",
onChange: (val) => { onChange: (val) => {
copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblish").description); copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblish").description);
Spicetify.showNotification("Copied Versions"); Spicetify.showNotification("Copied Versions");
} }
}); });
}); });
function capitalizeFirstLetter(string) { function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1); return string.charAt(0).toUpperCase() + string.slice(1);
} }
function copyToClipboard(text) { function copyToClipboard(text) {
var input = document.createElement('textarea'); var input = document.createElement("textarea");
input.style.display = "fixed"; input.style.display = "fixed";
input.innerHTML = text; input.innerHTML = text;
document.body.appendChild(input); document.body.appendChild(input);
input.select(); input.select();
var result = document.execCommand('copy'); var result = document.execCommand("copy");
document.body.removeChild(input); document.body.removeChild(input);
return result; return result;
} }
/* js */ /* js */
function getAlbumInfo(uri) { 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) { 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) { 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]) { 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) =>
"#" +
function rgbToHsl([r, g, b]) { [1, 3, 5]
r /= 255, g /= 255, b /= 255 .map((s) => parseInt(h.substr(s, 2), 16))
var max = Math.max(r, g, b), min = Math.min(r, g, b) .map((c) => parseInt((c * (100 + p)) / 100))
var h, s, l = (max + min) / 2 .map((c) => (c < 255 ? c : 255))
if (max == min) { .map((c) => c.toString(16).padStart(2, "0"))
h = s = 0 // achromatic .join("");
} else {
var d = max - min function rgbToHsl([r, g, b]) {
s = l > 0.5 ? d / (2 - max - min) : d / (max + min) (r /= 255), (g /= 255), (b /= 255);
switch (max) { var max = Math.max(r, g, b),
case r: h = (g - b) / d + (g < b ? 6 : 0) min = Math.min(r, g, b);
break var h,
case g: h = (b - r) / d + 2 s,
break l = (max + min) / 2;
case b: h = (r - g) / d + 4 if (max == min) {
break h = s = 0; // achromatic
} } else {
h /= 6 var d = max - min;
} s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
return [h, s, l] switch (max) {
} case r:
h = (g - b) / d + (g < b ? 6 : 0);
function hslToRgb([h, s, l]) { break;
var r, g, b case g:
if (s == 0) { h = (b - r) / d + 2;
r = g = b = l // achromatic break;
} else { case b:
function hue2rgb(p, q, t) { h = (r - g) / d + 4;
if (t < 0) t += 1 break;
if (t > 1) t -= 1 }
if (t < 1/6) return p + (q - p) * 6 * t h /= 6;
if (t < 1/2) return q }
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6 return [h, s, l];
return p }
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s function hslToRgb([h, s, l]) {
var p = 2 * l - q var r, g, b;
r = hue2rgb(p, q, h + 1/3) if (s == 0) {
g = hue2rgb(p, q, h) r = g = b = l; // achromatic
b = hue2rgb(p, q, h - 1/3) } else {
} function hue2rgb(p, q, t) {
return [r * 255, g * 255, b * 255] if (t < 0) t += 1;
} if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
function setLightness(hex, lightness) { if (t < 1 / 2) return q;
hsl = rgbToHsl(hexToRgb(hex)) if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
hsl[2] = lightness return p;
return rgbToHex(hslToRgb(hsl)) }
} var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
let textColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-text') r = hue2rgb(p, q, h + 1 / 3);
let textColorBg = getComputedStyle(document.documentElement).getPropertyValue('--spice-main') g = hue2rgb(p, q, h);
let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-sidebar') b = hue2rgb(p, q, h - 1 / 3);
}
function setRootColor(name, colHex) { return [r * 255, g * 255, b * 255];
let root = document.documentElement }
if (root===null) return
root.style.setProperty('--spice-' + name, colHex) function setLightness(hex, lightness) {
root.style.setProperty('--spice-rgb-' + name, hexToRgb(colHex).join(',')) hsl = rgbToHsl(hexToRgb(hex));
} hsl[2] = lightness;
return rgbToHex(hslToRgb(hsl));
function toggleDark(setDark) { }
if (setDark===undefined) setDark = isLight(textColorBg)
let textColor = getComputedStyle(document.documentElement).getPropertyValue("--spice-text");
document.documentElement.style.setProperty('--is_light', setDark ? 0 : 1) let textColorBg = getComputedStyle(document.documentElement).getPropertyValue("--spice-main");
textColorBg = setDark ? "#0A0A0A" : "#FAFAFA" let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue("--spice-sidebar");
setRootColor('main', textColorBg) function setRootColor(name, colHex) {
setRootColor('player', textColorBg) let root = document.documentElement;
setRootColor('card', setDark ? "#040404" : "#ECECEC") if (root === null) return;
setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D") root.style.setProperty("--spice-" + name, colHex);
setRootColor('notification', setDark ? "#303030" : "#DDDDDD") root.style.setProperty("--spice-rgb-" + name, hexToRgb(colHex).join(","));
}
updateColors(textColor, sidebarColor)
} function toggleDark(setDark) {
if (setDark === undefined) setDark = isLight(textColorBg);
function checkDarkLightMode() {
if (DribbblishShared.config.get("theme") != 2) return; document.documentElement.style.setProperty("--is_light", setDark ? 0 : 1);
textColorBg = setDark ? "#0A0A0A" : "#FAFAFA";
const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0])
+ parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]) setRootColor("main", textColorBg);
const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) setRootColor("player", textColorBg);
+ parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]) setRootColor("card", setDark ? "#040404" : "#ECECEC");
setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D");
const now = new Date() setRootColor("notification", setDark ? "#303030" : "#DDDDDD");
const time = 60 * now.getHours() + now.getMinutes()
updateColors(textColor, sidebarColor);
if (end < start) }
dark = start <= time || time < end
else function checkDarkLightMode() {
dark = start <= time && time < end if (DribbblishShared.config.get("theme") != 2) return;
toggleDark(dark);
} const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]);
// Run every Minute to check time and set dark / light mode const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]);
setInterval(checkDarkLightMode, 60000);
const now = new Date();
DribbblishShared.config.register({ const time = 60 * now.getHours() + now.getMinutes();
area: "Theme",
type: "select", if (end < start) dark = start <= time || time < end;
data: ["Dark", "Light", "Based on Time"], else dark = start <= time && time < end;
key: "theme", toggleDark(dark);
name: "Theme", }
description: "Select Dark / Bright mode", // Run every Minute to check time and set dark / light mode
defaultValue: 0, setInterval(checkDarkLightMode, 60000);
showChildren: (val) => {
return val == 2; DribbblishShared.config.register({
}, area: "Theme",
onChange: (val) => { type: "select",
switch (val) { data: ["Dark", "Light", "Based on Time"],
case 0: key: "theme",
toggleDark(true); name: "Theme",
break; description: "Select Dark / Bright mode",
case 1: defaultValue: 0,
toggleDark(false); showChildren: (val) => {
break; return val == 2;
case 2: },
checkDarkLightMode(); onChange: (val) => {
break; switch (val) {
} case 0:
}, toggleDark(true);
children: [ break;
{ case 1:
type: "time", toggleDark(false);
key: "darkModeOnTime", break;
name: "Dark Mode On Time", case 2:
description: "Beginning of Dark mode time", checkDarkLightMode();
defaultValue: "20:00", break;
fireInitialChange: false, }
onChange: checkDarkLightMode },
}, children: [
{ {
type: "time", type: "time",
key: "darkModeOffTime", key: "darkModeOnTime",
name: "Dark Mode Off Time", name: "Dark Mode On Time",
description: "End of Dark mode time", description: "Beginning of Dark mode time",
defaultValue: "06:00", defaultValue: "20:00",
fireInitialChange: false, fireInitialChange: false,
onChange: checkDarkLightMode onChange: checkDarkLightMode
} },
] {
}); type: "time",
key: "darkModeOffTime",
var currentColor; name: "Dark Mode Off Time",
var currentSideColor; description: "End of Dark mode time",
var colorFadeInterval = false; defaultValue: "06:00",
fireInitialChange: false,
function updateColors(textColHex, sideColHex) { onChange: checkDarkLightMode
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) var currentColor;
let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14) var currentSideColor;
setRootColor('text', textColHex) var colorFadeInterval = false;
setRootColor('button', darkerColHex)
setRootColor('button-active', darkColHex) function updateColors(textColHex, sideColHex) {
setRootColor('selected-row', darkerColHex) let isLightBg = isLight(textColorBg);
setRootColor('tab-active', buttonBgColHex) if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15); // vibrant color is always too bright for white bg mode
setRootColor('button-disabled', buttonBgColHex)
setRootColor('sidebar', sideColHex) let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20);
} let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40);
let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.9 : 0.14);
let nearArtistSpanText = "" setRootColor("text", textColHex);
let coverListenerInstalled = true setRootColor("button", darkerColHex);
async function songchange() { setRootColor("button-active", darkColHex);
try { setRootColor("selected-row", darkerColHex);
// warning popup setRootColor("tab-active", buttonBgColHex);
if (Spicetify.Platform.PlatformData.client_version_triple < "1.1.68") Spicetify.showNotification(`Your version of Spotify ${Spicetify.Platform.PlatformData.client_version_triple}) is un-supported`); setRootColor("button-disabled", buttonBgColHex);
} catch (err) { setRootColor("sidebar", sideColHex);
console.error(err); }
}
let nearArtistSpanText = "";
let album_uri = Spicetify.Player.data.track.metadata.album_uri let coverListenerInstalled = true;
let bgImage = Spicetify.Player.data.track.metadata.image_url async function songchange() {
if (bgImage === undefined) { try {
bgImage = "/images/tracklist-row-song-fallback.svg" // warning popup
textColor = "#509bf5" if (Spicetify.Platform.PlatformData.client_version_triple < "1.1.68") Spicetify.showNotification(`Your version of Spotify ${Spicetify.Platform.PlatformData.client_version_triple}) is un-supported`);
updateColors(textColor, textColor) } catch (err) {
coverListenerInstalled = false console.error(err);
} }
if (!coverListenerInstalled)
hookCoverChange(true) let album_uri = Spicetify.Player.data.track.metadata.album_uri;
let bgImage = Spicetify.Player.data.track.metadata.image_url;
if (album_uri !== undefined && !album_uri.includes('spotify:show')) { if (bgImage === undefined) {
const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", "")) bgImage = "/images/tracklist-row-song-fallback.svg";
textColor = "#509bf5";
let album_date = new Date(albumInfo.year, (albumInfo.month || 1)-1, albumInfo.day|| 0) updateColors(textColor, textColor);
let recent_date = new Date() coverListenerInstalled = false;
recent_date.setMonth(recent_date.getMonth() - 6) }
album_date = album_date.toLocaleString('default', album_date>recent_date ? { year: 'numeric', month: 'short' } : { year: 'numeric' }) if (!coverListenerInstalled) hookCoverChange(true);
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>"
if (album_uri !== undefined && !album_uri.includes("spotify:show")) {
nearArtistSpanText = album_link + " • " + album_date const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", ""));
} else if (Spicetify.Player.data.track.uri.includes('spotify:episode')) {
// podcast let album_date = new Date(albumInfo.year, (albumInfo.month || 1) - 1, albumInfo.day || 0);
bgImage = bgImage.replace('spotify:image:', 'https://i.scdn.co/image/') let recent_date = new Date();
nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title recent_date.setMonth(recent_date.getMonth() - 6);
} else if (Spicetify.Player.data.track.metadata.is_local=="true") { album_date = album_date.toLocaleString("default", album_date > recent_date ? { year: "numeric", month: "short" } : { year: "numeric" });
// local file 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 = Spicetify.Player.data.track.metadata.album_title
} else if (Spicetify.Player.data.track.provider=="ad") { nearArtistSpanText = album_link + " • " + album_date;
// ad } else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) {
nearArtistSpanText = "advertisement" // podcast
coverListenerInstalled = false bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/");
return nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
} else { } else if (Spicetify.Player.data.track.metadata.is_local == "true") {
// When clicking a song from the homepage, songChange is fired with half empty metadata // local file
// todo: retry only once? nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
setTimeout(songchange, 200) } else if (Spicetify.Player.data.track.provider == "ad") {
} // ad
nearArtistSpanText = "advertisement";
if( document.querySelector("#main-trackInfo-year")===null ) { coverListenerInstalled = false;
waitForElement([".main-trackInfo-container"], (queries) => { return;
nearArtistSpan = document.createElement("div") } else {
nearArtistSpan.id = 'main-trackInfo-year' // When clicking a song from the homepage, songChange is fired with half empty metadata
nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale") // todo: retry only once?
nearArtistSpan.innerHTML = nearArtistSpanText setTimeout(songchange, 200);
queries[0].append(nearArtistSpan) }
})
} else { if (document.querySelector("#main-trackInfo-year") === null) {
nearArtistSpan.innerHTML = nearArtistSpanText waitForElement([".main-trackInfo-container"], (queries) => {
} nearArtistSpan = document.createElement("div");
document.documentElement.style.setProperty('--image_url', 'url("' + bgImage + '")') nearArtistSpan.id = "main-trackInfo-year";
} nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale");
nearArtistSpan.innerHTML = nearArtistSpanText;
Spicetify.Player.addEventListener("songchange", songchange) queries[0].append(nearArtistSpan);
});
function pickCoverColor(img) { } else {
if (!img.currentSrc.startsWith('spotify:')) nearArtistSpan.innerHTML = nearArtistSpanText;
return }
var swatches = new Vibrant(img, 5).swatches() document.documentElement.style.setProperty("--image_url", 'url("' + bgImage + '")');
lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"] }
darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"]
Spicetify.Player.addEventListener("songchange", songchange);
mainCols = isLight(textColorBg) ? lightCols : darkCols
textColor = "#509bf5" function pickCoverColor(img) {
for (var col in mainCols) if (!img.currentSrc.startsWith("spotify:")) return;
if (swatches[mainCols[col]]) { var swatches = new Vibrant(img, 5).swatches();
textColor = swatches[mainCols[col]].getHex() lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"];
break darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"];
}
mainCols = isLight(textColorBg) ? lightCols : darkCols;
sidebarColor = "#509bf5" textColor = "#509bf5";
for (var col in lightCols) for (var col in mainCols)
if (swatches[lightCols[col]]) { if (swatches[mainCols[col]]) {
sidebarColor = swatches[lightCols[col]].getHex() textColor = swatches[mainCols[col]].getHex();
break break;
} }
updateColors(textColor, sidebarColor)
} sidebarColor = "#509bf5";
for (var col in lightCols)
waitForElement([".main-nowPlayingBar-left"], (queries) => { if (swatches[lightCols[col]]) {
var observer = new MutationObserver(function(mutations) { sidebarColor = swatches[lightCols[col]].getHex();
mutations.forEach(function(mutation) { break;
if (mutation.removedNodes.length>0) }
coverListenerInstalled = false updateColors(textColor, sidebarColor);
}); }
});
observer.observe(queries[0], { childList: true }) waitForElement([".main-nowPlayingBar-left"], (queries) => {
}); var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
function hookCoverChange(pick) { if (mutation.removedNodes.length > 0) coverListenerInstalled = false;
waitForElement([".cover-art-image"], (queries) => { });
coverListenerInstalled = true });
if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]); observer.observe(queries[0], { childList: true });
queries[0].addEventListener("load", function () { });
try {
pickCoverColor(queries[0]) function hookCoverChange(pick) {
} catch (error) { waitForElement([".cover-art-image"], (queries) => {
console.error(error) coverListenerInstalled = true;
setTimeout(pickCoverColor, 300, queries[0]) if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]);
} queries[0].addEventListener("load", function () {
}); try {
}); pickCoverColor(queries[0]);
} } catch (error) {
console.error(error);
hookCoverChange(false); setTimeout(pickCoverColor, 300, queries[0]);
}
(function Startup() { });
if (!Spicetify.showNotification) { });
setTimeout(Startup, 300); }
return;
} hookCoverChange(false);
// Check latest release
fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest") (function Startup() {
.then((response) => { if (!Spicetify.showNotification) {
return response.json(); setTimeout(Startup, 300);
}) return;
.then((data) => { }
if (data.tag_name > current) { // Check latest release
upd = document.createElement("div"); fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest")
upd.innerText = `Theme UPD v${data.tag_name} avail.`; .then((response) => {
upd.classList.add("ellipsis-one-line", "main-type-finale"); return response.json();
upd.setAttribute("title", `Changes: ${data.name}`); })
upd.style.setProperty("color", "var(--spice-button-active)"); .then((data) => {
document.querySelector(".main-userWidget-box").append(upd); if (data.tag_name > current) {
document.querySelector(".main-userWidget-box").classList.add("update-avail"); upd = document.createElement("div");
new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register(); upd.innerText = `Theme UPD v${data.tag_name} avail.`;
} upd.classList.add("ellipsis-one-line", "main-type-finale");
}) upd.setAttribute("title", `Changes: ${data.name}`);
.catch((err) => { upd.style.setProperty("color", "var(--spice-button-active)");
// Do something for an error here document.querySelector(".main-userWidget-box").append(upd);
console.error(err); document.querySelector(".main-userWidget-box").classList.add("update-avail");
}); new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register();
})(); }
})
/* translucid background cover */ .catch((err) => {
document.styleSheets[0].insertRule(` // Do something for an error here
.Root__top-container::before { console.error(err);
content: ''; });
background-image: var(--image_url); })();
background-repeat: no-repeat;
background-size: cover; /* translucid background cover */
background-position: center center; document.styleSheets[0].insertRule(`
position: fixed; .Root__top-container::before {
display: block; content: '';
top: 0; background-image: var(--image_url);
left: 0; background-repeat: no-repeat;
right: 0; background-size: cover;
bottom: 0; background-position: center center;
filter: blur(15px); position: fixed;
pointer-events: none; display: block;
backface-visibility: hidden; top: 0;
will-change: transform; left: 0;
opacity: calc(0.07 + 0.03 * var(--is_light, 0)); right: 0;
z-index: +3; bottom: 0;
transition: background-image var(--song-transition-speed) linear; filter: blur(15px);
}`) pointer-events: none;
backface-visibility: hidden;
document.documentElement.style.setProperty('--warning_message', ' '); 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", " ");

50
dribbblish.js
View file

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

2768
user.css
View file

File diff suppressed because it is too large Load diff