1 files changed, 25 insertions, 52 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 672411c11..c39894284 100644
--- a/client/src/assets/player/shared/settings/resolution-menu-button.ts
+++ b/client/src/assets/player/shared/settings/resolution-menu-button.ts
@@ -11,12 +11,12 @@ class ResolutionMenuButton extends MenuButton {
 
     this.controlText('Quality')
 
-    player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
-    player.peertubeResolutions().on('resolutionRemoved', () => this.cleanupQualities())
+    player.peertubeResolutions().on('resolutions-added', () => this.update())
+    player.peertubeResolutions().on('resolutions-removed', () => this.update())
 
     // For parent
-    player.peertubeResolutions().on('resolutionChanged', () => {
-      setTimeout(() => this.trigger('labelUpdated'))
+    player.peertubeResolutions().on('resolutions-changed', () => {
+      setTimeout(() => this.trigger('label-updated'))
     })
   }
 
@@ -37,69 +37,42 @@ class ResolutionMenuButton extends MenuButton {
   }
 
   createMenu () {
-    return new Menu(this.player_)
-  }
-
-  buildCSSClass () {
-    return super.buildCSSClass() + ' vjs-resolution-button'
-  }
-
-  buildWrapperCSSClass () {
-    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 as videojs.MenuItem).selected(false)
-        }
-      }
-    })
-  }
+    const menu: videojs.Menu = new Menu(this.player_, { menuButton: this })
+    const resolutions = this.player().peertubeResolutions().getResolutions()
 
-  private buildQualities () {
-    for (const d of this.player().peertubeResolutions().getResolutions()) {
-      const label = d.label === '0p'
+    for (const r of resolutions) {
+      const label = r.label === '0p'
         ? this.player().localize('Audio-only')
-        : d.label
+        : r.label
 
-      this.menu.addChild(new ResolutionMenuItem(
+      const component = new ResolutionMenuItem(
         this.player_,
         {
-          id: d.id + '',
-          resolutionId: d.id,
+          id: r.id + '',
+          resolutionId: r.id,
           label,
-          selected: d.selected
-        })
+          selected: r.selected
+        }
       )
-    }
 
-    for (const m of this.menu.children()) {
-      this.addClickListener(m)
+      menu.addItem(component)
     }
 
-    this.trigger('menuChanged')
+    return menu
   }
 
-  private cleanupQualities () {
-    const resolutions = this.player().peertubeResolutions().getResolutions()
-
-    this.menu.children().forEach((children: ResolutionMenuItem) => {
-      if (children.resolutionId === undefined) {
-        return
-      }
+  update () {
+    super.update()
 
-      if (resolutions.find(r => r.id === children.resolutionId)) {
-        return
-      }
+    this.trigger('menu-changed')
+  }
 
-      this.menu.removeChild(children)
-    })
+  buildCSSClass () {
+    return super.buildCSSClass() + ' vjs-resolution-button'
+  }
 
-    this.trigger('menuChanged')
+  buildWrapperCSSClass () {
+    return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
   }
 }