Improve embed title background opacity

pull/2456/head
Chocobozzz 2020-02-03 13:33:42 +01:00
parent 598edb8af1
commit abb3097e81
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
5 changed files with 32 additions and 23 deletions

View File

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

View File

@ -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

View File

@ -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;

View File

@ -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%;

View File

@ -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
? '<span class="text">' + this.player.localize('Watching this video may reveal your IP address to others.') + '</span>'
: 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
? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
: undefined
this.player.dock({
title,
description
})
}
private buildCSS () {