Migrate client to eslint

18 files changed, 132 insertions, 136 deletions

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 78f0944ef..a1b07aea6 100644
--- a/client/src/assets/player/p2p-media-loader/hls-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
@@ -13,6 +13,8 @@ type Metadata = {
   levels: Level[]
 }
 
+type HookFn = (player: videojs.Player, hljs: Hlsjs) => void
+
 const registerSourceHandler = function (vjs: typeof videojs) {
   if (!Hlsjs.isSupported()) {
     console.warn('Hls.js is not supported in this browser!')
@@ -82,7 +84,7 @@ const registerConfigPlugin = function (vjs: typeof videojs) {
 }
 
 class Html5Hlsjs {
-  private static readonly hooks: { [id: string]: Function[] } = {}
+  private static readonly hooks: { [id: string]: HookFn[] } = {}
 
   private readonly videoElement: HTMLVideoElement
   private readonly errorCounts: ErrorCounts = {}
@@ -131,7 +133,8 @@ class Html5Hlsjs {
           errorTxt = 'You aborted the video playback'
           break
         case mediaError.MEDIA_ERR_DECODE:
-          errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support'
+          errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features ' +
+                     'your browser did not support'
           this._handleMediaError(mediaError)
           break
         case mediaError.MEDIA_ERR_NETWORK:
@@ -182,58 +185,57 @@ class Html5Hlsjs {
     this.hls.destroy()
   }
 
-  static addHook (type: string, callback: Function) {
-    Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || []
-    Html5Hlsjs.hooks[ type ].push(callback)
+  static addHook (type: string, callback: HookFn) {
+    Html5Hlsjs.hooks[type] = this.hooks[type] || []
+    Html5Hlsjs.hooks[type].push(callback)
   }
 
-  static removeHook (type: string, callback: Function) {
-    if (Html5Hlsjs.hooks[ type ] === undefined) return false
+  static removeHook (type: string, callback: HookFn) {
+    if (Html5Hlsjs.hooks[type] === undefined) return false
 
-    const index = Html5Hlsjs.hooks[ type ].indexOf(callback)
+    const index = Html5Hlsjs.hooks[type].indexOf(callback)
     if (index === -1) return false
 
-    Html5Hlsjs.hooks[ type ].splice(index, 1)
+    Html5Hlsjs.hooks[type].splice(index, 1)
 
     return true
   }
 
   private _executeHooksFor (type: string) {
-    if (Html5Hlsjs.hooks[ type ] === undefined) {
+    if (Html5Hlsjs.hooks[type] === undefined) {
       return
     }
 
     // ES3 and IE < 9
-    for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) {
-      Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls)
+    for (let i = 0; i < Html5Hlsjs.hooks[type].length; i++) {
+      Html5Hlsjs.hooks[type][i](this.player, this.hls)
     }
   }
 
   private _handleMediaError (error: any) {
-    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) {
+    if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 1) {
       console.info('trying to recover media error')
       this.hls.recoverMediaError()
       return
     }
 
-    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) {
+    if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 2) {
       console.info('2nd try to recover media error (by swapping audio codec')
       this.hls.swapAudioCodec()
       this.hls.recoverMediaError()
       return
     }
 
-    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) {
+    if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] > 2) {
       console.info('bubbling media error up to VIDEOJS')
       this.hls.destroy()
       this.tech.error = () => error
       this.tech.trigger('error')
-      return
     }
   }
 
   private _handleNetworkError (error: any) {
-    if (this.errorCounts[ Hlsjs.ErrorTypes.NETWORK_ERROR] <= 5) {
+    if (this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] <= 5) {
       console.info('trying to recover network error')
 
       // Wait 1 second and retry
@@ -241,7 +243,7 @@ class Html5Hlsjs {
 
       // Reset error count on success
       this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
-        this.errorCounts[ Hlsjs.ErrorTypes.NETWORK_ERROR] = 0
+        this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] = 0
       })
 
       return
@@ -259,8 +261,8 @@ class Html5Hlsjs {
     }
 
     // increment/set error count
-    if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1
-    else this.errorCounts[ data.type ] = 1
+    if (this.errorCounts[data.type]) this.errorCounts[data.type] += 1
+    else this.errorCounts[data.type] = 1
 
     if (data.fatal) console.warn(error.message)
     else console.error(error.message, data)
@@ -300,7 +302,7 @@ class Html5Hlsjs {
     let isAuto = true
 
     for (let i = 0; i < qualityLevels.length; i++) {
-      if (!qualityLevels[ i ]._enabled) {
+      if (!qualityLevels[i]._enabled) {
         isAuto = false
         break
       }
@@ -316,7 +318,7 @@ class Html5Hlsjs {
     let selectedTrack: number
 
     for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
-      if (qualityLevels[ selectedTrack ]._enabled) {
+      if (qualityLevels[selectedTrack]._enabled) {
         break
       }
     }
@@ -327,11 +329,11 @@ class Html5Hlsjs {
   private _handleQualityLevels () {
     if (!this.metadata) return
 
-    const qualityLevels = this.player.qualityLevels && this.player.qualityLevels()
+    const qualityLevels = this.player.qualityLevels?.()
     if (!qualityLevels) return
 
     for (let i = 0; i < this.metadata.levels.length; i++) {
-      const details = this.metadata.levels[ i ]
+      const details = this.metadata.levels[i]
       const representation: QualityLevelRepresentation = {
         id: i,
         width: details.width,
@@ -345,11 +347,11 @@ class Html5Hlsjs {
       representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
         // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
         if (typeof toggle === 'boolean') {
-          this[ level ]._enabled = toggle
+          this[level]._enabled = toggle
           self._relayQualityChange(this)
         }
 
-        return this[ level ]._enabled
+        return this[level]._enabled
       }
 
       qualityLevels.addQualityLevel(representation)
@@ -395,7 +397,7 @@ class Html5Hlsjs {
     const playerAudioTracks = this.tech.audioTracks()
     for (let j = 0; j < playerAudioTracks.length; j++) {
       // FIXME: typings
-      if ((playerAudioTracks[ j ] as any).enabled) {
+      if ((playerAudioTracks[j] as any).enabled) {
         this.hls.audioTrack = j
         break
       }
@@ -412,8 +414,8 @@ class Html5Hlsjs {
         playerAudioTracks.addTrack(new this.vjs.AudioTrack({
           id: i.toString(),
           kind: 'alternative',
-          label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang,
-          language: hlsAudioTracks[ i ].lang,
+          label: hlsAudioTracks[i].name || hlsAudioTracks[i].lang,
+          language: hlsAudioTracks[i].lang,
           enabled: i === this.hls.audioTrack
         }))
       }
@@ -430,8 +432,8 @@ class Html5Hlsjs {
   }
 
   private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
-    return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2)
-      && track1.kind === track2.kind
+    return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2) &&
+           track1.kind === track2.kind
   }
 
   private _updateSelectedTextTrack () {
@@ -439,16 +441,16 @@ class Html5Hlsjs {
     let activeTrack: TextTrack = null
 
     for (let j = 0; j < playerTextTracks.length; j++) {
-      if (playerTextTracks[ j ].mode === 'showing') {
-        activeTrack = playerTextTracks[ j ]
+      if (playerTextTracks[j].mode === 'showing') {
+        activeTrack = playerTextTracks[j]
         break
       }
     }
 
     const hlsjsTracks = this.videoElement.textTracks
     for (let k = 0; k < hlsjsTracks.length; k++) {
-      if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') {
-        hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack)
+      if (hlsjsTracks[k].kind === 'subtitles' || hlsjsTracks[k].kind === 'captions') {
+        hlsjsTracks[k].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[k], activeTrack)
           ? 'showing'
           : 'disabled'
       }
@@ -460,11 +462,11 @@ class Html5Hlsjs {
     this.videoElement.removeEventListener('play', this.handlers.play)
   }
 
-  private _oneLevelObjClone (obj: object) {
+  private _oneLevelObjClone (obj: { [ id: string ]: any }) {
     const result = {}
     const objKeys = Object.keys(obj)
     for (let i = 0; i < objKeys.length; i++) {
-      result[ objKeys[ i ] ] = obj[ objKeys[ i ] ]
+      result[objKeys[i]] = obj[objKeys[i]]
     }
 
     return result
@@ -475,8 +477,8 @@ class Html5Hlsjs {
 
     // Filter out tracks that is displayable (captions or subtitles)
     for (let idx = 0; idx < textTracks.length; idx++) {
-      if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') {
-        displayableTracks.push(textTracks[ idx ])
+      if (textTracks[idx].kind === 'subtitles' || textTracks[idx].kind === 'captions') {
+        displayableTracks.push(textTracks[idx])
       }
     }
 
@@ -493,14 +495,14 @@ class Html5Hlsjs {
       let isAdded = false
 
       for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
-        if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) {
+        if (this._isSameTextTrack(displayableTracks[idx], playerTextTracks[jdx])) {
           isAdded = true
           break
         }
       }
 
       if (!isAdded) {
-        const hlsjsTextTrack = displayableTracks[ idx ]
+        const hlsjsTextTrack = displayableTracks[idx]
         this.player.addRemoteTextTrack({
           kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
           label: this._getTextTrackLabel(hlsjsTextTrack),
@@ -536,12 +538,12 @@ class Html5Hlsjs {
         const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
 
         for (let r = 0; r < captionScreen.rows.length; r++) {
-          row = captionScreen.rows[ r ]
+          row = captionScreen.rows[r]
           text = ''
 
           if (!row.isEmpty()) {
             for (let c = 0; c < row.chars.length; c++) {
-              text += row.chars[ c ].ucharj
+              text += row.chars[c].ucharj
             }
 
             cue = new VTTCue(startTime, endTime, text.trim())
@@ -552,7 +554,7 @@ class Html5Hlsjs {
               const configKeys = Object.keys(captionConfig)
 
               for (let k = 0; k < configKeys.length; k++) {
-                cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ]
+                cue[configKeys[k]] = captionConfig[configKeys[k]]
               }
             }
             track.addCue(cue)
@@ -567,7 +569,7 @@ class Html5Hlsjs {
     const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
     const srOptions_ = this.player.srOptions_
 
-    const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig
+    const hlsjsConfigRef = srOptions_?.hlsjsConfig || techOptions.hlsjsConfig
     // Hls.js will write to the reference thus change the object for later streams
     this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
 
@@ -575,7 +577,7 @@ class Html5Hlsjs {
       this.hlsjsConfig.autoStartLoad = false
     }
 
-    const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig
+    const captionConfig = srOptions_?.captionConfig || techOptions.captionConfig
     if (captionConfig) {
       this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
     }
diff --git a/client/src/assets/player/p2p-media-loader/segment-validator.ts b/client/src/assets/player/p2p-media-loader/segment-validator.ts
index d0a4c4a3f..f7f83a8a4 100644
--- a/client/src/assets/player/p2p-media-loader/segment-validator.ts
+++ b/client/src/assets/player/p2p-media-loader/segment-validator.ts
@@ -86,6 +86,7 @@ async function sha256Hex (data?: ArrayBuffer) {
 
   // Fallback for non HTTPS context
   const shaModule = (await import('sha.js') as any).default
+  // eslint-disable-next-line new-cap
   return new shaModule.sha256().update(Buffer.from(data)).digest('hex')
 }
 
@@ -97,7 +98,9 @@ function bufferToHex (buffer?: ArrayBuffer) {
   const h = '0123456789abcdef'
   const o = new Uint8Array(buffer)
 
-  o.forEach((v: any) => s += h[ v >> 4 ] + h[ v & 15 ])
+  o.forEach((v: any) => {
+    s += h[v >> 4] + h[v & 15]
+  })
 
   return s
 }
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index c45e8f53e..f3c21fc4c 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -435,8 +435,6 @@ export class PeertubePlayerManager {
     const p2pMediaLoaderOptions = options.p2pMediaLoader
 
     const autoplay = this.getAutoPlayValue(commonOptions.autoplay) === 'play'
-      ? true
-      : false
 
     const webtorrent = {
       autoplay,
@@ -459,10 +457,10 @@ export class PeertubePlayerManager {
     theaterButton: boolean
     captions: boolean
 
-    nextVideo?: Function
+    nextVideo?: () => void
     hasNextVideo?: () => boolean
 
-    previousVideo?: Function
+    previousVideo?: () => void
     hasPreviousVideo?: () => boolean
   }) {
     const settingEntries = []
@@ -487,7 +485,7 @@ export class PeertubePlayerManager {
       }
 
       Object.assign(children, {
-        'previousVideoButton': buttonOptions
+        previousVideoButton: buttonOptions
       })
     }
 
@@ -505,35 +503,35 @@ export class PeertubePlayerManager {
       }
 
       Object.assign(children, {
-        'nextVideoButton': buttonOptions
+        nextVideoButton: buttonOptions
       })
     }
 
     Object.assign(children, {
-      'currentTimeDisplay': {},
-      'timeDivider': {},
-      'durationDisplay': {},
-      'liveDisplay': {},
+      currentTimeDisplay: {},
+      timeDivider: {},
+      durationDisplay: {},
+      liveDisplay: {},
 
-      'flexibleWidthSpacer': {},
-      'progressControl': {
+      flexibleWidthSpacer: {},
+      progressControl: {
         children: {
-          'seekBar': {
+          seekBar: {
             children: {
               [loadProgressBar]: {},
-              'mouseTimeDisplay': {},
-              'playProgressBar': {}
+              mouseTimeDisplay: {},
+              playProgressBar: {}
             }
           }
         }
       },
 
-      'p2PInfoButton': {},
+      p2PInfoButton: {},
 
-      'muteToggle': {},
-      'volumeControl': {},
+      muteToggle: {},
+      volumeControl: {},
 
-      'settingsButton': {
+      settingsButton: {
         setup: {
           maxHeightOffset: 40
         },
@@ -543,18 +541,18 @@ export class PeertubePlayerManager {
 
     if (options.peertubeLink === true) {
       Object.assign(children, {
-        'peerTubeLinkButton': { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions
+        peerTubeLinkButton: { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions
       })
     }
 
     if (options.theaterButton === true) {
       Object.assign(children, {
-        'theaterButton': {}
+        theaterButton: {}
       })
     }
 
     Object.assign(children, {
-      'fullscreenToggle': {}
+      fullscreenToggle: {}
     })
 
     return children
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index ade8e2ee4..b4841b235 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -211,7 +211,7 @@ class PeerTubePlugin extends Plugin {
     const body = new URLSearchParams()
     body.append('currentTime', currentTime.toString())
 
-    const headers = new Headers({ 'Authorization': authorizationHeader })
+    const headers = new Headers({ Authorization: authorizationHeader })
 
     return fetch(url, { method: 'PUT', body, headers })
   }
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index f0eb129d4..97828c802 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,3 +1,6 @@
+// FIXME: lint
+/* eslint-disable @typescript-eslint/ban-types */
+
 import { HlsConfig, Level } from 'hls.js'
 import videojs from 'video.js'
 import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
@@ -93,7 +96,7 @@ type VideoJSCaption = {
 }
 
 type UserWatching = {
-  url: string,
+  url: string
   authorizationHeader: string
 }
 
@@ -166,7 +169,7 @@ type VideoJSPluginOptions = {
 }
 
 type LoadedQualityData = {
-  qualitySwitchCallback: Function,
+  qualitySwitchCallback: (resolutionId: number, type: 'video') => void
   qualityData: {
     video: {
       id: number
@@ -177,7 +180,7 @@ type LoadedQualityData = {
 }
 
 type ResolutionUpdateData = {
-  auto: boolean,
+  auto: boolean
   resolutionId: number
   id?: number
 }
diff --git a/client/src/assets/player/stats/stats-card.ts b/client/src/assets/player/stats/stats-card.ts
index b271d0526..a32f6fb97 100644
--- a/client/src/assets/player/stats/stats-card.ts
+++ b/client/src/assets/player/stats/stats-card.ts
@@ -39,10 +39,6 @@ class StatsCard extends Component {
   intervalMs = 300
   playerNetworkInfo: PlayerNetworkInfo = {}
 
-  constructor (player: videojs.Player, options: StatsCardOptions) {
-    super(player, options)
-  }
-
   createEl () {
     const container = super.createEl('div', {
       className: 'vjs-stats-content',
@@ -81,9 +77,8 @@ class StatsCard extends Component {
   }
 
   toggle () {
-    this.updateInterval
-      ? this.hide()
-      : this.show()
+    if (this.updateInterval) this.hide()
+    else this.show()
   }
 
   show () {
diff --git a/client/src/assets/player/translations-manager.ts b/client/src/assets/player/translations-manager.ts
index d5a09a31a..8a6e67dda 100644
--- a/client/src/assets/player/translations-manager.ts
+++ b/client/src/assets/player/translations-manager.ts
@@ -23,13 +23,13 @@ export class TranslationsManager {
 
     let p: Promise<any>
 
-    if (TranslationsManager.videojsLocaleCache[ path ]) {
-      p = Promise.resolve(TranslationsManager.videojsLocaleCache[ path ])
+    if (TranslationsManager.videojsLocaleCache[path]) {
+      p = Promise.resolve(TranslationsManager.videojsLocaleCache[path])
     } else {
       p = fetch(path + '/player.json')
         .then(res => res.json())
         .then(json => {
-          TranslationsManager.videojsLocaleCache[ path ] = json
+          TranslationsManager.videojsLocaleCache[path] = json
           return json
         })
         .catch(err => {
diff --git a/client/src/assets/player/upnext/end-card.ts b/client/src/assets/player/upnext/end-card.ts
index 8fabfc3fd..61668e407 100644
--- a/client/src/assets/player/upnext/end-card.ts
+++ b/client/src/assets/player/upnext/end-card.ts
@@ -9,7 +9,9 @@ function getMainTemplate (options: any) {
     <div class="vjs-upnext-autoplay-icon">
       <svg height="100%" version="1.1" viewbox="0 0 98 98" width="100%">
         <circle class="vjs-upnext-svg-autoplay-circle" cx="49" cy="49" fill="#000" fill-opacity="0.8" r="48"></circle>
-        <circle class="vjs-upnext-svg-autoplay-ring" cx="-49" cy="49" fill-opacity="0" r="46.5" stroke="#FFFFFF" stroke-width="4" transform="rotate(-90)"></circle>
+        <circle class="vjs-upnext-svg-autoplay-ring" cx="-49" cy="49" fill-opacity="0" r="46.5"
+                stroke="#FFFFFF" stroke-width="4" transform="rotate(-90)"
+        ></circle>
         <polygon class="vjs-upnext-svg-autoplay-triangle" fill="#fff" points="32,27 72,49 32,71"></polygon></svg>
     </div>
     <span class="vjs-upnext-bottom">
@@ -22,7 +24,7 @@ function getMainTemplate (options: any) {
 }
 
 export interface EndCardOptions extends videojs.ComponentOptions {
-  next: Function,
+  next: () => void
   getTitle: () => string
   timeout: number
   cancelText: string
@@ -99,11 +101,11 @@ class EndCard extends Component {
     return container
   }
 
-  showCard (cb: Function) {
+  showCard (cb: (value: boolean) => void) {
     let timeout: any
 
-    this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart)
-    this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart)
+    this.autoplayRing.setAttribute('stroke-dasharray', `${this.dashOffsetStart}`)
+    this.autoplayRing.setAttribute('stroke-dashoffset', `${-this.dashOffsetStart}`)
 
     this.title.innerHTML = this.options_.getTitle()
 
@@ -123,7 +125,7 @@ class EndCard extends Component {
     })
 
     const goToPercent = (percent: number) => {
-      const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
+      const newOffset = Math.max(-this.dashOffsetTotal, -this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
       this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
     }
 
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index f0a1b1aee..f2e9adb14 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -17,7 +17,7 @@ function isIOS () {
   // Detect iPad Desktop mode
   return !!(navigator.maxTouchPoints &&
       navigator.maxTouchPoints > 2 &&
-      /MacIntel/.test(navigator.platform))
+      navigator.platform.includes('MacIntel'))
 }
 
 function isSafari () {
diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts
index 81f9544f4..07ed18989 100644
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -96,11 +96,11 @@ class P2pInfoButton extends Button {
       }
       subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
 
-      downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
-      downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
+      downloadSpeedNumber.textContent = downloadSpeed[0]
+      downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
 
-      uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
-      uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
+      uploadSpeedNumber.textContent = uploadSpeed[0]
+      uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
 
       peersNumber.textContent = numPeers.toString()
       peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
diff --git a/client/src/assets/player/videojs-components/resolution-menu-item.ts b/client/src/assets/player/videojs-components/resolution-menu-item.ts
index 73ad47d2b..c1f502600 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-item.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts
@@ -6,7 +6,7 @@ const MenuItem = videojs.getComponent('MenuItem')
 export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions {
   labels?: { [id: number]: string }
   id: number
-  callback: Function
+  callback: (resolutionId: number, type: 'video') => void
 }
 
 class ResolutionMenuItem extends MenuItem {
@@ -14,7 +14,7 @@ class ResolutionMenuItem extends MenuItem {
   private readonly label: string
   // Only used for the automatic item
   private readonly labels: { [id: number]: string }
-  private readonly callback: Function
+  private readonly callback: (resolutionId: number, type: 'video') => void
 
   private autoResolutionPossible: boolean
   private currentResolutionLabel: string
diff --git a/client/src/assets/player/videojs-components/settings-dialog.ts b/client/src/assets/player/videojs-components/settings-dialog.ts
index 41911e7e8..8cd98967f 100644
--- a/client/src/assets/player/videojs-components/settings-dialog.ts
+++ b/client/src/assets/player/videojs-components/settings-dialog.ts
@@ -12,8 +12,6 @@ class SettingsDialog extends Component {
   /**
    * Create the component's DOM element
    *
-   * @return {Element}
-   * @method createEl
    */
   createEl () {
     const uniqueId = this.id()
@@ -25,7 +23,7 @@ class SettingsDialog extends Component {
       innerHTML: '',
       tabIndex: -1
     }, {
-      'role': 'dialog',
+      role: 'dialog',
       'aria-labelledby': dialogLabelId,
       'aria-describedby': dialogDescriptionId
     })
diff --git a/client/src/assets/player/videojs-components/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts
index f1342f179..1871d41f8 100644
--- a/client/src/assets/player/videojs-components/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -1,8 +1,8 @@
+import videojs from 'video.js'
 // Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 import { toTitleCase } from '../utils'
-import videojs from 'video.js'
-import { SettingsButton } from './settings-menu-button'
 import { SettingsDialog } from './settings-dialog'
+import { SettingsButton } from './settings-menu-button'
 import { SettingsPanel } from './settings-panel'
 import { SettingsPanelChild } from './settings-panel-child'
 
@@ -57,7 +57,7 @@ class SettingsMenuItem extends MenuItem {
     const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this })
 
     this.subMenu = new SubMenuComponent(this.player(), newOptions) as any // FIXME: typings
-    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[ 0 ]
+    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
     this.settingsSubMenuEl_.className += ' ' + subMenuClass
 
     this.eventHandlers()
@@ -104,7 +104,7 @@ class SettingsMenuItem extends MenuItem {
       target = event.currentTarget
     }
 
-    if (target && target.classList.contains('vjs-back-button')) {
+    if (target?.classList.contains('vjs-back-button')) {
       this.loadMainMenu()
       return
     }
@@ -121,8 +121,6 @@ class SettingsMenuItem extends MenuItem {
   /**
    * Create the component's DOM element
    *
-   * @return {Element}
-   * @method createEl
    */
   createEl () {
     const el = videojs.dom.createEl('li', {
@@ -198,14 +196,14 @@ class SettingsMenuItem extends MenuItem {
     const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
 
     for (let p = 0; p < prefix.length; p++) {
-      if (!prefix[ p ]) {
+      if (!prefix[p]) {
         type = type.toLowerCase()
       }
 
       if (action === 'addEvent') {
-        element.addEventListener(prefix[ p ] + type, callback, false)
+        element.addEventListener(prefix[p] + type, callback, false)
       } else if (action === 'removeEvent') {
-        element.removeEventListener(prefix[ p ] + type, callback, false)
+        element.removeEventListener(prefix[p] + type, callback, false)
       }
     }
   }
@@ -292,7 +290,10 @@ class SettingsMenuItem extends MenuItem {
     // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
     if (subMenu === 'PlaybackRateMenuButton') {
       const html = (this.subMenu as any).labelEl_.innerHTML
-      setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = html, 250)
+
+      setTimeout(() => {
+        this.settingsSubMenuValueEl_.innerHTML = html
+      }, 250)
     } else {
       // Loop trough the submenu items to find the selected child
       for (const subMenuItem of this.subMenu.menu.children_) {
diff --git a/client/src/assets/player/videojs-components/settings-panel-child.ts b/client/src/assets/player/videojs-components/settings-panel-child.ts
index d1582412c..161420c38 100644
--- a/client/src/assets/player/videojs-components/settings-panel-child.ts
+++ b/client/src/assets/player/videojs-components/settings-panel-child.ts
@@ -4,10 +4,6 @@ const Component = videojs.getComponent('Component')
 
 class SettingsPanelChild extends Component {
 
-  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
-    super(player, options)
-  }
-
   createEl () {
     return super.createEl('div', {
       className: 'vjs-settings-panel-child',
diff --git a/client/src/assets/player/videojs-components/settings-panel.ts b/client/src/assets/player/videojs-components/settings-panel.ts
index 1ad8bb1fc..28b579bdd 100644
--- a/client/src/assets/player/videojs-components/settings-panel.ts
+++ b/client/src/assets/player/videojs-components/settings-panel.ts
@@ -4,10 +4,6 @@ const Component = videojs.getComponent('Component')
 
 class SettingsPanel extends Component {
 
-  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
-    super(player, options)
-  }
-
   createEl () {
     return super.createEl('div', {
       className: 'vjs-settings-panel',
diff --git a/client/src/assets/player/webtorrent/peertube-chunk-store.ts b/client/src/assets/player/webtorrent/peertube-chunk-store.ts
index 66762bef8..93ca8e1d8 100644
--- a/client/src/assets/player/webtorrent/peertube-chunk-store.ts
+++ b/client/src/assets/player/webtorrent/peertube-chunk-store.ts
@@ -36,7 +36,7 @@ export class PeertubeChunkStore extends EventEmitter {
 
   chunkLength: number
 
-  private pendingPut: { id: number, buf: Buffer, cb: Function }[] = []
+  private pendingPut: { id: number, buf: Buffer, cb: (err?: Error) => void }[] = []
   // If the store is full
   private memoryChunks: { [ id: number ]: Buffer | true } = {}
   private databaseName: string
@@ -54,7 +54,7 @@ export class PeertubeChunkStore extends EventEmitter {
     this.databaseName = 'webtorrent-chunks-'
 
     if (!opts) opts = {}
-    if (opts.torrent && opts.torrent.infoHash) this.databaseName += opts.torrent.infoHash
+    if (opts.torrent?.infoHash) this.databaseName += opts.torrent.infoHash
     else this.databaseName += '-default'
 
     this.setMaxListeners(100)
@@ -106,7 +106,9 @@ export class PeertubeChunkStore extends EventEmitter {
       } catch (err) {
         console.log('Cannot bulk insert chunks. Store them in memory.', { err })
 
-        processing.forEach(p => this.memoryChunks[ p.id ] = p.buf)
+        processing.forEach(p => {
+          this.memoryChunks[p.id] = p.buf
+        })
       } finally {
         processing.forEach(p => p.cb())
       }
diff --git a/client/src/assets/player/webtorrent/video-renderer.ts b/client/src/assets/player/webtorrent/video-renderer.ts
index c3cbea725..8fb3e9672 100644
--- a/client/src/assets/player/webtorrent/video-renderer.ts
+++ b/client/src/assets/player/webtorrent/video-renderer.ts
@@ -3,7 +3,7 @@
 
 const MediaElementWrapper = require('mediasource')
 import { extname } from 'path'
-const videostream = require('videostream')
+const Videostream = require('videostream')
 
 const VIDEOSTREAM_EXTS = [
   '.m4a',
@@ -34,7 +34,7 @@ function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOption
   let renderer: any
 
   try {
-    if (VIDEOSTREAM_EXTS.indexOf(extension) >= 0) {
+    if (VIDEOSTREAM_EXTS.includes(extension)) {
       renderer = useVideostream()
     } else {
       renderer = useMediaSource()
@@ -51,7 +51,7 @@ function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOption
       return callback(err)
     })
     preparedElem.addEventListener('loadstart', onLoadStart)
-    return new videostream(file, preparedElem)
+    return new Videostream(file, preparedElem)
   }
 
   function useMediaSource (useVP9 = false) {
@@ -62,7 +62,7 @@ function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOption
       preparedElem.removeEventListener('error', onError)
 
       // Try with vp9 before returning an error
-      if (codecs.indexOf('vp8') !== -1) return fallbackToMediaSource(true)
+      if (codecs.includes('vp8')) return fallbackToMediaSource(true)
 
       return callback(err)
     })
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 17d369c10..0587ddee6 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -17,8 +17,8 @@ import { renderVideo } from './video-renderer'
 const CacheChunkStore = require('cache-chunk-store')
 
 type PlayOptions = {
-  forcePlay?: boolean,
-  seek?: number,
+  forcePlay?: boolean
+  seek?: number
   delay?: number
 }
 
@@ -126,8 +126,8 @@ class WebTorrentPlugin extends Plugin {
   updateVideoFile (
     videoFile?: VideoFile,
     options: {
-      forcePlay?: boolean,
-      seek?: number,
+      forcePlay?: boolean
+      seek?: number
       delay?: number
     } = {},
     done: () => void = () => { /* empty */ }
@@ -248,7 +248,7 @@ class WebTorrentPlugin extends Plugin {
     magnetOrTorrentUrl: string,
     previousVideoFile: VideoFile,
     options: PlayOptions,
-    done: Function
+    done: (err?: Error) => void
   ) {
     if (!magnetOrTorrentUrl) return this.fallbackToHttp(options, done)
 
@@ -272,7 +272,7 @@ class WebTorrentPlugin extends Plugin {
         this.stopTorrent(oldTorrent)
 
         // We use a fake renderer so we download correct pieces of the next file
-        if (options.delay) this.renderFileInFakeElement(torrent.files[ 0 ], options.delay)
+        if (options.delay) this.renderFileInFakeElement(torrent.files[0], options.delay)
       }
 
       // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution)
@@ -288,7 +288,7 @@ class WebTorrentPlugin extends Plugin {
         if (options.seek) this.player.currentTime(options.seek)
 
         const renderVideoOptions = { autoplay: false, controls: true }
-        renderVideo(torrent.files[ 0 ], this.playerElement, renderVideoOptions, (err, renderer) => {
+        renderVideo(torrent.files[0], this.playerElement, renderVideoOptions, (err, renderer) => {
           this.renderer = renderer
 
           if (err) return this.fallbackToHttp(options, done)
@@ -321,7 +321,7 @@ class WebTorrentPlugin extends Plugin {
       if (err.message.indexOf('incorrect info hash') !== -1) {
         console.error('Incorrect info hash detected, falling back to torrent file.')
         const newOptions = { forcePlay: true, seek: options.seek }
-        return this.addTorrent(this.torrent[ 'xs' ], previousVideoFile, newOptions, done)
+        return this.addTorrent(this.torrent['xs'], previousVideoFile, newOptions, done)
       }
 
       // Remote instance is down
@@ -340,7 +340,7 @@ class WebTorrentPlugin extends Plugin {
     if (playPromise !== undefined) {
       return playPromise.then(() => done())
                         .catch((err: Error) => {
-                          if (err.message.indexOf('The play() request was interrupted by a call to pause()') !== -1) {
+                          if (err.message.includes('The play() request was interrupted by a call to pause()')) {
                             return
                           }
 
@@ -479,7 +479,7 @@ class WebTorrentPlugin extends Plugin {
   }
 
   private isPlayerWaiting () {
-    return this.player && this.player.hasClass('vjs-waiting')
+    return this.player?.hasClass('vjs-waiting')
   }
 
   private runTorrentInfoScheduler () {
@@ -513,7 +513,7 @@ class WebTorrentPlugin extends Plugin {
     }, this.CONSTANTS.INFO_SCHEDULER)
   }
 
-  private fallbackToHttp (options: PlayOptions, done?: Function) {
+  private fallbackToHttp (options: PlayOptions, done?: (err?: Error) => void) {
     const paused = this.player.paused()
 
     this.disableAutoResolution(true)
@@ -565,7 +565,7 @@ class WebTorrentPlugin extends Plugin {
   private stopTorrent (torrent: WebTorrent.Torrent) {
     torrent.pause()
     // Pause does not remove actual peers (in particular the webseed peer)
-    torrent.removePeer(torrent[ 'ws' ])
+    torrent.removePeer(torrent['ws'])
   }
 
   private renderFileInFakeElement (file: WebTorrent.TorrentFile, delay: number) {