[Bug]: When scrolling through episodes in a podcast the listing of items disappears

[kevinclevenger]

What happened?

• Scroll down through the episodes of a podcast
• The number of episodes diminishes until none are visible

What did you expect to happen?

• Be able to see the text of all the episoides

Steps to reproduce the issue

1. Select a podcast from Library
2. Begin to scroll down through the episodes
3. Visible episodes become fewer and fewer until completely gone
4. At that point it's not possible to select an older episode

(see attachments)

Audiobookshelf version

2.15.0

How are you running audiobookshelf?

Docker

What OS is your Audiobookshelf server hosted from?

Linux

If the issue is being seen in the UI, what browsers are you seeing the problem on?

Chrome

Logs

No response

Additional Notes

Thorium (Chromium) 126.0.6478.231 Mercury (Firefox) 129.0.2 This has been going on for a long time, and I've seen the same behavior across all browsers and versions, extensions disabled or not.

[nichwall]

Can you get any browser logs, such as looking for JavaScript warnings or errors, or the network tab? Both of these things are available using F12 in a browser.

Some other questions:

• How many episodes are in the podcast?
• Is it for all podcasts or only certain ones?
• Does this happen immediately after navigating to the podcast, or after leaving the page open for a while? Sounds like this may be the same as https://github.com/advplyr/audiobookshelf/issues/3013

Would you be able to take a video of it happening? The screenshots are very helpful for what you're seeing, but would be good to have some help reproducing it.

[kevinclevenger]

• The particular one in the example has 103
• In testing any podcast with over 7-8 episodes has the issue
• Immediately after opening the page or refreshing the page
• The episodes start disappearing when about the 4th episode down becomes visible on scroll down
• No activity in the toolbar spinner next to the Activities icon
• In the inspector you can watch the contents of the div's above just disappear as you scroll down, i.e., anything inside the > <div id=episode... above is emptied and becomes <div id=episode... with no children
• There's nothing at all in the container logs when this happens

I'll get a video this evening

console-export-2024-10-14_7-46-19.txt

[kevinclevenger]

I just noticed that there are always exactly 5 '> <div id=episode...' with children. When you scroll the divs above are cleaned/emptied (which makes no sense to me, why?), and the next below are populated.

If I set the page zoom way down I can see all 5 active/populated divs. So maybe this is more of a hidpi issue as the window for the 5 populated divs is outside the browser viewport (2K monitor, wayland/sway, scale 1.25)?

Simply not depopulating/repopulating the <div id=episode... would solve this I think.

[advplyr]

The reason that episodes are removed as you scroll is so the browser does not need to have listeners attached to a bunch of components that are out of view.

I'm not able to reproduce this issue. For some reason the scrollTop, window.innerHeight or offsetTop on the lazy-episodes-table div are not giving correct values.

Relevant function: https://github.com/advplyr/audiobookshelf/blob/0782146682788c6b8ae883108b86690136c88c5d/client/components/tables/podcast/LazyEpisodesTable.vue#L488-L504

[kevinclevenger]

| I'm not able to reproduce this issue.

Linux, wayland, sway (all current) screen 2560x1440, scale 1.25 Firefox (Mercury) 123.0.1, font size 20, min 16

Hope that helps, happy to get any info you need