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

diff --git a/client/src/assets/player/shared/settings/resolution-menu-button.ts b/client/src/assets/player/shared/settings/resolution-menu-button.ts
index a0b349f67..672411c11 100644
--- a/client/src/assets/player/shared/settings/resolution-menu-button.ts
+++ b/client/src/assets/player/shared/settings/resolution-menu-button.ts
@@ -12,6 +12,7 @@ class ResolutionMenuButton extends MenuButton {
     this.controlText('Quality')
 
     player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
+    player.peertubeResolutions().on('resolutionRemoved', () => this.cleanupQualities())
 
     // For parent
     player.peertubeResolutions().on('resolutionChanged', () => {
@@ -82,6 +83,24 @@ class ResolutionMenuButton extends MenuButton {
 
     this.trigger('menuChanged')
   }
+
+  private cleanupQualities () {
+    const resolutions = this.player().peertubeResolutions().getResolutions()
+
+    this.menu.children().forEach((children: ResolutionMenuItem) => {
+      if (children.resolutionId === undefined) {
+        return
+      }
+
+      if (resolutions.find(r => r.id === children.resolutionId)) {
+        return
+      }
+
+      this.menu.removeChild(children)
+    })
+
+    this.trigger('menuChanged')
+  }
 }
 
 videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton)