Update client dependencies

client/package.json

@@ -41,7 +41,7 @@
     "@angular/router": "^12.0.0",
     "@angular/service-worker": "^12.0.0",
     "@neos21/bootstrap3-glyphicons": "^1.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "@ng-select/ng-select": "^7.0.1",
     "@ngx-i18nsupport/ngx-i18nsupport": "^1.1.6",
     "@ngx-i18nsupport/tooling": "^8.0.3",
@@ -53,7 +53,6 @@
     "@types/chart.js": "^2.9.16",
     "@types/core-js": "^2.5.2",
     "@types/debug": "^4.1.5",
-    "@types/hls.js": "^0.13.0",
     "@types/jasmine": "^3.3.15",
     "@types/jasminewd2": "^2.0.3",
     "@types/jschannel": "^1.0.0",
@@ -73,7 +72,7 @@
     "chart.js": "^2.9.3",
     "codelyzer": "^6.0.0",
     "core-js": "^3.1.4",
-    "css-loader": "^5.2.6",
+    "css-loader": "^6.2.0",
     "debug": "^4.3.1",
     "dexie": "^3.0.0",
     "file-loader": "^6.0.0",
@@ -82,7 +81,7 @@
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.1",
     "https-browserify": "^1.0.0",
-    "jasmine-core": "~3.7.1",
+    "jasmine-core": "~3.8.0",
     "jasmine-spec-reporter": "~7.0.0",
     "jschannel": "^1.0.2",
     "karma": "~6.3.2",
@@ -92,8 +91,8 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "linkifyjs": "^2.1.5",
     "lodash-es": "^4.17.4",
-    "markdown-it": "12.0.6",
-    "mini-css-extract-plugin": "^1.6.0",
+    "markdown-it": "12.2.0",
+    "mini-css-extract-plugin": "^2.2.0",
     "ngx-uploadx": "^4.1.0",
     "path-browserify": "^1.0.0",
     "primeng": "^12.0.0-rc.1",
@@ -101,10 +100,10 @@
     "protractor": "~7.0.0",
     "purify-css": "^1.2.5",
     "raw-loader": "^4.0.0",
-    "rxjs": "^6.5.2",
+    "rxjs": "^7.3.0",
     "sanitize-html": "^2.1.2",
     "sass": "^1.34.0",
-    "sass-loader": "^11.1.1",
+    "sass-loader": "^12.1.0",
     "sha.js": "^2.4.11",
     "socket.io-client": "^4.0.1",
     "stream-browserify": "^3.0.0",
@@ -126,7 +125,7 @@
     "videostream": "~3.2.1",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.7.0",
-    "webtorrent": "^0.116.1",
+    "webtorrent": "^1.3.8",
     "whatwg-fetch": "^3.0.0",
     "zone.js": "~0.11.4"
   }

client/src/app/core/auth/auth.service.ts

