Fix For GitPod

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / videojs-components / resolution-menu-button.ts

diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts
index 2847de4709d92601f43beaaa56e6dcbde5edadcb..86be03af761deb5a8b69587fc0cc520d1f595330 100644 (file)
--- a/client/src/assets/player/videojs-components/resolution-menu-button.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts
@@ -9,16 +9,16 @@ const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
 const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
 class ResolutionMenuButton extends MenuButton {
   label: HTMLElement
+  labelEl_: any
+  player: Player
 
   constructor (player: Player, options: any) {
     super(player, options)
     this.player = player
 
-    player.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+    player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
 
-    if (player.webtorrent) {
-      player.webtorrent().on('videoFileUpdate', () => setTimeout(() => this.trigger('updateLabel'), 0))
-    }
+    player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
   }
 
   createEl () {
@@ -49,16 +49,41 @@ class ResolutionMenuButton extends MenuButton {
     return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
   }
 
+  private addClickListener (component: any) {
+    component.on('click', () => {
+      const children = this.menu.children()
+
+      for (const child of children) {
+        if (component !== child) {
+          child.selected(false)
+        }
+      }
+    })
+  }
+
   private buildQualities (data: LoadedQualityData) {
     // The automatic resolution item will need other labels
     const labels: { [ id: number ]: string } = {}
 
+    data.qualityData.video.sort((a, b) => {
+      if (a.id > b.id) return -1
+      if (a.id === b.id) return 0
+      return 1
+    })
+
     for (const d of data.qualityData.video) {
+      // Skip auto resolution, we'll add it ourselves
+      if (d.id === -1) continue
+
+      const label = d.id === 0
+        ? this.player.localize('Audio-only')
+        : d.label
+
       this.menu.addChild(new ResolutionMenuItem(
         this.player_,
         {
           id: d.id,
-          label: d.label,
+          label,
           selected: d.selected,
           callback: data.qualitySwitchCallback
         })
@@ -77,6 +102,12 @@ class ResolutionMenuButton extends MenuButton {
         selected: true // By default, in auto mode
       }
     ))
+
+    for (const m of this.menu.children()) {
+      this.addClickListener(m)
+    }
+
+    this.trigger('menuChanged')
   }
 }
 ResolutionMenuButton.prototype.controlText_ = 'Quality'