Skip to content

Commit

Permalink
fix: update style changes to be used in browsers
Browse files Browse the repository at this point in the history
  • Loading branch information
CarlosVillasenor committed Aug 14, 2024
1 parent 66cd7bb commit 3e17e4d
Showing 1 changed file with 11 additions and 13 deletions.
24 changes: 11 additions & 13 deletions src/js/tracks/text-track-display.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ 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' */

Expand Down Expand Up @@ -321,10 +320,14 @@ class TextTrackDisplay extends Component {
this.updateForTrack(descriptionsTrack);
}

if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) {
if (!window.CSS.supports('inset', '10px')) {
const textTrackDisplay = this.el_;
const vjsTextTrackCues = textTrackDisplay.querySelectorAll('.vjs-text-track-cue');

// Clear inline style before getting actual height of textTrackDisplay
textTrackDisplay.style = '';
const textTrackDisplayHeight = textTrackDisplay.getBoundingClientRect().height;

// vjsTextTrackCue style updates
if (vjsTextTrackCues.length > 0) {
vjsTextTrackCues.forEach((vjsTextTrackCue) => {
Expand All @@ -336,6 +339,12 @@ class TextTrackDisplay extends Component {
}
});
}

// 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';
}
}

Expand All @@ -347,17 +356,6 @@ 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;
}

Expand Down

0 comments on commit 3e17e4d

Please sign in to comment.