From 3e2bc4ea4955ee452d742647683b9021d6b4d6d5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 12 May 2020 10:32:56 +0200 Subject: Fix webtorrent play on Safari --- client/src/assets/player/peertube-player-manager.ts | 19 ++++++++----------- client/src/assets/player/utils.ts | 12 +++++++++++- .../src/assets/player/webtorrent/webtorrent-plugin.ts | 15 ++++++++------- 3 files changed, 27 insertions(+), 19 deletions(-) (limited to 'client/src/assets') diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 5ebc247f2..ebb1e454a 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/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' } diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index fa902e1f1..a72bf0123 100644 --- a/client/src/assets/player/utils.ts +++ b/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 } diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts index a894a90f5..85636c5be 100644 --- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts +++ b/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] -- cgit v1.2.3