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)

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 {
   VideoJSPluginOptions
 } from './peertube-videojs-typings'
 import { TranslationsManager } from './translations-manager'
-import { buildVideoOrPlaylistEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils'
+import { buildVideoOrPlaylistEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isSafari, isIOS } from './utils'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -117,6 +117,8 @@ export class PeertubePlayerManager {
   private static playerElementClassName: string
   private static onPlayerChange: (player: videojs.Player) => void
 
+  private static alreadyPlayed = false
+
   static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
     let p2pMediaLoader: any
 
@@ -152,6 +154,10 @@ export class PeertubePlayerManager {
           alreadyFallback = true
         })
 
+        player.one('play', () => {
+          PeertubePlayerManager.alreadyPlayed = true
+        })
+
         self.addContextMenu(mode, player, options.common.embedUrl)
 
         player.bezels()
@@ -202,6 +208,7 @@ export class PeertubePlayerManager {
     p2pMediaLoaderModule?: any
   ): videojs.PlayerOptions {
     const commonOptions = options.common
+    const isHLS = mode === 'p2p-media-loader'
 
     let autoplay = this.getAutoPlayValue(commonOptions.autoplay)
     let html5 = {}
@@ -227,7 +234,7 @@ export class PeertubePlayerManager {
       PeertubePlayerManager.addHotkeysOptions(plugins)
     }
 
-    if (mode === 'p2p-media-loader') {
+    if (isHLS) {
       const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
 
       html5 = hlsjs.html5
@@ -579,12 +586,15 @@ export class PeertubePlayerManager {
   private static getAutoPlayValue (autoplay: any) {
     if (autoplay !== true) return autoplay
 
-    // Giving up with iOS
-    if (isIOS()) return false
-
-    // We have issues with autoplay and Safari.
-    // any that tries to play using auto mute seems to work
-    if (isSafari()) return 'any'
+    // We have issues with autoplay and Safari with webtorrent
+    if (isIOS()) {
+      // On first play, disable autoplay to avoid issues
+      // But if the player already played videos, we can safely autoplay next ones
+      return PeertubePlayerManager.alreadyPlayed ? 'play' : false
+    } else if (isSafari()) {
+      // Issues with Safari and webtorrent on first play
+      return PeertubePlayerManager.alreadyPlayed ? 'play' : false
+    }
 
     return 'play'
   }
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 {
     this.startTime = timeToInt(options.startTime)
 
     // Disable auto play on iOS
-    this.autoplay = options.autoplay && isIOS() === false
+    this.autoplay = options.autoplay
     this.playerRefusedP2P = !getStoredP2PEnabled()
 
     this.videoFiles = options.videoFiles
@@ -329,11 +329,6 @@ class WebTorrentPlugin extends Plugin {
   private tryToPlay (done?: (err?: Error) => void) {
     if (!done) done = function () { /* empty */ }
 
-    // Try in mute mode because we have issues with Safari
-    if (isSafari() && this.player.muted() === false) {
-      this.player.muted(true)
-    }
-
     const playPromise = this.player.play()
     if (playPromise !== undefined) {
       return playPromise.then(() => done())