From abb3097e814af0f22477aea68310e85671230942 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 3 Feb 2020 13:33:42 +0100 Subject: [PATCH] Improve embed title background opacity --- .../assets/player/peertube-videojs-typings.ts | 2 + .../player/webtorrent/webtorrent-plugin.ts | 3 +- client/src/sass/player/_player-variables.scss | 2 +- client/src/sass/player/peertube-skin.scss | 8 +++- client/src/standalone/videos/embed.ts | 40 +++++++++---------- 5 files changed, 32 insertions(+), 23 deletions(-) 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 () { -- 2.25.1