1
0
Fork 0

Fix video play promise error on non supported browsers

This commit is contained in:
Chocobozzz 2018-02-14 17:20:39 +01:00
parent 8cac1b6446
commit 3bcfff7f44
No known key found for this signature in database
GPG key ID: 583A612D890159BE
4 changed files with 28 additions and 19 deletions

View file

@ -1,6 +1,7 @@
import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core' import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core'
import 'rxjs/add/operator/debounceTime' import 'rxjs/add/operator/debounceTime'
import 'rxjs/add/operator/distinct' import 'rxjs/add/operator/distinct'
import 'rxjs/add/operator/distinctUntilChanged'
import 'rxjs/add/operator/filter' import 'rxjs/add/operator/filter'
import 'rxjs/add/operator/map' import 'rxjs/add/operator/map'
import 'rxjs/add/operator/startWith' import 'rxjs/add/operator/startWith'

View file

@ -330,7 +330,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
videoFiles: this.video.files, videoFiles: this.video.files,
playerElement: this.playerElement, playerElement: this.playerElement,
peerTubeLink: false, peerTubeLink: false,
videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid) videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
videoDuration: this.video.duration
}, },
hotkeys: { hotkeys: {
enableVolumeScroll: false enableVolumeScroll: false
@ -350,7 +351,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
}) })
}) })
} else { } else {
this.player.peertube().setVideoFiles(this.video.files, this.videoService.getVideoViewUrl(this.video.uuid)) const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid)
this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration)
} }
this.setVideoDescriptionHTML() this.setVideoDescriptionHTML()

View file

@ -25,6 +25,7 @@ type PeertubePluginOptions = {
playerElement: HTMLVideoElement playerElement: HTMLVideoElement
peerTubeLink: boolean peerTubeLink: boolean
videoViewUrl: string videoViewUrl: string
videoDuration: number
} }
// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
@ -221,7 +222,9 @@ class PeerTubePlugin extends Plugin {
private torrent: WebTorrent.Torrent private torrent: WebTorrent.Torrent
private autoplay = false private autoplay = false
private videoViewUrl: string private videoViewUrl: string
private videoDuration: number
private videoViewInterval private videoViewInterval
private torrentInfoInterval
constructor (player: videojs.Player, options: PeertubePluginOptions) { constructor (player: videojs.Player, options: PeertubePluginOptions) {
super(player, options) super(player, options)
@ -232,6 +235,7 @@ class PeerTubePlugin extends Plugin {
this.videoFiles = options.videoFiles this.videoFiles = options.videoFiles
this.videoViewUrl = options.videoViewUrl this.videoViewUrl = options.videoViewUrl
this.videoDuration = options.videoDuration
// Hack to "simulate" src link in video.js >= 6 // Hack to "simulate" src link in video.js >= 6
// Without this, we can't play the video after pausing it // Without this, we can't play the video after pausing it
@ -245,11 +249,14 @@ class PeerTubePlugin extends Plugin {
this.player.ready(() => { this.player.ready(() => {
this.initializePlayer(options) this.initializePlayer(options)
this.runTorrentInfoScheduler() this.runTorrentInfoScheduler()
this.prepareRunViewAdd() this.runViewAdd()
}) })
} }
dispose () { dispose () {
clearInterval(this.videoViewInterval)
clearInterval(this.torrentInfoInterval)
// Don't need to destroy renderer, video player will be destroyed // Don't need to destroy renderer, video player will be destroyed
this.flushVideoFile(this.currentVideoFile, false) this.flushVideoFile(this.currentVideoFile, false)
} }
@ -291,8 +298,14 @@ class PeerTubePlugin extends Plugin {
if (err) return this.handleError(err) if (err) return this.handleError(err)
this.renderer = renderer this.renderer = renderer
if (!this.player.paused()) this.player.play().then(done) if (!this.player.paused()) {
else done() const playPromise = this.player.play()
if (playPromise !== undefined) return playPromise.then(done)
return done()
}
return done()
}) })
}) })
@ -340,12 +353,13 @@ class PeerTubePlugin extends Plugin {
} }
} }
setVideoFiles (files: VideoFile[], videoViewUrl: string) { setVideoFiles (files: VideoFile[], videoViewUrl: string, videoDuration: number) {
this.videoViewUrl = videoViewUrl this.videoViewUrl = videoViewUrl
this.videoDuration = videoDuration
this.videoFiles = files this.videoFiles = files
// Re run view add for the new video // Re run view add for the new video
this.prepareRunViewAdd() this.runViewAdd()
this.updateVideoFile(undefined, () => this.player.play()) this.updateVideoFile(undefined, () => this.player.play())
} }
@ -375,7 +389,7 @@ class PeerTubePlugin extends Plugin {
} }
private runTorrentInfoScheduler () { private runTorrentInfoScheduler () {
setInterval(() => { this.torrentInfoInterval = setInterval(() => {
if (this.torrent !== undefined) { if (this.torrent !== undefined) {
this.trigger('torrentInfo', { this.trigger('torrentInfo', {
downloadSpeed: this.torrent.downloadSpeed, downloadSpeed: this.torrent.downloadSpeed,
@ -386,22 +400,13 @@ class PeerTubePlugin extends Plugin {
}, 1000) }, 1000)
} }
private prepareRunViewAdd () {
if (this.player.readyState() < 1) {
return this.player.one('loadedmetadata', () => this.runViewAdd())
}
this.runViewAdd()
}
private runViewAdd () { private runViewAdd () {
this.clearVideoViewInterval() this.clearVideoViewInterval()
// After 30 seconds (or 3/4 of the video), add a view to the video // After 30 seconds (or 3/4 of the video), add a view to the video
let minSecondsToView = 30 let minSecondsToView = 30
const duration = this.player.duration() if (this.videoDuration < minSecondsToView) minSecondsToView = (this.videoDuration * 3) / 4
if (duration < minSecondsToView) minSecondsToView = (duration * 3) / 4
let secondsViewed = 0 let secondsViewed = 0
this.videoViewInterval = setInterval(() => { this.videoViewInterval = setInterval(() => {

View file

@ -32,7 +32,8 @@ loadVideoInfo(videoId)
videoFiles: videoInfo.files, videoFiles: videoInfo.files,
playerElement: videoElement, playerElement: videoElement,
peerTubeLink: true, peerTubeLink: true,
videoViewUrl: getVideoUrl(videoId) + '/views' videoViewUrl: getVideoUrl(videoId) + '/views',
videoDuration: videoInfo.duration
}, },
hotkeys: { hotkeys: {
enableVolumeScroll: false enableVolumeScroll: false