diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index 8f3d76cac..a4e4c580c 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/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
}
}
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index d26fc38fa..bf6b0a718 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/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
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 0c2359ac7..935a60b49 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/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;
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index e80853861..f80106428 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/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%;
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index c91ae08b9..d5b42a025 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/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) {
- const title = this.title ? videoInfo.name : undefined
+ if (!this.controls) return
- const config: ServerConfig = await configResponse.json()
- const description = config.tracker.enabled && this.warningTitle
- ? '' + this.player.localize('Watching this video may reveal your IP address to others.') + ''
- : undefined
+ const title = this.title ? videoInfo.name : undefined
- this.player.dock({
- title,
- description
- })
- }
+ const config: ServerConfig = await configResponse.json()
+ const description = config.tracker.enabled && this.warningTitle
+ ? '' + peertubeTranslate('Watching this video may reveal your IP address to others.') + ''
+ : undefined
+
+ this.player.dock({
+ title,
+ description
+ })
}
private buildCSS () {