this.router.navigate([ '/login' ])
}
+ cancelCommentReply () {
+ this.cancel.emit(null)
+ }
+
private addCommentReply (commentCreate: VideoCommentCreate) {
return this.videoCommentService
.addCommentReply(this.video.id, this.parentComment.id, commentCreate)
return this.videoCommentService
.addCommentThread(this.video.id, commentCreate)
}
-
- private cancelCommentReply () {
- this.cancel.emit(null)
- }
}
import './videojs-components/theater-button'
import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
-import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
+import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
import { getStoredP2PEnabled } from './peertube-player-local-storage'
+import { TranslationsManager } from './translations-manager'
// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
}
export class PeertubePlayerManager {
-
- private static videojsLocaleCache: { [ path: string ]: any } = {}
private static playerElementClassName: string
private static onPlayerChange: (player: any) => void
- static getServerTranslations (serverUrl: string, locale: string) {
- const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
- // It is the default locale, nothing to translate
- if (!path) return Promise.resolve(undefined)
-
- return fetch(path + '/server.json')
- .then(res => res.json())
- .catch(err => {
- console.error('Cannot get server translations', err)
- return undefined
- })
- }
-
static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) {
let p2pMediaLoader: any
const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader)
- await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language)
+ await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
const self = this
return new Promise(res => {
})
}
- private static loadLocaleInVideoJS (serverUrl: string, locale: string) {
- const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
- // It is the default locale, nothing to translate
- if (!path) return Promise.resolve(undefined)
-
- let p: Promise<any>
-
- if (PeertubePlayerManager.videojsLocaleCache[path]) {
- p = Promise.resolve(PeertubePlayerManager.videojsLocaleCache[path])
- } else {
- p = fetch(path + '/player.json')
- .then(res => res.json())
- .then(json => {
- PeertubePlayerManager.videojsLocaleCache[path] = json
- return json
- })
- .catch(err => {
- console.error('Cannot get player translations', err)
- return undefined
- })
- }
-
- const completeLocale = getCompleteLocale(locale)
- return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
- }
-
private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
const commonOptions = options.common
}
})
}
-
- private static getLocalePath (serverUrl: string, locale: string) {
- const completeLocale = getCompleteLocale(locale)
-
- if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
-
- return serverUrl + '/client/locales/' + completeLocale
- }
}
// ############################################################################
--- /dev/null
+import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models'
+
+export class TranslationsManager {
+ private static videojsLocaleCache: { [ path: string ]: any } = {}
+
+ static getServerTranslations (serverUrl: string, locale: string) {
+ const path = TranslationsManager.getLocalePath(serverUrl, locale)
+ // It is the default locale, nothing to translate
+ if (!path) return Promise.resolve(undefined)
+
+ return fetch(path + '/server.json')
+ .then(res => res.json())
+ .catch(err => {
+ console.error('Cannot get server translations', err)
+ return undefined
+ })
+ }
+
+ static loadLocaleInVideoJS (serverUrl: string, locale: string, videojs: any) {
+ const path = TranslationsManager.getLocalePath(serverUrl, locale)
+ // It is the default locale, nothing to translate
+ if (!path) return Promise.resolve(undefined)
+
+ let p: Promise<any>
+
+ if (TranslationsManager.videojsLocaleCache[ path ]) {
+ p = Promise.resolve(TranslationsManager.videojsLocaleCache[ path ])
+ } else {
+ p = fetch(path + '/player.json')
+ .then(res => res.json())
+ .then(json => {
+ TranslationsManager.videojsLocaleCache[ path ] = json
+ return json
+ })
+ .catch(err => {
+ console.error('Cannot get player translations', err)
+ return undefined
+ })
+ }
+
+ const completeLocale = getCompleteLocale(locale)
+ return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
+ }
+
+ private static getLocalePath (serverUrl: string, locale: string) {
+ const completeLocale = getCompleteLocale(locale)
+
+ if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
+
+ return serverUrl + '/client/locales/' + completeLocale
+ }
+}
channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
channel.bind('getPlaybackRates', (txn, params) => this.embed.playerOptions.playbackRates)
-
this.channel = channel
}
<video playsinline="true" id="video-container" class="video-js vjs-peertube-skin">
</video>
+ <div id="placeholder-preview" />
+
</body>
</html>
}
}
+#placeholder-preview {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-size: 100% auto;
+ width: 100%;
+ height: 100%;
+ background-position: 50% 50%;
+}
+
@media screen and (max-width: 300px) {
#error-block {
font-size: 36px;
import './embed.scss'
-import { peertubeTranslate, ResultList, ServerConfig, VideoDetails } from '../../../../shared'
+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,
- PeertubePlayerManager,
PeertubePlayerManagerOptions,
PlayerMode
} from '../../assets/player/peertube-player-manager'
import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
import { PeerTubeEmbedApi } from './embed-api'
+import { TranslationsManager } from '../../assets/player/translations-manager'
export class PeerTubeEmbed {
videoElement: HTMLVideoElement
const urlParts = window.location.pathname.split('/')
const videoId = urlParts[ urlParts.length - 1 ]
- const [ serverTranslations, videoResponse, captionsResponse, configResponse ] = await Promise.all([
- PeertubePlayerManager.getServerTranslations(window.location.origin, navigator.language),
- this.loadVideoInfo(videoId),
- this.loadVideoCaptions(videoId),
- this.loadConfig()
- ])
+ const videoPromise = this.loadVideoInfo(videoId)
+ const captionsPromise = this.loadVideoCaptions(videoId)
+ const configPromise = this.loadConfig()
+
+ const translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
+ const videoResponse = await videoPromise
if (!videoResponse.ok) {
+ const serverTranslations = await translationsPromise
+
if (videoResponse.status === 404) return this.videoNotFound(serverTranslations)
return this.videoFetchError(serverTranslations)
}
const videoInfo: VideoDetails = await videoResponse.json()
+ this.loadPlaceholder(videoInfo)
+
+ const PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
+
+ const promises = [ translationsPromise, captionsPromise, configPromise, PeertubePlayerManagerModulePromise ]
+ const [ serverTranslations, captionsResponse, configResponse, PeertubePlayerManagerModule ] = await Promise.all(promises)
+
+ const PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
this.loadParams(videoInfo)
})
}
- this.player = await PeertubePlayerManager.initialize(this.mode, options, player => this.player = player)
+ this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: any) => this.player = player)
this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
window[ 'videojsPlayer' ] = this.player
await this.buildDock(videoInfo, configResponse)
this.initializeApi()
+
+ this.removePlaceholder()
}
private handleError (err: Error, translations?: { [ id: string ]: string }) {
return []
}
+
+ private loadPlaceholder (video: VideoDetails) {
+ const placeholder = this.getPlaceholderElement()
+
+ const url = window.location.origin + video.previewPath
+ placeholder.style.backgroundImage = `url("${url}")`
+ }
+
+ private removePlaceholder () {
+ const placeholder = this.getPlaceholderElement()
+ placeholder.parentElement.removeChild(placeholder)
+ }
+
+ private getPlaceholderElement () {
+ return document.getElementById('placeholder-preview')
+ }
}
PeerTubeEmbed.main()
gawk -i inplace 'BEGIN { found=0 } { if (found || $0 ~ /^{/) { found=1; print }}' ./client/dist/embed-stats.json
npm run concurrently -- -k \
- "cd client && npm run webpack-bundle-analyzer -- -p 8888 ./dist/en_US/stats-es2015.json" \
+ "cd client && npm run webpack-bundle-analyzer -- -p 8888 ./dist/en-US/stats-es2015.json" \
"cd client && npm run webpack-bundle-analyzer -- -p 8889 ./dist/embed-stats.json"
projects / github / Chocobozzz / PeerTube.git / commitdiff
