Handle network issues in video player (#5138)

* feat(client/player): handle network offline

* feat(client/player): human friendly err msg

* feat(client/player): handle broken resolutions

When an error occurs for a resolution, remove the resolution and try
with another resolution.

* fix(client/player): prevent err handl when offline

* fix(client/player): localize offline text

3 files changed, 38 insertions, 2 deletions

diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 7420460e7..5d0307d95 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -9,3 +9,4 @@
 @use './bezels';
 @use './playlist';
 @use './stats';
+@use './offline-notification';
diff --git a/client/src/sass/player/offline-notification.scss b/client/src/sass/player/offline-notification.scss
new file mode 100644
index 000000000..2108c2e30
--- /dev/null
+++ b/client/src/sass/player/offline-notification.scss
@@ -0,0 +1,22 @@
+$height: 40px;
+
+.vjs-peertube-offline-notification {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: $height;
+  color: #000;
+  background-color: var(--mainColorLightest);
+  text-align: center;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vjs-modal-dialog
+.vjs-modal-dialog-content,
+.video-js .vjs-modal-dialog {
+  top: $height;
+}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 43c144624..d4c43ff68 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -189,9 +189,22 @@ body {
   }
 }
 
+.vjs-error-display {
+  display: none;
+}
+
+.vjs-custom-error-display {
+  font-family: $main-fonts;
+
+  .error-details {
+    margin-top: 40px;
+    font-size: 80%;
+  }
+}
+
 // Error display disabled
 .vjs-error:not(.vjs-error-display-enabled) {
-  .vjs-error-display {
+  .vjs-custom-error-display {
     display: none;
   }
 
@@ -202,7 +215,7 @@ body {
 
 // Error display enabled
 .vjs-error.vjs-error-display-enabled {
-  .vjs-error-display {
+  .vjs-custom-error-display {
     display: block;
   }
 }