6 files changed, 16 insertions, 15 deletions

diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 60bd72c60..ef5a3808e 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/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
 
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index 8b019103c..7069fa8fd 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/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[] = []
 
diff --git a/client/src/assets/player/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
index 3050110cd..78f0944ef 100644
--- a/client/src/assets/player/p2p-media-loader/hls-plugin.ts
+++ b/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()
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index 093795e48..acd40636e 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/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'
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index bd834db70..e0e8fc828 100644
--- a/client/src/sass/application.scss
+++ b/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;
diff --git a/client/src/shims/stream.ts b/client/src/shims/stream.ts
new file mode 100644
index 000000000..977fd05a0
--- /dev/null
+++ b/client/src/shims/stream.ts
@@ -0,0 +1 @@
+module.exports = require('stream-browserify')