diff options
author | Chocobozzz <me@florianbigard.com> | 2018-02-14 17:20:39 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-02-14 18:04:30 +0100 |
commit | 3bcfff7f446d0a1d8ef5adf340375e178259a42c (patch) | |
tree | 7dc09e67525babb81c9d5d9e8ae3b034fdab0b6d /client | |
parent | 8cac1b6446a97b16387c9590ce5c799a79a759fa (diff) | |
download | PeerTube-3bcfff7f446d0a1d8ef5adf340375e178259a42c.tar.gz PeerTube-3bcfff7f446d0a1d8ef5adf340375e178259a42c.tar.zst PeerTube-3bcfff7f446d0a1d8ef5adf340375e178259a42c.zip |
Fix video play promise error on non supported browsers
Diffstat (limited to 'client')
4 files changed, 28 insertions, 19 deletions
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts index 52d8b2b37..1da02f60f 100644 --- a/client/src/app/shared/video/infinite-scroller.directive.ts +++ b/client/src/app/shared/video/infinite-scroller.directive.ts | |||
@@ -1,6 +1,7 @@ | |||
1 | import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core' | 1 | import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core' |
2 | import 'rxjs/add/operator/debounceTime' | 2 | import 'rxjs/add/operator/debounceTime' |
3 | import 'rxjs/add/operator/distinct' | 3 | import 'rxjs/add/operator/distinct' |
4 | import 'rxjs/add/operator/distinctUntilChanged' | ||
4 | import 'rxjs/add/operator/filter' | 5 | import 'rxjs/add/operator/filter' |
5 | import 'rxjs/add/operator/map' | 6 | import 'rxjs/add/operator/map' |
6 | import 'rxjs/add/operator/startWith' | 7 | import 'rxjs/add/operator/startWith' |
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index b7779ae9a..7a64406e6 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -330,7 +330,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
330 | videoFiles: this.video.files, | 330 | videoFiles: this.video.files, |
331 | playerElement: this.playerElement, | 331 | playerElement: this.playerElement, |
332 | peerTubeLink: false, | 332 | peerTubeLink: false, |
333 | videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid) | 333 | videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), |
334 | videoDuration: this.video.duration | ||
334 | }, | 335 | }, |
335 | hotkeys: { | 336 | hotkeys: { |
336 | enableVolumeScroll: false | 337 | enableVolumeScroll: false |
@@ -350,7 +351,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
350 | }) | 351 | }) |
351 | }) | 352 | }) |
352 | } else { | 353 | } else { |
353 | this.player.peertube().setVideoFiles(this.video.files, this.videoService.getVideoViewUrl(this.video.uuid)) | 354 | const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) |
355 | this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) | ||
354 | } | 356 | } |
355 | 357 | ||
356 | this.setVideoDescriptionHTML() | 358 | this.setVideoDescriptionHTML() |
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index fecd4edec..01a630cb6 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts | |||
@@ -25,6 +25,7 @@ type PeertubePluginOptions = { | |||
25 | playerElement: HTMLVideoElement | 25 | playerElement: HTMLVideoElement |
26 | peerTubeLink: boolean | 26 | peerTubeLink: boolean |
27 | videoViewUrl: string | 27 | videoViewUrl: string |
28 | videoDuration: number | ||
28 | } | 29 | } |
29 | 30 | ||
30 | // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts | 31 | // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts |
@@ -221,7 +222,9 @@ class PeerTubePlugin extends Plugin { | |||
221 | private torrent: WebTorrent.Torrent | 222 | private torrent: WebTorrent.Torrent |
222 | private autoplay = false | 223 | private autoplay = false |
223 | private videoViewUrl: string | 224 | private videoViewUrl: string |
225 | private videoDuration: number | ||
224 | private videoViewInterval | 226 | private videoViewInterval |
227 | private torrentInfoInterval | ||
225 | 228 | ||
226 | constructor (player: videojs.Player, options: PeertubePluginOptions) { | 229 | constructor (player: videojs.Player, options: PeertubePluginOptions) { |
227 | super(player, options) | 230 | super(player, options) |
@@ -232,6 +235,7 @@ class PeerTubePlugin extends Plugin { | |||
232 | 235 | ||
233 | this.videoFiles = options.videoFiles | 236 | this.videoFiles = options.videoFiles |
234 | this.videoViewUrl = options.videoViewUrl | 237 | this.videoViewUrl = options.videoViewUrl |
238 | this.videoDuration = options.videoDuration | ||
235 | 239 | ||
236 | // Hack to "simulate" src link in video.js >= 6 | 240 | // Hack to "simulate" src link in video.js >= 6 |
237 | // Without this, we can't play the video after pausing it | 241 | // Without this, we can't play the video after pausing it |
@@ -245,11 +249,14 @@ class PeerTubePlugin extends Plugin { | |||
245 | this.player.ready(() => { | 249 | this.player.ready(() => { |
246 | this.initializePlayer(options) | 250 | this.initializePlayer(options) |
247 | this.runTorrentInfoScheduler() | 251 | this.runTorrentInfoScheduler() |
248 | this.prepareRunViewAdd() | 252 | this.runViewAdd() |
249 | }) | 253 | }) |
250 | } | 254 | } |
251 | 255 | ||
252 | dispose () { | 256 | dispose () { |
257 | clearInterval(this.videoViewInterval) | ||
258 | clearInterval(this.torrentInfoInterval) | ||
259 | |||
253 | // Don't need to destroy renderer, video player will be destroyed | 260 | // Don't need to destroy renderer, video player will be destroyed |
254 | this.flushVideoFile(this.currentVideoFile, false) | 261 | this.flushVideoFile(this.currentVideoFile, false) |
255 | } | 262 | } |
@@ -291,8 +298,14 @@ class PeerTubePlugin extends Plugin { | |||
291 | if (err) return this.handleError(err) | 298 | if (err) return this.handleError(err) |
292 | 299 | ||
293 | this.renderer = renderer | 300 | this.renderer = renderer |
294 | if (!this.player.paused()) this.player.play().then(done) | 301 | if (!this.player.paused()) { |
295 | else done() | 302 | const playPromise = this.player.play() |
303 | if (playPromise !== undefined) return playPromise.then(done) | ||
304 | |||
305 | return done() | ||
306 | } | ||
307 | |||
308 | return done() | ||
296 | }) | 309 | }) |
297 | }) | 310 | }) |
298 | 311 | ||
@@ -340,12 +353,13 @@ class PeerTubePlugin extends Plugin { | |||
340 | } | 353 | } |
341 | } | 354 | } |
342 | 355 | ||
343 | setVideoFiles (files: VideoFile[], videoViewUrl: string) { | 356 | setVideoFiles (files: VideoFile[], videoViewUrl: string, videoDuration: number) { |
344 | this.videoViewUrl = videoViewUrl | 357 | this.videoViewUrl = videoViewUrl |
358 | this.videoDuration = videoDuration | ||
345 | this.videoFiles = files | 359 | this.videoFiles = files |
346 | 360 | ||
347 | // Re run view add for the new video | 361 | // Re run view add for the new video |
348 | this.prepareRunViewAdd() | 362 | this.runViewAdd() |
349 | this.updateVideoFile(undefined, () => this.player.play()) | 363 | this.updateVideoFile(undefined, () => this.player.play()) |
350 | } | 364 | } |
351 | 365 | ||
@@ -375,7 +389,7 @@ class PeerTubePlugin extends Plugin { | |||
375 | } | 389 | } |
376 | 390 | ||
377 | private runTorrentInfoScheduler () { | 391 | private runTorrentInfoScheduler () { |
378 | setInterval(() => { | 392 | this.torrentInfoInterval = setInterval(() => { |
379 | if (this.torrent !== undefined) { | 393 | if (this.torrent !== undefined) { |
380 | this.trigger('torrentInfo', { | 394 | this.trigger('torrentInfo', { |
381 | downloadSpeed: this.torrent.downloadSpeed, | 395 | downloadSpeed: this.torrent.downloadSpeed, |
@@ -386,22 +400,13 @@ class PeerTubePlugin extends Plugin { | |||
386 | }, 1000) | 400 | }, 1000) |
387 | } | 401 | } |
388 | 402 | ||
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 () { | 403 | private runViewAdd () { |
398 | this.clearVideoViewInterval() | 404 | this.clearVideoViewInterval() |
399 | 405 | ||
400 | // After 30 seconds (or 3/4 of the video), add a view to the video | 406 | // After 30 seconds (or 3/4 of the video), add a view to the video |
401 | let minSecondsToView = 30 | 407 | let minSecondsToView = 30 |
402 | 408 | ||
403 | const duration = this.player.duration() | 409 | if (this.videoDuration < minSecondsToView) minSecondsToView = (this.videoDuration * 3) / 4 |
404 | if (duration < minSecondsToView) minSecondsToView = (duration * 3) / 4 | ||
405 | 410 | ||
406 | let secondsViewed = 0 | 411 | let secondsViewed = 0 |
407 | this.videoViewInterval = setInterval(() => { | 412 | this.videoViewInterval = setInterval(() => { |
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 9076f1dc9..da935ef4c 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts | |||
@@ -32,7 +32,8 @@ loadVideoInfo(videoId) | |||
32 | videoFiles: videoInfo.files, | 32 | videoFiles: videoInfo.files, |
33 | playerElement: videoElement, | 33 | playerElement: videoElement, |
34 | peerTubeLink: true, | 34 | peerTubeLink: true, |
35 | videoViewUrl: getVideoUrl(videoId) + '/views' | 35 | videoViewUrl: getVideoUrl(videoId) + '/views', |
36 | videoDuration: videoInfo.duration | ||
36 | }, | 37 | }, |
37 | hotkeys: { | 38 | hotkeys: { |
38 | enableVolumeScroll: false | 39 | enableVolumeScroll: false |