From 5fe049a4bdc492ab90807300627f6eddc47c0ff5 Mon Sep 17 00:00:00 2001
From: mister-ben <git@misterben.me>
Date: Sat, 3 Feb 2024 00:16:05 +0100
Subject: [PATCH 1/3] chore: replace old rentition selector

---
 index.html                    |   1 -
 package-lock.json             | 131 ----------------------------------
 package.json                  |   1 -
 scripts/index.js              |   7 +-
 scripts/rendition-selector.js | 107 +++++++++++++++++++++++++++
 5 files changed, 110 insertions(+), 137 deletions(-)
 create mode 100644 scripts/rendition-selector.js

diff --git a/index.html b/index.html
index 8946221a5..b4414fffb 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
   <link rel="icon" href="logo.svg">
   <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
   <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
-  <link href="node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css" rel="stylesheet">
   <style>
     .form-check {
       background-color: hsl(0, 0%, 90%);
diff --git a/package-lock.json b/package-lock.json
index 0299c93c8..49998fb33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9269,12 +9269,6 @@
         "global": "^4.4.0"
       }
     },
-    "videojs-font": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
-      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==",
-      "dev": true
-    },
     "videojs-generate-karma-config": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/videojs-generate-karma-config/-/videojs-generate-karma-config-8.0.1.tgz",
@@ -9341,122 +9335,6 @@
         "shelljs": "^0.8.4"
       }
     },
-    "videojs-http-source-selector": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/videojs-http-source-selector/-/videojs-http-source-selector-1.1.6.tgz",
-      "integrity": "sha512-6b5MmKTT2cVnrjtdNj4z1VO91udbXkZkTYA6LlD8WN2aHlG2rqFTmtMab4NK4nlkkkbRnm3c2q2IddL3jffLmg==",
-      "dev": true,
-      "requires": {
-        "global": "^4.3.2",
-        "video.js": "^7.0.0",
-        "videojs-contrib-quality-levels": "^2.0.4"
-      },
-      "dependencies": {
-        "@videojs/http-streaming": {
-          "version": "2.16.2",
-          "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.16.2.tgz",
-          "integrity": "sha512-etPTUdCFu7gUWc+1XcbiPr+lrhOcBu3rV5OL1M+3PDW89zskScAkkcdqYzP4pFodBPye/ydamQoTDScOnElw5A==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.12.5",
-            "@videojs/vhs-utils": "3.0.5",
-            "aes-decrypter": "3.1.3",
-            "global": "^4.4.0",
-            "m3u8-parser": "4.8.0",
-            "mpd-parser": "^0.22.1",
-            "mux.js": "6.0.1",
-            "video.js": "^6 || ^7"
-          }
-        },
-        "@videojs/vhs-utils": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.12.5",
-            "global": "^4.4.0",
-            "url-toolkit": "^2.2.1"
-          }
-        },
-        "aes-decrypter": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
-          "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.12.5",
-            "@videojs/vhs-utils": "^3.0.5",
-            "global": "^4.4.0",
-            "pkcs7": "^1.0.4"
-          }
-        },
-        "m3u8-parser": {
-          "version": "4.8.0",
-          "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
-          "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.12.5",
-            "@videojs/vhs-utils": "^3.0.5",
-            "global": "^4.4.0"
-          }
-        },
-        "mpd-parser": {
-          "version": "0.22.1",
-          "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.22.1.tgz",
-          "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.12.5",
-            "@videojs/vhs-utils": "^3.0.5",
-            "@xmldom/xmldom": "^0.8.3",
-            "global": "^4.4.0"
-          }
-        },
-        "mux.js": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz",
-          "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.11.2",
-            "global": "^4.4.0"
-          }
-        },
-        "video.js": {
-          "version": "7.21.4",
-          "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.4.tgz",
-          "integrity": "sha512-R5e57M/5uqxQMQpFpybNbd8GtiRwFJPqkHjrhv0QTJ2tqnesbjETbck5kU5dhFr1FevsJRFhjBG4hAnvRGnXbw==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.12.5",
-            "@videojs/http-streaming": "2.16.2",
-            "@videojs/vhs-utils": "^3.0.4",
-            "@videojs/xhr": "2.6.0",
-            "aes-decrypter": "3.1.3",
-            "global": "^4.4.0",
-            "keycode": "^2.2.0",
-            "m3u8-parser": "4.8.0",
-            "mpd-parser": "0.22.1",
-            "mux.js": "6.0.1",
-            "safe-json-parse": "4.0.0",
-            "videojs-font": "3.2.0",
-            "videojs-vtt.js": "^0.15.4"
-          }
-        },
-        "videojs-contrib-quality-levels": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-2.2.1.tgz",
-          "integrity": "sha512-cnF6OGGgoC/2nUrbdz54nzPm3BpEZQzMTpyekiX6AXs8imATX2sHbrUz97xXVSHITldk/+d7ZAUrdQYJJTyuug==",
-          "dev": true,
-          "requires": {
-            "global": "^4.3.2",
-            "video.js": "^6 || ^7 || ^8"
-          }
-        }
-      }
-    },
     "videojs-standard": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/videojs-standard/-/videojs-standard-9.0.1.tgz",
