fix: allow captions in devices that use old chrome to be shown

src/css/components/_text-track.scss

@@ -46,3 +46,10 @@ video::-webkit-media-text-track-display {
   text-align: center !important;
   width: 80% !important;
 }
+
+.video-js .vjs-text-track-display > div {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

src/js/tracks/text-track-display.js

@@ -5,6 +5,7 @@ import Component from '../component';
 import * as Fn from '../utils/fn.js';
 import * as Dom from '../utils/dom.js';
 import window from 'global/window';
+import * as browser from '../utils/browser';
 
 /** @import Player from '../player' */
 
@@ -319,6 +320,23 @@ class TextTrackDisplay extends Component {
       }
       this.updateForTrack(descriptionsTrack);
     }
+
+    if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) {
+      const textTrackDisplay = this.el_;
+      const vjsTextTrackCues = textTrackDisplay.querySelectorAll('.vjs-text-track-cue');
+
+      // vjsTextTrackCue style updates
+      if (vjsTextTrackCues.length > 0) {
+        vjsTextTrackCues.forEach((vjsTextTrackCue) => {
+          const insetStyles = vjsTextTrackCue.style.inset.split(' ');
+
+          // expected value is always 3
+          if (insetStyles.length === 3) {
+            Object.assign(vjsTextTrackCue.style, { top: insetStyles[0], right: insetStyles[1], bottom: insetStyles[2], left: 'unset' });
+          }
+        });
+      }
+    }
   }
 
   /**
@@ -329,6 +347,17 @@ class TextTrackDisplay extends Component {
     // inset-inline and inset-block are not supprted on old chrome, but these are
     // only likely to be used on TV devices
     if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
+      if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) {
+        const textTrackDisplay = this.el_;
+        const textTrackDisplayHeight = textTrackDisplay.getBoundingClientRect().height;
+
+        // textrack style updates, this styles are required to be inline
+        textTrackDisplay.style.position = 'relative';
+        textTrackDisplay.style.height = textTrackDisplayHeight + 'px';
+        textTrackDisplay.style.top = 'unset';
+        textTrackDisplay.style.bottom = '0px';
+      }
+
       return;
     }
 

test/unit/tracks/text-track-display.test.js

@@ -500,4 +500,81 @@ if (!Html5.supportsNativeTextTracks()) {
 
     player.dispose();
   });
+
+  QUnit.test('should use relative position for vjs-text-track-display element if browser does not support inset property', function(assert) {
+    // Set conditions for the use of the style modifications
+    window.CSS.supports = () => false;
+    browser.IS_SMART_TV = () => true;
+
+    const player = TestHelpers.makePlayer();
+    const track1 = {
+      kind: 'captions',
+      label: 'English',
+      language: 'en',
+      src: 'en.vtt',
+      default: true
+    };
+
+    // Add the text track
+    player.addRemoteTextTrack(track1, true);
+
+    player.src({type: 'video/mp4', src: 'http://google.com'});
+    player.play();
+
+    // as if metadata was loaded
+    player.textTrackDisplay.updateDisplayOverlay();
+
+    // Make sure the ready handler runs
+    this.clock.tick(1);
+
+    const textTrack = window.document.querySelector('.vjs-text-track-display');
+
+    assert.ok(textTrack.style.position === 'relative', 'Style of position for vjs-text-track-display element should be relative');
+    assert.ok(textTrack.style.top === 'unset', 'Style of position for vjs-text-track-display element should be unset');
+    assert.ok(textTrack.style.bottom === '0px', 'Style of bottom for vjs-text-track-display element should be 0px');
+    player.dispose();
+  });
+
+  QUnit.test('track cue should use values of top, right, botton, left if browser does not support inset property', function(assert) {
+    // Set conditions for the use of the style modifications
+    window.CSS.supports = () => false;
+    browser.IS_SMART_TV = () => true;
+
+    const player = TestHelpers.makePlayer();
+    const track1 = {
+      kind: 'captions',
+      label: 'English',
+      language: 'en',
+      src: 'en.vtt',
+      default: true
+    };
+
+    // Add the text track
+    player.addRemoteTextTrack(track1, true);
+
+    player.src({type: 'video/mp4', src: 'http://google.com'});
+    player.play();
+
+    // mock caption
+    const textTrackDisplay = window.document.querySelector('.vjs-text-track-display').firstChild;
+    const node = document.createElement('div');
+
+    node.classList.add('vjs-text-track-cue');
+    node.style.inset = '1px 2px 3px';
+    const textnode = document.createTextNode('Sample text');
+
+    node.appendChild(textnode);
+    textTrackDisplay.appendChild(node);
+
+    // avoid captions clear
+    player.textTrackDisplay.clearDisplay = () => '';
+
+    // as if metadata was loaded
+    player.textTrackDisplay.updateDisplay();
+
+    assert.ok(player.textTrackDisplay.el_.querySelector('.vjs-text-track-cue').style.left === 'unset', 'Style of left for vjs-text-track-cue element should be unset');
+    assert.ok(player.textTrackDisplay.el_.querySelector('.vjs-text-track-cue').style.top === '1px', 'Style of top for vjs-text-track-cue element should be 1px');
+    assert.ok(player.textTrackDisplay.el_.querySelector('.vjs-text-track-cue').style.right === '2px', 'Style of right for vjs-text-track-cue element should be 2px');
+    player.dispose();
+  });
 }