Upgrade client dependencies

client/package.json

@@ -26,29 +26,29 @@
   },
   "typings": "*.d.ts",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.0.1",
-    "@angular-eslint/builder": "13.1.0",
-    "@angular-eslint/eslint-plugin": "13.1.0",
-    "@angular-eslint/eslint-plugin-template": "13.1.0",
-    "@angular-eslint/schematics": "13.1.0",
-    "@angular-eslint/template-parser": "13.1.0",
-    "@angular/animations": "^13.0.0",
-    "@angular/cdk": "^13.0.0",
-    "@angular/cli": "^13.0.1",
-    "@angular/common": "^13.0.0",
-    "@angular/compiler": "^13.0.0",
-    "@angular/compiler-cli": "^13.0.0",
-    "@angular/core": "^13.0.0",
-    "@angular/forms": "^13.0.0",
-    "@angular/localize": "^13.0.0",
-    "@angular/platform-browser": "^13.0.0",
-    "@angular/platform-browser-dynamic": "^13.0.0",
-    "@angular/router": "^13.0.0",
-    "@angular/service-worker": "^13.0.0",
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
+    "@angular-devkit/build-angular": "^14.0.1",
+    "@angular-eslint/builder": "13.5.0",
+    "@angular-eslint/eslint-plugin": "13.5.0",
+    "@angular-eslint/eslint-plugin-template": "13.5.0",
+    "@angular-eslint/schematics": "13.5.0",
+    "@angular-eslint/template-parser": "13.5.0",
+    "@angular/animations": "^14.0.1",
+    "@angular/cdk": "^14.0.1",
+    "@angular/cli": "^14.0.1",
+    "@angular/common": "^14.0.1",
+    "@angular/compiler": "^14.0.1",
+    "@angular/compiler-cli": "^14.0.1",
+    "@angular/core": "^14.0.1",
+    "@angular/forms": "^14.0.1",
+    "@angular/localize": "^14.0.1",
+    "@angular/platform-browser": "^14.0.1",
+    "@angular/platform-browser-dynamic": "^14.0.1",
+    "@angular/router": "^14.0.1",
+    "@angular/service-worker": "^14.0.1",
+    "@babel/core": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
     "@ng-bootstrap/ng-bootstrap": "^12.1.2",
-    "@ng-select/ng-select": "^8.1.1",
+    "@ng-select/ng-select": "^9.0.1",
     "@ngx-loading-bar/core": "^6.0.0",
     "@ngx-loading-bar/http-client": "^6.0.0",
     "@ngx-loading-bar/router": "^6.0.0",
@@ -57,41 +57,41 @@
     "@peertube/videojs-contextmenu": "^5.5.0",
     "@peertube/xliffmerge": "^2.0.3",
     "@popperjs/core": "^2.11.5",
-    "@types/chart.js": "^2.9.16",
+    "@types/chart.js": "^2.9.37",
     "@types/core-js": "^2.5.2",
     "@types/debug": "^4.1.5",
     "@types/jschannel": "^1.0.0",
     "@types/linkifyjs": "^2.1.2",
     "@types/lodash-es": "^4.17.0",
     "@types/markdown-it": "^12.0.1",
-    "@types/node": "^14.0.14",
+    "@types/node": "^17.0.42",
     "@types/sanitize-html": "2.6.2",
     "@types/sha.js": "^2.4.0",
-    "@types/video.js": "^7.3.8",
+    "@types/video.js": "^7.3.40",
     "@types/webtorrent": "^0.109.0",
-    "@typescript-eslint/eslint-plugin": "5.15.0",
-    "@typescript-eslint/parser": "5.15.0",
-    "@wdio/browserstack-service": "^7.19.7",
-    "@wdio/cli": "^7.19.7",
-    "@wdio/local-runner": "^7.19.7",
-    "@wdio/mocha-framework": "^7.19.7",
-    "@wdio/spec-reporter": "^7.19.7",
+    "@typescript-eslint/eslint-plugin": "5.27.1",
+    "@typescript-eslint/parser": "5.27.1",
+    "@wdio/browserstack-service": "^7.20.2",
+    "@wdio/cli": "^7.20.2",
+    "@wdio/local-runner": "^7.20.2",
+    "@wdio/mocha-framework": "^7.20.0",
+    "@wdio/spec-reporter": "^7.20.0",
     "angular2-hotkeys": "^13.1.0",