@@ -206,7 +206,7 @@ Ensure you have correctly configured PeerTube (config/ directory), in particular
     this.refreshingTokenObservable = this.http.post<UserRefreshToken>(AuthService.BASE_TOKEN_URL, body, { headers })
                                          .pipe(
                                            map(res => this.handleRefreshToken(res)),
-                                           tap(() => this.refreshingTokenObservable = null),
+                                           tap(() => { this.refreshingTokenObservable = null }),
                                            catchError(err => {
                                              this.refreshingTokenObservable = null
 

client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts

@@ -47,7 +47,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   isNewPlaylistBlockOpened = false
 
   videoPlaylistSearch: string
-  videoPlaylistSearchChanged = new Subject<string>()
+  videoPlaylistSearchChanged = new Subject<void>()
 
   videoPlaylists: PlaylistSummary[] = []
 

client/src/assets/player/p2p-media-loader/hls-plugin.ts

@@ -1,7 +1,7 @@
 // Thanks https://github.com/streamroot/videojs-hlsjs-plugin
 // We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file
 
-import * as Hlsjs from 'hls.js/dist/hls.light.js'
+import Hlsjs, { ErrorData, HlsConfig, Level, ManifestLoadedData } from 'hls.js'
 import videojs from 'video.js'
 import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
 
@@ -10,11 +10,9 @@ type ErrorCounts = {
 }
 
 type Metadata = {
-  levels: Hlsjs.Level[]
+  levels: Level[]
 }
 
-type CustomAudioTrack = Hlsjs.HlsAudioTrack & { name?: string, lang?: string }
-
 const registerSourceHandler = function (vjs: typeof videojs) {
   if (!Hlsjs.isSupported()) {
     console.warn('Hls.js is not supported in this browser!')
@@ -93,8 +91,8 @@ class Html5Hlsjs {
   private readonly source: videojs.Tech.SourceObject
   private readonly vjs: typeof videojs
 
-  private hls: Hlsjs & { manualLevel?: number, audioTrack?: any, audioTracks?: CustomAudioTrack[] } // FIXME: typings
-  private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null
+  private hls: Hlsjs
+  private hlsjsConfig: Partial<HlsConfig & { cueHandler: any }> = null
 
   private _duration: number = null
   private metadata: Metadata = null
@@ -255,7 +253,7 @@ class Html5Hlsjs {
     this.tech.trigger('error')
   }
 
-  private _onError (_event: any, data: Hlsjs.errorData) {
+  private _onError (_event: any, data: ErrorData) {
     const error: { message: string, code?: number } = {
       message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
     }
@@ -285,7 +283,7 @@ class Html5Hlsjs {
     this.hls.currentLevel = qualityId
   }
 
-  private _levelLabel (level: Hlsjs.Level) {
+  private _levelLabel (level: Level) {
     if (this.player.srOptions_.levelLabelHandler) {
       return this.player.srOptions_.levelLabelHandler(level as any)
     }
@@ -523,7 +521,7 @@ class Html5Hlsjs {
     }
   }
 
-  private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) {
+  private _onMetaData (_event: any, data: ManifestLoadedData) {
     // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
     this.metadata = data as any
     this._handleQualityLevels()

client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts

@@ -1,4 +1,4 @@
-import * as Hlsjs from 'hls.js/dist/hls.light.js'
+import Hlsjs from 'hls.js'
 import videojs from 'video.js'
 import { Events, Segment } from '@peertube/p2p-media-loader-core'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs'

client/src/sass/application.scss

@@ -1,5 +1,7 @@
 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
+@use 'sass:math';
+
 @use '_variables' as *;
 @use '_mixins' as *;
 
@@ -353,11 +355,11 @@ ngx-loading-bar {
 
 @media screen and (max-width: #{breakpoint(xxl)}) {
   .main-col {
-    --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
+    --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
     --videosHorizontalMarginContent: 30px;
 
     &.expanded {
-      --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
+      --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 2)};
     }
   }
 }
@@ -370,7 +372,7 @@ ngx-loading-bar {
   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
   .main-col,
   .main-col.expanded {
-    --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
+    --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)};
 
     .sub-menu {
       padding: 0 50px;

client/src/shims/stream.ts

@@ -0,0 +1 @@
+module.exports = require('stream-browserify')

client/tsconfig.base.json

@@ -24,6 +24,7 @@
     ],
     "baseUrl": "./",
     "paths": {
+      "hls.js": [ "node_modules/hls.js/dist/hls.light" ],
       "video.js": [ "node_modules/video.js/core" ],
       "@app/*": [ "src/app/*" ],
       "@shared/models/*": [ "../shared/models/*" ],
@@ -35,7 +36,7 @@
       "http": [ "src/shims/http.ts" ],
       "https": [ "src/shims/https.ts" ],
       "path": [ "src/shims/path.ts" ],
-      "stream": [ "src/shims/noop.ts" ],
+      "stream": [ "src/shims/stream.ts" ],
       "crypto": [ "src/shims/noop.ts" ]
     }
   },

client/webpack/webpack.video-embed.js

@@ -27,6 +27,7 @@ module.exports = function () {
 
       alias: {
         'video.js$': path.resolve('node_modules/video.js/core.js'),
+        'hls.js$': path.resolve('node_modules/hls.js/dist/hls.light.js'),
         '@root-helpers': path.resolve('src/root-helpers'),
         '@shared/models': path.resolve('../shared/models'),
         '@shared/core-utils': path.resolve('../shared/core-utils')
@@ -37,7 +38,7 @@ module.exports = function () {
         http: [ path.resolve('src/shims/http.ts') ],
         https: [ path.resolve('src/shims/https.ts') ],
         path: [ path.resolve('src/shims/path.ts') ],
-        stream: [ path.resolve('src/shims/noop.ts') ],
+        stream: [ path.resolve('src/shims/stream.ts') ],
         crypto: [ path.resolve('src/shims/noop.ts') ]
       }
     },