feat: add option to select stream resolution

closes #93
2026-10-08 17:06:15 -08:00 · 2021-10-24 13:02:18 +02:00
1 parent a7639d1ce2
commit c23fe3a923
@@ -17,6 +17,7 @@
                "@ngx-pwa/local-storage": "11.1.0",
                "@types/hls.js": "1.0.0",
                "@types/video.js": "7.3.27",
+                "@types/videojs-hls-quality-selector": "1.1.0",
                "@videojs/http-streaming": "2.11.1",
                "@yangkghjh/videojs-aspect-ratio-panel": "0.0.1",
                "about-window": "1.13.4",
@@ -34,7 +35,9 @@
                "ngx-uploader": "11.0.0",
                "ngx-whats-new": "0.1.0",
                "semver": "7.3.5",
-                "uuid": "8.3.2"
+                "uuid": "8.3.2",
+                "videojs-contrib-quality-levels": "2.1.0",
+                "videojs-hls-quality-selector": "1.1.4"
            },
            "devDependencies": {
                "@angular-builders/custom-webpack": "12.1.0",
@@ -5602,6 +5605,14 @@
            "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.27.tgz",
            "integrity": "sha512-EiAQiVUbgp4dhR6Ury0tYXSmBaP0FuX2HMe5lCk1fuwqpTvk5UCDwlgkMfWDxzHY41LKEewn/0+/OHBuQvMrcg=="
        },
+        "node_modules/@types/videojs-hls-quality-selector": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@types/videojs-hls-quality-selector/-/videojs-hls-quality-selector-1.1.0.tgz",
+            "integrity": "sha512-ZArUmr6fsd+KMb10B7F5B/eLZrw+J50DwY892NQdrkGx8hIrplVRyrWXMlzn6Khk6Bu2IMJcG91+xZHysYukZA==",
+            "dependencies": {
+                "@types/video.js": "*"
+            }
+        },
        "node_modules/@types/webpack-sources": {
            "version": "0.1.9",
            "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.9.tgz",
@@ -6794,6 +6805,11 @@
            "integrity": "sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=",
            "dev": true
        },
+        "node_modules/any-promise": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+            "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8="
+        },
        "node_modules/anymatch": {
            "version": "3.1.2",
            "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -7565,8 +7581,7 @@
        "node_modules/balanced-match": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-            "dev": true
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
        },
        "node_modules/base": {
            "version": "0.11.2",
@@ -7912,7 +7927,6 @@
            "version": "1.1.11",
            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dev": true,
            "dependencies": {
                "balanced-match": "^1.0.0",
                "concat-map": "0.0.1"
@@ -8950,8 +8964,7 @@
        "node_modules/concat-map": {
            "version": "0.0.1",
            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-            "dev": true
+            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
        },
        "node_modules/concat-stream": {
            "version": "1.6.2",
@@ -13488,11 +13501,53 @@
            "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
            "dev": true
        },
+        "node_modules/fs-promise": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/fs-promise/-/fs-promise-0.5.0.tgz",
+            "integrity": "sha1-Q0fWv2JGVacGGkMZITw5MnatPvM=",
+            "deprecated": "Use mz or fs-extra^3.0 with Promise Support",
+            "dependencies": {
+                "any-promise": "^1.0.0",
+                "fs-extra": "^0.26.5",
+                "mz": "^2.3.1",
+                "thenify-all": "^1.6.0"
+            }
+        },
+        "node_modules/fs-promise/node_modules/fs-extra": {
+            "version": "0.26.7",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
+            "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
+            "dependencies": {
+                "graceful-fs": "^4.1.2",
+                "jsonfile": "^2.1.0",
+                "klaw": "^1.0.0",
+                "path-is-absolute": "^1.0.0",
+                "rimraf": "^2.2.8"
+            }
+        },
+        "node_modules/fs-promise/node_modules/jsonfile": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+            "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+            "optionalDependencies": {
+                "graceful-fs": "^4.1.6"
+            }
+        },
+        "node_modules/fs-promise/node_modules/rimraf": {
+            "version": "2.7.1",
+            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+            "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+            "dependencies": {
+                "glob": "^7.1.3"
+            },
+            "bin": {
+                "rimraf": "bin.js"
+            }
+        },
        "node_modules/fs.realpath": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-            "dev": true
