Fix live duration in player

[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 445b14b2b532b7707999b193e6906cde0b1293d6..8bd5b4f03610220379bac16719e9f4e46410fff3 100644 (file)
--- a/client/src/assets/player/videojs-components/resolution-menu-button.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts
@@ -1,32 +1,30 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
-
-import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import videojs from 'video.js'
 import { ResolutionMenuItem } from './resolution-menu-item'
 
-const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
-const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
+const Menu = videojs.getComponent('Menu')
+const MenuButton = videojs.getComponent('MenuButton')
 class ResolutionMenuButton extends MenuButton {
-  label: HTMLElement
-  labelEl_: any
-  player: Player
+  labelEl_: HTMLElement
 
-  constructor (player: Player, options: any) {
+  constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) {
     super(player, options)
-    this.player = player
 
-    player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+    this.controlText('Quality')
+
+    player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
 
-    player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
+    // For parent
+    player.peertubeResolutions().on('resolutionChanged', () => {
+      setTimeout(() => this.trigger('labelUpdated'))
+    })
   }
 
   createEl () {
     const el = super.createEl()
 
-    this.labelEl_ = videojsUntyped.dom.createEl('div', {
+    this.labelEl_ = videojs.dom.createEl('div', {
       className: 'vjs-resolution-value'
-    })
+    }) as HTMLElement
 
     el.appendChild(this.labelEl_)
 
@@ -55,50 +53,28 @@ class ResolutionMenuButton extends MenuButton {
 
       for (const child of children) {
         if (component !== child) {
-          child.selected(false)
+          (child as videojs.MenuItem).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
+  private buildQualities () {
+    for (const d of this.player().peertubeResolutions().getResolutions()) {
+      const label = d.label === '0p'
+        ? this.player().localize('Audio-only')
+        : d.label
 
       this.menu.addChild(new ResolutionMenuItem(
         this.player_,
         {
           id: d.id,
-          label: d.id == 0 ? this.player .localize('Audio-only') : d.label,
-          selected: d.selected,
-          callback: data.qualitySwitchCallback
+          label,
+          selected: d.selected
         })
       )
-
-      labels[d.id] = d.label
     }
 
-    this.menu.addChild(new ResolutionMenuItem(
-      this.player_,
-      {
-        id: -1,
-        label: this.player_.localize('Auto'),
-        labels,
-        callback: data.qualitySwitchCallback,
-        selected: true // By default, in auto mode
-      }
-    ))
-
     for (const m of this.menu.children()) {
       this.addClickListener(m)
     }
@@ -106,6 +82,5 @@ class ResolutionMenuButton extends MenuButton {
     this.trigger('menuChanged')
   }
 }
-ResolutionMenuButton.prototype.controlText_ = 'Quality'
 
-MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
+videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton)