diff options
Diffstat (limited to 'client/src/assets/player')
-rw-r--r-- | client/src/assets/player/peertube-link-button.ts | 2 | ||||
-rw-r--r-- | client/src/assets/player/peertube-player.ts | 67 | ||||
-rw-r--r-- | client/src/assets/player/peertube-videojs-plugin.ts | 10 | ||||
-rw-r--r-- | client/src/assets/player/resolution-menu-button.ts | 7 | ||||
-rw-r--r-- | client/src/assets/player/settings-menu-button.ts | 2 | ||||
-rw-r--r-- | client/src/assets/player/settings-menu-item.ts | 4 | ||||
-rw-r--r-- | client/src/assets/player/utils.ts | 2 | ||||
-rw-r--r-- | client/src/assets/player/webtorrent-info-button.ts | 7 |
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 { | |||
24 | const el = videojsUntyped.dom.createEl('a', { | 24 | const el = videojsUntyped.dom.createEl('a', { |
25 | href: buildVideoLink(), | 25 | href: buildVideoLink(), |
26 | innerHTML: 'PeerTube', | 26 | innerHTML: 'PeerTube', |
27 | title: 'Go to the video page', | 27 | title: this.player_.localize('Go to the video page'), |
28 | className: 'vjs-peertube-link', | 28 | className: 'vjs-peertube-link', |
29 | target: '_blank' | 29 | target: '_blank' |
30 | }) | 30 | }) |
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' | |||
12 | import './peertube-load-progress-bar' | 12 | import './peertube-load-progress-bar' |
13 | import { videojsUntyped } from './peertube-videojs-typings' | 13 | import { videojsUntyped } from './peertube-videojs-typings' |
14 | import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils' | 14 | import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils' |
15 | import { is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' | ||
15 | 16 | ||
16 | // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) | 17 | // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) |
17 | videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed' | 18 | videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed' |
@@ -20,7 +21,6 @@ function getVideojsOptions (options: { | |||
20 | autoplay: boolean, | 21 | autoplay: boolean, |
21 | playerElement: HTMLVideoElement, | 22 | playerElement: HTMLVideoElement, |
22 | videoViewUrl: string, | 23 | videoViewUrl: string, |
23 | videoEmbedUrl: string, | ||
24 | videoDuration: number, | 24 | videoDuration: number, |
25 | videoFiles: VideoFile[], | 25 | videoFiles: VideoFile[], |
26 | enableHotkeys: boolean, | 26 | enableHotkeys: boolean, |
@@ -43,29 +43,6 @@ function getVideojsOptions (options: { | |||
43 | videoViewUrl: options.videoViewUrl, | 43 | videoViewUrl: options.videoViewUrl, |
44 | videoDuration: options.videoDuration, | 44 | videoDuration: options.videoDuration, |
45 | startTime: options.startTime | 45 | startTime: options.startTime |
46 | }, | ||
47 | contextmenuUI: { | ||
48 | content: [ | ||
49 | { | ||
50 | label: 'Copy the video URL', | ||
51 | listener: function () { | ||
52 | copyToClipboard(buildVideoLink()) | ||
53 | } | ||
54 | }, | ||
55 | { | ||
56 | label: 'Copy the video URL at the current time', | ||
57 | listener: function () { | ||
58 | const player = this | ||
59 | copyToClipboard(buildVideoLink(player.currentTime())) | ||
60 | } | ||
61 | }, | ||
62 | { | ||
63 | label: 'Copy embed code', | ||
64 | listener: () => { | ||
65 | copyToClipboard(buildVideoEmbed(options.videoEmbedUrl)) | ||
66 | } | ||
67 | } | ||
68 | ] | ||
69 | } | 46 | } |
70 | }, | 47 | }, |
71 | controlBar: { | 48 | controlBar: { |
@@ -135,4 +112,44 @@ function getControlBarChildren (options: { | |||
135 | return children | 112 | return children |
136 | } | 113 | } |
137 | 114 | ||
138 | export { getVideojsOptions } | 115 | function addContextMenu (player: any, videoEmbedUrl: string) { |
116 | console.log(videoEmbedUrl) | ||
117 | |||
118 | player.contextmenuUI({ | ||
119 | content: [ | ||
120 | { | ||
121 | label: player.localize('Copy the video URL'), | ||
122 | listener: function () { | ||
123 | copyToClipboard(buildVideoLink()) | ||
124 | } | ||
125 | }, | ||
126 | { | ||
127 | label: player.localize('Copy the video URL at the current time'), | ||
128 | listener: function () { | ||
129 | const player = this | ||
130 | copyToClipboard(buildVideoLink(player.currentTime())) | ||
131 | } | ||
132 | }, | ||
133 | { | ||
134 | label: player.localize('Copy embed code'), | ||
135 | listener: () => { | ||
136 | copyToClipboard(buildVideoEmbed(videoEmbedUrl)) | ||
137 | } | ||
138 | } | ||
139 | ] | ||
140 | }) | ||
141 | } | ||
142 | |||
143 | function loadLocale (serverUrl: string, videojs: any, locale: string) { | ||
144 | if (!is18nLocale(locale) || isDefaultLocale(locale)) return undefined | ||
145 | |||
146 | return fetch(serverUrl + '/client/locales/' + locale + '/player.json') | ||
147 | .then(res => res.json()) | ||
148 | .then(json => videojs.addLanguage(locale, json)) | ||
149 | } | ||
150 | |||
151 | export { | ||
152 | loadLocale, | ||
153 | getVideojsOptions, | ||
154 | addContextMenu | ||
155 | } | ||
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' | |||
4 | import { renderVideo } from './video-renderer' | 4 | import { renderVideo } from './video-renderer' |
5 | import './settings-menu-button' | 5 | import './settings-menu-button' |
6 | import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings' | 6 | import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings' |
7 | import { | 7 | import { getAverageBandwidth, getStoredMute, getStoredVolume, saveAverageBandwidth, saveMuteInStore, saveVolumeInStore } from './utils' |
8 | getAverageBandwidth, | ||
9 | getStoredMute, | ||
10 | getStoredVolume, | ||
11 | isMobile, | ||
12 | saveAverageBandwidth, | ||
13 | saveMuteInStore, | ||
14 | saveVolumeInStore | ||
15 | } from './utils' | ||
16 | import minBy from 'lodash-es/minBy' | 8 | import minBy from 'lodash-es/minBy' |
17 | import maxBy from 'lodash-es/maxBy' | 9 | import maxBy from 'lodash-es/maxBy' |
18 | import * as CacheChunkStore from 'cache-chunk-store' | 10 | 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 { | |||
8 | label: HTMLElement | 8 | label: HTMLElement |
9 | 9 | ||
10 | constructor (player: videojs.Player, options) { | 10 | constructor (player: videojs.Player, options) { |
11 | options.label = 'Quality' | ||
12 | super(player, options) | 11 | super(player, options) |
13 | |||
14 | this.controlText_ = 'Quality' | ||
15 | this.player = player | 12 | this.player = player |
16 | 13 | ||
17 | player.peertube().on('videoFileUpdate', () => this.updateLabel()) | 14 | player.peertube().on('videoFileUpdate', () => this.updateLabel()) |
@@ -51,7 +48,7 @@ class ResolutionMenuButton extends MenuButton { | |||
51 | this.player_, | 48 | this.player_, |
52 | { | 49 | { |
53 | id: -1, | 50 | id: -1, |
54 | label: 'Auto', | 51 | label: this.player_.localize('Auto'), |
55 | src: null | 52 | src: null |
56 | } | 53 | } |
57 | )) | 54 | )) |
@@ -77,4 +74,6 @@ class ResolutionMenuButton extends MenuButton { | |||
77 | return this.player_.peertube().getCurrentResolutionLabel() | 74 | return this.player_.peertube().getCurrentResolutionLabel() |
78 | } | 75 | } |
79 | } | 76 | } |
77 | ResolutionMenuButton.prototype.controlText_ = 'Quality' | ||
78 | |||
80 | MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) | 79 | 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 { | |||
275 | 275 | ||
276 | } | 276 | } |
277 | 277 | ||
278 | SettingsButton.prototype.controlText_ = 'Settings Button' | 278 | SettingsButton.prototype.controlText_ = 'Settings' |
279 | 279 | ||
280 | Component.registerComponent('SettingsButton', SettingsButton) | 280 | Component.registerComponent('SettingsButton', SettingsButton) |
281 | Component.registerComponent('SettingsDialog', SettingsDialog) | 281 | 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 { | |||
132 | const button = this.subMenu.menu.addChild('MenuItem', {}, 0) | 132 | const button = this.subMenu.menu.addChild('MenuItem', {}, 0) |
133 | button.name_ = 'BackButton' | 133 | button.name_ = 'BackButton' |
134 | button.addClass('vjs-back-button') | 134 | button.addClass('vjs-back-button') |
135 | button.el_.innerHTML = this.subMenu.controlText_ | 135 | button.el_.innerHTML = this.player_.localize(this.subMenu.controlText_) |
136 | } | 136 | } |
137 | 137 | ||
138 | /** | 138 | /** |
@@ -201,7 +201,7 @@ class SettingsMenuItem extends MenuItem { | |||
201 | saveUpdateLabel.call(this.subMenu) | 201 | saveUpdateLabel.call(this.subMenu) |
202 | } | 202 | } |
203 | 203 | ||
204 | this.settingsSubMenuTitleEl_.innerHTML = this.subMenu.controlText_ | 204 | this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_) |
205 | this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_) | 205 | this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_) |
206 | this.panelChildEl.appendChild(this.settingsSubMenuEl_) | 206 | this.panelChildEl.appendChild(this.settingsSubMenuEl_) |
207 | this.update() | 207 | 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 @@ | |||
1 | import { is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' | ||
2 | |||
1 | function toTitleCase (str: string) { | 3 | function toTitleCase (str: string) { |
2 | return str.charAt(0).toUpperCase() + str.slice(1) | 4 | return str.charAt(0).toUpperCase() + str.slice(1) |
3 | } | 5 | } |
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 { | |||
60 | className: 'peers-number', | 60 | className: 'peers-number', |
61 | textContent: 'HTTP' | 61 | textContent: 'HTTP' |
62 | }) | 62 | }) |
63 | const subDivFallbackText = videojsUntyped.dom.createEl('span', { | ||
64 | className: 'peers-text', | ||
65 | textContent: ' fallback' | ||
66 | }) | ||
67 | 63 | ||
68 | subDivHttp.appendChild(subDivHttpText) | 64 | subDivHttp.appendChild(subDivHttpText) |
69 | subDivHttp.appendChild(subDivFallbackText) | ||
70 | div.appendChild(subDivHttp) | 65 | div.appendChild(subDivHttp) |
71 | 66 | ||
72 | this.player_.peertube().on('torrentInfo', (event, data) => { | 67 | this.player_.peertube().on('torrentInfo', (event, data) => { |
@@ -89,7 +84,7 @@ class WebtorrentInfoButton extends Button { | |||
89 | uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ] | 84 | uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ] |
90 | 85 | ||
91 | peersNumber.textContent = numPeers | 86 | peersNumber.textContent = numPeers |
92 | peersText.textContent = ' peers' | 87 | peersText.textContent = ' ' + this.player_.localize('peers') |
93 | 88 | ||
94 | subDivHttp.className = 'vjs-peertube-hidden' | 89 | subDivHttp.className = 'vjs-peertube-hidden' |
95 | subDivWebtorrent.className = 'vjs-peertube-displayed' | 90 | subDivWebtorrent.className = 'vjs-peertube-displayed' |