chore: Replace old quality selector (#1482)

* chore: replace old rentition selector

* typo

* fix netlify
use another selector

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%);

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"
   },

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,

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',