feat: toggle player class vjs-thumbnails-ready according to plugin state

With this the player can be styled depending on plugin state.
phloxic · Dec 29, 2023 · 2f183d6 · 2f183d6
1 parent 1988633
commit 2f183d6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/sprite-thumbnails.js b/src/sprite-thumbnails.js
@@ -126,6 +126,7 @@ const spriteThumbs = (player, plugin, options) => {
       progress.off(spriteEvents, hijackMouseTooltip);
       tooltipEl.style = tooltipStyleOrig;
     }
+    player.toggleClass('vjs-thumbnails-ready', pstate.ready);
   });
 
   player.on('loadstart', () => {

diff --git a/test/sprite-thumbnails.test.js b/test/sprite-thumbnails.test.js
@@ -38,7 +38,7 @@ QUnit.module('videojs-sprite-thumbnails', {
 });
 
 QUnit.test('changes ready state', function(assert) {
-  assert.expect(5);
+  assert.expect(7);
 
   this.player.spriteThumbnails({
     url: '../img/oceans-thumbs.jpg',
@@ -62,6 +62,11 @@ QUnit.test('changes ready state', function(assert) {
     true,
     'the plugin is now able to show thumbnails on ready'
   );
+  assert.strictEqual(
+    this.player.hasClass('vjs-thumbnails-ready'),
+    true,
+    'player has class vjs-thumbnails-ready'
+  );
 
   this.clock.tick(1);
   const currentConfig = this.player.spriteThumbnails().options;
@@ -74,6 +79,12 @@ QUnit.test('changes ready state', function(assert) {
     false,
     'options empty: plugin disabled and not ready'
   );
+  assert.strictEqual(
+    this.player.hasClass('vjs-thumbnails-ready'),
+    false,
+    'player does not have class vjs-thumbnails-ready'
+  );
+
   const overridingConfig = this.player.spriteThumbnails().options;
 
   assert.strictEqual(