diff options
author | Chocobozzz <me@florianbigard.com> | 2018-02-14 17:16:32 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-02-14 17:16:32 +0100 |
commit | 8cac1b6446a97b16387c9590ce5c799a79a759fa (patch) | |
tree | 6ef95c108b9323e47d1b979a01934398b0752dac /client/src/assets/player | |
parent | a16aee73db627908dc83eb5c29b213ce8d1fab39 (diff) | |
download | PeerTube-8cac1b6446a97b16387c9590ce5c799a79a759fa.tar.gz PeerTube-8cac1b6446a97b16387c9590ce5c799a79a759fa.tar.zst PeerTube-8cac1b6446a97b16387c9590ce5c799a79a759fa.zip |
Move adding a video view videojs peertube plugin
Diffstat (limited to 'client/src/assets/player')
-rw-r--r-- | client/src/assets/player/peertube-videojs-plugin.ts | 53 |
1 files changed, 52 insertions, 1 deletions
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 125ef64a4..fecd4edec 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts | |||
@@ -1,5 +1,6 @@ | |||
1 | // Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher | 1 | // Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher |
2 | 2 | ||
3 | import { VideoService } from '@app/shared/video/video.service' | ||
3 | import * as videojs from 'video.js' | 4 | import * as videojs from 'video.js' |
4 | import * as WebTorrent from 'webtorrent' | 5 | import * as WebTorrent from 'webtorrent' |
5 | import { VideoFile } from '../../../../shared/models/videos/video.model' | 6 | import { VideoFile } from '../../../../shared/models/videos/video.model' |
@@ -23,6 +24,7 @@ type PeertubePluginOptions = { | |||
23 | videoFiles: VideoFile[] | 24 | videoFiles: VideoFile[] |
24 | playerElement: HTMLVideoElement | 25 | playerElement: HTMLVideoElement |
25 | peerTubeLink: boolean | 26 | peerTubeLink: boolean |
27 | videoViewUrl: string | ||
26 | } | 28 | } |
27 | 29 | ||
28 | // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts | 30 | // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts |
@@ -218,6 +220,8 @@ class PeerTubePlugin extends Plugin { | |||
218 | private videoFiles: VideoFile[] | 220 | private videoFiles: VideoFile[] |
219 | private torrent: WebTorrent.Torrent | 221 | private torrent: WebTorrent.Torrent |
220 | private autoplay = false | 222 | private autoplay = false |
223 | private videoViewUrl: string | ||
224 | private videoViewInterval | ||
221 | 225 | ||
222 | constructor (player: videojs.Player, options: PeertubePluginOptions) { | 226 | constructor (player: videojs.Player, options: PeertubePluginOptions) { |
223 | super(player, options) | 227 | super(player, options) |
@@ -227,6 +231,7 @@ class PeerTubePlugin extends Plugin { | |||
227 | this.player.options_.autoplay = false | 231 | this.player.options_.autoplay = false |
228 | 232 | ||
229 | this.videoFiles = options.videoFiles | 233 | this.videoFiles = options.videoFiles |
234 | this.videoViewUrl = options.videoViewUrl | ||
230 | 235 | ||
231 | // Hack to "simulate" src link in video.js >= 6 | 236 | // Hack to "simulate" src link in video.js >= 6 |
232 | // Without this, we can't play the video after pausing it | 237 | // Without this, we can't play the video after pausing it |
@@ -240,6 +245,7 @@ class PeerTubePlugin extends Plugin { | |||
240 | this.player.ready(() => { | 245 | this.player.ready(() => { |
241 | this.initializePlayer(options) | 246 | this.initializePlayer(options) |
242 | this.runTorrentInfoScheduler() | 247 | this.runTorrentInfoScheduler() |
248 | this.prepareRunViewAdd() | ||
243 | }) | 249 | }) |
244 | } | 250 | } |
245 | 251 | ||
@@ -334,9 +340,12 @@ class PeerTubePlugin extends Plugin { | |||
334 | } | 340 | } |
335 | } | 341 | } |
336 | 342 | ||
337 | setVideoFiles (files: VideoFile[]) { | 343 | setVideoFiles (files: VideoFile[], videoViewUrl: string) { |
344 | this.videoViewUrl = videoViewUrl | ||
338 | this.videoFiles = files | 345 | this.videoFiles = files |
339 | 346 | ||
347 | // Re run view add for the new video | ||
348 | this.prepareRunViewAdd() | ||
340 | this.updateVideoFile(undefined, () => this.player.play()) | 349 | this.updateVideoFile(undefined, () => this.player.play()) |
341 | } | 350 | } |
342 | 351 | ||
@@ -377,6 +386,48 @@ class PeerTubePlugin extends Plugin { | |||
377 | }, 1000) | 386 | }, 1000) |
378 | } | 387 | } |
379 | 388 | ||
389 | private prepareRunViewAdd () { | ||
390 | if (this.player.readyState() < 1) { | ||
391 | return this.player.one('loadedmetadata', () => this.runViewAdd()) | ||
392 | } | ||
393 | |||
394 | this.runViewAdd() | ||
395 | } | ||
396 | |||
397 | private runViewAdd () { | ||
398 | this.clearVideoViewInterval() | ||
399 | |||
400 | // After 30 seconds (or 3/4 of the video), add a view to the video | ||
401 | let minSecondsToView = 30 | ||
402 | |||
403 | const duration = this.player.duration() | ||
404 | if (duration < minSecondsToView) minSecondsToView = (duration * 3) / 4 | ||
405 | |||
406 | let secondsViewed = 0 | ||
407 | this.videoViewInterval = setInterval(() => { | ||
408 | if (this.player && !this.player.paused()) { | ||
409 | secondsViewed += 1 | ||
410 | |||
411 | if (secondsViewed > minSecondsToView) { | ||
412 | this.clearVideoViewInterval() | ||
413 | |||
414 | this.addViewToVideo().catch(err => console.error(err)) | ||
415 | } | ||
416 | } | ||
417 | }, 1000) | ||
418 | } | ||
419 | |||
420 | private clearVideoViewInterval () { | ||
421 | if (this.videoViewInterval !== undefined) { | ||
422 | clearInterval(this.videoViewInterval) | ||
423 | this.videoViewInterval = undefined | ||
424 | } | ||
425 | } | ||
426 | |||
427 | private addViewToVideo () { | ||
428 | return fetch(this.videoViewUrl, { method: 'POST' }) | ||
429 | } | ||
430 | |||
380 | private handleError (err: Error | string) { | 431 | private handleError (err: Error | string) { |
381 | return this.player.trigger('customError', { err }) | 432 | return this.player.trigger('customError', { err }) |
382 | } | 433 | } |