Fix player with useDefineForClassFields: true

See https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier

TLDR: everything set in super(...) is overridden by our local
declaration
So prefer to initialize attributes in constructor + use declare to not
emit declarations

client/src/assets/player/shared/bezels/pause-bezel.ts

@@ -33,14 +33,14 @@ function getPlayBezel () {
 
 const Component = videojs.getComponent('Component')
 export class PauseBezel extends Component {
-  container: HTMLDivElement
+  declare container: HTMLDivElement
 
-  private firstPlayDone = false
+  declare private firstPlayDone: boolean
-  private paused = false
+  declare private paused: boolean
 
-  private playerPauseHandler: () => void
+  declare private playerPauseHandler: () => void
-  private playerPlayHandler: () => void
+  declare private playerPlayHandler: () => void
-  private videoChangeHandler: () => void
+  declare private videoChangeHandler: () => void
 
   constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
@@ -48,6 +48,9 @@ export class PauseBezel extends Component {
     // Hide bezels on mobile since we already have our mobile overlay
     if (isMobile()) return
 
+    this.firstPlayDone = false
+    this.paused = false
+
     this.playerPauseHandler = () => {
       if (player.seeking()) return
 

client/src/assets/player/shared/context-menu/context-menu-item.ts

@@ -4,7 +4,7 @@ import { ContextMenuItemOptions } from '../../types'
 const MenuItem = videojs.getComponent('MenuItem')
 
 class ContextMenuItem extends MenuItem {
-  options_: ContextMenuItemOptions
+  declare options_: ContextMenuItemOptions
 
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor (player: videojs.Player, options: ContextMenuItemOptions) {

client/src/assets/player/shared/context-menu/context-menu-plugin.ts

@@ -6,11 +6,10 @@ import { getPointerPosition } from './util'
 const Plugin = videojs.getPlugin('plugin')
 
 class ContextMenuPlugin extends Plugin {
-  options_: ContextMenuPluginOptions & videojs.MenuOptions
+  declare options_: ContextMenuPluginOptions & videojs.MenuOptions
+  declare menu: ContextMenu
 
-  menu: ContextMenu
+  declare private onContextMenuBind: (e: TouchEvent & MouseEvent) => void
-
-  private onContextMenuBind: (e: TouchEvent & MouseEvent) => void
 
   constructor (player: videojs.Player, options: ContextMenuPluginOptions & videojs.MenuOptions) {
     super(player, options)

client/src/assets/player/shared/context-menu/context-menu.ts

@@ -7,7 +7,7 @@ const Menu = videojs.getComponent('Menu')
 type ContextMenuOptions = ContextMenuPluginOptions & { position: { left: number, top: number } }
 
 class ContextMenu extends Menu {
-  options_: ContextMenuOptions & videojs.MenuOptions
+  declare options_: ContextMenuOptions & videojs.MenuOptions
 
   constructor (player: videojs.Player, options: ContextMenuOptions) {
     super(player, { ...options, menuButton: undefined })

client/src/assets/player/shared/control-bar/chapters-plugin.ts

@@ -1,17 +1,18 @@
+import { VideoChapter } from '@peertube/peertube-models'
 import videojs from 'video.js'
 import { ChaptersOptions } from '../../types'
-import { VideoChapter } from '@peertube/peertube-models'
 import { ProgressBarMarkerComponent } from './progress-bar-marker-component'
 
 const Plugin = videojs.getPlugin('plugin')
 
 class ChaptersPlugin extends Plugin {
-  private chapters: VideoChapter[] = []
+  declare private chapters: VideoChapter[]
-  private markers: ProgressBarMarkerComponent[] = []
+  declare private markers: ProgressBarMarkerComponent[]
 
   constructor (player: videojs.Player, options: videojs.ComponentOptions & ChaptersOptions) {
     super(player, options)
 
+    this.markers = []
     this.chapters = options.chapters
 
     this.player.ready(() => {

client/src/assets/player/shared/control-bar/next-previous-video-button.ts

@@ -4,7 +4,7 @@ import { NextPreviousVideoButtonOptions } from '../../types'
 const Button = videojs.getComponent('Button')
 
 class NextPreviousVideoButton extends Button {
-  options_: NextPreviousVideoButtonOptions & videojs.ComponentOptions
+  declare options_: NextPreviousVideoButtonOptions & videojs.ComponentOptions
 
   constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions & videojs.ComponentOptions) {
     super(player, options)

client/src/assets/player/shared/control-bar/p2p-info-button.ts

@@ -4,7 +4,6 @@ import { bytes } from '../common'
 
 const Button = videojs.getComponent('Button')
 class P2PInfoButton extends Button {
-  el_: HTMLElement
 
   createEl () {
     const div = videojs.dom.createEl('div', { className: 'vjs-peertube' })

client/src/assets/player/shared/control-bar/peertube-link-button.ts

@@ -5,10 +5,10 @@ import { PeerTubeLinkButtonOptions } from '../../types'
 const Component = videojs.getComponent('Component')
 
 class PeerTubeLinkButton extends Component {
-  private mouseEnterHandler: () => void
+  declare private mouseEnterHandler: () => void
-  private clickHandler: () => void
+  declare private clickHandler: () => void
 
-  options_: PeerTubeLinkButtonOptions & videojs.ComponentOptions
+  declare options_: PeerTubeLinkButtonOptions & videojs.ComponentOptions
 
   constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions & videojs.ComponentOptions) {
     super(player, options)

client/src/assets/player/shared/control-bar/peertube-live-display.ts

@@ -4,9 +4,9 @@ import { PeerTubeLinkButtonOptions } from '../../types'
 const ClickableComponent = videojs.getComponent('ClickableComponent')
 
 class PeerTubeLiveDisplay extends ClickableComponent {
-  private interval: any
+  declare private interval: any
 
-  private contentEl_: any
+  declare private contentEl_: any
 
   constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
     super(player, options as any)

client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts

@@ -4,7 +4,7 @@ import { ProgressBarMarkerComponentOptions } from '../../types'
 const Component = videojs.getComponent('Component')
 
 export class ProgressBarMarkerComponent extends Component {
-  options_: ProgressBarMarkerComponentOptions & videojs.ComponentOptions
+  declare options_: ProgressBarMarkerComponentOptions & videojs.ComponentOptions
 
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor (player: videojs.Player, options?: ProgressBarMarkerComponentOptions & videojs.ComponentOptions) {

client/src/assets/player/shared/control-bar/storyboard-plugin.ts

@@ -7,24 +7,24 @@ import { StoryboardOptions } from '../../types'
 const Plugin = videojs.getPlugin('plugin')
 
 class StoryboardPlugin extends Plugin {
-  private url: string
+  declare private url: string
-  private height: number
+  declare private height: number
-  private width: number
+  declare private width: number
-  private interval: number
+  declare private interval: number
 
-  private cached: boolean
+  declare private cached: boolean
 
-  private mouseTimeTooltip: videojs.MouseTimeDisplay
+  declare private mouseTimeTooltip: videojs.MouseTimeDisplay
-  private seekBar: { el(): HTMLElement, mouseTimeDisplay: any, playProgressBar: any }
+  declare private seekBar: { el(): HTMLElement, mouseTimeDisplay: any, playProgressBar: any }
-  private progress: any
+  declare private progress: any
 
-  private spritePlaceholder: HTMLElement
+  declare private spritePlaceholder: HTMLElement
 
-  private readonly sprites: { [id: string]: HTMLImageElement } = {}
+  declare private readonly sprites: { [id: string]: HTMLImageElement }
 
-  private readonly boundedHijackMouseTooltip: typeof StoryboardPlugin.prototype.hijackMouseTooltip
+  declare private readonly boundedHijackMouseTooltip: typeof StoryboardPlugin.prototype.hijackMouseTooltip
 
-  private onReadyOrLoadstartHandler: (event: { type: 'ready' }) => void
+  declare private onReadyOrLoadstartHandler: (event: { type: 'ready' }) => void
 
   constructor (player: videojs.Player, options: videojs.ComponentOptions & StoryboardOptions) {
     super(player, options)
@@ -34,6 +34,8 @@ class StoryboardPlugin extends Plugin {
     this.width = options.width
     this.interval = options.interval
 
+    this.sprites = {}
+
     this.boundedHijackMouseTooltip = this.hijackMouseTooltip.bind(this)
 
     this.init()

client/src/assets/player/shared/control-bar/theater-button.ts

@@ -7,7 +7,7 @@ class TheaterButton extends Button {
 
   private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
 
-  private theaterButtonOptions: TheaterButtonOptions
+  declare private theaterButtonOptions: TheaterButtonOptions
 
   constructor (player: videojs.Player, options: TheaterButtonOptions & videojs.ComponentOptions) {
     super(player, options)

client/src/assets/player/shared/control-bar/time-tooltip.ts

@@ -4,8 +4,8 @@ import videojs, { VideoJsPlayer } from 'video.js'
 const TimeToolTip = videojs.getComponent('TimeTooltip') as any // FIXME: typings don't have write method
 
 class TimeTooltip extends TimeToolTip {
-  private currentTimecode: string
+  declare private currentTimecode: string
-  private currentChapterTitle: string
+  declare private currentChapterTitle: string
 
   write (timecode: string) {
     const player: VideoJsPlayer = this.player()

client/src/assets/player/shared/dock/peertube-dock-component.ts

@@ -9,8 +9,7 @@ export type PeerTubeDockComponentOptions = {
 }
 
 class PeerTubeDockComponent extends Component {
-
+  declare options_: videojs.ComponentOptions & PeerTubeDockComponentOptions
-  options_: videojs.ComponentOptions & PeerTubeDockComponentOptions
 
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor (player: videojs.Player, options: videojs.ComponentOptions & PeerTubeDockComponentOptions) {

client/src/assets/player/shared/dock/peertube-dock-plugin.ts

@@ -10,7 +10,7 @@ export type PeerTubeDockPluginOptions = {
 }
 
 class PeerTubeDockPlugin extends Plugin {
-  private dockComponent: PeerTubeDockComponent
+  declare private dockComponent: PeerTubeDockComponent
 
   constructor (player: videojs.Player, options: videojs.PlayerOptions & PeerTubeDockPluginOptions) {
     super(player, options)

client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts

@@ -12,11 +12,11 @@ class PeerTubeHotkeysPlugin extends Plugin {
   private static readonly VOLUME_STEP = 0.1
   private static readonly SEEK_STEP = 5
 
-  private readonly handleKeyFunction: (event: KeyboardEvent) => void
+  declare private readonly handleKeyFunction: (event: KeyboardEvent) => void
 
-  private readonly handlers: KeyHandler[]
+  declare private readonly handlers: KeyHandler[]
 
-  private readonly isLive: boolean
+  declare private readonly isLive: boolean
 
   constructor (player: videojs.Player, options: videojs.PlayerOptions & HotkeysOptions) {
     super(player, options)

client/src/assets/player/shared/metrics/metrics-plugin.ts

@@ -9,29 +9,40 @@ const debugLogger = debug('peertube:player:metrics')
 const Plugin = videojs.getPlugin('plugin')
 
 class MetricsPlugin extends Plugin {
-  options_: MetricsPluginOptions
+  declare options_: MetricsPluginOptions
 
-  private downloadedBytesP2P = 0
+  declare private downloadedBytesP2P: number
-  private downloadedBytesHTTP = 0
+  declare private downloadedBytesHTTP: number
-  private uploadedBytesP2P = 0
+  declare private uploadedBytesP2P: number
 
-  private resolutionChanges = 0
+  declare private resolutionChanges: number
-  private errors = 0
+  declare private errors: number
 
-  private bufferStalled = 0
+  declare private bufferStalled: number
 
-  private p2pEnabled: boolean
+  declare private p2pEnabled: boolean
-  private p2pPeers = 0
+  declare private p2pPeers: number
 
-  private lastPlayerNetworkInfo: PlayerNetworkInfo
+  declare private lastPlayerNetworkInfo: PlayerNetworkInfo
 
-  private metricsInterval: any
+  declare private metricsInterval: any
 
   constructor (player: videojs.Player, options: MetricsPluginOptions) {
     super(player)
 
     this.options_ = options
 
+    this.downloadedBytesP2P = 0
+    this.downloadedBytesHTTP = 0
+    this.uploadedBytesP2P = 0
+
+    this.resolutionChanges = 0
+    this.errors = 0
+
+    this.bufferStalled = 0
+
+    this.p2pPeers = 0
+
     this.trackBytes()
     this.trackResolutionChange()
     this.trackErrors()

client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts

@@ -2,14 +2,14 @@ import videojs from 'video.js'
 
 const Component = videojs.getComponent('Component')
 class PeerTubeMobileButtons extends Component {
-  private mainButton: HTMLDivElement
+  declare private mainButton: HTMLDivElement
 
-  private rewind: Element
+  declare private rewind: Element
-  private forward: Element
+  declare private forward: Element
-  private rewindText: Element
+  declare private rewindText: Element
-  private forwardText: Element
+  declare private forwardText: Element
 
-  private touchStartHandler: (e: TouchEvent) => void
+  declare private touchStartHandler: (e: TouchEvent) => void
 
   createEl () {
     const container = super.createEl('div', { className: 'vjs-mobile-buttons-overlay' }) as HTMLDivElement

client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts

@@ -11,28 +11,30 @@ class PeerTubeMobilePlugin extends Plugin {
   private static readonly DOUBLE_TAP_DELAY_MS = 250
   private static readonly SET_CURRENT_TIME_DELAY = 1000
 
-  private peerTubeMobileButtons: PeerTubeMobileButtons
+  declare private peerTubeMobileButtons: PeerTubeMobileButtons
 
-  private seekAmount = 0
+  declare private seekAmount: number
 
-  private lastTapEvent: TouchEvent
+  declare private lastTapEvent: TouchEvent
-  private tapTimeout: ReturnType<typeof setTimeout>
+  declare private tapTimeout: ReturnType<typeof setTimeout>
-  private newActiveState: boolean
+  declare private newActiveState: boolean
 
-  private setCurrentTimeTimeout: ReturnType<typeof setTimeout>
+  declare private setCurrentTimeTimeout: ReturnType<typeof setTimeout>
 
-  private onPlayHandler: () => void
+  declare private onPlayHandler: () => void
-  private onFullScreenChangeHandler: () => void
+  declare private onFullScreenChangeHandler: () => void
-  private onTouchStartHandler: (event: TouchEvent) => void
+  declare private onTouchStartHandler: (event: TouchEvent) => void
-  private onMobileButtonTouchStartHandler: (event: TouchEvent) => void
+  declare private onMobileButtonTouchStartHandler: (event: TouchEvent) => void
-  private sliderActiveHandler: () => void
+  declare private sliderActiveHandler: () => void
-  private sliderInactiveHandler: () => void
+  declare private sliderInactiveHandler: () => void
 
-  private seekBar: videojs.Component
+  declare private seekBar: videojs.Component
 
   constructor (player: videojs.Player, options: videojs.PlayerOptions) {
     super(player, options)
 
+    this.seekAmount = 0
+
     this.peerTubeMobileButtons = player.addChild('PeerTubeMobileButtons', { reportTouchActivity: false }) as PeerTubeMobileButtons
 
     if (videojs.browser.IS_ANDROID && screen.orientation) {

client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts

@@ -12,32 +12,46 @@ const debugLogger = debug('peertube:player:p2p-media-loader')
 
 const Plugin = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
-  private readonly options: P2PMediaLoaderPluginOptions
+  declare private readonly options: P2PMediaLoaderPluginOptions
 
-  private hlsjs: Hlsjs
+  declare private hlsjs: Hlsjs
-  private p2pEngine: Engine
+  declare private p2pEngine: Engine
-  private statsP2PBytes = {
+  declare private statsP2PBytes: {
-    pendingDownload: [] as number[],
+    pendingDownload: number[]
-    pendingUpload: [] as number[],
+    pendingUpload: number[]
-    peersWithWebSeed: 0,
+    peersWithWebSeed: number
-    peersP2POnly: 0,
+    peersP2POnly: number
-    totalDownload: 0,
+    totalDownload: number
-    totalUpload: 0
+    totalUpload: number
   }
-  private statsHTTPBytes = {
+  declare private statsHTTPBytes: {
-    pendingDownload: [] as number[],
+    pendingDownload: number[]
-    totalDownload: 0
+    totalDownload: number
   }
 
-  private networkInfoInterval: any
+  declare private networkInfoInterval: any
 
-  private liveEnded = false
+  declare private liveEnded: boolean
 
   constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) {
     super(player)
 
     this.options = options
 
+    this.statsP2PBytes = {
+      pendingDownload: [] as number[],
+      pendingUpload: [] as number[],
+      peersWithWebSeed: 0,
+      peersP2POnly: 0,
+      totalDownload: 0,
+      totalUpload: 0
+    }
+    this.statsHTTPBytes = {
+      pendingDownload: [] as number[],
+      totalDownload: 0
+    }
+    this.liveEnded = false
+
     // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
     if (!(videojs as any).Html5Hlsjs) {
       if (player.canPlayType('application/vnd.apple.mpegurl')) {

client/src/assets/player/shared/peertube/peertube-plugin.ts

@@ -23,36 +23,41 @@ const debugLogger = debug('peertube:player:peertube')
 const Plugin = videojs.getPlugin('plugin')
 
 class PeerTubePlugin extends Plugin {
-  private readonly videoViewUrl: () => string
+  declare private readonly videoViewUrl: () => string
-  private readonly authorizationHeader: () => string
+  declare private readonly authorizationHeader: () => string
-  private readonly initialInactivityTimeout: number
+  declare private readonly initialInactivityTimeout: number
 
-  private readonly hasAutoplay: () => videojs.Autoplay
+  declare private readonly hasAutoplay: () => videojs.Autoplay
 
-  private currentSubtitle: string
+  declare private currentSubtitle: string
-  private currentPlaybackRate: number
+  declare private currentPlaybackRate: number
 
-  private videoViewInterval: any
+  declare private videoViewInterval: any
 
-  private menuOpened = false
+  declare private menuOpened: boolean
-  private mouseInControlBar = false
+  declare private mouseInControlBar: boolean
-  private mouseInSettings = false
+  declare private mouseInSettings: boolean
 
-  private errorModal: videojs.ModalDialog
+  declare private errorModal: videojs.ModalDialog
 
-  private hasInitialSeek = false
+  declare private hasInitialSeek: boolean
 
-  private videoViewOnPlayHandler: (...args: any[]) => void
+  declare private videoViewOnPlayHandler: (...args: any[]) => void
-  private videoViewOnSeekedHandler: (...args: any[]) => void
+  declare private videoViewOnSeekedHandler: (...args: any[]) => void
-  private videoViewOnEndedHandler: (...args: any[]) => void
+  declare private videoViewOnEndedHandler: (...args: any[]) => void
 
-  private stopTimeHandler: (...args: any[]) => void
+  declare private stopTimeHandler: (...args: any[]) => void
 
-  private resizeObserver: ResizeObserver
+  declare private resizeObserver: ResizeObserver
 
   constructor (player: videojs.Player, private readonly options: PeerTubePluginOptions) {
     super(player)
 
+    this.menuOpened = false
+    this.mouseInControlBar = false
+    this.mouseInSettings = false
+    this.hasInitialSeek = false
+
     this.videoViewUrl = options.videoViewUrl
     this.authorizationHeader = options.authorizationHeader
     this.hasAutoplay = options.hasAutoplay

client/src/assets/player/shared/playlist/playlist-button.ts

@@ -5,10 +5,10 @@ import { PlaylistMenu } from './playlist-menu'
 const ClickableComponent = videojs.getComponent('ClickableComponent')
 
 class PlaylistButton extends ClickableComponent {
-  private playlistInfoElement: HTMLElement
+  declare private playlistInfoElement: HTMLElement
-  private wrapper: HTMLElement
+  declare private wrapper: HTMLElement
 
-  options_: PlaylistPluginOptions & { playlistMenu: PlaylistMenu } & videojs.ClickableComponentOptions
+  declare options_: PlaylistPluginOptions & { playlistMenu: PlaylistMenu } & videojs.ClickableComponentOptions
 
   // FIXME: eslint -> it's not a useless constructor, we need to extend constructor options typings
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor

client/src/assets/player/shared/playlist/playlist-menu-item.ts

@@ -6,12 +6,12 @@ import { PlaylistItemOptions } from '../../types'
 const Component = videojs.getComponent('Component')
 
 class PlaylistMenuItem extends Component {
-  private element: VideoPlaylistElement
+  declare private element: VideoPlaylistElement
 
-  private clickHandler: () => void
+  declare private clickHandler: () => void
-  private keyDownHandler: (event: KeyboardEvent) => void
+  declare private keyDownHandler: (event: KeyboardEvent) => void
 
-  options_: videojs.ComponentOptions & PlaylistItemOptions
+  declare options_: videojs.ComponentOptions & PlaylistItemOptions
 
   constructor (player: videojs.Player, options?: PlaylistItemOptions) {
     super(player, options as any)

client/src/assets/player/shared/playlist/playlist-menu.ts

@@ -6,19 +6,21 @@ import { PlaylistMenuItem } from './playlist-menu-item'
 const Component = videojs.getComponent('Component')
 
 class PlaylistMenu extends Component {
-  private menuItems: PlaylistMenuItem[] = []
+  declare private menuItems: PlaylistMenuItem[]
 
-  private readonly userInactiveHandler: () => void
+  declare private readonly userInactiveHandler: () => void
-  private readonly onMouseEnter: () => void
+  declare private readonly onMouseEnter: () => void
-  private readonly onMouseLeave: () => void
+  declare private readonly onMouseLeave: () => void
 
-  private readonly onPlayerCick: (event: Event) => void
+  declare private readonly onPlayerCick: (event: Event) => void
 
-  options_: PlaylistPluginOptions & videojs.ComponentOptions
+  declare options_: PlaylistPluginOptions & videojs.ComponentOptions
 
   constructor (player: videojs.Player, options?: PlaylistPluginOptions & videojs.ComponentOptions) {
     super(player, options)
 
+    this.menuItems = []
+
     this.userInactiveHandler = () => {
       this.close()
     }

client/src/assets/player/shared/playlist/playlist-plugin.ts

@@ -6,8 +6,8 @@ import { PlaylistMenu } from './playlist-menu'
 const Plugin = videojs.getPlugin('plugin')
 
 class PlaylistPlugin extends Plugin {
-  private playlistMenu: PlaylistMenu
+  declare private playlistMenu: PlaylistMenu
-  private playlistButton: PlaylistButton
+  declare private playlistButton: PlaylistButton
 
   constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
     super(player, options)

client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts

@@ -4,14 +4,16 @@ import { PeerTubeResolution } from '../../types'
 const Plugin = videojs.getPlugin('plugin')
 
 class PeerTubeResolutionsPlugin extends Plugin {
-  private currentSelection: PeerTubeResolution
+  declare private currentSelection: PeerTubeResolution
-  private resolutions: PeerTubeResolution[] = []
+  declare private resolutions: PeerTubeResolution[]
 
-  private autoResolutionChosenId: number
+  declare private autoResolutionChosenId: number
 
   constructor (player: videojs.Player) {
     super(player)
 
+    this.resolutions = []
+
     player.on('video-change', () => {
       this.resolutions = []
 

client/src/assets/player/shared/settings/menu-focus-fixed.ts

@@ -6,7 +6,7 @@ const Component = videojs.getComponent('Component')
 // Default menu doesn't check if the child is disabled/hidden
 
 class MenuFocusFixed extends Menu {
-  private focusedChild_: number
+  declare private focusedChild_: number
 
   handleKeyDown (event: KeyboardEvent) {
     if (event.key === 'Escape') {

client/src/assets/player/shared/settings/resolution-menu-button.ts

@@ -4,7 +4,7 @@ import { ResolutionMenuItem } from './resolution-menu-item'
 const Menu = videojs.getComponent('Menu')
 const MenuButton = videojs.getComponent('MenuButton')
 class ResolutionMenuButton extends MenuButton {
-  labelEl_: HTMLElement
+  declare labelEl_: HTMLElement
 
   constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) {
     super(player, options)

client/src/assets/player/shared/settings/resolution-menu-item.ts

@@ -7,12 +7,12 @@ export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions {
 }
 
 class ResolutionMenuItem extends MenuItem {
-  readonly resolutionId: number
+  declare readonly resolutionId: number
-  private readonly label: string
+  declare private readonly label: string
 
-  private autoResolutionChosen: string
+  declare private autoResolutionChosen: string
 
-  private updateSelectionHandler: () => void
+  declare private updateSelectionHandler: () => void
 
   constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
     super(player, { ...options, selectable: true })

client/src/assets/player/shared/settings/settings-dialog.ts

@@ -3,6 +3,7 @@ import videojs from 'video.js'
 const Component = videojs.getComponent('Component')
 
 class SettingsDialog extends Component {
+
   constructor (player: videojs.Player) {
     super(player)
 

client/src/assets/player/shared/settings/settings-menu-button.ts

@@ -17,18 +17,18 @@ export interface SettingsButtonOptions extends videojs.ComponentOptions {
 }
 
 class SettingsButton extends Button {
-  dialog: SettingsDialog
+  declare dialog: SettingsDialog
-  dialogEl: HTMLElement
+  declare dialogEl: HTMLElement
-  menu: MenuFocusFixed
+  declare menu: MenuFocusFixed
-  panel: SettingsPanel
+  declare panel: SettingsPanel
-  panelChild: SettingsPanelChild
+  declare panelChild: SettingsPanelChild
 
-  addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
+  declare addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
-  disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
+  declare disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
-  documentClickHandler: typeof SettingsButton.prototype.onDocumentClick
+  declare documentClickHandler: typeof SettingsButton.prototype.onDocumentClick
-  userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
+  declare userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
 
-  private settingsButtonOptions: SettingsButtonOptions
+  declare private settingsButtonOptions: SettingsButtonOptions
 
   constructor (player: videojs.Player, options?: SettingsButtonOptions) {
     super(player, options)

client/src/assets/player/shared/settings/settings-menu-item.ts

@@ -23,22 +23,22 @@ export interface SettingsMenuItemOptions extends videojs.MenuItemOptions {
 }
 
 class SettingsMenuItem extends MenuItem {
-  settingsButton: SettingsButton
+  declare settingsButton: SettingsButton
-  dialog: SettingsDialog
+  declare dialog: SettingsDialog
-  mainMenu: videojs.Menu
+  declare mainMenu: videojs.Menu
-  panel: SettingsPanel
+  declare panel: SettingsPanel
-  panelChild: SettingsPanelChild
+  declare panelChild: SettingsPanelChild
-  panelChildEl: HTMLElement
+  declare panelChildEl: HTMLElement
-  size: number[]
+  declare size: number[]
-  menuToLoad: string
+  declare menuToLoad: string
-  subMenu: SettingsButton
+  declare subMenu: SettingsButton
 
-  submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick
+  declare submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick
-  transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd
+  declare transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd
 
-  settingsSubMenuTitleEl_: HTMLElement
+  declare settingsSubMenuTitleEl_: HTMLElement
-  settingsSubMenuValueEl_: HTMLElement
+  declare settingsSubMenuValueEl_: HTMLElement
-  settingsSubMenuEl_: HTMLElement
+  declare settingsSubMenuEl_: HTMLElement
 
   constructor (player: videojs.Player, options?: SettingsMenuItemOptions) {
     super(player, options)
@@ -142,6 +142,8 @@ class SettingsMenuItem extends MenuItem {
    *
    */
   createEl () {
+    console.log('create el')
+
     const el = videojs.dom.createEl('li', {
       className: 'vjs-menu-item',
       tabIndex: 0

client/src/assets/player/shared/stats/stats-card.ts

@@ -30,40 +30,49 @@ interface InfoElement {
 
 const Component = videojs.getComponent('Component')
 class StatsCard extends Component {
-  options_: StatsCardOptions
+  declare options_: StatsCardOptions
 
-  updateInterval: any
+  declare updateInterval: any
 
-  mode: 'web-video' | 'p2p-media-loader'
+  declare mode: 'web-video' | 'p2p-media-loader'
 
-  metadataStore: any = {}
+  declare metadataStore: any
 
-  intervalMs = 300
+  declare intervalMs: number
-  playerNetworkInfo: PlayerNetworkInfo = {}
+  declare playerNetworkInfo: PlayerNetworkInfo
 
-  private containerEl: HTMLDivElement
+  declare private containerEl: HTMLDivElement
-  private infoListEl: HTMLDivElement
+  declare private infoListEl: HTMLDivElement
 
-  private playerMode: InfoElement
+  declare private playerMode: InfoElement
-  private p2p: InfoElement
+  declare private p2p: InfoElement
-  private uuid: InfoElement
+  declare private uuid: InfoElement
-  private viewport: InfoElement
+  declare private viewport: InfoElement
-  private resolution: InfoElement
+  declare private resolution: InfoElement
-  private volume: InfoElement
+  declare private volume: InfoElement
-  private codecs: InfoElement
+  declare private codecs: InfoElement
-  private color: InfoElement
+  declare private color: InfoElement
-  private connection: InfoElement
+  declare private connection: InfoElement
 
-  private network: InfoElement
+  declare private network: InfoElement
-  private transferred: InfoElement
+  declare private transferred: InfoElement
-  private download: InfoElement
+  declare private download: InfoElement
 
-  private bufferProgress: InfoElement
+  declare private bufferProgress: InfoElement
-  private bufferState: InfoElement
+  declare private bufferState: InfoElement
 
-  private liveLatency: InfoElement
+  declare private liveLatency: InfoElement
 
-  private onNetworkInfoHandler: (_event: any, data: EventPlayerNetworkInfo) => void
+  declare private onNetworkInfoHandler: (_event: any, data: EventPlayerNetworkInfo) => void
+
+  constructor (player: videojs.Player, options?: StatsCardOptions) {
+    super(player, options)
+
+    this.metadataStore = {}
+
+    this.intervalMs = 300
+    this.playerNetworkInfo = {}
+  }
 
   createEl () {
     this.containerEl = videojs.dom.createEl('div', {

client/src/assets/player/shared/stats/stats-plugin.ts

@@ -4,7 +4,7 @@ import { StatsCard, StatsCardOptions } from './stats-card'
 const Plugin = videojs.getPlugin('plugin')
 
 class StatsForNerdsPlugin extends Plugin {
-  private statsCard: StatsCard
+  declare private statsCard: StatsCard
 
   constructor (player: videojs.Player, options: StatsCardOptions) {
     super(player)

client/src/assets/player/shared/upnext/end-card.ts

@@ -32,30 +32,36 @@ export interface EndCardOptions extends videojs.ComponentOptions, UpNextPluginOp
 
 const Component = videojs.getComponent('Component')
 export class EndCard extends Component {
-  options_: EndCardOptions
+  declare options_: EndCardOptions
 
-  dashOffsetTotal = 586
+  declare dashOffsetTotal: number
-  dashOffsetStart = 293
+  declare dashOffsetStart: number
-  interval = 50
+  declare interval: number
-  upNextEvents = new videojs.EventTarget()
+  declare upNextEvents: videojs.EventTarget
-  ticks = 0
+  declare ticks: number
-  totalTicks: number
+  declare totalTicks: number
 
-  container: HTMLDivElement
+  declare container: HTMLDivElement
-  title: HTMLElement
+  declare title: HTMLElement
-  autoplayRing: HTMLElement
+  declare autoplayRing: HTMLElement
-  cancelButton: HTMLElement
+  declare cancelButton: HTMLElement
-  suspendedMessage: HTMLElement
+  declare suspendedMessage: HTMLElement
-  nextButton: HTMLElement
+  declare nextButton: HTMLElement
 
-  private timeout: any
+  declare private timeout: any
 
-  private onEndedHandler: () => void
+  declare private onEndedHandler: () => void
-  private onPlayingHandler: () => void
+  declare private onPlayingHandler: () => void
 
   constructor (player: videojs.Player, options: EndCardOptions) {
     super(player, options)
 
+    this.dashOffsetTotal = 586
+    this.dashOffsetStart = 293
+    this.interval = 50
+    this.upNextEvents = new videojs.EventTarget()
+    this.ticks = 0
+
     this.totalTicks = this.options_.timeout / this.interval
 
     this.onEndedHandler = () => {

client/src/assets/player/shared/web-video/web-video-plugin.ts

@@ -10,16 +10,16 @@ const debugLogger = debug('peertube:player:web-video-plugin')
 const Plugin = videojs.getPlugin('plugin')
 
 class WebVideoPlugin extends Plugin {
-  private readonly videoFiles: VideoFile[]
+  declare private readonly videoFiles: VideoFile[]
 
-  private currentVideoFile: VideoFile
+  declare private currentVideoFile: VideoFile
-  private videoFileToken: () => string
+  declare private videoFileToken: () => string
 
-  private networkInfoInterval: any
+  declare private networkInfoInterval: any
 
-  private onErrorHandler: () => void
+  declare private onErrorHandler: () => void
-  private onPlayHandler: () => void
+  declare private onPlayHandler: () => void
-  private onLoadedMetadata: () => void
+  declare private onLoadedMetadata: () => void
 
   constructor (player: videojs.Player, options?: WebVideoPluginOptions) {
     super(player, options)