Localize player

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -1,5 +1,5 @@
 import { catchError } from 'rxjs/operators'
-import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, ElementRef, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild, Inject } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RedirectService } from '@app/core/routing/redirect.service'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
@@ -21,9 +21,10 @@ import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './modal/video-download.component'
 import { VideoReportComponent } from './modal/video-report.component'
 import { VideoShareComponent } from './modal/video-share.component'
-import { getVideojsOptions } from '../../../assets/player/peertube-player'
+import { getVideojsOptions, loadLocale, addContextMenu } from '../../../assets/player/peertube-player'
 import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { environment } from '../../../environments/environment'
 
 @Component({
   selector: 'my-video-watch',
@@ -54,6 +55,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   likesBarTooltipText = ''
   hasAlreadyAcceptedPrivacyConcern = false
 
+  private videojsLocaleLoaded = false
   private otherVideos: Video[] = []
   private paramsSub: Subscription
 
@@ -72,7 +74,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private markdownService: MarkdownService,
     private zone: NgZone,
     private redirectService: RedirectService,
-    private i18n: I18n
+    private i18n: I18n,
+    @Inject(LOCALE_ID) private localeId: string
   ) {}
 
   get user () {
@@ -365,7 +368,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       inactivityTimeout: 2500,
       videoFiles: this.video.files,
       playerElement: this.playerElement,
-      videoEmbedUrl: this.video.embedUrl,
       videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
       videoDuration: this.video.duration,
       enableHotkeys: true,
@@ -374,11 +376,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       startTime
     })
 
+    if (this.videojsLocaleLoaded === false) {
+      await loadLocale(environment.apiUrl, videojs, environment.production === true ? this.localeId : 'fr')
+      this.videojsLocaleLoaded = true
+    }
+
     const self = this
-    this.zone.runOutsideAngular(() => {
+    this.zone.runOutsideAngular(async () => {
       videojs(this.playerElement, videojsOptions, function () {
         self.player = this
         this.on('customError', (event, data) => self.handleError(data.err))
+
+        addContextMenu(self.player, self.video.embedUrl)
       })
     })
 

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'
     })

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
+}

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'

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)

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)

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()

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)
 }

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'