aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-18 10:20:13 +0200
committerChocobozzz <me@florianbigard.com>2018-04-18 10:20:13 +0200
commit80109b2ddb14ec4a54cede7885611cb9244da3cb (patch)
treed84323763c38cbdc1aff156598d9ab215bfe4dbe /client
parent66dc59076413b9a4aa0899d3192b0bdf03ee654d (diff)
downloadPeerTube-80109b2ddb14ec4a54cede7885611cb9244da3cb.tar.gz
PeerTube-80109b2ddb14ec4a54cede7885611cb9244da3cb.tar.zst
PeerTube-80109b2ddb14ec4a54cede7885611cb9244da3cb.zip
Handle when autoplay fails
Diffstat (limited to 'client')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss2
-rw-r--r--client/src/assets/player/peertube-player.ts3
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts35
-rw-r--r--client/src/assets/player/peertube-videojs-typings.ts1
4 files changed, 29 insertions, 12 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 3ebeccd4b..8bc9f8d9a 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -332,7 +332,7 @@
332 332
333 .video-actions-rates { 333 .video-actions-rates {
334 margin-top: 20px; 334 margin-top: 20px;
335 align-items: left; 335 align-items: start;
336 336
337 .video-info-likes-dislikes-bar { 337 .video-info-likes-dislikes-bar {
338 margin-top: 10px; 338 margin-top: 10px;
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index e8a258065..f02fe5d75 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -27,11 +27,12 @@ function getVideojsOptions (options: {
27 const videojsOptions = { 27 const videojsOptions = {
28 controls: true, 28 controls: true,
29 poster: options.poster, 29 poster: options.poster,
30 autoplay: options.autoplay, 30 autoplay: false,
31 inactivityTimeout: options.inactivityTimeout, 31 inactivityTimeout: options.inactivityTimeout,
32 playbackRates: [ 0.5, 1, 1.5, 2 ], 32 playbackRates: [ 0.5, 1, 1.5, 2 ],
33 plugins: { 33 plugins: {
34 peertube: { 34 peertube: {
35 autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
35 videoFiles: options.videoFiles, 36 videoFiles: options.videoFiles,
36 playerElement: options.playerElement, 37 playerElement: options.playerElement,
37 videoViewUrl: options.videoViewUrl, 38 videoViewUrl: options.videoViewUrl,
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 60c291a50..290d88724 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -68,9 +68,7 @@ class PeerTubePlugin extends Plugin {
68 constructor (player: videojs.Player, options: PeertubePluginOptions) { 68 constructor (player: videojs.Player, options: PeertubePluginOptions) {
69 super(player, options) 69 super(player, options)
70 70
71 // Fix canplay event on google chrome by disabling default videojs autoplay 71 this.autoplay = options.autoplay
72 this.autoplay = this.player.options_.autoplay
73 this.player.options_.autoplay = false
74 72
75 this.startTime = options.startTime 73 this.startTime = options.startTime
76 this.videoFiles = options.videoFiles 74 this.videoFiles = options.videoFiles
@@ -190,12 +188,7 @@ class PeerTubePlugin extends Plugin {
190 188
191 if (err) return this.fallbackToHttp(done) 189 if (err) return this.fallbackToHttp(done)
192 190
193 if (!this.player.paused()) { 191 if (!this.player.paused()) return this.tryToPlay(done)
194 const playPromise = this.player.play()
195 if (playPromise !== undefined) return playPromise.then(done)
196
197 return done()
198 }
199 192
200 return done() 193 return done()
201 }) 194 })
@@ -264,6 +257,25 @@ class PeerTubePlugin extends Plugin {
264 this.trigger('autoResolutionUpdate') 257 this.trigger('autoResolutionUpdate')
265 } 258 }
266 259
260 private tryToPlay (done?: Function) {
261 if (!done) done = function () { /* empty */ }
262
263 const playPromise = this.player.play()
264 if (playPromise !== undefined) {
265 return playPromise.then(done)
266 .catch(err => {
267 console.error(err)
268 this.player.pause()
269 this.player.posterImage.show()
270 this.player.removeClass('vjs-has-autoplay')
271
272 return done()
273 })
274 }
275
276 return done()
277 }
278
267 private seek (time: number) { 279 private seek (time: number) {
268 this.player.currentTime(time) 280 this.player.currentTime(time)
269 this.player.handleTechSeeked_() 281 this.player.handleTechSeeked_()
@@ -317,7 +329,10 @@ class PeerTubePlugin extends Plugin {
317 if (this.autoplay === true) { 329 if (this.autoplay === true) {
318 this.player.posterImage.hide() 330 this.player.posterImage.hide()
319 331
320 this.updateVideoFile(undefined, 0, () => this.seek(this.startTime)) 332 this.updateVideoFile(undefined, 0, () => {
333 this.seek(this.startTime)
334 this.tryToPlay()
335 })
321 } else { 336 } else {
322 // Proxy first play 337 // Proxy first play
323 const oldPlay = this.player.play.bind(this.player) 338 const oldPlay = this.player.play.bind(this.player)
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index a66caa30b..abdf333e1 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -22,6 +22,7 @@ type PeertubePluginOptions = {
22 videoViewUrl: string 22 videoViewUrl: string
23 videoDuration: number 23 videoDuration: number
24 startTime: number 24 startTime: number
25 autoplay: boolean
25} 26}
26 27
27// videojs typings don't have some method we need 28// videojs typings don't have some method we need