+            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
        },
        "node_modules/fsevents": {
            "version": "2.3.2",
@@ -14127,7 +14182,6 @@
            "version": "7.1.7",
            "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
            "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-            "dev": true,
            "dependencies": {
                "fs.realpath": "^1.0.0",
                "inflight": "^1.0.4",
@@ -15299,7 +15353,6 @@
            "version": "1.0.6",
            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
            "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-            "dev": true,
            "dependencies": {
                "once": "^1.3.0",
                "wrappy": "1"
@@ -18804,6 +18857,18 @@
                "verror": "1.10.0"
            }
        },
+        "node_modules/karma-safaritechpreview-launcher": {
+            "version": "0.0.6",
+            "resolved": "https://registry.npmjs.org/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz",
+            "integrity": "sha512-2QMxAGXPQ37H3KoR9SCdh0OoktQZ5MyrxkvBiZ+VVOQfYVrcyOQXGrPea0/DKvf8qoQvrvP2FHcP/BxsuxuyHw==",
+            "dependencies": {
+                "fs-promise": "^0.5.0",
+                "marcosc-async": "^3.0.4"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/karma-source-map-support": {
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",
@@ -18841,6 +18906,14 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/klaw": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
+            "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+            "optionalDependencies": {
+                "graceful-fs": "^4.1.9"
+            }
+        },
        "node_modules/kleur": {
            "version": "3.0.3",
            "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -19556,6 +19629,12 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/marcosc-async": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/marcosc-async/-/marcosc-async-3.0.5.tgz",
+            "integrity": "sha1-QebVbGVsgRhZ00uXoKJgk/cdw2A=",
+            "engines": ">=4"
+        },
        "node_modules/marked": {
            "version": "1.2.9",
            "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.9.tgz",
@@ -20191,7 +20270,6 @@
            "version": "3.0.4",
            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
            "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-            "dev": true,
            "dependencies": {
                "brace-expansion": "^1.1.7"
            },
@@ -20587,6 +20665,16 @@
                "npm": ">=5"
            }
        },
+        "node_modules/mz": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+            "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+            "dependencies": {
+                "any-promise": "^1.0.0",
+                "object-assign": "^4.0.1",
+                "thenify-all": "^1.0.0"
+            }
+        },
        "node_modules/nan": {
            "version": "2.15.0",
            "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
@@ -24302,7 +24390,6 @@
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-            "devOptional": true,
            "engines": {
                "node": ">=0.10.0"
            }
@@ -32437,6 +32524,25 @@
            "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
            "dev": true
        },
+        "node_modules/thenify": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+            "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+            "dependencies": {
+                "any-promise": "^1.0.0"
+            }
+        },
+        "node_modules/thenify-all": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+            "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
+            "dependencies": {
+                "thenify": ">= 3.1.0 < 4"
+            },
+            "engines": {
+                "node": ">=0.8"
+            }
+        },
        "node_modules/throat": {
            "version": "5.0.0",
            "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
@@ -33577,11 +33683,34 @@
                "npm": ">=5"
            }
        },
+        "node_modules/videojs-contrib-quality-levels": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-2.1.0.tgz",
+            "integrity": "sha512-dqGQGbL9AFhucxki7Zh0c3kIhH0PAPcHEh6jUdRyaFCVeOuqnJrOYs/3wNtsokDdBdRf2Du2annpu4Z2XaSZRg==",
+            "dependencies": {
+                "global": "^4.3.2",
+                "video.js": "^6 || ^7"
+            },
+            "peerDependencies": {
+                "video.js": "^6 || ^7"
+            }
+        },
        "node_modules/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=="
        },
+        "node_modules/videojs-hls-quality-selector": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/videojs-hls-quality-selector/-/videojs-hls-quality-selector-1.1.4.tgz",
+            "integrity": "sha512-wWAjlLQui02gp//t9KHGd3XnbYO7wdOptskh3ZYCrbl/5Lbkveqb9yBVjH4e0zIQBPvGdWPMcOeDukf8iuYeBw==",
+            "dependencies": {
+                "global": "^4.3.2",
+                "karma-safaritechpreview-launcher": "0.0.6",
+                "video.js": "^7.5.5",
+                "videojs-contrib-quality-levels": "^2.0.9"
+            }
+        },
        "node_modules/videojs-vtt.js": {
            "version": "0.15.3",
            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
@@ -39749,6 +39878,14 @@
            "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.27.tgz",
            "integrity": "sha512-EiAQiVUbgp4dhR6Ury0tYXSmBaP0FuX2HMe5lCk1fuwqpTvk5UCDwlgkMfWDxzHY41LKEewn/0+/OHBuQvMrcg=="
        },
