fix(error-display): avoids displaying visual components when an error occurs (#8389)

When an error occurs, only the error screen should be displayed to maintain visual consistency.

- Hides the Title Bar
- Hides the Loading Spinner
- Hides the Captions Settings
- Hides the Text Track Display

Author: amtins

src/css/components/_captions-settings.scss

@@ -5,6 +5,11 @@
   height: 70%;
 }
 
+// Hide if an error occurs
+.vjs-error .vjs-text-track-settings {
+  display: none;
+}
+
 // Layout divs
 .vjs-text-track-settings .vjs-modal-dialog-content {
   display: table;

src/css/components/_loading.scss

@@ -27,6 +27,11 @@
   animation: vjs-spinner-show 0s linear 0.3s forwards;
 }
 
+// Hide if an error occurs
+.vjs-error .vjs-loading-spinner {
+  display: none;
+}
+
 .vjs-loading-spinner:before,
 .vjs-loading-spinner:after {
   content: "";

src/css/components/_text-track.scss

@@ -8,6 +8,11 @@
   pointer-events: none;
 }
 
+// Hide if an error occurs
+.vjs-error .vjs-text-track-display {
+  display: none;
+}
+
 // Move captions down when controls aren't being shown
 .video-js.vjs-controls-disabled .vjs-text-track-display,
 .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {

src/css/components/_title-bar.scss

@@ -22,6 +22,11 @@
   width: 100%;
 }
 
+// Hide if an error occurs
+.vjs-error .vjs-title-bar {
+  display: none;
+}
+
 .vjs-title-bar-title,
 .vjs-title-bar-description {
   margin: 0;