Card is not loading/rendering all video thumbnails

[dankocrnkovic]

In Chome web browser, not all video thumbnails are rendered. All files are same format, but randomly some files are not showing thumbanails and video can not be played.

I'm using media source.

Interesting thing is that in Android app as well as IOS app, everything works.

Looks like something to do with scroll any lazy load.

[dankocrnkovic]

In Edge browser everything works. Weird as it is also Chromium.
Chrome version: 96.0.4664.45 (Official Build) (64-bit)
Edge version: 96.0.1054.34 (Official build) (64-bit)

[TarheelGrad1998]

I think this worked better before implementing that lazy load, so I have reverted that change in v3.3, just released.

[dankocrnkovic]

Sorry to say.... it behaves exactly the same.

[TarheelGrad1998]

Hrm, are you sure you're running the new version and not from cache? Worth a check...

Full disclosure, mine still isn't perfect, but it's gone from maybe 50% to 80% of the time it loads. I'll reopen so I can take another look at it.

[dankocrnkovic]

I'm sure. Updated, checked js and js.gz fiiles date, used Empty cache and hard reload. :(
Here is the current state in Chrome:

And this is in Edge:

There are no errors in Console

[TarheelGrad1998]

Ok, sorry about that. I'll keep swinging...

[dankocrnkovic]

Hej...
Will this help. I noticed in network log loads of canceled requests for media files:

[TarheelGrad1998]

Hrm, definitely interesting. Thanks!

Not sure why they would be cancelled, especially when just from one browser (which rules out your HA server). But another avenue to research.

[dankocrnkovic]

Its the same in Edge. But Endge renders everithing. But same cancelations are there also. Hm...
And iOS, Android apps also renders all.

[TarheelGrad1998]

Can you try the update I just uploaded (v3.3.1) and see if it works better for you?

I can't get it to fail at the moment...but could be the way the wind is blowing...

[TarheelGrad1998]

This should be much improved if not fixed by the improvements in v3.4.

[inactivist]

For future reference, Chrome has a fixed/non-configurable limit of six concurrent connections to a given HTTP 1.1 host (based on what I see, HA is HTTP1.1) - so any page showing more than six <img /> (or other media) tags will block loading of the additional images until one of the prior requests completes.

The longer each request takes to complete, the greater the impact -- so the backend HA server's performance is also a critical factor. For example, multiple users/browsers hitting the same application page likely worsens the problem.

EDIT: In my experience, this issue may lead to browser "freezing" and/or page crashes on certain platform / version combinations.

EDIT: may be related to #68

I find Chrome's limit interferes with web pages that try to show more than a few "live" updating thumbnails/images using multiple <img />/media tags (for example, similar problems reported with ZoneMinder's montage views on Chrome)

Apparently Firefox and some other browsers are more forgiving and/or may be tweaked to support higher limits. My go-to workaround is to use one of the more forgiving browsers to view the page.

A proper fix (that ensures broad compatibility/stability) involves re-architecting the page/application to use fewer concurrent connections to the HTTP1.1 host.

References:

• https://support.google.com/chrome/a/answer/3339263?hl=en
  
• https://superuser.com/a/576588/150320 (and similar)

[TarheelGrad1998]

Great find. Thanks!