+        "@types/videojs-hls-quality-selector": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@types/videojs-hls-quality-selector/-/videojs-hls-quality-selector-1.1.0.tgz",
+            "integrity": "sha512-ZArUmr6fsd+KMb10B7F5B/eLZrw+J50DwY892NQdrkGx8hIrplVRyrWXMlzn6Khk6Bu2IMJcG91+xZHysYukZA==",
+            "requires": {
+                "@types/video.js": "*"
+            }
+        },
        "@types/webpack-sources": {
            "version": "0.1.9",
            "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.9.tgz",
@@ -40609,6 +40746,11 @@
            "integrity": "sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=",
            "dev": true
        },
+        "any-promise": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+            "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8="
+        },
        "anymatch": {
            "version": "3.1.2",
            "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -41221,8 +41363,7 @@
        "balanced-match": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-            "dev": true
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
        },
        "base": {
            "version": "0.11.2",
@@ -41508,7 +41649,6 @@
            "version": "1.1.11",
            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dev": true,
            "requires": {
                "balanced-match": "^1.0.0",
                "concat-map": "0.0.1"
@@ -42324,8 +42464,7 @@
        "concat-map": {
            "version": "0.0.1",
            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-            "dev": true
+            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
        },
        "concat-stream": {
            "version": "1.6.2",
@@ -45822,11 +45961,51 @@
            "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
            "dev": true
        },
+        "fs-promise": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/fs-promise/-/fs-promise-0.5.0.tgz",
+            "integrity": "sha1-Q0fWv2JGVacGGkMZITw5MnatPvM=",
+            "requires": {
+                "any-promise": "^1.0.0",
+                "fs-extra": "^0.26.5",
+                "mz": "^2.3.1",
+                "thenify-all": "^1.6.0"
+            },
+            "dependencies": {
+                "fs-extra": {
+                    "version": "0.26.7",
+                    "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
+                    "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
+                    "requires": {
+                        "graceful-fs": "^4.1.2",
+                        "jsonfile": "^2.1.0",
+                        "klaw": "^1.0.0",
+                        "path-is-absolute": "^1.0.0",
+                        "rimraf": "^2.2.8"
+                    }
+                },
+                "jsonfile": {
+                    "version": "2.4.0",
+                    "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+                    "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+                    "requires": {
+                        "graceful-fs": "^4.1.6"
+                    }
+                },
+                "rimraf": {
+                    "version": "2.7.1",
+                    "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+                    "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+                    "requires": {
+                        "glob": "^7.1.3"
+                    }
+                }
+            }
+        },
        "fs.realpath": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-            "dev": true
+            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
        },
        "fsevents": {
            "version": "2.3.2",
@@ -46305,7 +46484,6 @@
            "version": "7.1.7",
            "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
            "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-            "dev": true,
            "requires": {
                "fs.realpath": "^1.0.0",
                "inflight": "^1.0.4",
@@ -47215,7 +47393,6 @@
            "version": "1.0.6",
            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
            "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-            "dev": true,
            "requires": {
                "once": "^1.3.0",
                "wrappy": "1"
@@ -49851,6 +50028,15 @@
                "verror": "1.10.0"
            }
        },
+        "karma-safaritechpreview-launcher": {
+            "version": "0.0.6",
+            "resolved": "https://registry.npmjs.org/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz",
+            "integrity": "sha512-2QMxAGXPQ37H3KoR9SCdh0OoktQZ5MyrxkvBiZ+VVOQfYVrcyOQXGrPea0/DKvf8qoQvrvP2FHcP/BxsuxuyHw==",
+            "requires": {
+                "fs-promise": "^0.5.0",
+                "marcosc-async": "^3.0.4"
+            }
+        },
        "karma-source-map-support": {
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",
@@ -49885,6 +50071,14 @@
            "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
            "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
        },
+        "klaw": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
+            "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+            "requires": {
+                "graceful-fs": "^4.1.9"
+            }
+        },
        "kleur": {
            "version": "3.0.3",
            "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -50452,6 +50646,11 @@
                "object-visit": "^1.0.0"
            }
        },
