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)

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
+    // We have issues with autoplay and Safari with webtorrent
-    if (isIOS()) return false
+    if (isIOS()) {
-
+      // On first play, disable autoplay to avoid issues
-    // We have issues with autoplay and Safari.
+      // But if the player already played videos, we can safely autoplay next ones
-    // any that tries to play using auto mute seems to work
+      return PeertubePlayerManager.alreadyPlayed ? 'play' : false
-    if (isSafari()) return 'any'
+    } else if (isSafari()) {
+      // Issues with Safari and webtorrent on first play
+      return PeertubePlayerManager.alreadyPlayed ? 'play' : false
+    }
 
     return 'play'
   }

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())