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

1 files changed, 15 insertions, 2 deletions

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;
   }
 }