X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-plugin.ts;h=19d1046769281f0738f084e9d0563b3574c41850;hb=bb3933ef370c46be6090e4e522c6e3f5b7144f4c;hp=7ea4a06d456b6dde0731055fa0bc634e192190a4;hpb=6ec0b75beb9c8bcd84e178912319913b91830da2;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts index 7ea4a06d4..19d104676 100644 --- a/client/src/assets/player/peertube-plugin.ts +++ b/client/src/assets/player/peertube-plugin.ts @@ -1,14 +1,10 @@ -// FIXME: something weird with our path definition in tsconfig and typings -// @ts-ignore -import * as videojs from 'video.js' +import videojs, { VideoJsPlayer } from 'video.js' import './videojs-components/settings-menu-button' import { PeerTubePluginOptions, ResolutionUpdateData, UserWatching, - VideoJSCaption, - VideoJSComponentInterface, - videojsUntyped + VideoJSCaption } from './peertube-videojs-typings' import { isMobile, timeToInt } from './utils' import { @@ -20,33 +16,35 @@ import { saveVolumeInStore } from './peertube-player-local-storage' -const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') +const Plugin = videojs.getPlugin('plugin') + class PeerTubePlugin extends Plugin { - private readonly autoplay: boolean = false - private readonly startTime: number = 0 private readonly videoViewUrl: string private readonly videoDuration: number private readonly CONSTANTS = { USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video } - private player: any private videoCaptions: VideoJSCaption[] private defaultSubtitle: string private videoViewInterval: any private userWatchingVideoInterval: any - private qualityObservationTimer: any private lastResolutionChange: ResolutionUpdateData - constructor (player: videojs.Player, options: PeerTubePluginOptions) { - super(player, options) + private menuOpened = false + private mouseInControlBar = false + private readonly savedInactivityTimeout: number + + constructor (player: VideoJsPlayer, options?: PeerTubePluginOptions) { + super(player) - this.startTime = timeToInt(options.startTime) this.videoViewUrl = options.videoViewUrl this.videoDuration = options.videoDuration this.videoCaptions = options.videoCaptions + this.savedInactivityTimeout = player.options_.inactivityTimeout + if (options.autoplay === true) this.player.addClass('vjs-has-autoplay') this.player.on('autoplay-failure', () => { @@ -65,7 +63,7 @@ class PeerTubePlugin extends Plugin { this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d)) } - this.player.tech_.on('loadedqualitydata', () => { + this.player.tech(true).on('loadedqualitydata', () => { setTimeout(() => { // Replay a resolution change, now we loaded all quality data if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange) @@ -85,8 +83,22 @@ class PeerTubePlugin extends Plugin { saveMuteInStore(this.player.muted()) }) + if (options.stopTime) { + const stopTime = timeToInt(options.stopTime) + const self = this + + this.player.on('timeupdate', function onTimeUpdate () { + if (self.player.currentTime() > stopTime) { + self.player.pause() + self.player.trigger('stopped') + + self.player.off('timeupdate', onTimeUpdate) + } + }) + } + this.player.textTracks().on('change', () => { - const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => { + const showing = this.player.textTracks().tracks_.find(t => { return t.kind === 'captions' && t.mode === 'showing' }) @@ -110,11 +122,18 @@ class PeerTubePlugin extends Plugin { } dispose () { - clearTimeout(this.qualityObservationTimer) + if (this.videoViewInterval) clearInterval(this.videoViewInterval) + if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval) + } - clearInterval(this.videoViewInterval) + onMenuOpen () { + this.menuOpened = false + this.alterInactivity() + } - if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval) + onMenuClosed () { + this.menuOpened = true + this.alterInactivity() } private initializePlayer () { @@ -124,7 +143,7 @@ class PeerTubePlugin extends Plugin { this.initCaptions() - this.alterInactivity() + this.listenControlBarMouse() } private runViewAdd () { @@ -201,23 +220,25 @@ class PeerTubePlugin extends Plugin { this.trigger('resolutionChange', data) } - private alterInactivity () { - let saveInactivityTimeout: number + private listenControlBarMouse () { + this.player.controlBar.on('mouseenter', () => { + this.mouseInControlBar = true + this.alterInactivity() + }) - const disableInactivity = () => { - saveInactivityTimeout = this.player.options_.inactivityTimeout - this.player.options_.inactivityTimeout = 0 - } - const enableInactivity = () => { - this.player.options_.inactivityTimeout = saveInactivityTimeout - } + this.player.controlBar.on('mouseleave', () => { + this.mouseInControlBar = false + this.alterInactivity() + }) + } - const settingsDialog = this.player.children_.find((c: any) => c.name_ === 'SettingsDialog') + private alterInactivity () { + if (this.menuOpened || this.mouseInControlBar) { + this.player.options_.inactivityTimeout = this.savedInactivityTimeout + return + } - this.player.controlBar.on('mouseenter', () => disableInactivity()) - settingsDialog.on('mouseenter', () => disableInactivity()) - this.player.controlBar.on('mouseleave', () => enableInactivity()) - settingsDialog.on('mouseleave', () => enableInactivity()) + this.player.options_.inactivityTimeout = 1 } private initCaptions () { @@ -237,7 +258,7 @@ class PeerTubePlugin extends Plugin { // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657 private initSmoothProgressBar () { - const SeekBar = videojsUntyped.getComponent('SeekBar') + const SeekBar = videojs.getComponent('SeekBar') as any SeekBar.prototype.getPercent = function getPercent () { // Allows for smooth scrubbing, when player can't keep up. // const time = (this.player_.scrubbing()) ?