Some player fixes on Android, Safari and iOS

5 files changed, 17 insertions, 8 deletions

diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index a7a2b4065..ebb79247a 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -360,7 +360,9 @@ export class PeerTubePlayer {
         videoCaptions: () => this.currentLoadOptions.videoCaptions,
         isLive: () => this.currentLoadOptions.isLive,
         videoUUID: () => this.currentLoadOptions.videoUUID,
-        subtitle: () => this.currentLoadOptions.subtitle
+        subtitle: () => this.currentLoadOptions.subtitle,
+
+        poster: () => this.currentLoadOptions.poster
       },
       metrics: {
         mode: () => this.currentLoadOptions.mode,
diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts
index f52ec75f4..7e5a3ebb6 100644
--- a/client/src/assets/player/shared/peertube/peertube-plugin.ts
+++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts
@@ -1,7 +1,7 @@
 import debug from 'debug'
 import videojs from 'video.js'
 import { logger } from '@root-helpers/logger'
-import { isIOS, isMobile } from '@root-helpers/web-browser'
+import { isIOS, isMobile, isSafari } from '@root-helpers/web-browser'
 import { timeToInt } from '@shared/core-utils'
 import { VideoView, VideoViewEvent } from '@shared/models/videos'
 import {
@@ -63,8 +63,10 @@ class PeerTubePlugin extends Plugin {
 
       this.player.removeClass('vjs-has-autoplay')
 
-      // Fix a bug on iOS where the big play button is not displayed when autoplay fails
-      if (isIOS()) this.player.hasStarted(false)
+      this.player.poster(options.poster())
+
+      // Fix a bug on iOS/Safari where the big play button is not displayed when autoplay fails
+      if (isIOS() || isSafari()) this.player.hasStarted(false)
     })
 
     this.player.on('ratechange', () => {
diff --git a/client/src/assets/player/shared/web-video/web-video-plugin.ts b/client/src/assets/player/shared/web-video/web-video-plugin.ts
index 80e56795b..930b5045a 100644
--- a/client/src/assets/player/shared/web-video/web-video-plugin.ts
+++ b/client/src/assets/player/shared/web-video/web-video-plugin.ts
@@ -77,6 +77,9 @@ class WebVideoPlugin extends Plugin {
 
     const oldAutoplayValue = this.player.autoplay()
     if (options.isUserResolutionChange) {
+      // Prevent video source element displaying the poster when we change the resolution
+      (this.player.el() as HTMLVideoElement).poster = ''
+
       this.player.autoplay(false)
       this.player.addClass('vjs-updating-resolution')
     }
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index f10fc03a8..adaa43d77 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -120,6 +120,8 @@ type PeerTubePluginOptions = {
   isLive: () => boolean
   videoUUID: () => string
   subtitle: () => string
+
+  poster: () => string
 }
 
 type MetricsPluginOptions = {
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 572ae7050..6610512e2 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -88,13 +88,13 @@ body {
   &.vjs-has-autoplay:not(.vjs-has-started),
   &.vjs-updating-resolution {
     .vjs-poster {
-      opacity: 0;
-      visibility: hidden;
+      display: none !important;
     }
   }
 
-  // Hide the big play button on autoplay
-  &.vjs-has-autoplay {
+  // Hide the big play button on autoplay or resolution change
+  &.vjs-has-autoplay,
+  &.vjs-updating-resolution {
     .vjs-big-play-button {
       display: none !important;
     }