aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-05-12 10:32:56 +0200
committerChocobozzz <me@florianbigard.com>2020-05-12 10:32:56 +0200
commit3e2bc4ea4955ee452d742647683b9021d6b4d6d5 (patch)
treea18736a735cbbf4da2244e713c223d7def8a015c
parent1d05f9bbea70af55ba23679d2db177aefb21f2e7 (diff)
downloadPeerTube-3e2bc4ea4955ee452d742647683b9021d6b4d6d5.tar.gz
PeerTube-3e2bc4ea4955ee452d742647683b9021d6b4d6d5.tar.zst
PeerTube-3e2bc4ea4955ee452d742647683b9021d6b4d6d5.zip
Fix webtorrent play on Safari
-rw-r--r--client/src/assets/player/peertube-player-manager.ts19
-rw-r--r--client/src/assets/player/utils.ts12
-rw-r--r--client/src/assets/player/webtorrent/webtorrent-plugin.ts15
3 files changed, 27 insertions, 19 deletions
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 @@
1import { VideoFile } from '../../../../shared/models/videos'
2import videojs from 'video.js'
3import 'videojs-hotkeys/videojs.hotkeys' 1import 'videojs-hotkeys/videojs.hotkeys'
4import 'videojs-dock' 2import 'videojs-dock'
5import 'videojs-contextmenu-ui' 3import 'videojs-contextmenu-ui'
@@ -20,14 +18,16 @@ import './videojs-components/settings-menu-item'
20import './videojs-components/settings-panel' 18import './videojs-components/settings-panel'
21import './videojs-components/settings-panel-child' 19import './videojs-components/settings-panel-child'
22import './videojs-components/theater-button' 20import './videojs-components/theater-button'
23import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings' 21import videojs from 'video.js'
24import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
25import { isDefaultLocale } from '../../../../shared/models/i18n/i18n' 22import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
26import { segmentValidatorFactory } from './p2p-media-loader/segment-validator' 23import { VideoFile } from '../../../../shared/models/videos'
27import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
28import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' 24import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
25import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
26import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
29import { getStoredP2PEnabled } from './peertube-player-local-storage' 27import { getStoredP2PEnabled } from './peertube-player-local-storage'
28import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
30import { TranslationsManager } from './translations-manager' 29import { TranslationsManager } from './translations-manager'
30import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils'
31 31
32// Change 'Playback Rate' to 'Speed' (smaller for our settings menu) 32// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
33(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' 33(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -511,15 +511,12 @@ export class PeertubePlayerManager {
511 private static getAutoPlayValue (autoplay: any) { 511 private static getAutoPlayValue (autoplay: any) {
512 if (autoplay !== true) return autoplay 512 if (autoplay !== true) return autoplay
513 513
514 const isIOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
515 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
516
517 // Giving up with iOS 514 // Giving up with iOS
518 if (isIOS) return false 515 if (isIOS()) return false
519 516
520 // We have issues with autoplay and Safari. 517 // We have issues with autoplay and Safari.
521 // any that tries to play using auto mute seems to work 518 // any that tries to play using auto mute seems to work
522 if (isSafari) return 'any' 519 if (isSafari()) return 'any'
523 520
524 return 'play' 521 return 'play'
525 } 522 }
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 () {
8 return !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false 8 return !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false
9} 9}
10 10
11function isIOS () {
12 return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
13}
14
15function isSafari () {
16 return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
17}
18
11// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts 19// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
12// Don't import all Angular stuff, just copy the code with shame 20// Don't import all Angular stuff, just copy the code with shame
13const dictionaryBytes: Array<{max: number, type: string}> = [ 21const dictionaryBytes: Array<{max: number, type: string}> = [
@@ -192,5 +200,7 @@ export {
192 videoFileMinByResolution, 200 videoFileMinByResolution,
193 copyToClipboard, 201 copyToClipboard,
194 isMobile, 202 isMobile,
195 bytes 203 bytes,
204 isIOS,
205 isSafari
196} 206}
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'
2import * as WebTorrent from 'webtorrent' 2import * as WebTorrent from 'webtorrent'
3import { renderVideo } from './video-renderer' 3import { renderVideo } from './video-renderer'
4import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings' 4import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
5import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils' 5import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution, isIOS, isSafari } from '../utils'
6import { PeertubeChunkStore } from './peertube-chunk-store' 6import { PeertubeChunkStore } from './peertube-chunk-store'
7import { 7import {
8 getAverageBandwidthInStore, 8 getAverageBandwidthInStore,
@@ -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 && this.isIOS() === false 77 this.autoplay = options.autoplay && isIOS() === false
78 this.playerRefusedP2P = !getStoredP2PEnabled() 78 this.playerRefusedP2P = !getStoredP2PEnabled()
79 79
80 this.videoFiles = options.videoFiles 80 this.videoFiles = options.videoFiles
@@ -158,7 +158,7 @@ class WebTorrentPlugin extends Plugin {
158 158
159 // Don't try on iOS that does not support MediaSource 159 // Don't try on iOS that does not support MediaSource
160 // Or don't use P2P if webtorrent is disabled 160 // Or don't use P2P if webtorrent is disabled
161 if (this.isIOS() || this.playerRefusedP2P) { 161 if (isIOS() || this.playerRefusedP2P) {
162 return this.fallbackToHttp(options, () => { 162 return this.fallbackToHttp(options, () => {
163 this.player.playbackRate(oldPlaybackRate) 163 this.player.playbackRate(oldPlaybackRate)
164 return done() 164 return done()
@@ -329,6 +329,11 @@ 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
332 const playPromise = this.player.play() 337 const playPromise = this.player.play()
333 if (playPromise !== undefined) { 338 if (playPromise !== undefined) {
334 return playPromise.then(() => done()) 339 return playPromise.then(() => done())
@@ -543,10 +548,6 @@ class WebTorrentPlugin extends Plugin {
543 this.player.removeClass('vjs-error-display-enabled') 548 this.player.removeClass('vjs-error-display-enabled')
544 } 549 }
545 550
546 private isIOS () {
547 return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
548 }
549
550 private pickAverageVideoFile () { 551 private pickAverageVideoFile () {
551 if (this.videoFiles.length === 1) return this.videoFiles[0] 552 if (this.videoFiles.length === 1) return this.videoFiles[0]
552 553