fix(player): video-js embed missing video-js class (videojs#5194)

gkatsev · web-flow · commit 954f3d979f55 · 2018-05-22T21:44:35.000-04:00
When having a video-js embed with a class attribute, as part of the changes to remove old IE support (videojs#5041), we overwrote our addition of the video-js class when it was missing. Instead, we want to make sure that we don't override the class names again since they are already set up correctly. Fixes videojs/http-streaming#100
diff --git a/src/js/player.js b/src/js/player.js
@@ -587,7 +587,12 @@ class Player extends Component {
     tag.removeAttribute('height');
 
     Object.getOwnPropertyNames(attrs).forEach(function(attr) {
-      el.setAttribute(attr, attrs[attr]);
+      // don't copy over the class attribute to the player element when we're in a div embed
+      // the class is already set up properly in the divEmbed case
+      // and we want to make sure that the `video-js` class doesn't get lost
+      if (!(divEmbed && attr === 'class')) {
+        el.setAttribute(attr, attrs[attr]);
+      }
 
       if (divEmbed) {
         tag.setAttribute(attr, attrs[attr]);
diff --git a/test/unit/video.test.js b/test/unit/video.test.js
@@ -450,6 +450,26 @@ QUnit.test('should return a video player instance', function(assert) {
   assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
 });
 
+QUnit.test('should add video-js class to video-js embed if missing', function(assert) {
+  const fixture = document.getElementById('qunit-fixture');
+
+  fixture.innerHTML += '<video-js id="test_vid_id"></video-js>' +
+                       '<video-js id="test_vid_id2" class="foo"></video-js>';
+
+  const player = videojs('test_vid_id', { techOrder: ['techFaker'] });
+
+  assert.ok(player, 'created player from tag');
+  assert.ok(player.id() === 'test_vid_id');
+  assert.ok(player.hasClass('video-js'), 'we have the video-js class');
+
+  const tag2 = document.getElementById('test_vid_id2');
+  const player2 = videojs(tag2, { techOrder: ['techFaker'] });
+
+  assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
+  assert.ok(player2.hasClass('video-js'), 'we have the video-js class');
+  assert.ok(player2.hasClass('foo'), 'we have the foo class');
+});
+
 QUnit.test('should log about already initalized players if options already passed',
 function(assert) {
   const origWarnLog = log.warn;
