Improve embed title background opacity

client/src/assets/player/peertube-videojs-typings.ts

@@ -42,6 +42,8 @@ declare module 'video.js' {
     }
 
     audioTracks (): AudioTrackList
+
+    dock (options: { title: string, description: string }): void
   }
 }
 

client/src/assets/player/webtorrent/webtorrent-plugin.ts

@@ -25,12 +25,13 @@ type PlayOptions = {
 const Plugin = videojs.getPlugin('plugin')
 
 class WebTorrentPlugin extends Plugin {
+  readonly videoFiles: VideoFile[]
+
   private readonly playerElement: HTMLVideoElement
 
   private readonly autoplay: boolean = false
   private readonly startTime: number = 0
   private readonly savePlayerSrcFunction: VideoJsPlayer['src']
-  private readonly videoFiles: VideoFile[]
   private readonly videoDuration: number
   private readonly CONSTANTS = {
     INFO_SCHEDULER: 1000, // Don't change this

client/src/sass/player/_player-variables.scss

@@ -1,7 +1,7 @@
 $primary-foreground-color: #fff;
 $primary-foreground-opacity: 0.9;
 $primary-foreground-opacity-hover: 1;
-$primary-background-color: #000;
+$primary-background-color: rgba(0, 0, 0, 0.8);
 
 $font-size: 13px;
 $control-bar-height: 34px;

client/src/sass/player/peertube-skin.scss

@@ -21,6 +21,12 @@ body {
 
   .vjs-dock-text {
     padding-right: 10px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
+  }
+
+  .vjs-dock-title,
+  .vjs-dock-description {
+    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
   }
 
   .vjs-dock-description {
@@ -55,7 +61,7 @@ body {
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
-    border: 4px solid #fff;
+    border: 2px solid #fff;
     border-radius: 100%;
 
     left: 50%;

client/src/standalone/videos/embed.ts

@@ -1,15 +1,11 @@
 import './embed.scss'
 
 import {
-  getCompleteLocale,
-  is18nLocale,
-  isDefaultLocale,
   peertubeTranslate,
   ResultList,
   ServerConfig,
   VideoDetails
 } from '../../../../shared'
-import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
 import {
   P2PMediaLoaderOptions,
@@ -19,10 +15,14 @@ import {
 import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
 import { PeerTubeEmbedApi } from './embed-api'
 import { TranslationsManager } from '../../assets/player/translations-manager'
+import { VideoJsPlayer } from 'video.js'
+import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
+
+type Translations = { [ id: string ]: string }
 
 export class PeerTubeEmbed {
   videoElement: HTMLVideoElement
-  player: any
+  player: VideoJsPlayer
   api: PeerTubeEmbedApi = null
   autoplay: boolean
   controls: boolean
@@ -71,7 +71,7 @@ export class PeerTubeEmbed {
     element.parentElement.removeChild(element)
   }
 
-  displayError (text: string, translations?: { [ id: string ]: string }) {
+  displayError (text: string, translations?: Translations) {
     // Remove video element
     if (this.videoElement) this.removeElement(this.videoElement)
 
@@ -90,12 +90,12 @@ export class PeerTubeEmbed {
     errorText.innerHTML = translatedText
   }
 
-  videoNotFound (translations?: { [ id: string ]: string }) {
+  videoNotFound (translations?: Translations) {
     const text = 'This video does not exist.'
     this.displayError(text, translations)
   }
 
-  videoFetchError (translations?: { [ id: string ]: string }) {
+  videoFetchError (translations?: Translations) {
     const text = 'We cannot fetch the video. Please try again later.'
     this.displayError(text, translations)
   }
@@ -237,7 +237,7 @@ export class PeerTubeEmbed {
       })
     }
 
-    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: any) => this.player = player)
+    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: VideoJsPlayer) => this.player = player)
     this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 
     window[ 'videojsPlayer' ] = this.player
@@ -261,19 +261,19 @@ export class PeerTubeEmbed {
   }
 
   private async buildDock (videoInfo: VideoDetails, configResponse: Response) {
-    if (this.controls) {
+    if (!this.controls) return
-      const title = this.title ? videoInfo.name : undefined
 
-      const config: ServerConfig = await configResponse.json()
+    const title = this.title ? videoInfo.name : undefined
-      const description = config.tracker.enabled && this.warningTitle
-        ? '<span class="text">' + this.player.localize('Watching this video may reveal your IP address to others.') + '</span>'
-        : undefined
 
-      this.player.dock({
+    const config: ServerConfig = await configResponse.json()
-        title,
+    const description = config.tracker.enabled && this.warningTitle
-        description
+      ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
-      })
+      : undefined
-    }
+
+    this.player.dock({
+      title,
+      description
+    })
   }
 
   private buildCSS () {