From 64376dbd5f3a9ff3ffc58de01784f7196970eb97 Mon Sep 17 00:00:00 2001
From: mister-ben <git@misterben.me>
Date: Sat, 3 Feb 2024 19:12:40 +0100
Subject: [PATCH] chore: Replace old quality selector (#1482)

* chore: replace old rentition selector

* typo

* fix netlify
use another selector
---
 index.html         |   2 +-
 package-lock.json  | 141 ++++-----------------------------------------
 package.json       |   2 +-
 scripts/index.js   |   7 ++-
 scripts/netlify.js |   6 +-
 5 files changed, 19 insertions(+), 139 deletions(-)

diff --git a/index.html b/index.html
index 8946221a5..d611a5101 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +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/videojs-http-source-selector/dist/videojs-http-source-selector.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 0299c93c8..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",
@@ -9269,12 +9279,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 +9345,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 +9369,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..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",
@@ -92,7 +93,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..c6b6b695b 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'
+        'node_modules/jb-videojs-hls-quality-selector/dist/jb-videojs-hls-quality-selector'
+
       ].map(function(url) {
         return url + (event.target.checked ? '.min' : '') + '.js';
       });
@@ -594,8 +595,8 @@
 
         player = window.player = window.videojs(videoEl, {
           plugins: {
-            httpSourceSelector: {
-              default: 'auto'
+            hlsQualitySelector: {
+              displayCurrentQuality: true
             }
           },
           liveui: stateEls.liveui.checked,
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',