22 files changed, 51 insertions, 52 deletions

diff --git a/client/src/assets/player/bezels/bezels-plugin.ts b/client/src/assets/player/bezels/bezels-plugin.ts
index 499177526..ad8bfa703 100644
--- a/client/src/assets/player/bezels/bezels-plugin.ts
+++ b/client/src/assets/player/bezels/bezels-plugin.ts
@@ -1,11 +1,11 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import './pause-bezel'
 
 const Plugin = videojs.getPlugin('plugin')
 
 class BezelsPlugin extends Plugin {
 
-  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player)
 
     this.player.ready(() => {
diff --git a/client/src/assets/player/bezels/pause-bezel.ts b/client/src/assets/player/bezels/pause-bezel.ts
index 98eb12099..d9ef9a390 100644
--- a/client/src/assets/player/bezels/pause-bezel.ts
+++ b/client/src/assets/player/bezels/pause-bezel.ts
@@ -1,4 +1,4 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 function getPauseBezel () {
   return `
@@ -34,7 +34,7 @@ const Component = videojs.getComponent('Component')
 class PauseBezel extends Component {
   container: HTMLDivElement
 
-  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
 
     player.on('pause', (_: any) => {
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 876ed7d9c..6937d147a 100644
--- a/client/src/assets/player/p2p-media-loader/hls-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
@@ -2,7 +2,7 @@
 // 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 videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
 
 type ErrorCounts = {
@@ -55,7 +55,7 @@ const registerSourceHandler = function (vjs: typeof videojs) {
   (vjs as any).Html5Hlsjs = Html5Hlsjs
 }
 
-function hlsjsConfigHandler (this: VideoJsPlayer, options: HlsjsConfigHandlerOptions) {
+function hlsjsConfigHandler (this: videojs.Player, options: HlsjsConfigHandlerOptions) {
   const player = this
 
   if (!options) return
@@ -88,7 +88,7 @@ class Html5Hlsjs {
 
   private readonly videoElement: HTMLVideoElement
   private readonly errorCounts: ErrorCounts = {}
-  private readonly player: VideoJsPlayer
+  private readonly player: videojs.Player
   private readonly tech: videojs.Tech
   private readonly source: videojs.Tech.SourceObject
   private readonly vjs: typeof videojs
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 ca205d899..161c92b5e 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 videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
 import { Events, Segment } from 'p2p-media-loader-core'
@@ -36,7 +36,7 @@ class P2pMediaLoaderPlugin extends Plugin {
 
   private networkInfoInterval: any
 
-  constructor (player: VideoJsPlayer, options?: P2PMediaLoaderPluginOptions) {
+  constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) {
     super(player)
 
     this.options = options
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 6d9236a9d..50701eefe 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,5 +1,5 @@
 import { VideoFile } from '../../../../shared/models/videos'
-import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import 'videojs-hotkeys'
 import 'videojs-dock'
 import 'videojs-contextmenu-ui'
@@ -99,9 +99,9 @@ export type PeertubePlayerManagerOptions = {
 
 export class PeertubePlayerManager {
   private static playerElementClassName: string
-  private static onPlayerChange: (player: VideoJsPlayer) => void
+  private static onPlayerChange: (player: videojs.Player) => void
 
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: VideoJsPlayer) => void) {
+  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
     let p2pMediaLoader: any
 
     this.onPlayerChange = onPlayerChange
@@ -121,7 +121,7 @@ export class PeertubePlayerManager {
 
     const self = this
     return new Promise(res => {
-      videojs(options.common.playerElement, videojsOptions, function (this: VideoJsPlayer) {
+      videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
         const player = this
 
         let alreadyFallback = false
@@ -171,7 +171,7 @@ export class PeertubePlayerManager {
     const videojsOptions = this.getVideojsOptions(mode, options)
 
     const self = this
-    videojs(newVideoElement, videojsOptions, function (this: VideoJsPlayer) {
+    videojs(newVideoElement, videojsOptions, function (this: videojs.Player) {
       const player = this
 
       self.addContextMenu(mode, player, options.common.embedUrl)
@@ -184,7 +184,7 @@ export class PeertubePlayerManager {
     mode: PlayerMode,
     options: PeertubePlayerManagerOptions,
     p2pMediaLoaderModule?: any
-  ): VideoJsPlayerOptions {
+  ): videojs.PlayerOptions {
     const commonOptions = options.common
 
     let autoplay = commonOptions.autoplay
@@ -417,7 +417,7 @@ export class PeertubePlayerManager {
     return children
   }
 
-  private static addContextMenu (mode: PlayerMode, player: VideoJsPlayer, videoEmbedUrl: string) {
+  private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string) {
     const content = [
       {
         label: player.localize('Copy the video URL'),
@@ -427,7 +427,7 @@ export class PeertubePlayerManager {
       },
       {
         label: player.localize('Copy the video URL at the current time'),
-        listener: function (this: VideoJsPlayer) {
+        listener: function (this: videojs.Player) {
           copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
         }
       },
@@ -442,7 +442,7 @@ export class PeertubePlayerManager {
     if (mode === 'webtorrent') {
       content.push({
         label: player.localize('Copy magnet URI'),
-        listener: function (this: VideoJsPlayer) {
+        listener: function (this: videojs.Player) {
           copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
         }
       })
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 19d104676..afd8d678b 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -1,4 +1,4 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core'
 import './videojs-components/settings-menu-button'
 import {
   PeerTubePluginOptions,
@@ -36,7 +36,7 @@ class PeerTubePlugin extends Plugin {
   private mouseInControlBar = false
   private readonly savedInactivityTimeout: number
 
-  constructor (player: VideoJsPlayer, options?: PeerTubePluginOptions) {
+  constructor (player: videojs.Player, options?: PeerTubePluginOptions) {
     super(player)
 
     this.videoViewUrl = options.videoViewUrl
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index a4e4c580c..9616dd326 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -4,7 +4,7 @@ import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin
 import { PlayerMode } from './peertube-player-manager'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { VideoFile } from '@shared/models'
-import videojs from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { Config, Level } from 'hls.js'
 
 declare module 'video.js' {
diff --git a/client/src/assets/player/upnext/end-card.ts b/client/src/assets/player/upnext/end-card.ts
index d121a83a9..c39a9c913 100644
--- a/client/src/assets/player/upnext/end-card.ts
+++ b/client/src/assets/player/upnext/end-card.ts
@@ -1,4 +1,4 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 function getMainTemplate (options: any) {
   return `
@@ -50,7 +50,7 @@ class EndCard extends Component {
   suspendedMessage: HTMLElement
   nextButton: HTMLElement
 
-  constructor (player: VideoJsPlayer, options: EndCardOptions) {
+  constructor (player: videojs.Player, options: EndCardOptions) {
     super(player, options)
 
     this.totalTicks = this.options_.timeout / this.interval
diff --git a/client/src/assets/player/upnext/upnext-plugin.ts b/client/src/assets/player/upnext/upnext-plugin.ts
index 6512fec2c..ac7699e9a 100644
--- a/client/src/assets/player/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/upnext/upnext-plugin.ts
@@ -1,11 +1,11 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { EndCardOptions } from './end-card'
 
 const Plugin = videojs.getPlugin('plugin')
 
 class UpNextPlugin extends Plugin {
 
-  constructor (player: VideoJsPlayer, options: Partial<EndCardOptions> = {}) {
+  constructor (player: videojs.Player, options: Partial<EndCardOptions> = {}) {
     const settings = {
       next: options.next,
       getTitle: options.getTitle,
diff --git a/client/src/assets/player/videojs-components/next-video-button.ts b/client/src/assets/player/videojs-components/next-video-button.ts
index bdb245dcc..c97ecdda6 100644
--- a/client/src/assets/player/videojs-components/next-video-button.ts
+++ b/client/src/assets/player/videojs-components/next-video-button.ts
@@ -1,4 +1,4 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 const Button = videojs.getComponent('Button')
 
@@ -9,7 +9,7 @@ export interface NextVideoButtonOptions extends videojs.ComponentOptions {
 class NextVideoButton extends Button {
   private readonly nextVideoButtonOptions: NextVideoButtonOptions
 
-  constructor (player: VideoJsPlayer, options?: NextVideoButtonOptions) {
+  constructor (player: videojs.Player, options?: NextVideoButtonOptions) {
     super(player, options)
 
     this.nextVideoButtonOptions = options
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 db6806fed..e340337ed 100644
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -1,5 +1,5 @@
 import { PlayerNetworkInfo } from '../peertube-videojs-typings'
-import videojs from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { bytes } from '../utils'
 
 const Button = videojs.getComponent('Button')
diff --git a/client/src/assets/player/videojs-components/peertube-link-button.ts b/client/src/assets/player/videojs-components/peertube-link-button.ts
index 0db9762a5..4151758d4 100644
--- a/client/src/assets/player/videojs-components/peertube-link-button.ts
+++ b/client/src/assets/player/videojs-components/peertube-link-button.ts
@@ -1,10 +1,10 @@
 import { buildVideoLink } from '../utils'
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 const Button = videojs.getComponent('Button')
 class PeerTubeLinkButton extends Button {
 
-  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
   }
 
diff --git a/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts b/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
index 8168e8f2d..395720c53 100644
--- a/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
+++ b/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
@@ -1,10 +1,10 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 const Component = videojs.getComponent('Component')
 
 class PeerTubeLoadProgressBar extends Component {
 
-  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
 
     this.on(player, 'progress', this.update)
diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts
index 0fa6272e7..d49ca0230 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-button.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts
@@ -1,4 +1,4 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 import { LoadedQualityData } from '../peertube-videojs-typings'
 import { ResolutionMenuItem } from './resolution-menu-item'
@@ -8,7 +8,7 @@ const MenuButton = videojs.getComponent('MenuButton')
 class ResolutionMenuButton extends MenuButton {
   labelEl_: HTMLElement
 
-  constructor (player: VideoJsPlayer, options?: videojs.MenuButtonOptions) {
+  constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) {
     super(player, options)
 
     this.controlText('Quality')
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 b039c4572..cb0d219ad 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-item.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts
@@ -1,4 +1,4 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings'
 
 const MenuItem = videojs.getComponent('MenuItem')
@@ -19,7 +19,7 @@ class ResolutionMenuItem extends MenuItem {
   private autoResolutionPossible: boolean
   private currentResolutionLabel: string
 
-  constructor (player: VideoJsPlayer, options?: ResolutionMenuItemOptions) {
+  constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
     options.selectable = true
 
     super(player, options)
diff --git a/client/src/assets/player/videojs-components/settings-dialog.ts b/client/src/assets/player/videojs-components/settings-dialog.ts
index dd0b1e472..8fd5ad96c 100644
--- a/client/src/assets/player/videojs-components/settings-dialog.ts
+++ b/client/src/assets/player/videojs-components/settings-dialog.ts
@@ -1,9 +1,9 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 const Component = videojs.getComponent('Component')
 
 class SettingsDialog extends Component {
-  constructor (player: VideoJsPlayer) {
+  constructor (player: videojs.Player) {
     super(player)
 
     this.hide()
diff --git a/client/src/assets/player/videojs-components/settings-menu-button.ts b/client/src/assets/player/videojs-components/settings-menu-button.ts
index eae628e7d..749128bdc 100644
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -1,7 +1,7 @@
 // Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 import { SettingsMenuItem } from './settings-menu-item'
 import { toTitleCase } from '../utils'
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 import { SettingsDialog } from './settings-dialog'
 import { SettingsPanel } from './settings-panel'
@@ -32,7 +32,7 @@ class SettingsButton extends Button {
 
   private settingsButtonOptions: SettingsButtonOptions
 
-  constructor (player: VideoJsPlayer, options?: SettingsButtonOptions) {
+  constructor (player: videojs.Player, options?: SettingsButtonOptions) {
     super(player, options)
 
     this.settingsButtonOptions = options
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 f5671f49d..8d364591b 100644
--- a/client/src/assets/player/videojs-components/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -1,6 +1,6 @@
 // Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 import { toTitleCase } from '../utils'
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { SettingsButton } from './settings-menu-button'
 import { SettingsDialog } from './settings-dialog'
 import { SettingsPanel } from './settings-panel'
@@ -32,7 +32,7 @@ class SettingsMenuItem extends MenuItem {
   settingsSubMenuValueEl_: HTMLElement
   settingsSubMenuEl_: HTMLElement
 
-  constructor (player: VideoJsPlayer, options?: SettingsMenuItemOptions) {
+  constructor (player: videojs.Player, options?: SettingsMenuItemOptions) {
     super(player, options)
 
     this.settingsButton = options.menuButton
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 d12e8218a..6dee6d7df 100644
--- a/client/src/assets/player/videojs-components/settings-panel-child.ts
+++ b/client/src/assets/player/videojs-components/settings-panel-child.ts
@@ -1,10 +1,10 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 const Component = videojs.getComponent('Component')
 
 class SettingsPanelChild extends Component {
 
-  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
   }
 
diff --git a/client/src/assets/player/videojs-components/settings-panel.ts b/client/src/assets/player/videojs-components/settings-panel.ts
index 2090abf45..833ee2f21 100644
--- a/client/src/assets/player/videojs-components/settings-panel.ts
+++ b/client/src/assets/player/videojs-components/settings-panel.ts
@@ -1,10 +1,10 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 
 const Component = videojs.getComponent('Component')
 
 class SettingsPanel extends Component {
 
-  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
   }
 
diff --git a/client/src/assets/player/videojs-components/theater-button.ts b/client/src/assets/player/videojs-components/theater-button.ts
index 1c8c9f154..41875af71 100644
--- a/client/src/assets/player/videojs-components/theater-button.ts
+++ b/client/src/assets/player/videojs-components/theater-button.ts
@@ -1,4 +1,4 @@
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage'
 
 const Button = videojs.getComponent('Button')
@@ -6,7 +6,7 @@ class TheaterButton extends Button {
 
   private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
 
-  constructor (player: VideoJsPlayer, options: videojs.ComponentOptions) {
+  constructor (player: videojs.Player, options: videojs.ComponentOptions) {
     super(player, options)
 
     const enabled = getStoredTheater()
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index bf6b0a718..26fb5a245 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -1,5 +1,4 @@
-import videojs, { VideoJsPlayer } from 'video.js'
-
+import videojs from 'video.js/dist/alt/video.core.js'
 import * as WebTorrent from 'webtorrent'
 import { renderVideo } from './video-renderer'
 import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
@@ -31,7 +30,7 @@ class WebTorrentPlugin extends Plugin {
 
   private readonly autoplay: boolean = false
   private readonly startTime: number = 0
-  private readonly savePlayerSrcFunction: VideoJsPlayer['src']
+  private readonly savePlayerSrcFunction: videojs.Player['src']
   private readonly videoDuration: number
   private readonly CONSTANTS = {
     INFO_SCHEDULER: 1000, // Don't change this
@@ -69,7 +68,7 @@ class WebTorrentPlugin extends Plugin {
 
   private downloadSpeeds: number[] = []
 
-  constructor (player: VideoJsPlayer, options?: WebtorrentPluginOptions) {
+  constructor (player: videojs.Player, options?: WebtorrentPluginOptions) {
     super(player)
 
     this.startTime = timeToInt(options.startTime)