@@ -9481,15 +9359,6 @@
         }
       }
     },
-    "videojs-vtt.js": {
-      "version": "0.15.4",
-      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
-      "integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
-      "dev": true,
-      "requires": {
-        "global": "^4.3.1"
-      }
-    },
     "void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
diff --git a/package.json b/package.json
index 76cb0655b..0816fb115 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,6 @@
     "videojs-generate-karma-config": "^8.0.1",
     "videojs-generate-rollup-config": "^7.0.0",
     "videojs-generator-verify": "~3.0.1",
-    "videojs-http-source-selector": "^1.1.6",
     "videojs-standard": "^9.0.0",
     "water-plant-uml": "^2.0.2"
   },
diff --git a/scripts/index.js b/scripts/index.js
index 65ef4e672..06cf9fb3e 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -559,7 +559,8 @@
         'node_modules/video.js/dist/alt/video.core',
         'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme',
         'node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels',
-        'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector'
+        './scripts/rendition-selector'
+
       ].map(function(url) {
         return url + (event.target.checked ? '.min' : '') + '.js';
       });
@@ -594,9 +595,7 @@
 
         player = window.player = window.videojs(videoEl, {
           plugins: {
-            httpSourceSelector: {
-              default: 'auto'
-            }
+            renditionSelector: {}
           },
           liveui: stateEls.liveui.checked,
           enableSourceset: mirrorSource,
diff --git a/scripts/rendition-selector.js b/scripts/rendition-selector.js
new file mode 100644
index 000000000..34d19f3e2
--- /dev/null
+++ b/scripts/rendition-selector.js
@@ -0,0 +1,107 @@
+// eslint-disable-next-line no-undef
+const videojs = window.videojs;
+
+class RentitionMenuItem extends videojs.getComponent('MenuItem') {
+  constructor(player, options = {}) {
+    options.selectable = true;
+    options.multiSelectable = false;
+
+    super(player, options);
+  }
+
+  handleClick() {
+    this.player().log(`${this.options_.index}: ${this.options_.label} selected`);
+    this.parentComponent_.children().forEach((item) => {
+      if (item !== this) {
+        item.selected(false);
+      }
+    });
+    super.handleClick();
+
+    const levels = this.player().qualityLevels();
+
+    for (let i = 0; i < levels.length; i++) {
+      if (this.options_.index === 'auto') {
+        levels[i].enabled = true;
+      } else if (this.options_.index === i) {
+        levels[i].enabled = true;
+      } else {
+        levels[i].enabled = false;
+      }
+    }
+  }
+}
+
+videojs.registerComponent('RentitionMenuItem', RentitionMenuItem);
+
+class RenditionMenuButton extends videojs.getComponent('MenuButton') {
+  constructor(player, options = {}) {
+    options.controlText = 'Auto';
+
+    super(player, options);
+
+    this.el_.setAttribute('aria-label', this.localize('Rendition selector'));
+    // this.addClass('vjs-visible-text'); - vjs-visible-text too specific for menu buttons
+    this.$('button').classList.add('vjs-visible-text');
+    this.levels = this.player().qualityLevels();
+
+    this.levels.on('change', this.updateControlText.bind(this));
+  }
+
+  updateControlText() {
+    let text = `${this.levels[this.levels.selectedIndex].height}p`;
+
+    if (this.items[0].isSelected_) {
+      text += ' (Auto)';
+    }
+
+    this.player().controlBar.renditionMenuButton.controlText(text);
+  }
+
+  createItems() {
+    let items = [
+      new RentitionMenuItem(this.player(), {
+        label: 'Auto',
+        controlText: 'Auto',
+        selected: true,
+        index: 'auto'
+      })
+    ];
+
+    if (this.levels) {
+      items = items.concat(Array.from(this.levels).map((level, index) => {
+        const label = `${level.height || '?'}p @ ${level.bitrate || '?'}`;
+
+        return new RentitionMenuItem(this.player(), {
+          label,
+          controlText: label,
+          index
+        });
+      }));
+    }
+
+    return items;
+  }
+}
+
+videojs.registerComponent('RenditionMenuButton', RenditionMenuButton);
+
+class RenditionSelector extends videojs.getPlugin('plugin') {
+  constructor(player, options) {
+    super(player, options);
+
+    this.update_ = videojs.fn.debounce(this.update_.bind(this), 100, false, this.player);
+
+    player.ready(() => {
+      this.button = player.controlBar.renditionMenuButton = player.controlBar.addChild('RenditionMenuButton', {}, player.controlBar.children().indexOf(player.controlBar.getChild('PictureInPictureToggle')));
+
+      player.qualityLevels().on(['addqualitylevel', 'removequalitylevel'], this.update_);
+    });
+  }
+
+  update_() {
+    this.button.update();
+  }
+}
+
+videojs.registerPlugin('renditionSelector', RenditionSelector);

From 52e2e89825e16dcbb519c6ec7a98a5326d3a5cea Mon Sep 17 00:00:00 2001
From: mister-ben <git@misterben.me>
Date: Sat, 3 Feb 2024 00:18:10 +0100
Subject: [PATCH 2/3] typo

---
 scripts/rendition-selector.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/rendition-selector.js b/scripts/rendition-selector.js
index 34d19f3e2..c062489a3 100644
--- a/scripts/rendition-selector.js
+++ b/scripts/rendition-selector.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-undef
 const videojs = window.videojs;
 
-class RentitionMenuItem extends videojs.getComponent('MenuItem') {
+class RenditionMenuItem extends videojs.getComponent('MenuItem') {
   constructor(player, options = {}) {
     options.selectable = true;
     options.multiSelectable = false;
@@ -32,7 +32,7 @@ class RentitionMenuItem extends videojs.getComponent('MenuItem') {
   }
 }
 
-videojs.registerComponent('RentitionMenuItem', RentitionMenuItem);
+videojs.registerComponent('RentitionMenuItem', RenditionMenuItem);
 
 class RenditionMenuButton extends videojs.getComponent('MenuButton') {
   constructor(player, options = {}) {
@@ -60,7 +60,7 @@ class RenditionMenuButton extends videojs.getComponent('MenuButton') {
 
   createItems() {
     let items = [
-      new RentitionMenuItem(this.player(), {
+      new RenditionMenuItem(this.player(), {
         label: 'Auto',
         controlText: 'Auto',
         selected: true,
@@ -72,7 +72,7 @@ class RenditionMenuButton extends videojs.getComponent('MenuButton') {
       items = items.concat(Array.from(this.levels).map((level, index) => {
         const label = `${level.height || '?'}p @ ${level.bitrate || '?'}`;
 
-        return new RentitionMenuItem(this.player(), {
+        return new RenditionMenuItem(this.player(), {
           label,
           controlText: label,
           index

From 831a23a670239f62c16a74ffc7913e5a4d4f8bc0 Mon Sep 17 00:00:00 2001
From: mister-ben <git@misterben.me>
Date: Sat, 3 Feb 2024 13:58:28 +0100
Subject: [PATCH 3/3] fix netlify use another selector

---
 index.html                    |   1 +
 package-lock.json             |  10 ++++
 package.json                  |   1 +
 scripts/index.js              |   6 +-
 scripts/netlify.js            |   6 +-
 scripts/rendition-selector.js | 107 ----------------------------------
 6 files changed, 19 insertions(+), 112 deletions(-)
 delete mode 100644 scripts/rendition-selector.js

diff --git a/index.html b/index.html
index b4414fffb..d611a5101 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
   <link rel="icon" href="logo.svg">
   <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
   <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
+  <link href="node_modules/jb-videojs-hls-quality-selector/dist/videojs-hls-quality-selector.css" rel="stylesheet">
   <style>
     .form-check {
       background-color: hsl(0, 0%, 90%);
diff --git a/package-lock.json b/package-lock.json
index 49998fb33..0f839f9ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5391,6 +5391,16 @@
         }
       }
     },
+    "jb-videojs-hls-quality-selector": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jb-videojs-hls-quality-selector/-/jb-videojs-hls-quality-selector-2.0.2.tgz",
+      "integrity": "sha512-SaFU8/+/RmqV//yfib9fffk5jrid6+KxHuIfBOJlsOeFt2jNKD9zVP0Jmj++00KjkN+8jSl/mDE0t70i8e/cZA==",
+      "dev": true,
+      "requires": {
+        "global": "^4.4.0",
+        "video.js": "^8"
+      }
+    },
     "jest-worker": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
diff --git a/package.json b/package.json
index 0816fb115..1e6573ec9 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "@videojs/generator-helpers": "~3.1.0",
     "bootstrap": "^5.1.0",
     "d3": "^3.4.8",
+    "jb-videojs-hls-quality-selector": "^2.0.2",
     "jsdoc": "^3.6.11",
     "karma": "^6.4.0",
     "lodash": "^4.17.4",
diff --git a/scripts/index.js b/scripts/index.js
index 06cf9fb3e..c6b6b695b 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -559,7 +559,7 @@
         'node_modules/video.js/dist/alt/video.core',
         'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme',
         'node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels',
-        './scripts/rendition-selector'
+        'node_modules/jb-videojs-hls-quality-selector/dist/jb-videojs-hls-quality-selector'
 
       ].map(function(url) {
         return url + (event.target.checked ? '.min' : '') + '.js';
@@ -595,7 +595,9 @@
 
         player = window.player = window.videojs(videoEl, {
           plugins: {
-            renditionSelector: {}
+            hlsQualitySelector: {
+              displayCurrentQuality: true
+            }
           },
           liveui: stateEls.liveui.checked,
           enableSourceset: mirrorSource,
diff --git a/scripts/netlify.js b/scripts/netlify.js
index 2476b9c1f..11da7dbf6 100644
--- a/scripts/netlify.js
+++ b/scripts/netlify.js
@@ -10,9 +10,9 @@ const files = [
   'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme.min.js',
   'node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.js',
   'node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js',
-  'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css',
-  'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.js',
-  'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.min.js',
+  'node_modules/jb-videojs-hls-quality-selector/dist/videojs-hls-quality-selector.css',
+  'node_modules/jb-videojs-hls-quality-selector/dist/jb-videojs-hls-quality-selector.js',
+  'node_modules/jb-videojs-hls-quality-selector/dist/jb-videojs-hls-quality-selector.min.js',
   'node_modules/bootstrap/dist/js/bootstrap.js',
   'node_modules/bootstrap/dist/css/bootstrap.css',
   'node_modules/d3/d3.min.js',
diff --git a/scripts/rendition-selector.js b/scripts/rendition-selector.js
deleted file mode 100644
index c062489a3..000000000
--- a/scripts/rendition-selector.js
+++ /dev/null
@@ -1,107 +0,0 @@
-// eslint-disable-next-line no-undef
-const videojs = window.videojs;
-
-class RenditionMenuItem extends videojs.getComponent('MenuItem') {
-  constructor(player, options = {}) {
-    options.selectable = true;
-    options.multiSelectable = false;
-
-    super(player, options);
-  }
-
-  handleClick() {
-    this.player().log(`${this.options_.index}: ${this.options_.label} selected`);
-    this.parentComponent_.children().forEach((item) => {
-      if (item !== this) {
-        item.selected(false);
-      }
-    });
-    super.handleClick();
-
-    const levels = this.player().qualityLevels();
-
-    for (let i = 0; i < levels.length; i++) {
-      if (this.options_.index === 'auto') {
-        levels[i].enabled = true;
-      } else if (this.options_.index === i) {
-        levels[i].enabled = true;
-      } else {
-        levels[i].enabled = false;
-      }
-    }
-  }
-}
-
-videojs.registerComponent('RentitionMenuItem', RenditionMenuItem);
-
-class RenditionMenuButton extends videojs.getComponent('MenuButton') {
-  constructor(player, options = {}) {
-    options.controlText = 'Auto';
-
-    super(player, options);
-
-    this.el_.setAttribute('aria-label', this.localize('Rendition selector'));
-    // this.addClass('vjs-visible-text'); - vjs-visible-text too specific for menu buttons
-    this.$('button').classList.add('vjs-visible-text');
-    this.levels = this.player().qualityLevels();
-
-    this.levels.on('change', this.updateControlText.bind(this));
-  }
-
-  updateControlText() {
-    let text = `${this.levels[this.levels.selectedIndex].height}p`;
-
-    if (this.items[0].isSelected_) {
-      text += ' (Auto)';
-    }
-
-    this.player().controlBar.renditionMenuButton.controlText(text);
-  }
-
-  createItems() {
-    let items = [
-      new RenditionMenuItem(this.player(), {
-        label: 'Auto',
-        controlText: 'Auto',
-        selected: true,
-        index: 'auto'
-      })
-    ];
-
-    if (this.levels) {
-      items = items.concat(Array.from(this.levels).map((level, index) => {
-        const label = `${level.height || '?'}p @ ${level.bitrate || '?'}`;
-
-        return new RenditionMenuItem(this.player(), {
-          label,
-          controlText: label,
-          index
-        });
-      }));
-    }
-
-    return items;
-  }
-}
-
-videojs.registerComponent('RenditionMenuButton', RenditionMenuButton);
-
-class RenditionSelector extends videojs.getPlugin('plugin') {
-  constructor(player, options) {
-    super(player, options);
-
-    this.update_ = videojs.fn.debounce(this.update_.bind(this), 100, false, this.player);
-
-    player.ready(() => {
-      this.button = player.controlBar.renditionMenuButton = player.controlBar.addChild('RenditionMenuButton', {}, player.controlBar.children().indexOf(player.controlBar.getChild('PictureInPictureToggle')));
-
-      player.qualityLevels().on(['addqualitylevel', 'removequalitylevel'], this.update_);
-    });
-  }
-
-  update_() {
-    this.button.update();
-  }
-}
-
-videojs.registerPlugin('renditionSelector', RenditionSelector);