Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: add missing unit test
Browse files Browse the repository at this point in the history
CarlosVillasenor committed Aug 14, 2024
1 parent b077c85 commit 66cd7bb
Showing 2 changed files with 60 additions and 7 deletions.
18 changes: 11 additions & 7 deletions src/js/tracks/text-track-display.js
Original file line number Diff line number Diff line change
@@ -323,15 +323,8 @@ class TextTrackDisplay extends Component {

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

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

// vjsTextTrackCue style updates
if (vjsTextTrackCues.length > 0) {
vjsTextTrackCues.forEach((vjsTextTrackCue) => {
@@ -354,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;
}

49 changes: 49 additions & 0 deletions test/unit/tracks/text-track-display.test.js
Original file line number Diff line number Diff line change
@@ -518,6 +518,12 @@ if (!Html5.supportsNativeTextTracks()) {
// 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);

@@ -528,4 +534,47 @@ if (!Html5.supportsNativeTextTracks()) {
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();
});
}

0 comments on commit 66cd7bb

Please sign in to comment.