9 files changed, 70 insertions, 42 deletions

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 db3554659..a25208bb3 100644
--- a/client/e2e/src/suites-all/private-videos.e2e-spec.ts
+++ b/client/e2e/src/suites-all/private-videos.e2e-spec.ts
@@ -15,6 +15,7 @@ describe('Private videos all workflow', () => {
   let playerPage: PlayerPage
 
   const internalVideoName = 'Internal E2E test'
+  const internalHLSOnlyVideoName = 'Internal E2E test - HLS only'
 
   beforeEach(async () => {
     videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
@@ -44,6 +45,13 @@ describe('Private videos all workflow', () => {
     await checkCorrectlyPlay(playerPage)
   })
 
+  it('Should play an internal HLS only video', async () => {
+    await go(FIXTURE_URLS.INTERNAL_HLS_ONLY_VIDEO)
+
+    await videoWatchPage.waitWatchVideoName(internalHLSOnlyVideoName)
+    await checkCorrectlyPlay(playerPage)
+  })
+
   it('Should play an internal WebTorrent video in embed', async () => {
     await go(FIXTURE_URLS.INTERNAL_EMBED_WEBTORRENT_VIDEO)
 
@@ -57,4 +65,11 @@ describe('Private videos all workflow', () => {
     await videoWatchPage.waitEmbedForDisplayed()
     await checkCorrectlyPlay(playerPage)
   })
+
+  it('Should play an internal HLS only video in embed', async () => {
+    await go(FIXTURE_URLS.INTERNAL_EMBED_HLS_ONLY_VIDEO)
+
+    await videoWatchPage.waitEmbedForDisplayed()
+    await checkCorrectlyPlay(playerPage)
+  })
 })
diff --git a/client/e2e/src/utils/urls.ts b/client/e2e/src/utils/urls.ts
index f91d9a048..cc0bdfbff 100644
--- a/client/e2e/src/utils/urls.ts
+++ b/client/e2e/src/utils/urls.ts
@@ -1,9 +1,13 @@
 const FIXTURE_URLS = {
   INTERNAL_WEBTORRENT_VIDEO: 'https://peertube2.cpy.re/w/pwfz7NizSdPD4mJcbbmNwa?mode=webtorrent&start=0',
   INTERNAL_HLS_VIDEO: 'https://peertube2.cpy.re/w/pwfz7NizSdPD4mJcbbmNwa?start=0',
+
   INTERNAL_EMBED_WEBTORRENT_VIDEO: 'https://peertube2.cpy.re/videos/embed/pwfz7NizSdPD4mJcbbmNwa?mode=webtorrent&start=0',
   INTERNAL_EMBED_HLS_VIDEO: 'https://peertube2.cpy.re/videos/embed/pwfz7NizSdPD4mJcbbmNwa?start=0',
 
+  INTERNAL_HLS_ONLY_VIDEO: 'https://peertube2.cpy.re/w/tKQmHcqdYZRdCszLUiWM3V?start=0',
+  INTERNAL_EMBED_HLS_ONLY_VIDEO: 'https://peertube2.cpy.re/videos/embed/tKQmHcqdYZRdCszLUiWM3V?start=0',
+
   WEBTORRENT_VIDEO: 'https://peertube2.cpy.re/w/122d093a-1ede-43bd-bd34-59d2931ffc5e',
 
   HLS_EMBED: 'https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50',
diff --git a/client/src/app/+stats/video/video-stats.component.ts b/client/src/app/+stats/video/video-stats.component.ts
index bfad4f823..18312ec33 100644
--- a/client/src/app/+stats/video/video-stats.component.ts
+++ b/client/src/app/+stats/video/video-stats.component.ts
@@ -175,7 +175,7 @@ export class VideoStatsComponent implements OnInit {
     this.statsService.getOverallStats({ videoId: this.video.uuid, startDate: this.statsStartDate, endDate: this.statsEndDate })
       .subscribe({
         next: res => {
-          this.countries = res.countries.slice(0, 10).map(c => ({
+          this.countries = res.countries.map(c => ({
             name: this.countryCodeToName(c.isoCode),
             viewers: c.viewers
           }))
diff --git a/client/src/assets/player/shared/manager-options/hls-options-builder.ts b/client/src/assets/player/shared/manager-options/hls-options-builder.ts
index 497a97436..63e9fa8c8 100644
--- a/client/src/assets/player/shared/manager-options/hls-options-builder.ts
+++ b/client/src/assets/player/shared/manager-options/hls-options-builder.ts
@@ -32,6 +32,7 @@ export class HLSOptionsBuilder {
 
     const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
       requiresAuth: commonOptions.requiresAuth,
+      videoFileToken: commonOptions.videoFileToken,
 
       redundancyUrlManager,
       type: 'application/x-mpegURL',
diff --git a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
index b608ee3e2..e6f525fea 100644
--- a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -3,7 +3,7 @@ import videojs from 'video.js'
 import { Events, Segment } from '@peertube/p2p-media-loader-core'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs'
 import { logger } from '@root-helpers/logger'
-import { timeToInt } from '@shared/core-utils'
+import { addQueryParams, timeToInt } from '@shared/core-utils'
 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../../types'
 import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
 
@@ -39,46 +39,37 @@ class P2pMediaLoaderPlugin extends Plugin {
     super(player)
 
     this.options = options
+    this.startTime = timeToInt(options.startTime)
 
     // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
     if (!(videojs as any).Html5Hlsjs) {
-      logger.warn('HLS.js does not seem to be supported. Try to fallback to built in HLS.')
-
-      let message: string
-      if (!player.canPlayType('application/vnd.apple.mpegurl')) {
-        message = 'Cannot fallback to built-in HLS'
-      } else if (options.requiresAuth) {
-        message = 'Video requires auth which is not compatible to build-in HLS player'
+      if (player.canPlayType('application/vnd.apple.mpegurl')) {
+        this.fallbackToBuiltInIOS()
+        return
       }
 
-      if (message) {
-        logger.warn(message)
+      const message = 'HLS.js does not seem to be supported. Cannot fallback to built-in HLS'
+      logger.warn(message)
 
-        const error: MediaError = {
-          code: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
-          message,
-          MEDIA_ERR_ABORTED: MediaError.MEDIA_ERR_ABORTED,
-          MEDIA_ERR_DECODE: MediaError.MEDIA_ERR_DECODE,
-          MEDIA_ERR_NETWORK: MediaError.MEDIA_ERR_NETWORK,
-          MEDIA_ERR_SRC_NOT_SUPPORTED: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
-        }
-
-        player.ready(() => player.error(error))
-        return
+      const error: MediaError = {
+        code: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
+        message,
+        MEDIA_ERR_ABORTED: MediaError.MEDIA_ERR_ABORTED,
+        MEDIA_ERR_DECODE: MediaError.MEDIA_ERR_DECODE,
+        MEDIA_ERR_NETWORK: MediaError.MEDIA_ERR_NETWORK,
+        MEDIA_ERR_SRC_NOT_SUPPORTED: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
       }
 
-      // Workaround to force video.js to not re create a video element
-      (this.player as any).playerElIngest_ = this.player.el().parentNode
-    } else {
-      // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
-      (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
-        this.hlsjs = hlsjs
-      })
-
-      initVideoJsContribHlsJsPlayer(player)
+      player.ready(() => player.error(error))
+      return
     }
 
-    this.startTime = timeToInt(options.startTime)
+    // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
+    (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (_videojsPlayer: any, hlsjs: any) => {
+      this.hlsjs = hlsjs
+    })
+
+    initVideoJsContribHlsJsPlayer(player)
 
     player.src({
       type: options.type,
@@ -88,9 +79,7 @@ class P2pMediaLoaderPlugin extends Plugin {
     player.ready(() => {
       this.initializeCore()
 
-      if ((videojs as any).Html5Hlsjs) {
-        this.initializePlugin()
-      }
+      this.initializePlugin()
     })
   }
 
@@ -199,6 +188,25 @@ class P2pMediaLoaderPlugin extends Plugin {
   private arraySum (data: number[]) {
     return data.reduce((a: number, b: number) => a + b, 0)
   }
+
+  private fallbackToBuiltInIOS () {
+    logger.info('HLS.js does not seem to be supported. Fallback to built-in HLS.');
+
+    // Workaround to force video.js to not re create a video element
+    (this.player as any).playerElIngest_ = this.player.el().parentNode
+
+    this.player.src({
+      type: this.options.type,
+      src: addQueryParams(this.options.src, {
+        videoFileToken: this.options.videoFileToken(),
+        reinjectVideoFileToken: 'true'
+      })
+    })
+
+    this.player.ready(() => {
+      this.initializeCore()
+    })
+  }
 }
 
 videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
diff --git a/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts b/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
index a7ee91950..3c76d63f7 100644
--- a/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
@@ -2,6 +2,7 @@ import { basename } from 'path'
 import { Segment } from '@peertube/p2p-media-loader-core'
 import { logger } from '@root-helpers/logger'
 import { wait } from '@root-helpers/utils'
+import { removeQueryParams } from '@shared/core-utils'
 import { isSameOrigin } from '../common'
 
 type SegmentsJSON = { [filename: string]: string | { [byterange: string]: string } }
@@ -24,7 +25,7 @@ function segmentValidatorFactory (options: {
     // Wait for hash generation from the server
     if (isLive) await wait(1000)
 
-    const filename = basename(segment.url)
+    const filename = basename(removeQueryParams(segment.url))
 
     const segmentValue = (await segmentsJSON)[filename]
 
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index 3d9d5270e..c60154f3b 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -168,6 +168,7 @@ type P2PMediaLoaderPluginOptions = {
   loader: P2PMediaLoader
 
   requiresAuth: boolean
+  videoFileToken: () => string
 }
 
 export type P2PMediaLoader = {
diff --git a/client/src/sass/player/offline-notification.scss b/client/src/sass/player/offline-notification.scss
index 2108c2e30..450c95bbc 100644
--- a/client/src/sass/player/offline-notification.scss
+++ b/client/src/sass/player/offline-notification.scss
@@ -14,9 +14,3 @@ $height: 40px;
   justify-content: center;
   align-items: center;
 }
-
-.vjs-modal-dialog
-.vjs-modal-dialog-content,
-.video-js .vjs-modal-dialog {
-  top: $height;
-}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index d4c43ff68..4df8dbaf0 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -202,6 +202,10 @@ body {
   }
 }
 
+.vjs-modal-dialog-content {
+  padding-top: 40px !important;
+}
+
 // Error display disabled
 .vjs-error:not(.vjs-error-display-enabled) {
   .vjs-custom-error-display {