Fix videojs typings

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(() => {

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) => {

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

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

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)
         }
       })

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

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' {

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

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,

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

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')

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)
   }
 

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)

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')

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)

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()

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

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

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)
   }
 

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)
   }
 

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()

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)

client/src/standalone/videos/embed.ts

@@ -15,14 +15,14 @@ import {
 import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
 import { PeerTubeEmbedApi } from './embed-api'
 import { TranslationsManager } from '../../assets/player/translations-manager'
-import { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js/dist/alt/video.core.js'
 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 
 type Translations = { [ id: string ]: string }
 
 export class PeerTubeEmbed {
   videoElement: HTMLVideoElement
-  player: VideoJsPlayer
+  player: videojs.Player
   api: PeerTubeEmbedApi = null
   autoplay: boolean
   controls: boolean
@@ -237,7 +237,7 @@ export class PeerTubeEmbed {
       })
     }
 
-    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: VideoJsPlayer) => this.player = player)
+    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: videojs.Player) => this.player = player)
     this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 
     window[ 'videojsPlayer' ] = this.player

client/tsconfig.json

@@ -26,13 +26,12 @@
     "paths": {
       "@app/*": [ "src/app/*" ],
       "@shared/*": [ "../shared/*" ],
-      "video.js": [ "node_modules/video.js/dist/alt/video.core" ],
+      "fs": [ "src/shims/noop.ts" ],
-      "fs": [ "src/shims/noop" ],
+      "http": [ "src/shims/http.ts" ],
-      "http": [ "src/shims/http" ],
+      "https": [ "src/shims/https.ts" ],
-      "https": [ "src/shims/https" ],
+      "path": [ "src/shims/path.ts" ],
-      "path": [ "src/shims/path" ],
+      "stream": [ "src/shims/noop.ts" ],
-      "stream": [ "src/shims/noop" ],
+      "crypto": [ "src/shims/noop.ts" ]
-      "crypto": [ "src/shims/noop" ]
     }
   },
   "angularCompilerOptions": {