Localize player

8 files changed, 53 insertions, 48 deletions

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'