Some player fixes on Android, Safari and iOS

client/e2e/src/po/video-watch.po.ts

@@ -9,11 +9,12 @@ export class VideoWatchPage {
   waitWatchVideoName (videoName: string) {
     if (this.isSafari) return browserSleep(5000)
 
-    // On mobile we display the first node, on desktop the second
+    // On mobile we display the first node, on desktop the second one
     const index = this.isMobileDevice ? 0 : 1
 
     return browser.waitUntil(async () => {
-      return (await $$('.video-info .video-info-name')[index].getText()).includes(videoName)
+      return await $('.video-info .video-info-name').isExisting() &&
+        (await $$('.video-info .video-info-name')[index].getText()).includes(videoName)
     })
   }
 

client/e2e/src/suites-all/private-videos.e2e-spec.ts

@@ -31,7 +31,7 @@ describe('Private videos all workflow', () => {
     return loginPage.loginOnPeerTube2()
   })
 
-  it('Should play an internal web video video', async () => {
+  it('Should play an internal web video', async () => {
     await go(FIXTURE_URLS.INTERNAL_WEB_VIDEO)
 
     await videoWatchPage.waitWatchVideoName(internalVideoName)

client/e2e/wdio.local-test.conf.ts

@@ -28,7 +28,7 @@ module.exports = {
         'browserName': 'chrome',
         'acceptInsecureCerts': true,
         'goog:chromeOptions': {
-          args: [ '--disable-gpu', windowSizeArg ],
+          args: [ '--headless', '--disable-gpu', windowSizeArg ],
           prefs
         }
       },

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,

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
+      this.player.poster(options.poster())
-      if (isIOS()) this.player.hasStarted(false)
+
+      // 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', () => {

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')
     }

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 = {

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;
+      display: none !important;
-      visibility: hidden;
     }
   }
 
-  // Hide the big play button on autoplay
+  // Hide the big play button on autoplay or resolution change
-  &.vjs-has-autoplay {
+  &.vjs-has-autoplay,
+  &.vjs-updating-resolution {
     .vjs-big-play-button {
       display: none !important;
     }

server/tests/api/videos/videos-common-filters.ts

@@ -469,8 +469,8 @@ describe('Test videos filter', function () {
       const finderFactory = (name: string) => (videos: Video[]) => videos.some(v => v.name === name)
 
       await servers[0].config.enableTranscoding(true, false)
-      await servers[0].videos.upload({ attributes: { name: 'web video video' } })
+      await servers[0].videos.upload({ attributes: { name: 'web video' } })
-      const hasWebVideo = finderFactory('web video video')
+      const hasWebVideo = finderFactory('web video')
 
       await waitJobs(servers)
 
@@ -481,8 +481,8 @@ describe('Test videos filter', function () {
       await waitJobs(servers)
 
       await servers[0].config.enableTranscoding(true, true)
-      await servers[0].videos.upload({ attributes: { name: 'hls and web video video' } })
+      await servers[0].videos.upload({ attributes: { name: 'hls and web video' } })
-      const hasBoth = finderFactory('hls and web video video')
+      const hasBoth = finderFactory('hls and web video')
 
       await waitJobs(servers)