From e740e2ea3f6863bae664d5faa623d5f78c8bed00 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 5 Sep 2024 14:48:24 +0200 Subject: [PATCH] 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 --- .../player/shared/bezels/pause-bezel.ts | 15 +++-- .../shared/context-menu/context-menu-item.ts | 2 +- .../context-menu/context-menu-plugin.ts | 7 +-- .../shared/context-menu/context-menu.ts | 2 +- .../shared/control-bar/chapters-plugin.ts | 7 ++- .../control-bar/next-previous-video-button.ts | 2 +- .../shared/control-bar/p2p-info-button.ts | 1 - .../control-bar/peertube-link-button.ts | 6 +- .../control-bar/peertube-live-display.ts | 4 +- .../progress-bar-marker-component.ts | 2 +- .../shared/control-bar/storyboard-plugin.ts | 26 +++++---- .../shared/control-bar/theater-button.ts | 2 +- .../player/shared/control-bar/time-tooltip.ts | 4 +- .../shared/dock/peertube-dock-component.ts | 3 +- .../shared/dock/peertube-dock-plugin.ts | 2 +- .../shared/hotkeys/peertube-hotkeys-plugin.ts | 6 +- .../player/shared/metrics/metrics-plugin.ts | 33 +++++++---- .../shared/mobile/peertube-mobile-buttons.ts | 12 ++-- .../shared/mobile/peertube-mobile-plugin.ts | 28 ++++----- .../p2p-media-loader-plugin.ts | 44 +++++++++----- .../player/shared/peertube/peertube-plugin.ts | 39 +++++++------ .../player/shared/playlist/playlist-button.ts | 6 +- .../shared/playlist/playlist-menu-item.ts | 8 +-- .../player/shared/playlist/playlist-menu.ts | 14 +++-- .../player/shared/playlist/playlist-plugin.ts | 4 +- .../peertube-resolutions-plugin.ts | 8 ++- .../shared/settings/menu-focus-fixed.ts | 2 +- .../shared/settings/resolution-menu-button.ts | 2 +- .../shared/settings/resolution-menu-item.ts | 8 +-- .../player/shared/settings/settings-dialog.ts | 1 + .../shared/settings/settings-menu-button.ts | 20 +++---- .../shared/settings/settings-menu-item.ts | 30 +++++----- .../assets/player/shared/stats/stats-card.ts | 57 +++++++++++-------- .../player/shared/stats/stats-plugin.ts | 2 +- .../assets/player/shared/upnext/end-card.ts | 38 +++++++------ .../shared/web-video/web-video-plugin.ts | 14 ++--- 36 files changed, 259 insertions(+), 202 deletions(-) diff --git a/client/src/assets/player/shared/bezels/pause-bezel.ts b/client/src/assets/player/shared/bezels/pause-bezel.ts index d364ad0dd..d7515e3cc 100644 --- a/client/src/assets/player/shared/bezels/pause-bezel.ts +++ b/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 - private paused = false + declare private firstPlayDone: boolean + declare private paused: boolean - private playerPauseHandler: () => void - private playerPlayHandler: () => void - private videoChangeHandler: () => void + declare private playerPauseHandler: () => void + declare private playerPlayHandler: () => 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 diff --git a/client/src/assets/player/shared/context-menu/context-menu-item.ts b/client/src/assets/player/shared/context-menu/context-menu-item.ts index 7df14bed1..65f728c46 100644 --- a/client/src/assets/player/shared/context-menu/context-menu-item.ts +++ b/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) { diff --git a/client/src/assets/player/shared/context-menu/context-menu-plugin.ts b/client/src/assets/player/shared/context-menu/context-menu-plugin.ts index 76edd8b00..1e98f3766 100644 --- a/client/src/assets/player/shared/context-menu/context-menu-plugin.ts +++ b/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 - - private onContextMenuBind: (e: TouchEvent & MouseEvent) => void + declare private onContextMenuBind: (e: TouchEvent & MouseEvent) => void constructor (player: videojs.Player, options: ContextMenuPluginOptions & videojs.MenuOptions) { super(player, options) diff --git a/client/src/assets/player/shared/context-menu/context-menu.ts b/client/src/assets/player/shared/context-menu/context-menu.ts index 9027a0472..c78cba81b 100644 --- a/client/src/assets/player/shared/context-menu/context-menu.ts +++ b/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 }) diff --git a/client/src/assets/player/shared/control-bar/chapters-plugin.ts b/client/src/assets/player/shared/control-bar/chapters-plugin.ts index a17b53c72..3936feb2b 100644 --- a/client/src/assets/player/shared/control-bar/chapters-plugin.ts +++ b/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[] = [] - private markers: ProgressBarMarkerComponent[] = [] + declare private chapters: VideoChapter[] + declare private markers: ProgressBarMarkerComponent[] constructor (player: videojs.Player, options: videojs.ComponentOptions & ChaptersOptions) { super(player, options) + this.markers = [] this.chapters = options.chapters this.player.ready(() => { diff --git a/client/src/assets/player/shared/control-bar/next-previous-video-button.ts b/client/src/assets/player/shared/control-bar/next-previous-video-button.ts index 18a107f52..f2ff962fd 100644 --- a/client/src/assets/player/shared/control-bar/next-previous-video-button.ts +++ b/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) diff --git a/client/src/assets/player/shared/control-bar/p2p-info-button.ts b/client/src/assets/player/shared/control-bar/p2p-info-button.ts index d2d2b6c99..ce4bbd15d 100644 --- a/client/src/assets/player/shared/control-bar/p2p-info-button.ts +++ b/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' }) diff --git a/client/src/assets/player/shared/control-bar/peertube-link-button.ts b/client/src/assets/player/shared/control-bar/peertube-link-button.ts index 3f4a64236..f61945981 100644 --- a/client/src/assets/player/shared/control-bar/peertube-link-button.ts +++ b/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 - private clickHandler: () => void + declare private mouseEnterHandler: () => 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) diff --git a/client/src/assets/player/shared/control-bar/peertube-live-display.ts b/client/src/assets/player/shared/control-bar/peertube-live-display.ts index f9f6bf12f..ed77528e1 100644 --- a/client/src/assets/player/shared/control-bar/peertube-live-display.ts +++ b/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) diff --git a/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts b/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts index 9aed0c7c0..1b950b7f7 100644 --- a/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts +++ b/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) { diff --git a/client/src/assets/player/shared/control-bar/storyboard-plugin.ts b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts index 91d7f451e..914e5c164 100644 --- a/client/src/assets/player/shared/control-bar/storyboard-plugin.ts +++ b/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 - private height: number - private width: number - private interval: number + declare private url: string + declare private height: number + declare private width: number + declare private interval: number - private cached: boolean + declare private cached: boolean - private mouseTimeTooltip: videojs.MouseTimeDisplay - private seekBar: { el(): HTMLElement, mouseTimeDisplay: any, playProgressBar: any } - private progress: any + declare private mouseTimeTooltip: videojs.MouseTimeDisplay + declare private seekBar: { el(): HTMLElement, mouseTimeDisplay: any, playProgressBar: 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() diff --git a/client/src/assets/player/shared/control-bar/theater-button.ts b/client/src/assets/player/shared/control-bar/theater-button.ts index a5feb56ee..d721605dc 100644 --- a/client/src/assets/player/shared/control-bar/theater-button.ts +++ b/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) diff --git a/client/src/assets/player/shared/control-bar/time-tooltip.ts b/client/src/assets/player/shared/control-bar/time-tooltip.ts index 44ad5106b..65f3ee06c 100644 --- a/client/src/assets/player/shared/control-bar/time-tooltip.ts +++ b/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 - private currentChapterTitle: string + declare private currentTimecode: string + declare private currentChapterTitle: string write (timecode: string) { const player: VideoJsPlayer = this.player() diff --git a/client/src/assets/player/shared/dock/peertube-dock-component.ts b/client/src/assets/player/shared/dock/peertube-dock-component.ts index 973db2646..78e87e9dc 100644 --- a/client/src/assets/player/shared/dock/peertube-dock-component.ts +++ b/client/src/assets/player/shared/dock/peertube-dock-component.ts @@ -9,8 +9,7 @@ export type PeerTubeDockComponentOptions = { } class PeerTubeDockComponent extends Component { - - options_: videojs.ComponentOptions & PeerTubeDockComponentOptions + declare options_: videojs.ComponentOptions & PeerTubeDockComponentOptions // eslint-disable-next-line @typescript-eslint/no-useless-constructor constructor (player: videojs.Player, options: videojs.ComponentOptions & PeerTubeDockComponentOptions) { diff --git a/client/src/assets/player/shared/dock/peertube-dock-plugin.ts b/client/src/assets/player/shared/dock/peertube-dock-plugin.ts index fc71a8c4b..4ff9873fa 100644 --- a/client/src/assets/player/shared/dock/peertube-dock-plugin.ts +++ b/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) diff --git a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts index e77b7dc6d..5f5f31965 100644 --- a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts +++ b/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) diff --git a/client/src/assets/player/shared/metrics/metrics-plugin.ts b/client/src/assets/player/shared/metrics/metrics-plugin.ts index 8ea6e13ee..b90db9097 100644 --- a/client/src/assets/player/shared/metrics/metrics-plugin.ts +++ b/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 - private downloadedBytesHTTP = 0 - private uploadedBytesP2P = 0 + declare private downloadedBytesP2P: number + declare private downloadedBytesHTTP: number + declare private uploadedBytesP2P: number - private resolutionChanges = 0 - private errors = 0 + declare private resolutionChanges: number + declare private errors: number - private bufferStalled = 0 + declare private bufferStalled: number - private p2pEnabled: boolean - private p2pPeers = 0 + declare private p2pEnabled: boolean + 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() diff --git a/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts index 1bc3ca38d..43316b9ad 100644 --- a/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts +++ b/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 - private forward: Element - private rewindText: Element - private forwardText: Element + declare private rewind: Element + declare private forward: Element + declare private rewindText: 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 diff --git a/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts b/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts index 02f1c992b..1154fe5cc 100644 --- a/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts +++ b/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 - private tapTimeout: ReturnType - private newActiveState: boolean + declare private lastTapEvent: TouchEvent + declare private tapTimeout: ReturnType + declare private newActiveState: boolean - private setCurrentTimeTimeout: ReturnType + declare private setCurrentTimeTimeout: ReturnType - private onPlayHandler: () => void - private onFullScreenChangeHandler: () => void - private onTouchStartHandler: (event: TouchEvent) => void - private onMobileButtonTouchStartHandler: (event: TouchEvent) => void - private sliderActiveHandler: () => void - private sliderInactiveHandler: () => void + declare private onPlayHandler: () => void + declare private onFullScreenChangeHandler: () => void + declare private onTouchStartHandler: (event: TouchEvent) => void + declare private onMobileButtonTouchStartHandler: (event: TouchEvent) => void + declare private sliderActiveHandler: () => 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) { diff --git a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts index 54f43d9ae..abcbd2261 100644 --- a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts +++ b/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 - private p2pEngine: Engine - private statsP2PBytes = { - pendingDownload: [] as number[], - pendingUpload: [] as number[], - peersWithWebSeed: 0, - peersP2POnly: 0, - totalDownload: 0, - totalUpload: 0 + declare private hlsjs: Hlsjs + declare private p2pEngine: Engine + declare private statsP2PBytes: { + pendingDownload: number[] + pendingUpload: number[] + peersWithWebSeed: number + peersP2POnly: number + totalDownload: number + totalUpload: number } - private statsHTTPBytes = { - pendingDownload: [] as number[], - totalDownload: 0 + declare private statsHTTPBytes: { + pendingDownload: number[] + 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')) { diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts index c561484a3..d15ef7798 100644 --- a/client/src/assets/player/shared/peertube/peertube-plugin.ts +++ b/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 - private readonly authorizationHeader: () => string - private readonly initialInactivityTimeout: number + declare private readonly videoViewUrl: () => string + declare private readonly authorizationHeader: () => string + declare private readonly initialInactivityTimeout: number - private readonly hasAutoplay: () => videojs.Autoplay + declare private readonly hasAutoplay: () => videojs.Autoplay - private currentSubtitle: string - private currentPlaybackRate: number + declare private currentSubtitle: string + declare private currentPlaybackRate: number - private videoViewInterval: any + declare private videoViewInterval: any - private menuOpened = false - private mouseInControlBar = false - private mouseInSettings = false + declare private menuOpened: boolean + declare private mouseInControlBar: boolean + 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 - private videoViewOnSeekedHandler: (...args: any[]) => void - private videoViewOnEndedHandler: (...args: any[]) => void + declare private videoViewOnPlayHandler: (...args: any[]) => void + declare private videoViewOnSeekedHandler: (...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 diff --git a/client/src/assets/player/shared/playlist/playlist-button.ts b/client/src/assets/player/shared/playlist/playlist-button.ts index fffa83c7a..b5bb63c7f 100644 --- a/client/src/assets/player/shared/playlist/playlist-button.ts +++ b/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 - private wrapper: HTMLElement + declare private playlistInfoElement: 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 diff --git a/client/src/assets/player/shared/playlist/playlist-menu-item.ts b/client/src/assets/player/shared/playlist/playlist-menu-item.ts index 7d37fbc47..578950161 100644 --- a/client/src/assets/player/shared/playlist/playlist-menu-item.ts +++ b/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 - private keyDownHandler: (event: KeyboardEvent) => void + declare private clickHandler: () => 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) diff --git a/client/src/assets/player/shared/playlist/playlist-menu.ts b/client/src/assets/player/shared/playlist/playlist-menu.ts index 437130115..b9c991e2a 100644 --- a/client/src/assets/player/shared/playlist/playlist-menu.ts +++ b/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 - private readonly onMouseEnter: () => void - private readonly onMouseLeave: () => void + declare private readonly userInactiveHandler: () => void + declare private readonly onMouseEnter: () => 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() } diff --git a/client/src/assets/player/shared/playlist/playlist-plugin.ts b/client/src/assets/player/shared/playlist/playlist-plugin.ts index c00e45843..54e3702a5 100644 --- a/client/src/assets/player/shared/playlist/playlist-plugin.ts +++ b/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 - private playlistButton: PlaylistButton + declare private playlistMenu: PlaylistMenu + declare private playlistButton: PlaylistButton constructor (player: videojs.Player, options?: PlaylistPluginOptions) { super(player, options) diff --git a/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts b/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts index 37260834a..d5fb98d02 100644 --- a/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts +++ b/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 - private resolutions: PeerTubeResolution[] = [] + declare private currentSelection: 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 = [] diff --git a/client/src/assets/player/shared/settings/menu-focus-fixed.ts b/client/src/assets/player/shared/settings/menu-focus-fixed.ts index 9950006fc..9089615a2 100644 --- a/client/src/assets/player/shared/settings/menu-focus-fixed.ts +++ b/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') { diff --git a/client/src/assets/player/shared/settings/resolution-menu-button.ts b/client/src/assets/player/shared/settings/resolution-menu-button.ts index b338d0d36..b0f6dbc14 100644 --- a/client/src/assets/player/shared/settings/resolution-menu-button.ts +++ b/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) diff --git a/client/src/assets/player/shared/settings/resolution-menu-item.ts b/client/src/assets/player/shared/settings/resolution-menu-item.ts index 86387f533..46999161e 100644 --- a/client/src/assets/player/shared/settings/resolution-menu-item.ts +++ b/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 - private readonly label: string + declare readonly resolutionId: number + 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 }) diff --git a/client/src/assets/player/shared/settings/settings-dialog.ts b/client/src/assets/player/shared/settings/settings-dialog.ts index c0b1e0356..d9d75a0ab 100644 --- a/client/src/assets/player/shared/settings/settings-dialog.ts +++ b/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) diff --git a/client/src/assets/player/shared/settings/settings-menu-button.ts b/client/src/assets/player/shared/settings/settings-menu-button.ts index bbc5cc751..f2c07eae0 100644 --- a/client/src/assets/player/shared/settings/settings-menu-button.ts +++ b/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 - dialogEl: HTMLElement - menu: MenuFocusFixed - panel: SettingsPanel - panelChild: SettingsPanelChild + declare dialog: SettingsDialog + declare dialogEl: HTMLElement + declare menu: MenuFocusFixed + declare panel: SettingsPanel + declare panelChild: SettingsPanelChild - addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem - disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem - documentClickHandler: typeof SettingsButton.prototype.onDocumentClick - userInactiveHandler: typeof SettingsButton.prototype.onUserInactive + declare addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem + declare disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem + declare documentClickHandler: typeof SettingsButton.prototype.onDocumentClick + declare userInactiveHandler: typeof SettingsButton.prototype.onUserInactive - private settingsButtonOptions: SettingsButtonOptions + declare private settingsButtonOptions: SettingsButtonOptions constructor (player: videojs.Player, options?: SettingsButtonOptions) { super(player, options) diff --git a/client/src/assets/player/shared/settings/settings-menu-item.ts b/client/src/assets/player/shared/settings/settings-menu-item.ts index d860c760c..6f6039e2a 100644 --- a/client/src/assets/player/shared/settings/settings-menu-item.ts +++ b/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 - dialog: SettingsDialog - mainMenu: videojs.Menu - panel: SettingsPanel - panelChild: SettingsPanelChild - panelChildEl: HTMLElement - size: number[] - menuToLoad: string - subMenu: SettingsButton + declare settingsButton: SettingsButton + declare dialog: SettingsDialog + declare mainMenu: videojs.Menu + declare panel: SettingsPanel + declare panelChild: SettingsPanelChild + declare panelChildEl: HTMLElement + declare size: number[] + declare menuToLoad: string + declare subMenu: SettingsButton - submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick - transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd + declare submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick + declare transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd - settingsSubMenuTitleEl_: HTMLElement - settingsSubMenuValueEl_: HTMLElement - settingsSubMenuEl_: HTMLElement + declare settingsSubMenuTitleEl_: HTMLElement + declare settingsSubMenuValueEl_: 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 diff --git a/client/src/assets/player/shared/stats/stats-card.ts b/client/src/assets/player/shared/stats/stats-card.ts index efdfb145b..de25cae35 100644 --- a/client/src/assets/player/shared/stats/stats-card.ts +++ b/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 - playerNetworkInfo: PlayerNetworkInfo = {} + declare intervalMs: number + declare playerNetworkInfo: PlayerNetworkInfo - private containerEl: HTMLDivElement - private infoListEl: HTMLDivElement + declare private containerEl: HTMLDivElement + declare private infoListEl: HTMLDivElement - private playerMode: InfoElement - private p2p: InfoElement - private uuid: InfoElement - private viewport: InfoElement - private resolution: InfoElement - private volume: InfoElement - private codecs: InfoElement - private color: InfoElement - private connection: InfoElement + declare private playerMode: InfoElement + declare private p2p: InfoElement + declare private uuid: InfoElement + declare private viewport: InfoElement + declare private resolution: InfoElement + declare private volume: InfoElement + declare private codecs: InfoElement + declare private color: InfoElement + declare private connection: InfoElement - private network: InfoElement - private transferred: InfoElement - private download: InfoElement + declare private network: InfoElement + declare private transferred: InfoElement + declare private download: InfoElement - private bufferProgress: InfoElement - private bufferState: InfoElement + declare private bufferProgress: 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', { diff --git a/client/src/assets/player/shared/stats/stats-plugin.ts b/client/src/assets/player/shared/stats/stats-plugin.ts index 86684a78c..c680b2659 100644 --- a/client/src/assets/player/shared/stats/stats-plugin.ts +++ b/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) diff --git a/client/src/assets/player/shared/upnext/end-card.ts b/client/src/assets/player/shared/upnext/end-card.ts index 268b28ea2..b056f4b9b 100644 --- a/client/src/assets/player/shared/upnext/end-card.ts +++ b/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 - dashOffsetStart = 293 - interval = 50 - upNextEvents = new videojs.EventTarget() - ticks = 0 - totalTicks: number + declare dashOffsetTotal: number + declare dashOffsetStart: number + declare interval: number + declare upNextEvents: videojs.EventTarget + declare ticks: number + declare totalTicks: number - container: HTMLDivElement - title: HTMLElement - autoplayRing: HTMLElement - cancelButton: HTMLElement - suspendedMessage: HTMLElement - nextButton: HTMLElement + declare container: HTMLDivElement + declare title: HTMLElement + declare autoplayRing: HTMLElement + declare cancelButton: HTMLElement + declare suspendedMessage: HTMLElement + declare nextButton: HTMLElement - private timeout: any + declare private timeout: any - private onEndedHandler: () => void - private onPlayingHandler: () => void + declare private onEndedHandler: () => 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 = () => { diff --git a/client/src/assets/player/shared/web-video/web-video-plugin.ts b/client/src/assets/player/shared/web-video/web-video-plugin.ts index e4544f87e..0d4ae7146 100644 --- a/client/src/assets/player/shared/web-video/web-video-plugin.ts +++ b/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 - private videoFileToken: () => string + declare private currentVideoFile: VideoFile + declare private videoFileToken: () => string - private networkInfoInterval: any + declare private networkInfoInterval: any - private onErrorHandler: () => void - private onPlayHandler: () => void - private onLoadedMetadata: () => void + declare private onErrorHandler: () => void + declare private onPlayHandler: () => void + declare private onLoadedMetadata: () => void constructor (player: videojs.Player, options?: WebVideoPluginOptions) { super(player, options)