Thumbnails not loading

[kaldonir]

Since the update, no thumbnails are loading on my TV, there are only black rectangles for Games, Channels, Live Streams, Videos, Clips. Streams themselves play as expected, and I do get preview pictures when I look at my followed channels in the side bar

Visiting the index.html page in a webbrowser loads the thumbnails as expected.

This is the console output when I start up the app on the TV, up to the point where I'd expect to see thumbnails of the most popular channels:

Main_IsNotBrowser tizen = true
Main.js:191 language is de-DE
Screens.js:6 InitScreens place holder
webapis.min.js:1 [productinfo.js] getFirmware  begin
webapis.min.js:1 [productinfo.js] getFirmware  end [object Object]
webapis.min.js:1 [productinfo.js] getFirmware message data T-KTM2DEUC-1260.8
webapis.min.js:1 [productinfo.js] getModel  begin
webapis.min.js:1 [productinfo.js] getModel  end [object Object]
webapis.min.js:1 [productinfo.js] getModel message data UNU8000
Main.js:745 App version: 080219
Main.js:758 Tizen Version: 4.0 | TV: UNU8000 | FW: T-KTM2DEUC-1260.8
VM57:1 Entering setDisplayRect
VM57:1 adding listener
VM57:1 Entered AVPlayManager.prepareAsync()

[auto-comment[bot]]

Thank your for raising a issue. I will try and get back to you as soon as possible. Regards @fgl27

[fgl27]

I enable this for performance https://github.com/verlok/lazyload sems that is not working on yours TV.

can you debug using this? https://github.com/fgl27/smarttv-twitch/archive/master.zip

because the release does not give the proper logs as is most disable.

After the app finishes load dismiss the controls dialog, and press the key B or green, it will force a reload of the app.

then try to scroll down the page to see what happens on the console window.

after I need you to open the tab that show the html content and navigate to the thumbnail so we can see what is going on, open this frist

Then without exiting the "Live screen" open the live screen holder like this Open "scene1" > "screens_holder" > "Live_scroll" > "stream_table_live" > "Live_row0" > "Live_cell0_0" > "Live_thumbdiv0_0" > "<div>"

scroll to see this

The "0_0" is the position so it can be different and any one from those will work.

What I wanna to see is if there is any error on the console, and if that tag from the img is there the data-was-processed="true"

because that is the trigger that tells that the image was loaded properly.

Try that and if need some help with the proces let me know.

[kaldonir]

I did use the master version, but that's all the output I get there.

This is a div for which no thumbnail has been loaded, the img does not contain a data-was-process="true":

<div id="Live_thumbdiv18_0" class="stream_thumbnail_clip">
  <div>
    <img id="Live_img18_0" class="lazy stream_img" alt="" data-src="https://static-cdn.jtvnw.net/previews-ttv/live_user_jango_bichouu-640x360.jpg?0.06038071341118467" onerror="this.onerror=null;this.src='data:image/png;base64,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'">
  </div>
  <div id="Live_infodiv18_0" class="stream_text2">
    <div>
      <div id="Live_title18_0" class="stream_channel" style="width: 66%; display: inline-block;">
        <i class="icon-circle live_icon" style="color: red;"></i> Jango_bichouu
    </div>
    <div id="Live_duration18_0" class="stream_info" style="width:33%; float: right; text-align: right; display: inline-block;">720p60 [FR]</div> 
    </div>
    <div id="Live_createdon18_0" class="stream_info">[FlashLand] La Fin.</div>
    <div id="Live_game18_0" class="stream_info">Playing Grand Theft Auto V</div>
    <div id="Live_viewers18_0" class="stream_info">Since 01:49:39  for 4,138 Viewers</div>
  </div>
</div>

I get the same console output as above.

[fgl27]

Try again do this change first https://github.com/fgl27/smarttv-twitch/commit/17c427458af1ab9fc87208de104a1b72d648a03f

or redownload the source.

Let me know the result.

[kaldonir]

With this change I get the same result

[fgl27]

OK I disable it for now. I push the changes close the release apk open again and close this if OK

[kaldonir]

So according to this, my TV does not support the Intersection Observer API, which is used by LazyLoad. For some reason, LazyLoad does not detect that this API is unavailable and the thumbnails won't load.

This discussion on the IntersectionObserver repo describes the necessary checks for availability of that API. I've implemented it in lazyload.js, and with this, lazyload is disabled on my TV, while it is enabled e.g. in my Firefox.

    var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window 
                                                        && "IntersectionObserverEntry" in window 
                                                        && "intersectionRatio" in window.IntersectionObserverEntry.prototype 
                                                        && "isIntersecting" in window.IntersectionObserverEntry.prototype;

If this works for you as well, this might be the best solution for now?

[fgl27]

Give me your version of lazy load so I can test

[kaldonir]

https://pastebin.com/Fb3VvuBT

[fgl27]

Here the normal way and the one you share both return false for me on my TV running Tizen 2.4, on the emulator both ways return true, the emulator is Tizen 5.0.

can you tell me the result of this on yours TV?

console.log('supportsIntersectionObserver ' + (runningOnBrowser && "IntersectionObserver" in window));

Is odd that it doesn't work because of that, that check must be resulting in true for some reason.

I will update again and push the changes let me know the result just for curiosity.

[fgl27]

I push all changes if doesn't work on the release please let me know.

thanks.

[kaldonir]

console.log('supportsIntersectionObserver ' + (runningOnBrowser && "IntersectionObserver" in window));

This returned true for me.

Yes, release works for me now. Thanks!

[fgl27]

Yes very odd behavior, thank you for the help.