fix(StarryNight): improve visibility of text on artist page and fix occasional missing shooting stars (#1112)

Co-authored-by: jal1077 <jal1077@nyu.edu>
This commit is contained in:
Brandon Chen 2024-10-23 20:56:35 -04:00 committed by GitHub
parent bf2263b71b
commit a37af009a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 50 deletions

View File

@ -53,48 +53,47 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
// handles resizing of playbar panel to match right sidebar below it // handles resizing of playbar panel to match right sidebar below it
const playbar = document.querySelector('.Root__now-playing-bar'); const playbar = document.querySelector('.Root__now-playing-bar');
const rightbar = document.querySelector('.Root__right-sidebar'); waitForElement(['.Root__right-sidebar'], ([rightbar]) => {
const resizeObserver = new ResizeObserver((entries) => {
const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) {
for (const entry of entries) { if (entry.target === rightbar) {
if (entry.target === rightbar) { let newWidth = entry.contentRect.width;
let newWidth = entry.contentRect.width; if (newWidth === 0) {
if (newWidth === 0) { const localStorageWidth = localStorage.getItem(
const localStorageWidth = localStorage.getItem( '223ni6f2epqcidhx5etjafeai:panel-width-saved'
'223ni6f2epqcidhx5etjafeai:panel-width-saved' );
); if (localStorageWidth) {
if (localStorageWidth) { newWidth = localStorageWidth;
newWidth = localStorageWidth; } else {
} else { newWidth = 420;
newWidth = 420; }
} }
playbar.style.width = `${newWidth}px`;
break;
} }
playbar.style.width = `${newWidth}px`;
break;
} }
} });
resizeObserver.observe(rightbar);
}); });
resizeObserver.observe(rightbar); waitForElement(['[data-encore-id="buttonPrimary"]'], ([targetElement]) => {
// start or stop spinning animation based on whether something is playing
// start or stop spinning animation based on whether something is playing const playObserver = new MutationObserver((mutationsList) => {
const targetElement = document.querySelector('[data-encore-id="buttonPrimary"]'); for (const mutation of mutationsList) {
if (
const playObserver = new MutationObserver((mutationsList, observer) => { mutation.type === 'attributes' &&
for (const mutation of mutationsList) { mutation.attributeName === 'aria-label'
if ( ) {
mutation.type === 'attributes' && handleLabelChange();
mutation.attributeName === 'aria-label' }
) {
handleLabelChange();
} }
} });
const playConfig = { attributes: true, attributeFilter: ['aria-label'] };
playObserver.observe(targetElement, playConfig);
}); });
const playConfig = { attributes: true, attributeFilter: ['aria-label'] };
playObserver.observe(targetElement, playConfig);
function handleLabelChange() { function handleLabelChange() {
const img = document.querySelector( const img = document.querySelector(
'.main-nowPlayingWidget-coverArt .cover-art img' '.main-nowPlayingWidget-coverArt .cover-art img'

View File

@ -6,12 +6,9 @@
background-color: #00000000 !important; background-color: #00000000 !important;
} }
.main-actionBarBackground-background {
background-color: #00000000 !important;
}
.main-home-homeHeader { .main-home-homeHeader {
background-color: #00000000 !important; background-color: #00000000 !important;
background-image: none !important;
} }
.Root__top-container { .Root__top-container {
@ -27,7 +24,6 @@
"global-nav global-nav global-nav" "global-nav global-nav global-nav"
"left-sidebar main-view now-playing-bar" "left-sidebar main-view now-playing-bar"
"left-sidebar main-view right-sidebar" !important; "left-sidebar main-view right-sidebar" !important;
grid-template-rows: auto 1fr 1fr;
} }
.Root__right-sidebar { .Root__right-sidebar {
@ -75,15 +71,19 @@
} }
.main-actionBarBackground-background { .main-actionBarBackground-background {
background-image: linear-gradient(rgba(var(--spice-rgb-shadow), .6) 0, #000000 100%), #00000000 !important; background-image: none;
background-color: #00000000 !important;
animation: none !important; animation: none !important;
-webkit-animation: none !important; -webkit-animation: none !important;
} }
.main-entityHeader-background.main-entityHeader-overlay { .main-entityHeader-overlay {
background-image: none !important; background: none !important;
}
.main-entityHeader-background.main-entityHeader-gradient {
opacity: 0.5;
animation: none !important; animation: none !important;
-webkit-animation: none !important;
} }
.main-entityHeader-background.main-entityHeader-overlay:after { .main-entityHeader-background.main-entityHeader-overlay:after {
@ -93,7 +93,7 @@
} }
.pUNc2aOeOQANHrhYa1GU .RDZ61ETnag1ilfZTkVxe { .pUNc2aOeOQANHrhYa1GU .RDZ61ETnag1ilfZTkVxe {
color: #000000 !important; color: #00000000 !important;
} }
.playlist-playlist-playlistContent { .playlist-playlist-playlistContent {
@ -122,10 +122,6 @@
background-color: #00000000 !important; background-color: #00000000 !important;
} }
.main-home-homeHeader {
background-image: linear-gradient(rgba(var(--spice-rgb-shadow), .6) 0, #00000000 100%), var(--background-noise);
}
.main-nowPlayingBar-center { .main-nowPlayingBar-center {
width: 100%; width: 100%;
} }