From e945b184a0f29b47c33bbd05578f3493ca9c8e6c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Jun 2018 14:23:40 +0200 Subject: Localize player --- client/src/assets/player/peertube-link-button.ts | 2 +- client/src/assets/player/peertube-player.ts | 67 ++++++++++++++-------- .../src/assets/player/peertube-videojs-plugin.ts | 10 +--- client/src/assets/player/resolution-menu-button.ts | 7 +-- client/src/assets/player/settings-menu-button.ts | 2 +- client/src/assets/player/settings-menu-item.ts | 4 +- client/src/assets/player/utils.ts | 2 + client/src/assets/player/webtorrent-info-button.ts | 7 +-- 8 files changed, 53 insertions(+), 48 deletions(-) (limited to 'client/src/assets') diff --git a/client/src/assets/player/peertube-link-button.ts b/client/src/assets/player/peertube-link-button.ts index a13815d61..26f8b9d73 100644 --- a/client/src/assets/player/peertube-link-button.ts +++ b/client/src/assets/player/peertube-link-button.ts @@ -24,7 +24,7 @@ class PeerTubeLinkButton extends Button { const el = videojsUntyped.dom.createEl('a', { href: buildVideoLink(), innerHTML: 'PeerTube', - title: 'Go to the video page', + title: this.player_.localize('Go to the video page'), className: 'vjs-peertube-link', target: '_blank' }) diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts index d204b9703..b604097fa 100644 --- a/client/src/assets/player/peertube-player.ts +++ b/client/src/assets/player/peertube-player.ts @@ -12,6 +12,7 @@ import './peertube-videojs-plugin' import './peertube-load-progress-bar' import { videojsUntyped } from './peertube-videojs-typings' import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils' +import { is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed' @@ -20,7 +21,6 @@ function getVideojsOptions (options: { autoplay: boolean, playerElement: HTMLVideoElement, videoViewUrl: string, - videoEmbedUrl: string, videoDuration: number, videoFiles: VideoFile[], enableHotkeys: boolean, @@ -43,29 +43,6 @@ function getVideojsOptions (options: { videoViewUrl: options.videoViewUrl, videoDuration: options.videoDuration, startTime: options.startTime - }, - contextmenuUI: { - content: [ - { - label: 'Copy the video URL', - listener: function () { - copyToClipboard(buildVideoLink()) - } - }, - { - label: 'Copy the video URL at the current time', - listener: function () { - const player = this - copyToClipboard(buildVideoLink(player.currentTime())) - } - }, - { - label: 'Copy embed code', - listener: () => { - copyToClipboard(buildVideoEmbed(options.videoEmbedUrl)) - } - } - ] } }, controlBar: { @@ -135,4 +112,44 @@ function getControlBarChildren (options: { return children } -export { getVideojsOptions } +function addContextMenu (player: any, videoEmbedUrl: string) { + console.log(videoEmbedUrl) + + player.contextmenuUI({ + content: [ + { + label: player.localize('Copy the video URL'), + listener: function () { + copyToClipboard(buildVideoLink()) + } + }, + { + label: player.localize('Copy the video URL at the current time'), + listener: function () { + const player = this + copyToClipboard(buildVideoLink(player.currentTime())) + } + }, + { + label: player.localize('Copy embed code'), + listener: () => { + copyToClipboard(buildVideoEmbed(videoEmbedUrl)) + } + } + ] + }) +} + +function loadLocale (serverUrl: string, videojs: any, locale: string) { + if (!is18nLocale(locale) || isDefaultLocale(locale)) return undefined + + return fetch(serverUrl + '/client/locales/' + locale + '/player.json') + .then(res => res.json()) + .then(json => videojs.addLanguage(locale, json)) +} + +export { + loadLocale, + getVideojsOptions, + addContextMenu +} diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 79df42a53..68e98f170 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -4,15 +4,7 @@ import { VideoFile } from '../../../../shared/models/videos/video.model' import { renderVideo } from './video-renderer' import './settings-menu-button' import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings' -import { - getAverageBandwidth, - getStoredMute, - getStoredVolume, - isMobile, - saveAverageBandwidth, - saveMuteInStore, - saveVolumeInStore -} from './utils' +import { getAverageBandwidth, getStoredMute, getStoredVolume, saveAverageBandwidth, saveMuteInStore, saveVolumeInStore } from './utils' import minBy from 'lodash-es/minBy' import maxBy from 'lodash-es/maxBy' import * as CacheChunkStore from 'cache-chunk-store' diff --git a/client/src/assets/player/resolution-menu-button.ts b/client/src/assets/player/resolution-menu-button.ts index 2efc8de69..d317a5efc 100644 --- a/client/src/assets/player/resolution-menu-button.ts +++ b/client/src/assets/player/resolution-menu-button.ts @@ -8,10 +8,7 @@ class ResolutionMenuButton extends MenuButton { label: HTMLElement constructor (player: videojs.Player, options) { - options.label = 'Quality' super(player, options) - - this.controlText_ = 'Quality' this.player = player player.peertube().on('videoFileUpdate', () => this.updateLabel()) @@ -51,7 +48,7 @@ class ResolutionMenuButton extends MenuButton { this.player_, { id: -1, - label: 'Auto', + label: this.player_.localize('Auto'), src: null } )) @@ -77,4 +74,6 @@ class ResolutionMenuButton extends MenuButton { return this.player_.peertube().getCurrentResolutionLabel() } } +ResolutionMenuButton.prototype.controlText_ = 'Quality' + MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) diff --git a/client/src/assets/player/settings-menu-button.ts b/client/src/assets/player/settings-menu-button.ts index bf6ac145a..b51c52506 100644 --- a/client/src/assets/player/settings-menu-button.ts +++ b/client/src/assets/player/settings-menu-button.ts @@ -275,7 +275,7 @@ class SettingsDialog extends Component { } -SettingsButton.prototype.controlText_ = 'Settings Button' +SettingsButton.prototype.controlText_ = 'Settings' Component.registerComponent('SettingsButton', SettingsButton) Component.registerComponent('SettingsDialog', SettingsDialog) diff --git a/client/src/assets/player/settings-menu-item.ts b/client/src/assets/player/settings-menu-item.ts index 048c88533..f595fd459 100644 --- a/client/src/assets/player/settings-menu-item.ts +++ b/client/src/assets/player/settings-menu-item.ts @@ -132,7 +132,7 @@ class SettingsMenuItem extends MenuItem { const button = this.subMenu.menu.addChild('MenuItem', {}, 0) button.name_ = 'BackButton' button.addClass('vjs-back-button') - button.el_.innerHTML = this.subMenu.controlText_ + button.el_.innerHTML = this.player_.localize(this.subMenu.controlText_) } /** @@ -201,7 +201,7 @@ class SettingsMenuItem extends MenuItem { saveUpdateLabel.call(this.subMenu) } - this.settingsSubMenuTitleEl_.innerHTML = this.subMenu.controlText_ + this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_) this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_) this.panelChildEl.appendChild(this.settingsSubMenuEl_) this.update() diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index 487b3a1be..ce7aaea2a 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts @@ -1,3 +1,5 @@ +import { is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' + function toTitleCase (str: string) { return str.charAt(0).toUpperCase() + str.slice(1) } diff --git a/client/src/assets/player/webtorrent-info-button.ts b/client/src/assets/player/webtorrent-info-button.ts index baeb22b64..10945c665 100644 --- a/client/src/assets/player/webtorrent-info-button.ts +++ b/client/src/assets/player/webtorrent-info-button.ts @@ -60,13 +60,8 @@ class WebtorrentInfoButton extends Button { className: 'peers-number', textContent: 'HTTP' }) - const subDivFallbackText = videojsUntyped.dom.createEl('span', { - className: 'peers-text', - textContent: ' fallback' - }) subDivHttp.appendChild(subDivHttpText) - subDivHttp.appendChild(subDivFallbackText) div.appendChild(subDivHttp) this.player_.peertube().on('torrentInfo', (event, data) => { @@ -89,7 +84,7 @@ class WebtorrentInfoButton extends Button { uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ] peersNumber.textContent = numPeers - peersText.textContent = ' peers' + peersText.textContent = ' ' + this.player_.localize('peers') subDivHttp.className = 'vjs-peertube-hidden' subDivWebtorrent.className = 'vjs-peertube-displayed' -- cgit v1.2.3