feat: Allow to use custom Player class (#3458)

This allows a user to register a new Player component with videojs to be used when videojs is called. If a player has been created already when trying to register a Player component, an error is thrown.
Fixes #3335 and #3016.

src/js/component.js

@@ -1440,6 +1440,14 @@ class Component {
       Component.components_ = {};
     }
 
+    if (name === 'Player' && Component.components_[name]) {
+      const Player = Component.components_[name];
+
+      if (Player.players && Object.keys(Player.players).length > 0) {
+        throw new Error('Can not register Player component after player has been created');
+      }
+    }
+
     Component.components_[name] = comp;
 
     return comp;

src/js/video.js

@@ -117,8 +117,9 @@ function videojs(id, options, ready) {
     options = mergeOptions(options, opts);
   });
 
+  const PlayerComponent = Component.getComponent('Player');
   // If not, set up a new player
-  const player = new Player(tag, options, ready);
+  const player = new PlayerComponent(tag, options, ready);
 
   videojs.hooks('setup').forEach((hookFunction) => hookFunction(player));
 

test/unit/player.test.js

@@ -16,6 +16,13 @@ import TechFaker from './tech/tech-faker.js';
 QUnit.module('Player', {
   beforeEach() {
     this.clock = sinon.useFakeTimers();
+    // reset players storage
+    for (const playerId in Player.players) {
+      if (Player.players[playerId] !== null) {
+        Player.players[playerId].dispose();
+      }
+      delete Player.players[playerId];
+    }
   },
   afterEach() {
     this.clock.restore();
@@ -1252,3 +1259,29 @@ QUnit.test('When VIDEOJS_NO_DYNAMIC_STYLE is set, apply sizing directly to the t
   assert.equal(player.tech_.el().height, 300, 'the height is equal 300');
   player.dispose();
 });
+
+QUnit.test('should allow to register custom player when any player has not been created', function(assert) {
+  class CustomPlayer extends Player {}
+  videojs.registerComponent('Player', CustomPlayer);
+
+  const tag = TestHelpers.makeTag();
+  const player = videojs(tag);
+
+  assert.equal(player instanceof CustomPlayer, true, 'player is custom');
+  player.dispose();
+});
+
+QUnit.test('should not allow to register custom player when any player has been created', function(assert) {
+  const tag = TestHelpers.makeTag();
+  const player = videojs(tag);
+
+  class CustomPlayer extends Player {}
+  try {
+    videojs.registerComponent('Player', CustomPlayer);
+  } catch (e) {
+    player.dispose();
+    return assert.equal(e.message, 'Can not register Player component after player has been created');
+  }
+
+  assert.ok(false, 'It should throw Error when any player has been created');
+});