1
0
mirror of https://github.com/videojs/video.js.git synced 2024-11-28 08:58:46 +02:00

feat: allow tokens in localize, localize progress bar time (#4060)

It allows you to use string as an key for the language files but have a default value that's different. In this case, we have a key of progress bar timing: currentTime={1} duration={2} which is used so that we have a descriptive key to what is happening. The default value matches that default value in en.json: {1} of {2}. The reason for the default value is so that the translation uses {1} of {2} for the actual localization without requiring en.json to be included in videojs by default.

Fix #4024.
This commit is contained in:
Gary Katsevman 2017-02-21 16:17:00 -05:00 committed by GitHub
parent 1f7a842348
commit db0112053f
5 changed files with 127 additions and 45 deletions

View File

@ -145,6 +145,10 @@ module.exports = function(grunt) {
files: ['src/css/**/*'],
tasks: ['skin']
},
lang: {
files: ['lang/**/*.json'],
tasks: ['vjslanguages']
}
},
connect: {
dev: {
@ -408,6 +412,7 @@ module.exports = function(grunt) {
'browserify:watchnovtt',
'browserify:tests',
'watch:skin',
'watch:lang',
'watch:dist'
],
// Run multiple watch tasks in parallel

View File

@ -4,15 +4,21 @@ The currently available translations are in the lang dir. This table shows the c
If you add or update a translation run `grunt check-translations` to update the list and include this modified doc in the pull request.
## Progress Bar Translations
The progress bar as a translation with a few token replacements.
They key is `progress bar timing: currentTime={1} duration={2}` and the default English value is `{1} of {2}`.
This default value is hardcoded as a default to the localize method in the SeekBar component.
## Status of translations
<!-- START langtable -->
| Language file | Missing translations |
| ----------------------- | ----------------------------------------------------------------------------------- |
| ar.json (missing 49) | Audio Player |
| ar.json (missing 50) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -58,10 +64,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| ba.json (missing 57) | Audio Player |
| ba.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -115,10 +122,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| bg.json (missing 57) | Audio Player |
| bg.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -172,10 +180,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| ca.json (missing 57) | Audio Player |
| ca.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -229,10 +238,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| cs.json (missing 57) | Audio Player |
| cs.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -286,10 +296,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| da.json (missing 57) | Audio Player |
| da.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -343,17 +354,19 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| de.json (missing 7) | Audio Player |
| de.json (missing 8) | Audio Player |
| | Video Player |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Volume Level |
| | Reset |
| | all settings to the default values |
| | End of dialog window. |
| el.json (missing 43) | Audio Player |
| el.json (missing 44) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Volume Level |
| | captions settings |
| | subtitles settings |
@ -393,10 +406,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| es.json (missing 56) | Audio Player |
| es.json (missing 57) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -449,10 +463,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| fa.json (missing 57) | Audio Player |
| fa.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -506,10 +521,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| fi.json (missing 57) | Audio Player |
| fi.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -563,14 +579,16 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| fr.json (missing 4) | subtitles settings |
| fr.json (missing 5) | progress bar timing: currentTime={1} duration={2} |
| | subtitles settings |
| | Reset |
| | all settings to the default values |
| | End of dialog window. |
| hr.json (missing 57) | Audio Player |
| hr.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -624,10 +642,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| hu.json (missing 57) | Audio Player |
| hu.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -681,10 +700,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| it.json (missing 57) | Audio Player |
| it.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -738,10 +758,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| ja.json (missing 57) | Audio Player |
| ja.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -795,10 +816,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| ko.json (missing 57) | Audio Player |
| ko.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -852,10 +874,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| nb.json (missing 57) | Audio Player |
| nb.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -909,10 +932,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| nl.json (missing 46) | Audio Player |
| nl.json (missing 47) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Audio Track |
| | Volume Level |
| | The media is encrypted and we do not have the keys to decrypt it. |
@ -955,10 +979,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| nn.json (missing 57) | Audio Player |
| nn.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -1012,10 +1037,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| pl.json (missing 50) | Audio Player |
| pl.json (missing 51) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -1062,10 +1088,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| pt-BR.json (missing 57) | Audio Player |
| pt-BR.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -1119,9 +1146,10 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| pt-PT.json (missing 42) | Audio Player |
| pt-PT.json (missing 43) | Audio Player |
| | Video Player |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Volume Level |
| | captions settings |
| | subtitles settings |
@ -1161,10 +1189,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| ru.json (missing 43) | Audio Player |
| ru.json (missing 44) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Volume Level |
| | captions settings |
| | subtitles settings |
@ -1204,10 +1233,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| sr.json (missing 57) | Audio Player |
| sr.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -1261,10 +1291,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| sv.json (missing 57) | Audio Player |
| sv.json (missing 58) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -1318,17 +1349,19 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| tr.json (missing 7) | Audio Player |
| tr.json (missing 8) | Audio Player |
| | Video Player |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Volume Level |
| | Reset |
| | all settings to the default values |
| | End of dialog window. |
| uk.json (missing 43) | Audio Player |
| uk.json (missing 44) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Volume Level |
| | captions settings |
| | subtitles settings |
@ -1368,9 +1401,10 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| vi.json (missing 42) | Audio Player |
| vi.json (missing 43) | Audio Player |
| | Video Player |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Volume Level |
| | captions settings |
| | subtitles settings |
@ -1410,10 +1444,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| zh-CN.json (missing 56) | Audio Player |
| zh-CN.json (missing 57) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Descriptions |
| | descriptions off |
| | Audio Track |
@ -1466,10 +1501,11 @@ If you add or update a translation run `grunt check-translations` to update the
| | Caption Settings Dialog |
| | Beginning of dialog window. Escape will cancel and close the window. |
| | End of dialog window. |
| zh-TW.json (missing 43) | Audio Player |
| zh-TW.json (missing 44) | Audio Player |
| | Video Player |
| | Replay |
| | Progress Bar |
| | progress bar timing: currentTime={1} duration={2} |
| | Volume Level |
| | captions settings |
| | subtitles settings |

View File

@ -12,6 +12,7 @@
"Loaded": "Loaded",
"Progress": "Progress",
"Progress Bar": "Progress Bar",
"progress bar timing: currentTime={1} duration={2}": "{1} of {2}",
"Fullscreen": "Fullscreen",
"Non-Fullscreen": "Non-Fullscreen",
"Mute": "Mute",

View File

@ -216,34 +216,70 @@ class Component {
/**
* Localize a string given the string in english.
*
* If tokens are provided, it'll try and run a simple token replacement on the provided string.
* The tokens it loooks for look like `{1}` with the index being 1-indexed into the tokens array.
*
* If a `defaultValue` is provided, it'll use that over `string`,
* if a value isn't found in provided language files.
* This is useful if you want to have a descriptive key for token replacement
* but have a succinct localized string and not require `en.json` to be included.
*
* Currently, it is used for the progress bar timing.
* ```js
* {
* "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
* }
* ```
* It is then used like so:
* ```js
* this.localize('progress bar timing: currentTime={1} duration{2}',
* [this.player_.currentTime(), this.player_.duration()],
* '{1} of {2}');
* ```
*
* Which outputs something like: `01:23 of 24:56`.
*
*
* @param {string} string
* The string to localize.
* The string to localize and the key to lookup in the language files.
* @param {string[]} [tokens]
* If the current item has token replacements, provide the tokens here.
* @param {string} [defaultValue]
* Defaults to `string`. Can be a default value to use for token replacement
* if the lookup key is needed to be separate.
*
* @return {string}
* The localized string or if no localization exists the english string.
*/
localize(string) {
localize(string, tokens, defaultValue = string) {
const code = this.player_.language && this.player_.language();
const languages = this.player_.languages && this.player_.languages();
const language = languages && languages[code];
const primaryCode = code && code.split('-')[0];
const primaryLang = languages && languages[primaryCode];
if (!code || !languages) {
return string;
}
const language = languages[code];
let localizedString = defaultValue;
if (language && language[string]) {
return language[string];
localizedString = language[string];
} else if (primaryLang && primaryLang[string]) {
localizedString = primaryLang[string];
}
const primaryCode = code.split('-')[0];
const primaryLang = languages[primaryCode];
if (tokens) {
localizedString = localizedString.replace(/\{(\d+)\}/g, function(match, index) {
const value = tokens[index - 1];
let ret = value;
if (primaryLang && primaryLang[string]) {
return primaryLang[string];
if (typeof value === 'undefined') {
ret = match;
}
return ret;
});
}
return string;
return localizedString;
}
/**

View File

@ -74,7 +74,11 @@ class SeekBar extends Slider {
this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
// human readable value of progress bar (time complete)
this.el_.setAttribute('aria-valuetext', formatTime(time, duration));
this.el_.setAttribute('aria-valuetext',
this.localize('progress bar timing: currentTime={1} duration={2}',
[formatTime(time, duration),
formatTime(duration, duration)],
'{1} of {2}'));
// Update the `PlayProgressBar`.
this.bar.update(Dom.getBoundingClientRect(this.el_), percent);