Fix webtorrent play on Safari

client/src/assets/player/peertube-player-manager.ts

@@ -1,5 +1,3 @@
-import { VideoFile } from '../../../../shared/models/videos'
-import videojs from 'video.js'
 import 'videojs-hotkeys/videojs.hotkeys'
 import 'videojs-dock'
 import 'videojs-contextmenu-ui'
@@ -20,14 +18,16 @@ import './videojs-components/settings-menu-item'
 import './videojs-components/settings-panel'
 import './videojs-components/settings-panel-child'
 import './videojs-components/theater-button'
-import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
-import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
+import videojs from 'video.js'
 import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
-import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
-import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
+import { VideoFile } from '../../../../shared/models/videos'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
+import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
+import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
 import { getStoredP2PEnabled } from './peertube-player-local-storage'
+import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
 import { TranslationsManager } from './translations-manager'
+import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -511,15 +511,12 @@ export class PeertubePlayerManager {
   private static getAutoPlayValue (autoplay: any) {
     if (autoplay !== true) return autoplay
 
-    const isIOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
-    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-
     // Giving up with iOS
-    if (isIOS) return false
+    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'
+    if (isSafari()) return 'any'
 
     return 'play'
   }

client/src/assets/player/utils.ts

@@ -8,6 +8,14 @@ function isWebRTCDisabled () {
   return !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false
 }
 
+function isIOS () {
+  return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
+}
+
+function isSafari () {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+}
+
 // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
 // Don't import all Angular stuff, just copy the code with shame
 const dictionaryBytes: Array<{max: number, type: string}> = [
@@ -192,5 +200,7 @@ export {
   videoFileMinByResolution,
   copyToClipboard,
   isMobile,
-  bytes
+  bytes,
+  isIOS,
+  isSafari
 }

client/src/assets/player/webtorrent/webtorrent-plugin.ts

@@ -2,7 +2,7 @@ import videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
 import { renderVideo } from './video-renderer'
 import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
-import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
+import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution, isIOS, isSafari } from '../utils'
 import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
   getAverageBandwidthInStore,
@@ -74,7 +74,7 @@ class WebTorrentPlugin extends Plugin {
     this.startTime = timeToInt(options.startTime)
 
     // Disable auto play on iOS
-    this.autoplay = options.autoplay && this.isIOS() === false
+    this.autoplay = options.autoplay && isIOS() === false
     this.playerRefusedP2P = !getStoredP2PEnabled()
 
     this.videoFiles = options.videoFiles
@@ -158,7 +158,7 @@ class WebTorrentPlugin extends Plugin {
 
     // Don't try on iOS that does not support MediaSource
     // Or don't use P2P if webtorrent is disabled
-    if (this.isIOS() || this.playerRefusedP2P) {
+    if (isIOS() || this.playerRefusedP2P) {
       return this.fallbackToHttp(options, () => {
         this.player.playbackRate(oldPlaybackRate)
         return done()
@@ -329,6 +329,11 @@ 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())
@@ -543,10 +548,6 @@ class WebTorrentPlugin extends Plugin {
     this.player.removeClass('vjs-error-display-enabled')
   }
 
-  private isIOS () {
-    return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
-  }
-
   private pickAverageVideoFile () {
     if (this.videoFiles.length === 1) return this.videoFiles[0]