15 files changed, 188 insertions, 90 deletions

diff --git a/client/src/assets/player/peertube-chunk-store.ts b/client/src/assets/player/peertube-chunk-store.ts
index 767e46821..54cc0ea64 100644
--- a/client/src/assets/player/peertube-chunk-store.ts
+++ b/client/src/assets/player/peertube-chunk-store.ts
@@ -40,15 +40,15 @@ export class PeertubeChunkStore extends EventEmitter {
   // If the store is full
   private memoryChunks: { [ id: number ]: Buffer | true } = {}
   private databaseName: string
-  private putBulkTimeout
-  private cleanerInterval
+  private putBulkTimeout: any
+  private cleanerInterval: any
   private db: ChunkDatabase
   private expirationDB: ExpirationDatabase
   private readonly length: number
   private readonly lastChunkLength: number
   private readonly lastChunkIndex: number
 
-  constructor (chunkLength: number, opts) {
+  constructor (chunkLength: number, opts: any) {
     super()
 
     this.databaseName = 'webtorrent-chunks-'
@@ -76,7 +76,7 @@ export class PeertubeChunkStore extends EventEmitter {
     this.runCleaner()
   }
 
-  put (index: number, buf: Buffer, cb: Function) {
+  put (index: number, buf: Buffer, cb: (err?: Error) => void) {
     const isLastChunk = (index === this.lastChunkIndex)
     if (isLastChunk && buf.length !== this.lastChunkLength) {
       return this.nextTick(cb, new Error('Last chunk length must be ' + this.lastChunkLength))
@@ -113,13 +113,13 @@ export class PeertubeChunkStore extends EventEmitter {
     }, PeertubeChunkStore.BUFFERING_PUT_MS)
   }
 
-  get (index: number, opts, cb) {
+  get (index: number, opts: any, cb: (err?: Error, buf?: Buffer) => void): void {
     if (typeof opts === 'function') return this.get(index, null, opts)
 
     // IndexDB could be slow, use our memory index first
     const memoryChunk = this.memoryChunks[index]
     if (memoryChunk === undefined) {
-      const err = new Error('Chunk not found')
+      const err = new Error('Chunk not found') as any
       err['notFound'] = true
 
       return process.nextTick(() => cb(err))
@@ -146,11 +146,11 @@ export class PeertubeChunkStore extends EventEmitter {
     })
   }
 
-  close (db) {
-    return this.destroy(db)
+  close (cb: (err?: Error) => void) {
+    return this.destroy(cb)
   }
 
-  async destroy (cb) {
+  async destroy (cb: (err?: Error) => void) {
     try {
       if (this.pendingPut) {
         clearTimeout(this.putBulkTimeout)
@@ -225,7 +225,7 @@ export class PeertubeChunkStore extends EventEmitter {
     }
   }
 
-  private nextTick (cb, err, val?) {
+  private nextTick <T> (cb: (err?: Error, val?: T) => void, err: Error, val?: T) {
     process.nextTick(() => cb(err, val), undefined)
   }
 }
diff --git a/client/src/assets/player/peertube-link-button.ts b/client/src/assets/player/peertube-link-button.ts
index 715207bc0..de9a49de9 100644
--- a/client/src/assets/player/peertube-link-button.ts
+++ b/client/src/assets/player/peertube-link-button.ts
@@ -1,11 +1,13 @@
-import * as videojs from 'video.js'
 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 import { buildVideoLink } from './utils'
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import { Player } from 'video.js'
 
 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
 class PeerTubeLinkButton extends Button {
 
-  constructor (player: videojs.Player, options) {
+  constructor (player: Player, options: any) {
     super(player, options)
   }
 
diff --git a/client/src/assets/player/peertube-load-progress-bar.ts b/client/src/assets/player/peertube-load-progress-bar.ts
index aedc641e4..af276d1b2 100644
--- a/client/src/assets/player/peertube-load-progress-bar.ts
+++ b/client/src/assets/player/peertube-load-progress-bar.ts
@@ -1,10 +1,13 @@
 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import { Player } from 'video.js'
 
 const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
 
 class PeerTubeLoadProgressBar extends Component {
 
-  constructor (player, options) {
+  constructor (player: Player, options: any) {
     super(player, options)
     this.partEls_ = []
     this.on(player, 'progress', this.update)
diff --git a/client/src/assets/player/peertube-player-local-storage.ts b/client/src/assets/player/peertube-player-local-storage.ts
index dac54c5a4..3ac5fe58a 100644
--- a/client/src/assets/player/peertube-player-local-storage.ts
+++ b/client/src/assets/player/peertube-player-local-storage.ts
@@ -10,6 +10,13 @@ function getStoredVolume () {
   return undefined
 }
 
+function getStoredWebTorrentEnabled (): boolean {
+  const value = getLocalStorage('webtorrent_enabled')
+  if (value !== null && value !== undefined) return value === 'true'
+
+  return false
+}
+
 function getStoredMute () {
   const value = getLocalStorage('mute')
   if (value !== null && value !== undefined) return value === 'true'
@@ -56,6 +63,7 @@ function getAverageBandwidthInStore () {
 
 export {
   getStoredVolume,
+  getStoredWebTorrentEnabled,
   getStoredMute,
   getStoredTheater,
   saveVolumeInStore,
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index 1bf6c9267..db63071cb 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -10,10 +10,14 @@ import './webtorrent-info-button'
 import './peertube-videojs-plugin'
 import './peertube-load-progress-bar'
 import './theater-button'
-import { VideoJSCaption, videojsUntyped } from './peertube-videojs-typings'
+import { UserWatching, VideoJSCaption, videojsUntyped } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
 
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import { Player } from 'video.js'
+
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
 // Change Captions to Subtitles/CC
@@ -34,10 +38,13 @@ function getVideojsOptions (options: {
   startTime: number | string
   theaterMode: boolean,
   videoCaptions: VideoJSCaption[],
+
   language?: string,
   controls?: boolean,
   muted?: boolean,
   loop?: boolean
+
+  userWatching?: UserWatching
 }) {
   const videojsOptions = {
     // We don't use text track settings for now
@@ -57,7 +64,8 @@ function getVideojsOptions (options: {
         playerElement: options.playerElement,
         videoViewUrl: options.videoViewUrl,
         videoDuration: options.videoDuration,
-        startTime: options.startTime
+        startTime: options.startTime,
+        userWatching: options.userWatching
       }
     },
     controlBar: {
@@ -71,12 +79,12 @@ function getVideojsOptions (options: {
         enableVolumeScroll: false,
         enableModifiersForNumbers: false,
 
-        fullscreenKey: function (event) {
+        fullscreenKey: function (event: KeyboardEvent) {
           // fullscreen with the f key or Ctrl+Enter
           return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
         },
 
-        seekStep: function (event) {
+        seekStep: function (event: KeyboardEvent) {
           // mimic VLC seek behavior, and default to 5 (original value is 5).
           if (event.ctrlKey && event.altKey) {
             return 5 * 60
@@ -91,26 +99,26 @@ function getVideojsOptions (options: {
 
         customKeys: {
           increasePlaybackRateKey: {
-            key: function (event) {
+            key: function (event: KeyboardEvent) {
               return event.key === '>'
             },
-            handler: function (player) {
+            handler: function (player: Player) {
               player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
             }
           },
           decreasePlaybackRateKey: {
-            key: function (event) {
+            key: function (event: KeyboardEvent) {
               return event.key === '<'
             },
-            handler: function (player) {
+            handler: function (player: Player) {
               player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
             }
           },
           frameByFrame: {
-            key: function (event) {
+            key: function (event: KeyboardEvent) {
               return event.key === '.'
             },
-            handler: function (player, options, event) {
+            handler: function (player: Player) {
               player.pause()
               // Calculate movement distance (assuming 30 fps)
               const dist = 1 / 30
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index adc376e94..40da5f1f7 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -1,21 +1,32 @@
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
 import * as videojs from 'video.js'
+
 import * as WebTorrent from 'webtorrent'
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
 import './settings-menu-button'
-import { PeertubePluginOptions, VideoJSCaption, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { PeertubePluginOptions, UserWatching, VideoJSCaption, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 import { isMobile, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from './utils'
-import * as CacheChunkStore from 'cache-chunk-store'
 import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
   getAverageBandwidthInStore,
   getStoredMute,
   getStoredVolume,
+  getStoredWebTorrentEnabled,
   saveAverageBandwidth,
   saveMuteInStore,
   saveVolumeInStore
 } from './peertube-player-local-storage'
 
+const CacheChunkStore = require('cache-chunk-store')
+
+type PlayOptions = {
+  forcePlay?: boolean,
+  seek?: number,
+  delay?: number
+}
+
 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class PeerTubePlugin extends Plugin {
   private readonly playerElement: HTMLVideoElement
@@ -32,7 +43,8 @@ class PeerTubePlugin extends Plugin {
     AUTO_QUALITY_THRESHOLD_PERCENT: 30, // Bandwidth should be 30% more important than a resolution bitrate to change to it
     AUTO_QUALITY_OBSERVATION_TIME: 10000, // Wait 10 seconds after having change the resolution before another check
     AUTO_QUALITY_HIGHER_RESOLUTION_DELAY: 5000, // Buffering higher resolution during 5 seconds
-    BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5 // Last 5 seconds to build average bandwidth
+    BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5, // Last 5 seconds to build average bandwidth
+    USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
   }
 
   private readonly webtorrent = new WebTorrent({
@@ -56,20 +68,22 @@ class PeerTubePlugin extends Plugin {
   private torrent: WebTorrent.Torrent
   private videoCaptions: VideoJSCaption[]
 
-  private renderer
-  private fakeRenderer
+  private renderer: any
+  private fakeRenderer: any
   private destoyingFakeRenderer = false
 
   private autoResolution = true
   private forbidAutoResolution = false
   private isAutoResolutionObservation = false
+  private playerRefusedP2P = false
 
-  private videoViewInterval
-  private torrentInfoInterval
-  private autoQualityInterval
-  private addTorrentDelay
-  private qualityObservationTimer
-  private runAutoQualitySchedulerTimer
+  private videoViewInterval: any
+  private torrentInfoInterval: any
+  private autoQualityInterval: any
+  private userWatchingVideoInterval: any
+  private addTorrentDelay: any
+  private qualityObservationTimer: any
+  private runAutoQualitySchedulerTimer: any
 
   private downloadSpeeds: number[] = []
 
@@ -78,6 +92,7 @@ class PeerTubePlugin extends Plugin {
 
     // Disable auto play on iOS
     this.autoplay = options.autoplay && this.isIOS() === false
+    this.playerRefusedP2P = !getStoredWebTorrentEnabled()
 
     this.startTime = timeToInt(options.startTime)
     this.videoFiles = options.videoFiles
@@ -100,6 +115,8 @@ class PeerTubePlugin extends Plugin {
       this.runTorrentInfoScheduler()
       this.runViewAdd()
 
+      if (options.userWatching) this.runUserWatchVideo(options.userWatching)
+
       this.player.one('play', () => {
         // Don't run immediately scheduler, wait some seconds the TCP connections are made
         this.runAutoQualitySchedulerTimer = setTimeout(() => this.runAutoQualityScheduler(), this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
@@ -121,6 +138,8 @@ class PeerTubePlugin extends Plugin {
     clearInterval(this.torrentInfoInterval)
     clearInterval(this.autoQualityInterval)
 
+    if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
+
     // Don't need to destroy renderer, video player will be destroyed
     this.flushVideoFile(this.currentVideoFile, false)
 
@@ -172,6 +191,15 @@ class PeerTubePlugin extends Plugin {
     const previousVideoFile = this.currentVideoFile
     this.currentVideoFile = videoFile
 
+    // Don't try on iOS that does not support MediaSource
+    // Or don't use P2P if webtorrent is disabled
+    if (this.isIOS() || this.playerRefusedP2P) {
+      return this.fallbackToHttp(options, () => {
+        this.player.playbackRate(oldPlaybackRate)
+        return done()
+      })
+    }
+
     this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, options, () => {
       this.player.playbackRate(oldPlaybackRate)
       return done()
@@ -242,18 +270,14 @@ class PeerTubePlugin extends Plugin {
   private addTorrent (
     magnetOrTorrentUrl: string,
     previousVideoFile: VideoFile,
-    options: {
-      forcePlay?: boolean,
-      seek?: number,
-      delay?: number
-    },
+    options: PlayOptions,
     done: Function
   ) {
     console.log('Adding ' + magnetOrTorrentUrl + '.')
 
     const oldTorrent = this.torrent
     const torrentOptions = {
-      store: (chunkLength, storeOpts) => new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
+      store: (chunkLength: number, storeOpts: any) => new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
         max: 100
       })
     }
@@ -282,7 +306,7 @@ class PeerTubePlugin extends Plugin {
         renderVideo(torrent.files[ 0 ], this.playerElement, renderVideoOptions, (err, renderer) => {
           this.renderer = renderer
 
-          if (err) return this.fallbackToHttp(done)
+          if (err) return this.fallbackToHttp(options, done)
 
           return this.tryToPlay(err => {
             if (err) return done(err)
@@ -290,13 +314,13 @@ class PeerTubePlugin extends Plugin {
             if (options.seek) this.seek(options.seek)
             if (options.forcePlay === false && paused === true) this.player.pause()
 
-            return done(err)
+            return done()
           })
         })
       }, options.delay || 0)
     })
 
-    this.torrent.on('error', err => console.error(err))
+    this.torrent.on('error', (err: any) => console.error(err))
 
     this.torrent.on('warning', (err: any) => {
       // We don't support HTTP tracker but we don't care -> we use the web socket tracker
@@ -324,13 +348,13 @@ class PeerTubePlugin extends Plugin {
     })
   }
 
-  private tryToPlay (done?: Function) {
+  private tryToPlay (done?: (err?: Error) => void) {
     if (!done) done = function () { /* empty */ }
 
     const playPromise = this.player.play()
     if (playPromise !== undefined) {
       return playPromise.then(done)
-                        .catch(err => {
+                        .catch((err: Error) => {
                           if (err.message.indexOf('The play() request was interrupted by a call to pause()') !== -1) {
                             return
                           }
@@ -426,12 +450,6 @@ class PeerTubePlugin extends Plugin {
       return this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
     }
 
-    // Don't try on iOS that does not support MediaSource
-    if (this.isIOS()) {
-      this.currentVideoFile = this.pickAverageVideoFile()
-      return this.fallbackToHttp(undefined, false)
-    }
-
     // Proxy first play
     const oldPlay = this.player.play.bind(this.player)
     this.player.play = () => {
@@ -524,6 +542,21 @@ class PeerTubePlugin extends Plugin {
     }, 1000)
   }
 
+  private runUserWatchVideo (options: UserWatching) {
+    let lastCurrentTime = 0
+
+    this.userWatchingVideoInterval = setInterval(() => {
+      const currentTime = Math.floor(this.player.currentTime())
+
+      if (currentTime - lastCurrentTime >= 1) {
+        lastCurrentTime = currentTime
+
+        this.notifyUserIsWatching(currentTime, options.url, options.authorizationHeader)
+          .catch(err => console.error('Cannot notify user is watching.', err))
+      }
+    }, this.CONSTANTS.USER_WATCHING_VIDEO_INTERVAL)
+  }
+
   private clearVideoViewInterval () {
     if (this.videoViewInterval !== undefined) {
       clearInterval(this.videoViewInterval)
@@ -537,7 +570,18 @@ class PeerTubePlugin extends Plugin {
     return fetch(this.videoViewUrl, { method: 'POST' })
   }
 
-  private fallbackToHttp (done?: Function, play = true) {
+  private notifyUserIsWatching (currentTime: number, url: string, authorizationHeader: string) {
+    const body = new URLSearchParams()
+    body.append('currentTime', currentTime.toString())
+
+    const headers = new Headers({ 'Authorization': authorizationHeader })
+
+    return fetch(url, { method: 'PUT', body, headers })
+  }
+
+  private fallbackToHttp (options: PlayOptions, done?: Function) {
+    const paused = this.player.paused()
+
     this.disableAutoResolution(true)
 
     this.flushVideoFile(this.currentVideoFile, true)
@@ -549,9 +593,15 @@ class PeerTubePlugin extends Plugin {
     const httpUrl = this.currentVideoFile.fileUrl
     this.player.src = this.savePlayerSrcFunction
     this.player.src(httpUrl)
-    if (play) this.tryToPlay()
 
-    if (done) return done()
+    return this.tryToPlay(err => {
+      if (err && done) return done(err)
+
+      if (options.seek) this.seek(options.seek)
+      if (options.forcePlay === false && paused === true) this.player.pause()
+
+      if (done) return done()
+    })
   }
 
   private handleError (err: Error | string) {
@@ -581,7 +631,7 @@ class PeerTubePlugin extends Plugin {
       this.player.options_.inactivityTimeout = saveInactivityTimeout
     }
 
-    const settingsDialog = this.player.children_.find(c => c.name_ === 'SettingsDialog')
+    const settingsDialog = this.player.children_.find((c: any) => c.name_ === 'SettingsDialog')
 
     this.player.controlBar.on('mouseenter', () => disableInactivity())
     settingsDialog.on('mouseenter', () => disableInactivity())
@@ -657,7 +707,7 @@ class PeerTubePlugin extends Plugin {
       const percent = time / this.player_.duration()
       return percent >= 1 ? 1 : percent
     }
-    SeekBar.prototype.handleMouseMove = function handleMouseMove (event) {
+    SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
       let newTime = this.calculateDistance(event) * this.player_.duration()
       if (newTime === this.player_.duration()) {
         newTime = newTime - 0.1
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index 993d5ee6b..d127230fa 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,4 +1,7 @@
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
 import * as videojs from 'video.js'
+
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { PeerTubePlugin } from './peertube-videojs-plugin'
 
@@ -11,9 +14,9 @@ declare namespace videojs {
 interface VideoJSComponentInterface {
   _player: videojs.Player
 
-  new (player: videojs.Player, options?: any)
+  new (player: videojs.Player, options?: any): any
 
-  registerComponent (name: string, obj: any)
+  registerComponent (name: string, obj: any): any
 }
 
 type VideoJSCaption = {
@@ -22,6 +25,11 @@ type VideoJSCaption = {
   src: string
 }
 
+type UserWatching = {
+  url: string,
+  authorizationHeader: string
+}
+
 type PeertubePluginOptions = {
   videoFiles: VideoFile[]
   playerElement: HTMLVideoElement
@@ -30,6 +38,8 @@ type PeertubePluginOptions = {
   startTime: number | string
   autoplay: boolean,
   videoCaptions: VideoJSCaption[]
+
+  userWatching?: UserWatching
 }
 
 // videojs typings don't have some method we need
@@ -39,5 +49,6 @@ export {
   VideoJSComponentInterface,
   PeertubePluginOptions,
   videojsUntyped,
-  VideoJSCaption
+  VideoJSCaption,
+  UserWatching
 }
diff --git a/client/src/assets/player/resolution-menu-button.ts b/client/src/assets/player/resolution-menu-button.ts
index d53a24151..a3c1108ca 100644
--- a/client/src/assets/player/resolution-menu-button.ts
+++ b/client/src/assets/player/resolution-menu-button.ts
@@ -1,4 +1,7 @@
-import * as videojs from 'video.js'
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import { Player } from 'video.js'
+
 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 import { ResolutionMenuItem } from './resolution-menu-item'
 
@@ -7,7 +10,7 @@ const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuB
 class ResolutionMenuButton extends MenuButton {
   label: HTMLElement
 
-  constructor (player: videojs.Player, options) {
+  constructor (player: Player, options: any) {
     super(player, options)
     this.player = player
 
diff --git a/client/src/assets/player/resolution-menu-item.ts b/client/src/assets/player/resolution-menu-item.ts
index 0ab0f53b5..b54fd91ef 100644
--- a/client/src/assets/player/resolution-menu-item.ts
+++ b/client/src/assets/player/resolution-menu-item.ts
@@ -1,10 +1,13 @@
-import * as videojs from 'video.js'
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import { Player } from 'video.js'
+
 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 
 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
 class ResolutionMenuItem extends MenuItem {
 
-  constructor (player: videojs.Player, options) {
+  constructor (player: Player, options: any) {
     const currentResolutionId = player.peertube().getCurrentResolutionId()
     options.selectable = true
     options.selected = options.id === currentResolutionId
@@ -18,7 +21,7 @@ class ResolutionMenuItem extends MenuItem {
     player.peertube().on('autoResolutionUpdate', () => this.updateSelection())
   }
 
-  handleClick (event) {
+  handleClick (event: any) {
     if (this.id === -1 && this.player_.peertube().isAutoResolutionForbidden()) return
 
     super.handleClick(event)
diff --git a/client/src/assets/player/settings-menu-button.ts b/client/src/assets/player/settings-menu-button.ts
index b51c52506..aa7281727 100644
--- a/client/src/assets/player/settings-menu-button.ts
+++ b/client/src/assets/player/settings-menu-button.ts
@@ -1,7 +1,10 @@
 // Author: Yanko Shterev
 // Thanks https://github.com/yshterev/videojs-settings-menu
 
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
 import * as videojs from 'video.js'
+
 import { SettingsMenuItem } from './settings-menu-item'
 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 import { toTitleCase } from './utils'
@@ -11,7 +14,7 @@ const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
 const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
 
 class SettingsButton extends Button {
-  constructor (player: videojs.Player, options) {
+  constructor (player: videojs.Player, options: any) {
     super(player, options)
 
     this.playerComponent = player
@@ -48,7 +51,7 @@ class SettingsButton extends Button {
     }
   }
 
-  onDisposeSettingsItem (event, name: string) {
+  onDisposeSettingsItem (event: any, name: string) {
     if (name === undefined) {
       let children = this.menu.children()
 
@@ -74,7 +77,7 @@ class SettingsButton extends Button {
     }
   }
 
-  onAddSettingsItem (event, data) {
+  onAddSettingsItem (event: any, data: any) {
     const [ entry, options ] = data
 
     this.addMenuItem(entry, options)
@@ -120,7 +123,7 @@ class SettingsButton extends Button {
     this.resetChildren()
   }
 
-  getComponentSize (element) {
+  getComponentSize (element: any) {
     let width: number = null
     let height: number = null
 
@@ -178,7 +181,7 @@ class SettingsButton extends Button {
     this.panelChild.addChild(this.menu)
   }
 
-  addMenuItem (entry, options) {
+  addMenuItem (entry: any, options: any) {
     const openSubMenu = function () {
       if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
         videojsUntyped.dom.removeClass(this.el_, 'open')
@@ -218,7 +221,7 @@ class SettingsButton extends Button {
 }
 
 class SettingsPanel extends Component {
-  constructor (player: videojs.Player, options) {
+  constructor (player: videojs.Player, options: any) {
     super(player, options)
   }
 
@@ -232,7 +235,7 @@ class SettingsPanel extends Component {
 }
 
 class SettingsPanelChild extends Component {
-  constructor (player: videojs.Player, options) {
+  constructor (player: videojs.Player, options: any) {
     super(player, options)
   }
 
@@ -246,7 +249,7 @@ class SettingsPanelChild extends Component {
 }
 
 class SettingsDialog extends Component {
-  constructor (player: videojs.Player, options) {
+  constructor (player: videojs.Player, options: any) {
     super(player, options)
     this.hide()
   }
diff --git a/client/src/assets/player/settings-menu-item.ts b/client/src/assets/player/settings-menu-item.ts
index 665ce6fc2..698f4627a 100644
--- a/client/src/assets/player/settings-menu-item.ts
+++ b/client/src/assets/player/settings-menu-item.ts
@@ -1,7 +1,10 @@
 // Author: Yanko Shterev
 // Thanks https://github.com/yshterev/videojs-settings-menu
 
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
 import * as videojs from 'video.js'
+
 import { toTitleCase } from './utils'
 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 
@@ -10,7 +13,7 @@ const component: VideoJSComponentInterface = videojsUntyped.getComponent('Compon
 
 class SettingsMenuItem extends MenuItem {
 
-  constructor (player: videojs.Player, options, entry: string, menuButton: VideoJSComponentInterface) {
+  constructor (player: videojs.Player, options: any, entry: string, menuButton: VideoJSComponentInterface) {
     super(player, options)
 
     this.settingsButton = menuButton
@@ -55,7 +58,7 @@ class SettingsMenuItem extends MenuItem {
     this.transitionEndHandler = this.onTransitionEnd.bind(this)
   }
 
-  onSubmenuClick (event) {
+  onSubmenuClick (event: any) {
     let target = null
 
     if (event.type === 'tap') {
@@ -150,7 +153,7 @@ class SettingsMenuItem extends MenuItem {
    *
    * @method PrefixedEvent
    */
-  PrefixedEvent (element, type, callback, action = 'addEvent') {
+  PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
     let prefix = ['webkit', 'moz', 'MS', 'o', '']
 
     for (let p = 0; p < prefix.length; p++) {
@@ -166,7 +169,7 @@ class SettingsMenuItem extends MenuItem {
     }
   }
 
-  onTransitionEnd (event) {
+  onTransitionEnd (event: any) {
     if (event.propertyName !== 'margin-right') {
       return
     }
@@ -229,8 +232,8 @@ class SettingsMenuItem extends MenuItem {
     )
   }
 
-  update (event?: Event) {
-    let target = null
+  update (event?: any) {
+    let target: HTMLElement = null
     let subMenu = this.subMenu.name()
 
     if (event && event.type === 'tap') {
diff --git a/client/src/assets/player/theater-button.ts b/client/src/assets/player/theater-button.ts
index 5cf0b6425..4f8fede3d 100644
--- a/client/src/assets/player/theater-button.ts
+++ b/client/src/assets/player/theater-button.ts
@@ -1,3 +1,7 @@
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import * as videojs from 'video.js'
+
 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 import { saveTheaterInStore, getStoredTheater } from './peertube-player-local-storage'
 
@@ -6,7 +10,7 @@ class TheaterButton extends Button {
 
   private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
 
-  constructor (player, options) {
+  constructor (player: videojs.Player, options: any) {
     super(player, options)
 
     const enabled = getStoredTheater()
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index cf4f60f55..c87287482 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -12,7 +12,7 @@ const dictionaryBytes: Array<{max: number, type: string}> = [
   { max: 1073741824, type: 'MB' },
   { max: 1.0995116e12, type: 'GB' }
 ]
-function bytes (value) {
+function bytes (value: number) {
   const format = dictionaryBytes.find(d => value < d.max) || dictionaryBytes[dictionaryBytes.length - 1]
   const calc = Math.floor(value / (format.max / 1024)).toString()
 
diff --git a/client/src/assets/player/video-renderer.ts b/client/src/assets/player/video-renderer.ts
index 2cb05a448..a3415937b 100644
--- a/client/src/assets/player/video-renderer.ts
+++ b/client/src/assets/player/video-renderer.ts
@@ -1,9 +1,9 @@
 // Thanks: https://github.com/feross/render-media
 // TODO: use render-media once https://github.com/feross/render-media/issues/32 is fixed
 
-import * as MediaElementWrapper from 'mediasource'
+const MediaElementWrapper = require('mediasource')
 import { extname } from 'path'
-import * as videostream from 'videostream'
+const videostream = require('videostream')
 
 const VIDEOSTREAM_EXTS = [
   '.m4a',
@@ -17,7 +17,7 @@ type RenderMediaOptions = {
 }
 
 function renderVideo (
-  file,
+  file: any,
   elem: HTMLVideoElement,
   opts: RenderMediaOptions,
   callback: (err: Error, renderer: any) => void
@@ -27,11 +27,11 @@ function renderVideo (
   return renderMedia(file, elem, opts, callback)
 }
 
-function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
+function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
   const extension = extname(file.name).toLowerCase()
-  let preparedElem = undefined
+  let preparedElem: any = undefined
   let currentTime = 0
-  let renderer
+  let renderer: any
 
   try {
     if (VIDEOSTREAM_EXTS.indexOf(extension) >= 0) {
@@ -45,7 +45,7 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca
 
   function useVideostream () {
     prepareElem()
-    preparedElem.addEventListener('error', function onError (err) {
+    preparedElem.addEventListener('error', function onError (err: Error) {
       preparedElem.removeEventListener('error', onError)
 
       return callback(err)
@@ -58,7 +58,7 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca
     const codecs = getCodec(file.name, useVP9)
 
     prepareElem()
-    preparedElem.addEventListener('error', function onError (err) {
+    preparedElem.addEventListener('error', function onError (err: Error) {
       preparedElem.removeEventListener('error', onError)
 
       // Try with vp9 before returning an error
@@ -102,7 +102,7 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca
   }
 }
 
-function validateFile (file) {
+function validateFile (file: any) {
   if (file == null) {
     throw new Error('file cannot be null or undefined')
   }
diff --git a/client/src/assets/player/webtorrent-info-button.ts b/client/src/assets/player/webtorrent-info-button.ts
index deef253ce..c3c1af951 100644
--- a/client/src/assets/player/webtorrent-info-button.ts
+++ b/client/src/assets/player/webtorrent-info-button.ts
@@ -65,7 +65,7 @@ class WebtorrentInfoButton extends Button {
     subDivHttp.appendChild(subDivHttpText)
     div.appendChild(subDivHttp)
 
-    this.player_.peertube().on('torrentInfo', (event, data) => {
+    this.player_.peertube().on('torrentInfo', (event: any, data: any) => {
       // We are in HTTP fallback
       if (!data) {
         subDivHttp.className = 'vjs-peertube-displayed'