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, 22 insertions, 0 deletions

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