How do I make this plugin smooth?

[hrishikesh-k]

Hello.

I am trying to integrate this plugin on my website. The images are loading and all, but, it's not smooth like the demo here: https://tjenkinson.github.io/clappr-thumbnails-plugin/demo/.

What am I missing?

I am making my website in Hugo (a static website generator), and so, needed to dynamically add parameters to the videos. So, I add them as attributes to the <div> and pass them to the config. Here's an example:

<div src="assets/vid1.m3u8" poster="assets/cover.png" thumbnails="assets/vid1-thumbnails/" thumbnail-count="190" class="player">

And I've the script setup like this:

var players = document.querySelectorAll('.player')
players.forEach(player =>
  {
    var thumbs = [];
    for (var i = 0; i < player.getAttribute('thumbnail-count'); i++)
      {
        thumbs.push(
          {
            time: 1 + (i*2),
            url: player.getAttribute('thumbnails')+'160p-'+ i +'.jpg',
          });
      }
    var clapprConfig =
      {
        width: '100%',
        height: '100%',
        source: player.getAttribute('src'),
        poster: player.getAttribute('poster'),
        plugins: [LevelSelector, ClapprThumbnailsPlugin],
        levelSelectorConfig:
          {
            title: 'Quality',
            labelCallback: function(playbackLevel)
              {
                return playbackLevel.level.height+'p';
              }
          },
        scrubThumbnails:
          {
            thumbs: thumbs,
            backdropHeight: 90,
            spotlightHeight: 90,
          }
      }
    var clappr = new Clappr.Player(clapprConfig);
    clappr.attachTo(player);
  });

You can see a live preview of this at my branch deploy on Netlify: https://5fc247cbffa3760008e5b065--hrishikeshk.netlify.app/projects/carry-on-bot/ (Scroll to the bottom of the page).

Kindly advise on how to make it smooth like the demo page. Thank you.

[hrishikesh-k]

Okay I guess, it's just because of network. The faster the network and smaller the file sizes, the smoother it'll load. But if it's possible, can the scrolling continue even without the image being loaded?

I tried using a sprite sheet to probably help with the loading as it might have to be loaded just once and then might be served from cache.

This is my sprite sheet:

But the thumbs are rendered like:

Because of this I am forced to use a lot of images and thus, rendering a useful feature like sprite sheet useless. Would it be possible for you to tell me if there is something I can do with my files for better performance?

[tjenkinson]

Yeh it might be due the amount of images. The sprite might help.

Did you try using

ClapprThumbnailsPlugin.buildSpriteConfig(spriteSheetUrl, numThumbs, thumbWidth, thumbHeight, numColumns, timeInterval)

to build thumbs?

[hrishikesh-k]

Yes, I'm using the same code from the demo index.html. But my sprite is turning out to render like the image I showed.

[tjenkinson]

Please can you paste your ClapprThumbnailsPlugin.buildSpriteConfig call?

[hrishikesh-k]

This is it:

var spriteSheetUrl = player.getAttribute('thumbnails');
var numThumbs = player.getAttribute('thumbnail-count');
var thumbWidth = 160;
var thumbHeight = 90;
var numColumns = 10;
var timeInterval = 1;
var thumbs = ClapprThumbnailsPlugin.buildSpriteConfig(spriteSheetUrl, numThumbs, thumbWidth, thumbHeight, numColumns, timeInterval);

[tjenkinson]

Interesting

var spriteSheetUrl = 'https://user-images.githubusercontent.com/11403551/100519130-03a9bb80-31bc-11eb-8d2e-666d88801921.png';
    var numThumbs = 190;
    var thumbWidth = 160;
    var thumbHeight = 90;
    var numColumns = 10;
    var timeInterval = 1;
    var thumbs = ClapprThumbnailsPlugin.buildSpriteConfig(spriteSheetUrl, numThumbs, thumbWidth, thumbHeight, numColumns, timeInterval);

looks fine for me. There is something funny going on though because the image keeps being downloaded whilst the video is playing. Looking into that.

[tjenkinson]

I just published 3.7.2 which makes it slightly more efficient. The spotlight thumbnail is now only updated when needed. Please could you see if that helps?

[hrishikesh-k]

That does make a difference. The sprite doesn't seem to lag anymore. However, the image still looks weird in my case. 😢

I'll have to stick with the large number of images then.

[tjenkinson]

Interesting maybe there’s some conflicting css on your page.

[hrishikesh-k]

If you have some time to spare, you can have a look at it here: https://5fc28f3737e3180008b750f9--hrishikeshk.netlify.app/projects/carry-on-bot/. Here's the repo: https://github.com/Hrishikesh-K/Portfolio/tree/6b45988bc741dfd14afbb7ae222da13de13a0bbf. The code for Clappr is in file assets/js/scripts.js.

It's okay if you don't check too. I understand. Thanks for the help.

[tjenkinson]

There's something setting a max-width of 100% on all img tags which is breaking it :)

If you add

.scrub-thumbnails .thumbnail-img {
  max-width: none;
}

in a style tag somewhere it should fix it.

[hrishikesh-k]

Oh my God, yes. That was it. I would not have guessed it. Thanks a lot!

However, the console is showing a lot of these as I hover my mouse for the thumbnails:

This wasn't there in 3.7.1. The only thing I got in 3.7.1 was a lot of these:

which is basically how it generally is.

Is the same thing happening for you too or is it just me?

[phloxic]

Is the same thing happening for you too or is it just me?

Same here.

[tjenkinson]

Oops. Should be fixed in 3.7.3

[hrishikesh-k]

Yup. That's it. Thanks a lot!