From 5192a6758ff92177eaa1134502c032ee22d73018 Mon Sep 17 00:00:00 2001 From: cvillasenor Date: Fri, 9 Aug 2024 14:31:35 -0600 Subject: [PATCH] fix: add unit test for first case to update caption styles --- src/js/tracks/text-track-display.js | 13 +++------- test/unit/tracks/text-track-display.test.js | 28 +++++++++++++++++++++ 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js index 3d2ccb61e2..0c463c5d71 100644 --- a/src/js/tracks/text-track-display.js +++ b/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' */ @@ -320,21 +321,15 @@ class TextTrackDisplay extends Component { this.updateForTrack(descriptionsTrack); } - if (!window.CSS.supports('inset', '0')) { + if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) { const textTrack = window.document.querySelector('.vjs-text-track-display'); - const player = window.document.querySelector('video-js'); const textTrackHeight = textTrack.getBoundingClientRect().height; // This styles are required to be inline textTrack.style.position = 'relative'; textTrack.style.height = textTrackHeight + 'px'; textTrack.style.top = 'unset'; - - if (player.classList.contains('vjs-fullscreen')) { - textTrack.style.bottom = textTrackHeight + 'px'; - } else { - textTrack.style.bottom = '0px'; - } + textTrack.style.bottom = '0px'; } } @@ -502,7 +497,7 @@ class TextTrackDisplay extends Component { } } - if (!window.CSS.supports('inset', '0')) { + if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) { const document_ = window.document; const vjsTextTrackCue = document_.querySelector('.vjs-text-track-cue'); diff --git a/test/unit/tracks/text-track-display.test.js b/test/unit/tracks/text-track-display.test.js index 9c41926514..0b8461ebaa 100644 --- a/test/unit/tracks/text-track-display.test.js +++ b/test/unit/tracks/text-track-display.test.js @@ -500,4 +500,32 @@ if (!Html5.supportsNativeTextTracks()) { player.dispose(); }); + + QUnit.test('should use relative position for vjs-text-track-display element if browser is 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); + + // 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(); + }); }