-    "angularx-qrcode": "13.0.3",
-    "babel-loader": "^8.2.2",
+    "angularx-qrcode": "14.0.0",
+    "babel-loader": "^8.2.5",
     "bootstrap": "^5.1.3",
     "buffer": "^6.0.3",
     "cache-chunk-store": "^3.0.0",
-    "chart.js": "^3.5.1",
+    "chart.js": "^3.8.0",
     "chartjs-plugin-zoom": "^1.2.1",
-    "chromedriver": "^101.0.0",
-    "core-js": "^3.1.4",
+    "chromedriver": "^102.0.0",
+    "core-js": "^3.22.8",
     "css-loader": "^6.2.0",
     "debug": "^4.3.1",
-    "dexie": "^3.0.0",
-    "eslint": "^8.2.0",
-    "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-jsdoc": "^38.0.6",
+    "dexie": "^3.2.2",
+    "eslint": "^8.17.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsdoc": "^39.3.2",
     "eslint-plugin-prefer-arrow": "latest",
     "expect-webdriverio": "^3.4.0",
     "focus-visible": "^5.0.2",
@@ -100,45 +100,45 @@
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.3.1",
     "https-browserify": "^1.0.0",
-    "intl-messageformat": "^10.0.1",
+    "intl-messageformat": "^10.1.0",
     "jschannel": "^1.0.2",
     "linkify-html": "^3.0.2",
     "linkify-plugin-mention": "^3.0.2",
     "linkifyjs": "^3.0.2",
     "lodash-es": "^4.17.4",
-    "markdown-it": "12.3.2",
+    "markdown-it": "13.0.1",
     "mini-css-extract-plugin": "^2.2.0",
-    "ngx-uploadx": "^5.0.0",
+    "ngx-uploadx": "^5.1.0",
     "path-browserify": "^1.0.0",
-    "postcss": "^8.3.11",
-    "primeng": "^13.0.0-rc.1",
+    "postcss": "^8.4.14",
+    "primeng": "^13.4.1",
     "process": "^0.11.10",
     "purify-css": "^1.2.5",
     "querystring": "^0.2.1",
     "raw-loader": "^4.0.2",
     "rxjs": "^7.3.0",
     "sanitize-html": "^2.1.2",
-    "sass": "^1.34.0",
-    "sass-loader": "^12.1.0",
+    "sass": "^1.52.3",
+    "sass-loader": "^13.0.0",
     "sha.js": "^2.4.11",
-    "socket.io-client": "^4.0.1",
+    "socket.io-client": "^4.5.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.0.0",
-    "stylelint": "^14.0.1",
+    "stylelint": "^14.9.1",
     "stylelint-config-sass-guidelines": "^9.0.1",
-    "terser-webpack-plugin": "^5.1.2",
-    "ts-loader": "^9.2.2",
-    "tslib": "^2.0.0",
-    "typescript": "~4.6.2",
+    "terser-webpack-plugin": "^5.3.3",
+    "ts-loader": "^9.3.0",
+    "tslib": "^2.4.0",
+    "typescript": "~4.7.3",
     "url": "^0.11.0",
-    "video.js": "^7",
+    "video.js": "^7.19.2",
     "videostream": "~3.2.1",
     "wdio-chromedriver-service": "^7.3.2",
     "wdio-geckodriver-service": "^2.1.1",
-    "webpack": "^5.65.0",
+    "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.0",
-    "webtorrent": "^1.3.8",
+    "webpack-cli": "^4.10.0",
+    "webtorrent": "^1.8.22",
     "whatwg-fetch": "^3.0.0",
     "zone.js": "~0.11.4"
   },

client/src/assets/player/shared/settings/resolution-menu-button.ts

@@ -68,7 +68,8 @@ class ResolutionMenuButton extends MenuButton {
       this.menu.addChild(new ResolutionMenuItem(
         this.player_,
         {
-          id: d.id,
+          id: d.id + '',
+          resolutionId: d.id,
           label,
           selected: d.selected
         })

client/src/assets/player/shared/settings/resolution-menu-item.ts

@@ -3,7 +3,7 @@ import videojs from 'video.js'
 const MenuItem = videojs.getComponent('MenuItem')
 
 export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions {
-  id: number
+  resolutionId: number
 }
 
 class ResolutionMenuItem extends MenuItem {
@@ -21,7 +21,7 @@ class ResolutionMenuItem extends MenuItem {
     this.autoResolutionEnabled = true
     this.autoResolutionChosen = ''
 
-    this.resolutionId = options.id
+    this.resolutionId = options.resolutionId
     this.label = options.label
 
     player.peertubeResolutions().on('resolutionChanged', () => this.updateSelection())