+        "marcosc-async": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/marcosc-async/-/marcosc-async-3.0.5.tgz",
+            "integrity": "sha1-QebVbGVsgRhZ00uXoKJgk/cdw2A="
+        },
        "marked": {
            "version": "1.2.9",
            "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.9.tgz",
@@ -50922,7 +51121,6 @@
            "version": "3.0.4",
            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
            "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-            "dev": true,
            "requires": {
                "brace-expansion": "^1.1.7"
            }
@@ -51222,6 +51420,16 @@
                "@babel/runtime": "^7.11.2"
            }
        },
+        "mz": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+            "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+            "requires": {
+                "any-promise": "^1.0.0",
+                "object-assign": "^4.0.1",
+                "thenify-all": "^1.0.0"
+            }
+        },
        "nan": {
            "version": "2.15.0",
            "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
@@ -53975,8 +54183,7 @@
        "object-assign": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-            "devOptional": true
+            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
        },
        "object-copy": {
            "version": "0.1.0",
@@ -60205,6 +60412,22 @@
            "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
            "dev": true
        },
+        "thenify": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+            "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+            "requires": {
+                "any-promise": "^1.0.0"
+            }
+        },
+        "thenify-all": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+            "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
+            "requires": {
+                "thenify": ">= 3.1.0 < 4"
+            }
+        },
        "throat": {
            "version": "5.0.0",
            "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
@@ -61096,11 +61319,31 @@
                }
            }
        },
+        "videojs-contrib-quality-levels": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-2.1.0.tgz",
+            "integrity": "sha512-dqGQGbL9AFhucxki7Zh0c3kIhH0PAPcHEh6jUdRyaFCVeOuqnJrOYs/3wNtsokDdBdRf2Du2annpu4Z2XaSZRg==",
+            "requires": {
+                "global": "^4.3.2",
+                "video.js": "^6 || ^7"
+            }
+        },
        "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=="
        },
+        "videojs-hls-quality-selector": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/videojs-hls-quality-selector/-/videojs-hls-quality-selector-1.1.4.tgz",
+            "integrity": "sha512-wWAjlLQui02gp//t9KHGd3XnbYO7wdOptskh3ZYCrbl/5Lbkveqb9yBVjH4e0zIQBPvGdWPMcOeDukf8iuYeBw==",
+            "requires": {
+                "global": "^4.3.2",
+                "karma-safaritechpreview-launcher": "0.0.6",
+                "video.js": "^7.5.5",
+                "videojs-contrib-quality-levels": "^2.0.9"
+            }
+        },
        "videojs-vtt.js": {
            "version": "0.15.3",
            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
@@ -118,6 +118,7 @@
        "@ngx-pwa/local-storage": "11.1.0",
        "@types/hls.js": "1.0.0",
        "@types/video.js": "7.3.27",
+        "@types/videojs-hls-quality-selector": "1.1.0",
        "@videojs/http-streaming": "2.11.1",
        "@yangkghjh/videojs-aspect-ratio-panel": "0.0.1",
        "about-window": "1.13.4",
@@ -135,7 +136,9 @@
        "ngx-uploader": "11.0.0",
        "ngx-whats-new": "0.1.0",
        "semver": "7.3.5",
-        "uuid": "8.3.2"
+        "uuid": "8.3.2",
+        "videojs-contrib-quality-levels": "2.1.0",
+        "videojs-hls-quality-selector": "1.1.4"
    },
    "jest": {
        "preset": "jest-preset-angular",
@@ -9,6 +9,8 @@ import {
    SimpleChanges,
 } from '@angular/core';
 import videoJs from 'video.js';
+import 'videojs-hls-quality-selector';
+import 'videojs-contrib-quality-levels';
 import '@yangkghjh/videojs-aspect-ratio-panel';

@Component({
@@ -39,6 +41,9 @@ export class VjsPlayerComponent implements OnInit, OnDestroy {
                this.volume(100);
            }
        );
+        this.player.hlsQualitySelector({
+            displayCurrentQuality: true,
+        });
        this.player['aspectRatioPanel']();
    }