Fix duplicate videojs, change hls quality selector

Author: mekya

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antmedia/web_player",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "description": "Ant Media Server Player that can play WebRTC, HLS, DASH",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
@@ -32,13 +32,11 @@
     "@antmedia/videojs-webrtc-plugin": "^1.3.0",
     "@antmedia/webrtc_adaptor": "^2.11.3",
     "@rollup/plugin-json": "6.1.0",
-    "@types/videojs-contrib-quality-levels": "^2.0.4",
     "aframe": "1.5.0",
     "dashjs": "^4.7.4",
     "rimraf": "^5.0.5",
     "video.js": "^8.17.3",
-    "videojs-contrib-quality-levels": "^4.1.0",
-    "videojs-hls-quality-selector": "^2.0.0"
+    "videojs-quality-selector-hls": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.5",

rollup.config.module.cjs

@@ -23,8 +23,12 @@ const builds = {
 	}
 	],
 	plugins: [
-		babel({ babelHelpers: 'bundled' }), 
-		nodeResolve(),
+		babel({ 
+			babelHelpers: 'bundled' 
+			}), 
+		nodeResolve({
+			dedupe: ['video.js']
+		}),
 		commonjs(),
 		json(),
 		css(),

src/web_player.js

@@ -238,6 +238,7 @@ export class WebPlayer {
 		// Initialize default values
         this.setDefaults();
 
+        Logger.info("config object mode-----");
 
 		  // Check if the first argument is a config object or a Window object
         if (!this.isWindow(configOrWindow)) {
@@ -501,8 +502,7 @@ export class WebPlayer {
                     window.videojs = videojs.default;		
                     this.videojsLoaded = true;	 
 				})
-				.then(() => { return import('videojs-contrib-quality-levels') } )
-				.then(() => { return import('videojs-hls-quality-selector') } )
+				.then(() => { return import('videojs-quality-selector-hls') } )
 				.then(() => { return this.loadWebRTCComponents(); });
 			}
 			else {
@@ -733,8 +733,8 @@ export class WebPlayer {
 	        this.videojsPlayer.ready(() => {
 
 	            // If it's already added to player, no need to add again
-	            if (typeof this.videojsPlayer.hlsQualitySelector === "function") {
-	                this.videojsPlayer.hlsQualitySelector({
+	            if (typeof this.videojsPlayer.qualitySelectorHls === "function") {
+	                this.videojsPlayer.qualitySelectorHls({
 	                    displayCurrentQuality: true,
 	                });
 	            }

tsconfig.json

@@ -21,7 +21,6 @@
       "node_modules/@types"
     ],
     "paths": {
-      "videojs-contrib-quality-levels": ["./node_modules/@types/videojs-contrib-quality-levels/index.d.ts"]
     }
     }
 }