aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-08-19 16:14:25 +0200
committerChocobozzz <me@florianbigard.com>2020-08-19 16:17:39 +0200
commit9eccae74c844f09e9e3483db623fea00e0562365 (patch)
tree9dde7d5928f260a8947c87c1396c469e07a9560a /client/src/assets
parent65b19fa47997ad7530f6558104dda71e80014b17 (diff)
downloadPeerTube-9eccae74c844f09e9e3483db623fea00e0562365.tar.gz
PeerTube-9eccae74c844f09e9e3483db623fea00e0562365.tar.zst
PeerTube-9eccae74c844f09e9e3483db623fea00e0562365.zip
Try to fix autoplay with ios/safari
* Disable autoplay on first load because we have weird issues (player starts to play and stop so we loose the big play button). We also don't want to autoplay muted videos (bad UX IMHO and we don't have ads to display) * Enable autoplay when we already played a video (fixes the issue with playlists)
Diffstat (limited to 'client/src/assets')
-rw-r--r--client/src/assets/player/peertube-player-manager.ts26
-rw-r--r--client/src/assets/player/webtorrent/webtorrent-plugin.ts7
2 files changed, 19 insertions, 14 deletions
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 15b2f420b..8e0a9109f 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -35,7 +35,7 @@ import {
35 VideoJSPluginOptions 35 VideoJSPluginOptions
36} from './peertube-videojs-typings' 36} from './peertube-videojs-typings'
37import { TranslationsManager } from './translations-manager' 37import { TranslationsManager } from './translations-manager'
38import { buildVideoOrPlaylistEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils' 38import { buildVideoOrPlaylistEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isSafari, isIOS } from './utils'
39 39
40// Change 'Playback Rate' to 'Speed' (smaller for our settings menu) 40// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
41(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' 41(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -117,6 +117,8 @@ export class PeertubePlayerManager {
117 private static playerElementClassName: string 117 private static playerElementClassName: string
118 private static onPlayerChange: (player: videojs.Player) => void 118 private static onPlayerChange: (player: videojs.Player) => void
119 119
120 private static alreadyPlayed = false
121
120 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) { 122 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
121 let p2pMediaLoader: any 123 let p2pMediaLoader: any
122 124
@@ -152,6 +154,10 @@ export class PeertubePlayerManager {
152 alreadyFallback = true 154 alreadyFallback = true
153 }) 155 })
154 156
157 player.one('play', () => {
158 PeertubePlayerManager.alreadyPlayed = true
159 })
160
155 self.addContextMenu(mode, player, options.common.embedUrl) 161 self.addContextMenu(mode, player, options.common.embedUrl)
156 162
157 player.bezels() 163 player.bezels()
@@ -202,6 +208,7 @@ export class PeertubePlayerManager {
202 p2pMediaLoaderModule?: any 208 p2pMediaLoaderModule?: any
203 ): videojs.PlayerOptions { 209 ): videojs.PlayerOptions {
204 const commonOptions = options.common 210 const commonOptions = options.common
211 const isHLS = mode === 'p2p-media-loader'
205 212
206 let autoplay = this.getAutoPlayValue(commonOptions.autoplay) 213 let autoplay = this.getAutoPlayValue(commonOptions.autoplay)
207 let html5 = {} 214 let html5 = {}
@@ -227,7 +234,7 @@ export class PeertubePlayerManager {
227 PeertubePlayerManager.addHotkeysOptions(plugins) 234 PeertubePlayerManager.addHotkeysOptions(plugins)
228 } 235 }
229 236
230 if (mode === 'p2p-media-loader') { 237 if (isHLS) {
231 const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) 238 const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
232 239
233 html5 = hlsjs.html5 240 html5 = hlsjs.html5
@@ -579,12 +586,15 @@ export class PeertubePlayerManager {
579 private static getAutoPlayValue (autoplay: any) { 586 private static getAutoPlayValue (autoplay: any) {
580 if (autoplay !== true) return autoplay 587 if (autoplay !== true) return autoplay
581 588
582 // Giving up with iOS 589 // We have issues with autoplay and Safari with webtorrent
583 if (isIOS()) return false 590 if (isIOS()) {
584 591 // On first play, disable autoplay to avoid issues
585 // We have issues with autoplay and Safari. 592 // But if the player already played videos, we can safely autoplay next ones
586 // any that tries to play using auto mute seems to work 593 return PeertubePlayerManager.alreadyPlayed ? 'play' : false
587 if (isSafari()) return 'any' 594 } else if (isSafari()) {
595 // Issues with Safari and webtorrent on first play
596 return PeertubePlayerManager.alreadyPlayed ? 'play' : false
597 }
588 598
589 return 'play' 599 return 'play'
590 } 600 }
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 5c8aca1f8..782c91cbd 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -74,7 +74,7 @@ class WebTorrentPlugin extends Plugin {
74 this.startTime = timeToInt(options.startTime) 74 this.startTime = timeToInt(options.startTime)
75 75
76 // Disable auto play on iOS 76 // Disable auto play on iOS
77 this.autoplay = options.autoplay && isIOS() === false 77 this.autoplay = options.autoplay
78 this.playerRefusedP2P = !getStoredP2PEnabled() 78 this.playerRefusedP2P = !getStoredP2PEnabled()
79 79
80 this.videoFiles = options.videoFiles 80 this.videoFiles = options.videoFiles
@@ -329,11 +329,6 @@ class WebTorrentPlugin extends Plugin {
329 private tryToPlay (done?: (err?: Error) => void) { 329 private tryToPlay (done?: (err?: Error) => void) {
330 if (!done) done = function () { /* empty */ } 330 if (!done) done = function () { /* empty */ }
331 331
332 // Try in mute mode because we have issues with Safari
333 if (isSafari() && this.player.muted() === false) {
334 this.player.muted(true)
335 }
336
337 const playPromise = this.player.play() 332 const playPromise = this.player.play()
338 if (playPromise !== undefined) { 333 if (playPromise !== undefined) {
339 return playPromise.then(() => done()) 334 return playPromise.then(() => done())