aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-12-17 11:20:24 +0100
committerChocobozzz <me@florianbigard.com>2019-12-18 10:14:22 +0100
commit3f9c4955af81702591a6eeb2069f99faf0d2814d (patch)
tree8f23b5e79bde4a46dbc2318c0500576c35712486 /client/src/assets/player
parentf88ee4a9523bf3c4a61a45832963c558aed4d0b1 (diff)
downloadPeerTube-3f9c4955af81702591a6eeb2069f99faf0d2814d.tar.gz
PeerTube-3f9c4955af81702591a6eeb2069f99faf0d2814d.tar.zst
PeerTube-3f9c4955af81702591a6eeb2069f99faf0d2814d.zip
Speedup embed first paint
Diffstat (limited to 'client/src/assets/player')
-rw-r--r--client/src/assets/player/peertube-player-manager.ts54
-rw-r--r--client/src/assets/player/translations-manager.ts52
2 files changed, 55 insertions, 51 deletions
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 2f4e0ac1a..b1551185a 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -15,11 +15,12 @@ import './videojs-components/peertube-load-progress-bar'
15import './videojs-components/theater-button' 15import './videojs-components/theater-button'
16import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings' 16import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
17import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils' 17import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
18import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' 18import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
19import { segmentValidatorFactory } from './p2p-media-loader/segment-validator' 19import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
20import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder' 20import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
21import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' 21import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
22import { getStoredP2PEnabled } from './peertube-player-local-storage' 22import { getStoredP2PEnabled } from './peertube-player-local-storage'
23import { TranslationsManager } from './translations-manager'
23 24
24// Change 'Playback Rate' to 'Speed' (smaller for our settings menu) 25// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
25videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed' 26videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
@@ -86,24 +87,9 @@ export type PeertubePlayerManagerOptions = {
86} 87}
87 88
88export class PeertubePlayerManager { 89export class PeertubePlayerManager {
89
90 private static videojsLocaleCache: { [ path: string ]: any } = {}
91 private static playerElementClassName: string 90 private static playerElementClassName: string
92 private static onPlayerChange: (player: any) => void 91 private static onPlayerChange: (player: any) => void
93 92
94 static getServerTranslations (serverUrl: string, locale: string) {
95 const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
96 // It is the default locale, nothing to translate
97 if (!path) return Promise.resolve(undefined)
98
99 return fetch(path + '/server.json')
100 .then(res => res.json())
101 .catch(err => {
102 console.error('Cannot get server translations', err)
103 return undefined
104 })
105 }
106
107 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) { 93 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) {
108 let p2pMediaLoader: any 94 let p2pMediaLoader: any
109 95
@@ -120,7 +106,7 @@ export class PeertubePlayerManager {
120 106
121 const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader) 107 const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader)
122 108
123 await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language) 109 await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
124 110
125 const self = this 111 const self = this
126 return new Promise(res => { 112 return new Promise(res => {
@@ -181,32 +167,6 @@ export class PeertubePlayerManager {
181 }) 167 })
182 } 168 }
183 169
184 private static loadLocaleInVideoJS (serverUrl: string, locale: string) {
185 const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
186 // It is the default locale, nothing to translate
187 if (!path) return Promise.resolve(undefined)
188
189 let p: Promise<any>
190
191 if (PeertubePlayerManager.videojsLocaleCache[path]) {
192 p = Promise.resolve(PeertubePlayerManager.videojsLocaleCache[path])
193 } else {
194 p = fetch(path + '/player.json')
195 .then(res => res.json())
196 .then(json => {
197 PeertubePlayerManager.videojsLocaleCache[path] = json
198 return json
199 })
200 .catch(err => {
201 console.error('Cannot get player translations', err)
202 return undefined
203 })
204 }
205
206 const completeLocale = getCompleteLocale(locale)
207 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
208 }
209
210 private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) { 170 private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
211 const commonOptions = options.common 171 const commonOptions = options.common
212 172
@@ -519,14 +479,6 @@ export class PeertubePlayerManager {
519 } 479 }
520 }) 480 })
521 } 481 }
522
523 private static getLocalePath (serverUrl: string, locale: string) {
524 const completeLocale = getCompleteLocale(locale)
525
526 if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
527
528 return serverUrl + '/client/locales/' + completeLocale
529 }
530} 482}
531 483
532// ############################################################################ 484// ############################################################################
diff --git a/client/src/assets/player/translations-manager.ts b/client/src/assets/player/translations-manager.ts
new file mode 100644
index 000000000..e9f300ce7
--- /dev/null
+++ b/client/src/assets/player/translations-manager.ts
@@ -0,0 +1,52 @@
1import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models'
2
3export class TranslationsManager {
4 private static videojsLocaleCache: { [ path: string ]: any } = {}
5
6 static getServerTranslations (serverUrl: string, locale: string) {
7 const path = TranslationsManager.getLocalePath(serverUrl, locale)
8 // It is the default locale, nothing to translate
9 if (!path) return Promise.resolve(undefined)
10
11 return fetch(path + '/server.json')
12 .then(res => res.json())
13 .catch(err => {
14 console.error('Cannot get server translations', err)
15 return undefined
16 })
17 }
18
19 static loadLocaleInVideoJS (serverUrl: string, locale: string, videojs: any) {
20 const path = TranslationsManager.getLocalePath(serverUrl, locale)
21 // It is the default locale, nothing to translate
22 if (!path) return Promise.resolve(undefined)
23
24 let p: Promise<any>
25
26 if (TranslationsManager.videojsLocaleCache[ path ]) {
27 p = Promise.resolve(TranslationsManager.videojsLocaleCache[ path ])
28 } else {
29 p = fetch(path + '/player.json')
30 .then(res => res.json())
31 .then(json => {
32 TranslationsManager.videojsLocaleCache[ path ] = json
33 return json
34 })
35 .catch(err => {
36 console.error('Cannot get player translations', err)
37 return undefined
38 })
39 }
40
41 const completeLocale = getCompleteLocale(locale)
42 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
43 }
44
45 private static getLocalePath (serverUrl: string, locale: string) {
46 const completeLocale = getCompleteLocale(locale)
47
48 if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
49
50 return serverUrl + '/client/locales/' + completeLocale
51 }
52}