X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-videojs-plugin.ts;h=fecd4edec7b03f3a4f50f19487fe8bfdd1989e2b;hb=8cac1b6446a97b16387c9590ce5c799a79a759fa;hp=5ccfdce36b8ad127dac80119206a6bff6bcee690;hpb=531ab5b6279707b2d0d01d3153e62c4bdfca8480;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 5ccfdce36..fecd4edec 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -1,5 +1,6 @@ // Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher +import { VideoService } from '@app/shared/video/video.service' import * as videojs from 'video.js' import * as WebTorrent from 'webtorrent' import { VideoFile } from '../../../../shared/models/videos/video.model' @@ -23,6 +24,7 @@ type PeertubePluginOptions = { videoFiles: VideoFile[] playerElement: HTMLVideoElement peerTubeLink: boolean + videoViewUrl: string } // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts @@ -217,11 +219,19 @@ class PeerTubePlugin extends Plugin { private playerElement: HTMLVideoElement private videoFiles: VideoFile[] private torrent: WebTorrent.Torrent + private autoplay = false + private videoViewUrl: string + private videoViewInterval constructor (player: videojs.Player, options: PeertubePluginOptions) { super(player, options) + // Fix canplay event on google chrome by disabling default videojs autoplay + this.autoplay = this.player.options_.autoplay + this.player.options_.autoplay = false + this.videoFiles = options.videoFiles + this.videoViewUrl = options.videoViewUrl // Hack to "simulate" src link in video.js >= 6 // Without this, we can't play the video after pausing it @@ -235,6 +245,7 @@ class PeerTubePlugin extends Plugin { this.player.ready(() => { this.initializePlayer(options) this.runTorrentInfoScheduler() + this.prepareRunViewAdd() }) } @@ -281,6 +292,7 @@ class PeerTubePlugin extends Plugin { this.renderer = renderer if (!this.player.paused()) this.player.play().then(done) + else done() }) }) @@ -328,9 +340,12 @@ class PeerTubePlugin extends Plugin { } } - setVideoFiles (files: VideoFile[]) { + setVideoFiles (files: VideoFile[], videoViewUrl: string) { + this.videoViewUrl = videoViewUrl this.videoFiles = files + // Re run view add for the new video + this.prepareRunViewAdd() this.updateVideoFile(undefined, () => this.player.play()) } @@ -349,18 +364,12 @@ class PeerTubePlugin extends Plugin { const webTorrentButton = new WebTorrentButton(this.player) controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el()) - if (this.player.options_.autoplay === true) { - this.updateVideoFile() + if (this.autoplay === true) { + this.updateVideoFile(undefined, () => this.player.play()) } else { this.player.one('play', () => { - // On firefox, we need to wait to load the video before playing - if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) { - this.player.pause() - this.updateVideoFile(undefined, () => this.player.play()) - return - } - - this.updateVideoFile(undefined) + this.player.pause() + this.updateVideoFile(undefined, () => this.player.play()) }) } } @@ -377,6 +386,48 @@ class PeerTubePlugin extends Plugin { }, 1000) } + private prepareRunViewAdd () { + if (this.player.readyState() < 1) { + return this.player.one('loadedmetadata', () => this.runViewAdd()) + } + + this.runViewAdd() + } + + private runViewAdd () { + this.clearVideoViewInterval() + + // After 30 seconds (or 3/4 of the video), add a view to the video + let minSecondsToView = 30 + + const duration = this.player.duration() + if (duration < minSecondsToView) minSecondsToView = (duration * 3) / 4 + + let secondsViewed = 0 + this.videoViewInterval = setInterval(() => { + if (this.player && !this.player.paused()) { + secondsViewed += 1 + + if (secondsViewed > minSecondsToView) { + this.clearVideoViewInterval() + + this.addViewToVideo().catch(err => console.error(err)) + } + } + }, 1000) + } + + private clearVideoViewInterval () { + if (this.videoViewInterval !== undefined) { + clearInterval(this.videoViewInterval) + this.videoViewInterval = undefined + } + } + + private addViewToVideo () { + return fetch(this.videoViewUrl, { method: 'POST' }) + } + private handleError (err: Error | string) { return this.player.trigger('customError', { err }) }