13 files changed, 348 insertions, 23 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
index bbf946df0..9701e7f85 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
@@ -52,6 +52,20 @@
 
           <div *ngIf="formErrors.cache.torrents.size" class="form-error">{{ formErrors.cache.torrents.size }}</div>
         </div>
+
+        <div class="form-group" formGroupName="torrents">
+          <label i18n for="cacheTorrentsSize">Number of video storyboard images to keep in cache</label>
+
+          <div class="number-with-unit">
+            <input
+              type="number" min="0" id="cacheStoryboardsSize" class="form-control"
+              formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.storyboards.size'] }"
+            >
+            <span i18n>{getCacheSize('storyboards'), plural, =1 {cached storyboard} other {cached storyboards}}</span>
+          </div>
+
+          <div *ngIf="formErrors.cache.storyboards.size" class="form-error">{{ formErrors.cache.storyboards.size }}</div>
+        </div>
       </ng-container>
 
     </div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
index 79a98f288..06c5e6221 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
@@ -10,7 +10,7 @@ export class EditAdvancedConfigurationComponent {
   @Input() form: FormGroup
   @Input() formErrors: any
 
-  getCacheSize (type: 'captions' | 'previews' | 'torrents') {
+  getCacheSize (type: 'captions' | 'previews' | 'torrents' | 'storyboards') {
     return this.form.value['cache'][type]['size']
   }
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 2c3b7560d..9219d608b 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -9,8 +9,7 @@ import { Notifier } from '@app/core'
 import { ServerService } from '@app/core/server/server.service'
 import {
   ADMIN_EMAIL_VALIDATOR,
-  CACHE_CAPTIONS_SIZE_VALIDATOR,
-  CACHE_PREVIEWS_SIZE_VALIDATOR,
+  CACHE_SIZE_VALIDATOR,
   CONCURRENCY_VALIDATOR,
   INDEX_URL_VALIDATOR,
   INSTANCE_NAME_VALIDATOR,
@@ -120,13 +119,16 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
       },
       cache: {
         previews: {
-          size: CACHE_PREVIEWS_SIZE_VALIDATOR
+          size: CACHE_SIZE_VALIDATOR
         },
         captions: {
-          size: CACHE_CAPTIONS_SIZE_VALIDATOR
+          size: CACHE_SIZE_VALIDATOR
         },
         torrents: {
-          size: CACHE_CAPTIONS_SIZE_VALIDATOR
+          size: CACHE_SIZE_VALIDATOR
+        },
+        storyboards: {
+          size: CACHE_SIZE_VALIDATOR
         }
       },
       signup: {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index aba3ee086..43744789d 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -33,6 +33,7 @@ import {
   LiveVideo,
   PeerTubeProblemDocument,
   ServerErrorCode,
+  Storyboard,
   VideoCaption,
   VideoPrivacy,
   VideoState
@@ -69,6 +70,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   videoCaptions: VideoCaption[] = []
   liveVideo: LiveVideo
   videoPassword: string
+  storyboards: Storyboard[] = []
 
   playlistPosition: number
   playlist: VideoPlaylist = null
@@ -285,9 +287,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     forkJoin([
       videoAndLiveObs,
       this.videoCaptionService.listCaptions(videoId, videoPassword),
+      this.videoService.getStoryboards(videoId),
       this.userService.getAnonymousOrLoggedUser()
     ]).subscribe({
-      next: ([ { video, live, videoFileToken }, captionsResult, loggedInOrAnonymousUser ]) => {
+      next: ([ { video, live, videoFileToken }, captionsResult, storyboards, loggedInOrAnonymousUser ]) => {
         const queryParams = this.route.snapshot.queryParams
 
         const urlOptions = {
@@ -309,6 +312,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           video,
           live,
           videoCaptions: captionsResult.data,
+          storyboards,
           videoFileToken,
           videoPassword,
           loggedInOrAnonymousUser,
@@ -414,6 +418,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     video: VideoDetails
     live: LiveVideo
     videoCaptions: VideoCaption[]
+    storyboards: Storyboard[]
     videoFileToken: string
     videoPassword: string
 
@@ -421,7 +426,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     loggedInOrAnonymousUser: User
     forceAutoplay: boolean
   }) {
-    const { video, live, videoCaptions, urlOptions, videoFileToken, videoPassword, loggedInOrAnonymousUser, forceAutoplay } = options
+    const {
+      video,
+      live,
+      videoCaptions,
+      storyboards,
+      urlOptions,
+      videoFileToken,
+      videoPassword,
+      loggedInOrAnonymousUser,
+      forceAutoplay
+    } = options
 
     this.subscribeToLiveEventsIfNeeded(this.video, video)
 
@@ -430,6 +445,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.liveVideo = live
     this.videoFileToken = videoFileToken
     this.videoPassword = videoPassword
+    this.storyboards = storyboards
 
     // Re init attributes
     this.playerPlaceholderImgSrc = undefined
@@ -485,6 +501,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     const params = {
       video: this.video,
       videoCaptions: this.videoCaptions,
+      storyboards: this.storyboards,
       liveVideo: this.liveVideo,
       videoFileToken: this.videoFileToken,
       videoPassword: this.videoPassword,
@@ -636,6 +653,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     video: VideoDetails
     liveVideo: LiveVideo
     videoCaptions: VideoCaption[]
+    storyboards: Storyboard[]
 
     videoFileToken: string
     videoPassword: string
@@ -646,7 +664,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     forceAutoplay: boolean
     user?: AuthUser // Keep for plugins
   }) {
-    const { video, liveVideo, videoCaptions, videoFileToken, videoPassword, urlOptions, loggedInOrAnonymousUser, forceAutoplay } = params
+    const {
+      video,
+      liveVideo,
+      videoCaptions,
+      storyboards,
+      videoFileToken,
+      videoPassword,
+      urlOptions,
+      loggedInOrAnonymousUser,
+      forceAutoplay
+    } = params
 
     const getStartTime = () => {
       const byUrl = urlOptions.startTime !== undefined
@@ -673,6 +701,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       src: environment.apiUrl + c.captionPath
     }))
 
+    const storyboard = storyboards.length !== 0
+      ? {
+        url: environment.apiUrl + storyboards[0].storyboardPath,
+        height: storyboards[0].spriteHeight,
+        width: storyboards[0].spriteWidth,
+        interval: storyboards[0].spriteDuration
+      }
+      : undefined
+
     const liveOptions = video.isLive
       ? { latencyMode: liveVideo.latencyMode }
       : undefined
@@ -734,6 +771,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         videoPassword: () => videoPassword,
 
         videoCaptions: playerCaptions,
+        storyboard,
 
         videoShortUUID: video.shortUUID,
         videoUUID: video.uuid,
@@ -767,6 +805,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       else mode = 'webtorrent'
     }
 
+    // FIXME: remove, we don't support these old web browsers anymore
     // p2p-media-loader needs TextEncoder, fallback on WebTorrent if not available
     if (typeof TextEncoder === 'undefined') {
       mode = 'webtorrent'
diff --git a/client/src/app/shared/form-validators/custom-config-validators.ts b/client/src/app/shared/form-validators/custom-config-validators.ts
index ff0813f7d..3672e5610 100644
--- a/client/src/app/shared/form-validators/custom-config-validators.ts
+++ b/client/src/app/shared/form-validators/custom-config-validators.ts
@@ -22,21 +22,12 @@ export const SERVICES_TWITTER_USERNAME_VALIDATOR: BuildFormValidator = {
   }
 }
 
-export const CACHE_PREVIEWS_SIZE_VALIDATOR: BuildFormValidator = {
+export const CACHE_SIZE_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
   MESSAGES: {
-    required: $localize`Previews cache size is required.`,
-    min: $localize`Previews cache size must be greater than 1.`,
-    pattern: $localize`Previews cache size must be a number.`
-  }
-}
-
-export const CACHE_CAPTIONS_SIZE_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
-  MESSAGES: {
-    required: $localize`Captions cache size is required.`,
-    min: $localize`Captions cache size must be greater than 1.`,
-    pattern: $localize`Captions cache size must be a number.`
+    required: $localize`Cache size is required.`,
+    min: $localize`Cache size must be greater than 1.`,
+    pattern: $localize`Cache size must be a number.`
   }
 }
 
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index d67a2e192..c2e3d7511 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -11,6 +11,7 @@ import {
   FeedFormat,
   NSFWPolicyType,
   ResultList,
+  Storyboard,
   UserVideoRate,
   UserVideoRateType,
   UserVideoRateUpdate,
@@ -344,6 +345,25 @@ export class VideoService {
                )
   }
 
+  // ---------------------------------------------------------------------------
+
+  getStoryboards (videoId: string | number) {
+    return this.authHttp
+      .get<{ storyboards: Storyboard[] }>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/storyboards')
+      .pipe(
+        map(({ storyboards }) => storyboards),
+        catchError(err => {
+          if (err.status === 404) {
+            return of([])
+          }
+
+          this.restExtractor.handleError(err)
+        })
+      )
+  }
+
+  // ---------------------------------------------------------------------------
+
   getSource (videoId: number) {
     return this.authHttp
                .get<{ source: VideoSource }>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/source')
@@ -358,6 +378,8 @@ export class VideoService {
                )
   }
 
+  // ---------------------------------------------------------------------------
+
   setVideoLike (id: string, videoPassword: string) {
     return this.setVideoRate(id, 'like', videoPassword)
   }
@@ -370,6 +392,8 @@ export class VideoService {
     return this.setVideoRate(id, 'none', videoPassword)
   }
 
+  // ---------------------------------------------------------------------------
+
   getUserVideoRating (id: string) {
     const url = UserService.BASE_USERS_URL + 'me/videos/' + id + '/rating'
 
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 2781850b9..66d9c7298 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -6,6 +6,7 @@ import './shared/stats/stats-plugin'
 import './shared/bezels/bezels-plugin'
 import './shared/peertube/peertube-plugin'
 import './shared/resolutions/peertube-resolutions-plugin'
+import './shared/control-bar/storyboard-plugin'
 import './shared/control-bar/next-previous-video-button'
 import './shared/control-bar/p2p-info-button'
 import './shared/control-bar/peertube-link-button'
@@ -42,6 +43,12 @@ CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
 CaptionsButton.prototype.label_ = ' '
 
+// TODO: remove when https://github.com/videojs/video.js/pull/7598 is merged
+const PlayProgressBar = videojs.getComponent('PlayProgressBar') as any
+if (PlayProgressBar.prototype.options_.children.includes('timeTooltip') !== true) {
+  PlayProgressBar.prototype.options_.children.push('timeTooltip')
+}
+
 export class PeertubePlayerManager {
   private static playerElementClassName: string
   private static playerElementAttributes: { name: string, value: string }[] = []
@@ -135,6 +142,10 @@ export class PeertubePlayerManager {
           p2pEnabled: options.common.p2pEnabled
         })
 
+        if (options.common.storyboard) {
+          player.storyboard(options.common.storyboard)
+        }
+
         player.on('p2pInfo', (_, data: PlayerNetworkInfo) => {
           if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return
 
diff --git a/client/src/assets/player/shared/control-bar/index.ts b/client/src/assets/player/shared/control-bar/index.ts
index e71e90713..24877c267 100644
--- a/client/src/assets/player/shared/control-bar/index.ts
+++ b/client/src/assets/player/shared/control-bar/index.ts
@@ -3,4 +3,5 @@ export * from './p2p-info-button'
 export * from './peertube-link-button'
 export * from './peertube-live-display'
 export * from './peertube-load-progress-bar'
+export * from './storyboard-plugin'
 export * from './theater-button'
diff --git a/client/src/assets/player/shared/control-bar/storyboard-plugin.ts b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
new file mode 100644
index 000000000..c1843f595
--- /dev/null
+++ b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
@@ -0,0 +1,184 @@
+import videojs from 'video.js'
+import { StoryboardOptions } from '../../types'
+
+// Big thanks to this beautiful plugin: https://github.com/phloxic/videojs-sprite-thumbnails
+// Adapted to respect peertube player style
+
+const Plugin = videojs.getPlugin('plugin')
+
+class StoryboardPlugin extends Plugin {
+  private url: string
+  private height: number
+  private width: number
+  private interval: number
+
+  private cached: boolean
+
+  private mouseTimeTooltip: videojs.MouseTimeDisplay
+  private seekBar: { el(): HTMLElement, mouseTimeDisplay: any, playProgressBar: any }
+  private progress: any
+
+  private spritePlaceholder: HTMLElement
+
+  private readonly sprites: { [id: string]: HTMLImageElement } = {}
+
+  private readonly boundedHijackMouseTooltip: typeof StoryboardPlugin.prototype.hijackMouseTooltip
+
+  constructor (player: videojs.Player, options: videojs.ComponentOptions & StoryboardOptions) {
+    super(player, options)
+
+    this.url = options.url
+    this.height = options.height
+    this.width = options.width
+    this.interval = options.interval
+
+    this.boundedHijackMouseTooltip = this.hijackMouseTooltip.bind(this)
+
+    this.player.ready(() => {
+      player.addClass('vjs-storyboard')
+
+      this.init()
+    })
+  }
+
+  init () {
+    const controls = this.player.controlBar as any
+
+    // default control bar component tree is expected
+    // https://docs.videojs.com/tutorial-components.html#default-component-tree
+    this.progress = controls?.progressControl
+    this.seekBar = this.progress?.seekBar
+
+    this.mouseTimeTooltip = this.seekBar?.mouseTimeDisplay?.timeTooltip
+
+    this.spritePlaceholder = videojs.dom.createEl('div', { className: 'vjs-storyboard-sprite-placeholder' }) as HTMLElement
+    this.seekBar?.el()?.appendChild(this.spritePlaceholder)
+
+    this.player.on([ 'ready', 'loadstart' ], evt => {
+      if (evt !== 'ready') {
+        const spriteSource = this.player.currentSources().find(source => {
+          return Object.prototype.hasOwnProperty.call(source, 'storyboard')
+        }) as any
+        const spriteOpts = spriteSource?.['storyboard'] as StoryboardOptions
+
+        if (spriteOpts) {
+          this.url = spriteOpts.url
+          this.height = spriteOpts.height
+          this.width = spriteOpts.width
+          this.interval = spriteOpts.interval
+        }
+      }
+
+      this.cached = !!this.sprites[this.url]
+
+      this.load()
+    })
+  }
+
+  private load () {
+    const spriteEvents = [ 'mousemove', 'touchmove' ]
+
+    if (this.isReady()) {
+      if (!this.cached) {
+        this.sprites[this.url] = videojs.dom.createEl('img', {
+          src: this.url
+        })
+      }
+      this.progress.on(spriteEvents, this.boundedHijackMouseTooltip)
+    } else {
+      this.progress.off(spriteEvents, this.boundedHijackMouseTooltip)
+
+      this.resetMouseTooltip()
+    }
+  }
+
+  private hijackMouseTooltip (evt: Event) {
+    const sprite = this.sprites[this.url]
+    const imgWidth = sprite.naturalWidth
+    const imgHeight = sprite.naturalHeight
+    const seekBarEl = this.seekBar.el()
+
+    if (!sprite.complete || !imgWidth || !imgHeight) {
+      this.resetMouseTooltip()
+      return
+    }
+
+    this.player.requestNamedAnimationFrame('StoryBoardPlugin#hijackMouseTooltip', () => {
+      const seekBarRect = videojs.dom.getBoundingClientRect(seekBarEl)
+      const playerRect = videojs.dom.getBoundingClientRect(this.player.el())
+
+      if (!seekBarRect || !playerRect) return
+
+      const seekBarX = videojs.dom.getPointerPosition(seekBarEl, evt).x
+      let position = seekBarX * this.player.duration()
+
+      const maxPosition = Math.round((imgHeight / this.height) * (imgWidth / this.width)) - 1
+      position = Math.min(position / this.interval, maxPosition)
+
+      const responsive = 600
+      const playerWidth = this.player.currentWidth()
+      const scaleFactor = responsive && playerWidth < responsive
+        ? playerWidth / responsive
+        : 1
+      const columns = imgWidth / this.width
+
+      const scaledWidth = this.width * scaleFactor
+      const scaledHeight = this.height * scaleFactor
+      const cleft = Math.floor(position % columns) * -scaledWidth
+      const ctop = Math.floor(position / columns) * -scaledHeight
+
+      const bgSize = `${imgWidth * scaleFactor}px ${imgHeight * scaleFactor}px`
+      const topOffset = -scaledHeight - 60
+
+      const previewHalfSize = Math.round(scaledWidth / 2)
+      let left = seekBarRect.width * seekBarX - previewHalfSize
+
+      // Seek bar doesn't take all the player width, so we can add/minus a few more pixels
+      const minLeft = playerRect.left - seekBarRect.left
+      const maxLeft = seekBarRect.width - scaledWidth + (playerRect.right - seekBarRect.right)
+
+      if (left < minLeft) left = minLeft
+      if (left > maxLeft) left = maxLeft
+
+      const tooltipStyle: { [id: string]: string } = {
+        'background-image': `url("${this.url}")`,
+        'background-repeat': 'no-repeat',
+        'background-position': `${cleft}px ${ctop}px`,
+        'background-size': bgSize,
+
+        'color': '#fff',
+        'text-shadow': '1px 1px #000',
+
+        'position': 'relative',
+
+        'top': `${topOffset}px`,
+
+        'border': '1px solid #000',
+
+        // border should not overlay thumbnail area
+        'width': `${scaledWidth + 2}px`,
+        'height': `${scaledHeight + 2}px`
+      }
+
+      tooltipStyle.left = `${left}px`
+
+      for (const [ key, value ] of Object.entries(tooltipStyle)) {
+        this.spritePlaceholder.style.setProperty(key, value)
+      }
+    })
+  }
+
+  private resetMouseTooltip () {
+    if (this.spritePlaceholder) {
+      this.spritePlaceholder.style.cssText = ''
+    }
+  }
+
+  private isReady () {
+    return this.mouseTimeTooltip && this.width && this.height && this.url
+  }
+}
+
+videojs.registerPlugin('storyboard', StoryboardPlugin)
+
+export { StoryboardPlugin }
diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/manager-options.ts
index 1f3a0aa2e..a73341b4c 100644
--- a/client/src/assets/player/types/manager-options.ts
+++ b/client/src/assets/player/types/manager-options.ts
@@ -1,6 +1,6 @@
 import { PluginsManager } from '@root-helpers/plugins-manager'
 import { LiveVideoLatencyMode, VideoFile } from '@shared/models'
-import { PlaylistPluginOptions, VideoJSCaption } from './peertube-videojs-typings'
+import { PlaylistPluginOptions, VideoJSCaption, VideoJSStoryboard } from './peertube-videojs-typings'
 
 export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
 
@@ -78,6 +78,7 @@ export interface CommonOptions extends CustomizationOptions {
   language?: string
 
   videoCaptions: VideoJSCaption[]
+  storyboard: VideoJSStoryboard
 
   videoUUID: string
   videoShortUUID: string
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index 723c42c5d..30d2b287f 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -49,6 +49,8 @@ declare module 'video.js' {
 
     stats (options?: StatsCardOptions): StatsForNerdsPlugin
 
+    storyboard (options: StoryboardOptions): void
+
     textTracks (): TextTrackList & {
       tracks_: (TextTrack & { id: string, label: string, src: string })[]
     }
@@ -89,6 +91,13 @@ type VideoJSCaption = {
   src: string
 }
 
+type VideoJSStoryboard = {
+  url: string
+  width: number
+  height: number
+  interval: number
+}
+
 type PeerTubePluginOptions = {
   mode: PlayerMode
 
@@ -118,6 +127,13 @@ type MetricsPluginOptions = {
   videoUUID: string
 }
 
+type StoryboardOptions = {
+  url: string
+  width: number
+  height: number
+  interval: number
+}
+
 type PlaylistPluginOptions = {
   elements: VideoPlaylistElement[]
 
@@ -238,6 +254,7 @@ type PlaylistItemOptions = {
 
 export {
   PlayerNetworkInfo,
+  VideoJSStoryboard,
   PlaylistItemOptions,
   NextPreviousVideoButtonOptions,
   ResolutionUpdateData,
@@ -251,6 +268,7 @@ export {
   PeerTubeResolution,
   VideoJSPluginOptions,
   LoadedQualityData,
+  StoryboardOptions,
   PeerTubeLinkButtonOptions,
   PeerTubeP2PInfoButtonOptions
 }
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 96b3adf66..02d5fa169 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -3,6 +3,20 @@
 @use '_mixins' as *;
 @use './_player-variables' as *;
 
+// Like the time tooltip
+.video-js .vjs-progress-holder .vjs-storyboard-sprite-placeholder {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-storyboard-sprite-placeholder,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-storyboard-sprite-placeholder {
+  display: block;
+
+  // Ensure that we maintain a font-size of ~10px.
+  font-size: 0.6em;
+  visibility: visible;
+}
+
 .video-js.vjs-peertube-skin .vjs-control-bar {
   z-index: 100;
 
@@ -79,6 +93,7 @@
           top: -0.3em;
         }
 
+        // Only used on mobile
         .vjs-time-tooltip {
           display: none;
         }
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 84d7a00f1..d150c54ee 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -6,6 +6,31 @@
 /* Special mobile style */
 
 .video-js.vjs-peertube-skin.vjs-is-mobile {
+  // No hover means we can't display the storyboard/time tooltip on mouse hover
+  // Use the time tooltip in progress control instead
+  .vjs-mouse-display {
+    display: none !important;
+  }
+
+  .vjs-storyboard-sprite-placeholder {
+    display: none;
+  }
+
+  .vjs-progress-control .vjs-sliding {
+
+    .vjs-time-tooltip,
+    .vjs-storyboard-sprite-placeholder {
+      display: block !important;
+
+      visibility: visible !important;
+    }
+
+    .vjs-time-tooltip {
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+  }
+
   .vjs-control-bar {
     .vjs-progress-control .vjs-slider .vjs-play-progress {
       // Always display the circle on mobile