From 42e17b23daab17ce510577f88e4c948f7ffbf95c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <34163393+amtins@users.noreply.github.com>
Date: Thu, 17 Aug 2023 21:25:16 +0200
Subject: [PATCH] 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
---
 src/css/components/_captions-settings.scss | 5 +++++
 src/css/components/_loading.scss           | 5 +++++
 src/css/components/_text-track.scss        | 5 +++++
 src/css/components/_title-bar.scss         | 5 +++++
 4 files changed, 20 insertions(+)

diff --git a/src/css/components/_captions-settings.scss b/src/css/components/_captions-settings.scss
index 8c36ed82be..d36c8588ae 100644
--- a/src/css/components/_captions-settings.scss
+++ b/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;
diff --git a/src/css/components/_loading.scss b/src/css/components/_loading.scss
index a885084314..00756a5204 100644
--- a/src/css/components/_loading.scss
+++ b/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: "";
diff --git a/src/css/components/_text-track.scss b/src/css/components/_text-track.scss
index ea2d8a8e12..9f1ab7a342 100644
--- a/src/css/components/_text-track.scss
+++ b/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 {
diff --git a/src/css/components/_title-bar.scss b/src/css/components/_title-bar.scss
index eb698f7f90..19b5b6be80 100644
--- a/src/css/components/_title-bar.scss
+++ b/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;