aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-02-03 13:33:42 +0100
committerChocobozzz <me@florianbigard.com>2020-02-03 13:33:42 +0100
commitabb3097e814af0f22477aea68310e85671230942 (patch)
treeb88b2c835f1d437aef0d822d9985961858c15067 /client
parent598edb8af1cc7e5ea3ead1ec9c96c4853b90be36 (diff)
downloadPeerTube-abb3097e814af0f22477aea68310e85671230942.tar.gz
PeerTube-abb3097e814af0f22477aea68310e85671230942.tar.zst
PeerTube-abb3097e814af0f22477aea68310e85671230942.zip
Improve embed title background opacity
Diffstat (limited to 'client')
-rw-r--r--client/src/assets/player/peertube-videojs-typings.ts2
-rw-r--r--client/src/assets/player/webtorrent/webtorrent-plugin.ts3
-rw-r--r--client/src/sass/player/_player-variables.scss2
-rw-r--r--client/src/sass/player/peertube-skin.scss8
-rw-r--r--client/src/standalone/videos/embed.ts40
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' {
42 } 42 }
43 43
44 audioTracks (): AudioTrackList 44 audioTracks (): AudioTrackList
45
46 dock (options: { title: string, description: string }): void
45 } 47 }
46} 48}
47 49
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 = {
25const Plugin = videojs.getPlugin('plugin') 25const Plugin = videojs.getPlugin('plugin')
26 26
27class WebTorrentPlugin extends Plugin { 27class WebTorrentPlugin extends Plugin {
28 readonly videoFiles: VideoFile[]
29
28 private readonly playerElement: HTMLVideoElement 30 private readonly playerElement: HTMLVideoElement
29 31
30 private readonly autoplay: boolean = false 32 private readonly autoplay: boolean = false
31 private readonly startTime: number = 0 33 private readonly startTime: number = 0
32 private readonly savePlayerSrcFunction: VideoJsPlayer['src'] 34 private readonly savePlayerSrcFunction: VideoJsPlayer['src']
33 private readonly videoFiles: VideoFile[]
34 private readonly videoDuration: number 35 private readonly videoDuration: number
35 private readonly CONSTANTS = { 36 private readonly CONSTANTS = {
36 INFO_SCHEDULER: 1000, // Don't change this 37 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 @@
1$primary-foreground-color: #fff; 1$primary-foreground-color: #fff;
2$primary-foreground-opacity: 0.9; 2$primary-foreground-opacity: 0.9;
3$primary-foreground-opacity-hover: 1; 3$primary-foreground-opacity-hover: 1;
4$primary-background-color: #000; 4$primary-background-color: rgba(0, 0, 0, 0.8);
5 5
6$font-size: 13px; 6$font-size: 13px;
7$control-bar-height: 34px; 7$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 {
21 21
22 .vjs-dock-text { 22 .vjs-dock-text {
23 padding-right: 10px; 23 padding-right: 10px;
24 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
25 }
26
27 .vjs-dock-title,
28 .vjs-dock-description {
29 text-shadow: 0 0 2px rgba(0, 0, 0, .5);
24 } 30 }
25 31
26 .vjs-dock-description { 32 .vjs-dock-description {
@@ -55,7 +61,7 @@ body {
55 $big-play-width: 1.2em; 61 $big-play-width: 1.2em;
56 $big-play-height: 1.2em; 62 $big-play-height: 1.2em;
57 63
58 border: 4px solid #fff; 64 border: 2px solid #fff;
59 border-radius: 100%; 65 border-radius: 100%;
60 66
61 left: 50%; 67 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 @@
1import './embed.scss' 1import './embed.scss'
2 2
3import { 3import {
4 getCompleteLocale,
5 is18nLocale,
6 isDefaultLocale,
7 peertubeTranslate, 4 peertubeTranslate,
8 ResultList, 5 ResultList,
9 ServerConfig, 6 ServerConfig,
10 VideoDetails 7 VideoDetails
11} from '../../../../shared' 8} from '../../../../shared'
12import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
13import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model' 9import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
14import { 10import {
15 P2PMediaLoaderOptions, 11 P2PMediaLoaderOptions,
@@ -19,10 +15,14 @@ import {
19import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type' 15import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
20import { PeerTubeEmbedApi } from './embed-api' 16import { PeerTubeEmbedApi } from './embed-api'
21import { TranslationsManager } from '../../assets/player/translations-manager' 17import { TranslationsManager } from '../../assets/player/translations-manager'
18import { VideoJsPlayer } from 'video.js'
19import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
20
21type Translations = { [ id: string ]: string }
22 22
23export class PeerTubeEmbed { 23export class PeerTubeEmbed {
24 videoElement: HTMLVideoElement 24 videoElement: HTMLVideoElement
25 player: any 25 player: VideoJsPlayer
26 api: PeerTubeEmbedApi = null 26 api: PeerTubeEmbedApi = null
27 autoplay: boolean 27 autoplay: boolean
28 controls: boolean 28 controls: boolean
@@ -71,7 +71,7 @@ export class PeerTubeEmbed {
71 element.parentElement.removeChild(element) 71 element.parentElement.removeChild(element)
72 } 72 }
73 73
74 displayError (text: string, translations?: { [ id: string ]: string }) { 74 displayError (text: string, translations?: Translations) {
75 // Remove video element 75 // Remove video element
76 if (this.videoElement) this.removeElement(this.videoElement) 76 if (this.videoElement) this.removeElement(this.videoElement)
77 77
@@ -90,12 +90,12 @@ export class PeerTubeEmbed {
90 errorText.innerHTML = translatedText 90 errorText.innerHTML = translatedText
91 } 91 }
92 92
93 videoNotFound (translations?: { [ id: string ]: string }) { 93 videoNotFound (translations?: Translations) {
94 const text = 'This video does not exist.' 94 const text = 'This video does not exist.'
95 this.displayError(text, translations) 95 this.displayError(text, translations)
96 } 96 }
97 97
98 videoFetchError (translations?: { [ id: string ]: string }) { 98 videoFetchError (translations?: Translations) {
99 const text = 'We cannot fetch the video. Please try again later.' 99 const text = 'We cannot fetch the video. Please try again later.'
100 this.displayError(text, translations) 100 this.displayError(text, translations)
101 } 101 }
@@ -237,7 +237,7 @@ export class PeerTubeEmbed {
237 }) 237 })
238 } 238 }
239 239
240 this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: any) => this.player = player) 240 this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: VideoJsPlayer) => this.player = player)
241 this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations)) 241 this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
242 242
243 window[ 'videojsPlayer' ] = this.player 243 window[ 'videojsPlayer' ] = this.player
@@ -261,19 +261,19 @@ export class PeerTubeEmbed {
261 } 261 }
262 262
263 private async buildDock (videoInfo: VideoDetails, configResponse: Response) { 263 private async buildDock (videoInfo: VideoDetails, configResponse: Response) {
264 if (this.controls) { 264 if (!this.controls) return
265 const title = this.title ? videoInfo.name : undefined
266 265
267 const config: ServerConfig = await configResponse.json() 266 const title = this.title ? videoInfo.name : undefined
268 const description = config.tracker.enabled && this.warningTitle
269 ? '<span class="text">' + this.player.localize('Watching this video may reveal your IP address to others.') + '</span>'
270 : undefined
271 267
272 this.player.dock({ 268 const config: ServerConfig = await configResponse.json()
273 title, 269 const description = config.tracker.enabled && this.warningTitle
274 description 270 ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
275 }) 271 : undefined
276 } 272
273 this.player.dock({
274 title,
275 description
276 })
277 } 277 }
278 278
279 private buildCSS () { 279 private buildCSS () {