fix: use css condition insted of js condition to add custom styles

videojs · Aug 26, 2024 · 4e8c5aa · 4e8c5aa
1 parent 5efd400
commit 4e8c5aa
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 5 deletions.
diff --git 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
@@ -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
@@ -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();
   });
 }