From 4e8c5aae3e40ff325b90cf81c34a85b80db367f1 Mon Sep 17 00:00:00 2001 From: cvillasenor Date: Mon, 26 Aug 2024 11:51:01 -0600 Subject: [PATCH] fix: use css condition insted of js condition to add custom styles --- src/css/components/_text-track.scss | 2 +- src/js/tracks/text-track-display.js | 3 --- test/unit/tracks/text-track-display.test.js | 1 - 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/css/components/_text-track.scss b/src/css/components/_text-track.scss index 119eafeff0..e98c5202c9 100644 --- a/src/css/components/_text-track.scss +++ b/src/css/components/_text-track.scss @@ -48,7 +48,7 @@ video::-webkit-media-text-track-display { } @supports (inset: 10px) { - .video-js .vjs-text-track-display { + .video-js .vjs-text-track-display > div { top: 0; right: 0; bottom: 0; diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js index 686c690c6c..f9066f366e 100644 --- a/src/js/tracks/text-track-display.js +++ b/src/js/tracks/text-track-display.js @@ -330,9 +330,6 @@ class TextTrackDisplay extends Component { // Clear inline style before getting actual height of textTrackDisplay textTrackDisplay.style = ''; - // Add custom class to textTrackDisplay div child for not inset support styles - textTrackDisplay.firstChild.classList.add('vjs-text-track-display-inset'); - // textrack style updates, this styles are required to be inline tryUpdateStyle(textTrackDisplay, 'position', 'relative'); tryUpdateStyle(textTrackDisplay, 'height', (playerHeight - controlBarHeight) + 'px'); diff --git a/test/unit/tracks/text-track-display.test.js b/test/unit/tracks/text-track-display.test.js index 4aa36799e6..f0aa05d586 100644 --- a/test/unit/tracks/text-track-display.test.js +++ b/test/unit/tracks/text-track-display.test.js @@ -575,7 +575,6 @@ if (!Html5.supportsNativeTextTracks()) { 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'); - assert.ok(player.textTrackDisplay.el_.firstChild.classList.contains('vjs-text-track-display-inset'), 'Child of textTrackDisplay should contain class of vjs-text-track-display-inset'); player.dispose(); }); }