From 28dd2f14f5bdfd4781e489c42db6eaa7d40d560b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 13 Jul 2023 13:37:10 +0200 Subject: [PATCH] Some player fixes on Android, Safari and iOS --- client/e2e/src/po/video-watch.po.ts | 5 +++-- client/e2e/src/suites-all/private-videos.e2e-spec.ts | 2 +- client/e2e/wdio.local-test.conf.ts | 2 +- client/src/assets/player/peertube-player.ts | 4 +++- .../src/assets/player/shared/peertube/peertube-plugin.ts | 8 +++++--- .../assets/player/shared/web-video/web-video-plugin.ts | 3 +++ .../src/assets/player/types/peertube-videojs-typings.ts | 2 ++ client/src/sass/player/peertube-skin.scss | 8 ++++---- server/tests/api/videos/videos-common-filters.ts | 8 ++++---- 9 files changed, 26 insertions(+), 16 deletions(-) diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts index 56870511d..76ac58e48 100644 --- a/client/e2e/src/po/video-watch.po.ts +++ b/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) }) } diff --git a/client/e2e/src/suites-all/private-videos.e2e-spec.ts b/client/e2e/src/suites-all/private-videos.e2e-spec.ts index 829d76a84..0c3757d0d 100644 --- a/client/e2e/src/suites-all/private-videos.e2e-spec.ts +++ b/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) diff --git a/client/e2e/wdio.local-test.conf.ts b/client/e2e/wdio.local-test.conf.ts index 96ddc67ca..a691147ca 100644 --- a/client/e2e/wdio.local-test.conf.ts +++ b/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 } }, 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; } diff --git a/server/tests/api/videos/videos-common-filters.ts b/server/tests/api/videos/videos-common-filters.ts index 73c066bfb..ba861164b 100644 --- a/server/tests/api/videos/videos-common-filters.ts +++ b/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' } }) - const hasWebVideo = finderFactory('web video video') + await servers[0].videos.upload({ attributes: { name: 'web 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' } }) - const hasBoth = finderFactory('hls and web video video') + await servers[0].videos.upload({ attributes: { name: 'hls and web video' } }) + const hasBoth = finderFactory('hls and web video') await waitJobs(servers)