YTMD/youtube-music

Fork 0

[Feature Request]: Implement virtual list for playlist views #2533

New issue

Open

opened 2024-10-21 16:32:26 +00:00 by Lordmau5 · 7 comments

Lordmau5 commented

2024-10-21 16:32:26 +00:00

(Migrated from github.com)

Preflight Checklist

I use the latest version of YouTube Music (Application).
I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

I wanted to try out YouTube's suggestions algorithm for one of my playlists that has about 800 songs and the "Suggestions" list shows at the end of the playlist.

The problem is that when I scroll down it loads more and more songs, and they are all loaded into the DOM, causing massive slowdowns (because YouTube / Google aren't smart and implemented something like Virtual Lists)

Example DIV height of scrolling all the way to the bottom of said 800 song playlist

Proposed Solution

See if it's possible to wrap the playlist / list of songs in a virtual list renderer.

I know this is quite the ask to fix YouTube's issues, but the slowdowns are making the app quite unbearable.

Alternatives Considered

Not touching the code, as I don't know how much work it'd be to implement something like this

Additional Information

I'm not very familiar with the codebase but I've seen some tsx files so I assume there's React support?

In which case, there probably are quite a few libraries for implementing virtual lists.
I looked at a few but haven't seen them having an event / callback for when the end of the list was reached, though maybe something like that could be implemented from scratch.

Additionally, the height of the elements / songs always seems to be the same so that shouldn't be an issue

### Preflight Checklist - [X] I use the latest version of YouTube Music (Application). - [X] I have searched the [issue tracker](https://github.com/th-ch/youtube-music/issues) for a feature request that matches the one I want to file, without success. ### Problem Description I wanted to try out YouTube's suggestions algorithm for one of my playlists that has about 800 songs and the "Suggestions" list shows at the end of the playlist. The problem is that when I scroll down it loads more and more songs, and they are all loaded into the DOM, causing massive slowdowns (because YouTube / Google aren't smart and implemented something like Virtual Lists) Example DIV height of scrolling all the way to the bottom of said 800 song playlist ![image](https://github.com/user-attachments/assets/6ad11514-8a76-406c-ad3c-5985ce63e9ee) ### Proposed Solution See if it's possible to wrap the playlist / list of songs in a virtual list renderer. I know this is quite the ask to fix YouTube's issues, but the slowdowns are making the app quite unbearable. ### Alternatives Considered Not touching the code, as I don't know how much work it'd be to implement something like this ### Additional Information I'm not very familiar with the codebase but I've seen some tsx files so I assume there's React support? In which case, there probably are quite a few libraries for implementing virtual lists. I looked at a few but haven't seen them having an event / callback for when the end of the list was reached, though maybe something like that could be implemented from scratch. Additionally, the height of the elements / songs always seems to be the same so that shouldn't be an issue

arjix commented

2024-10-21 17:47:53 +00:00

Owner

funnily enough I've had this idea in the past as well

arjix commented

2024-10-21 17:49:34 +00:00

Owner

I'm not very familiar with the codebase but I've seen some tsx files so I assume there's React support?

We are using SolidJS for inserting our own UI into the website, e.g. synced-lyrics.

> I'm not very familiar with the codebase but I've seen some tsx files so I assume there's React support? We are using SolidJS for inserting our own UI into the website, e.g. [synced-lyrics](https://github.com/th-ch/youtube-music/pull/2383).

arjix commented

2024-10-21 17:51:55 +00:00

Owner

Sadly, youtube music is written using Polymer web-components, which makes it hard to hijack any component at all.

The biggest issue would be to implement a virtual list w/o having to do any business logic on our side. If there is a way to hijack the component that renders the playlist view, it would be really easy. Sadly, youtube music is written using [Polymer web-components](https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview), which makes it hard to hijack any component at all.

👍 1

arjix commented

2024-10-21 17:53:35 +00:00

Owner

If any polymer god is here to bless us with knowledge, I'd be grateful.

Lordmau5 commented

2024-10-21 18:08:49 +00:00

(Migrated from github.com)

I'm not very familiar with the codebase but I've seen some tsx files so I assume there's React support?

We are using SolidJS for inserting our own UI into the website, e.g. synced-lyrics.

Interesting, the name does ring a bell but I'd need to get somewhat familiar with it first haha

As for implementing it without having to do business logic, I do fear that it might have to be reimplemented from scratch...
But if there's a way this can be done by hooking into it (similar to how you can hook into React instances etc.) then that'd be amazing for sure heh

> > I'm not very familiar with the codebase but I've seen some tsx files so I assume there's React support? > > We are using SolidJS for inserting our own UI into the website, e.g. [synced-lyrics](https://github.com/th-ch/youtube-music/pull/2383). Interesting, the name does ring a bell but I'd need to get somewhat familiar with it first haha As for implementing it without having to do business logic, I do fear that it might have to be reimplemented from scratch... But if there's a way this can be done by hooking into it (similar to how you can hook into React instances etc.) then that'd be amazing for sure heh

JellyBrick commented

2024-10-22 09:38:33 +00:00

(Migrated from github.com)

See https://github.com/th-ch/youtube-music/issues/2266#issuecomment-2335198346

Lordmau5 commented

2024-10-22 09:47:52 +00:00

(Migrated from github.com)

Oh wow, yeah turning off the In-App Menu plugin does bring back the performance - albeit at the cost of thick scrollbars (which is a price I'm willing to pay haha)

No milestone

No project

No assignees

2 participants

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: YTMD/youtube-music#2533

No description provided.

Rows
Columns