theRealPadster / spicetify-hide-podcasts

Spicetify extension to hide podcasts
GNU General Public License v3.0
249 stars 14 forks source link

Big gap on home screen #135

Open Satanarious opened 4 months ago

Satanarious commented 4 months ago

🔍 Is there already an issue for your problem?

ℹ Environment / Computer Info

Spotify for Windows (64 bit)
1.2.35.663.gb699649e
Spicetify v2.36.4
xpui_2024-04-05_1712324573103_b699649
cef_122.1.13+gde5b724+chromium-122.0.6261.130
Runtime: Chrome

📝 Description

There is a big gap where podcast suggestions on the home screen are. But since they are hidden, suggestion are not shown and they leave a gap instead.

📸 Screenshots

Screenshot 2024-04-11 185904

theRealPadster commented 4 months ago

Can you download and try the latest version (installed locally to make sure you have the latest version)? I added some fixes to manually target specific shelves, since the generic method I was using seems to leave a gap behind, and React doesn't play well if I actually remove the elements.

It does look like you've got a few podcasts that I don't have (the "popular with listeners of..." ones. If you send me their IDs, I can add them as well. Their IDs would be in the inspector, the a[href="/section/xxxxxxx"] links.

Satanarious commented 4 months ago

I downloaded and installed the latest version of hidePodcasts.js, but it didn't seem to work either. It hides the sections but leaves gaps. I listen to a couple of podcasts on my mobile phone but not on my desktop, so that's why I'm getting the suggestions.

IDs as requested:

/section/0JQ5DAnM3wGh0gz1MXnu3N
/section/0JQ5DAnM3wGh0gz1MXnu9e
/section/0JQ5DAnM3wGh0gz1MXnu4z
/section/0JQ5DAnM3wGh0gz1MXnu4B
/section/0JQ5DAnM3wGh0gz1MXnu4x
/section/0JQ5DAnM3wGh0gz1MXnu4i
/section/0JQ5DAnM3wGh0gz1MXnu4y
/section/0JQ5DAnM3wGh0gz1MXnu3P

Won't these change if I listen to different podcasts on my phone?

theRealPadster commented 4 months ago

You don't happen to have the names of those shelves, do you? For the other ones, I named their variables after the IDs. And yes, for those "because you listened to..." ones, I'd guess it would change if there were new ones. That's why I was trying to avoid hardcoding IDs in.

Satanarious commented 4 months ago

Shelf names:

Episodes for you
Popular with listeners of Unforgettable stories of INDIAN MYTHOLOGY
Popular with listeners of Heirs of The Pandavas
Popular with listeners of Devgatha: Mythology in a New Avataar
Popular with listeners of The Stories of Mahabharata
Spotify original podcasts
More like: Mahabharata Episode 21: The Exile
Shows you might like
theRealPadster commented 4 months ago

Okay I've added those shelf IDs.

Satanarious commented 4 months ago

How long does it take to update?

theRealPadster commented 4 months ago

You can download the latest version from GitHub whenever you'd like. I'm not sure how long it takes the marketplace one to update. You'd need to restart your Spotify for sure

Satanarious commented 4 months ago

I think I'll wait for the marketplace update.

Satanarious commented 4 months ago

Now, more such podcasts don't show up but leave a gap. I don't think hard coding isn't the way to go here.

theRealPadster commented 4 months ago

I don't think there is a good way otherwise, because of the gap issue, which is why I was avoiding hard coding. React freaks out and constantly adds/removes the shelves if I actually hide the elements, and if I don't actually hide them and just make them invisible, they leave a gap. I am open to suggestions.

Satanarious commented 4 months ago

With display:none causing the flickering issue, I used overflow:hidden in <section> somewhere, and it worked. Then I closed my Spotify client, and I lost what I edited. Now I cannot find it. Hope this might be of some use.

theRealPadster commented 4 months ago

You used overflow:hidden with display:none on, or with it off? I don't really want it on if it's gonna cause React to be constantly adding/removing elements even if it visually doesn't look like anything is wrong.

Satanarious commented 4 months ago

With display:none as on.