lbry-desktop/ui/component/viewers/videoViewer/internal/plugins/videojs-i18n/plugin.js
infinite-persistence be7193382c
Fix remaining untranslated ctrls
Ticket: 1507
2022-05-17 16:33:11 +08:00

123 lines
3.8 KiB
JavaScript

/**
* Although videojs has its own i18n system, it is not trivial to pass our
* translation data to it. Instead of maintaining two sets of localization
* systems, we'll just ignore the videojs one and update the strings ourselves
* through events.
*
* We use events because that's the only way to update components with dynamic
* text like "Play/Pause" in videojs. We can't just define the set of texts at
* initialization, unless we use custom components to do that.
*
* For the case of 'MuteToggle', videojs changes the text at 'loadstart', so
* this event was chosen as the "lowest common denominator" to update the other
* static-text components.
*
* --- Notes ---
* (1) 'AutoplayNextButton' and 'TheaterModeButton' handles i18n (among other
* things) on its own.
*/
// @flow
import videojs from 'video.js';
import type { Player } from '../../videojs';
const VERSION = '1.0.0';
const defaultOptions = {};
function logError(msg) {
// @if process.env.LOG_VIDEOJS_I18N='true'
console.error(msg);
// @endif
}
function setLabel(controlBar, childName, label) {
try {
controlBar.getChild(childName).controlText(label);
} catch (e) {
// We want to be notified, at least on dev, over any structural changes,
// so don't check for null children and let the error surface.
logError(childName + ': ' + e);
}
}
function resolveCtrlText(e, player) {
if (player) {
const ctrlBar = player.getChild('controlBar');
switch (e.type) {
case 'play':
setLabel(ctrlBar, 'PlayToggle', __('Pause (space)'));
break;
case 'pause':
setLabel(ctrlBar, 'PlayToggle', __('Play (space)'));
break;
case 'volumechange':
try {
ctrlBar
.getChild('VolumePanel')
.getChild('MuteToggle')
.controlText(player.muted() || player.volume() === 0 ? __('Unmute (m)') : __('Mute (m)'));
} catch (e) {
logError('MuteToggle: ' + e);
}
break;
case 'fullscreenchange':
setLabel(ctrlBar, 'FullscreenToggle', player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)'));
break;
case 'loadstart':
// --- Do everything ---
setLabel(ctrlBar, 'PlaybackRateMenuButton', __('Playback Rate (<, >)'));
setLabel(ctrlBar, 'QualityButton', __('Quality'));
setLabel(ctrlBar, 'PlayNextButton', __('Play Next (SHIFT+N)'));
setLabel(ctrlBar, 'PlayPreviousButton', __('Play Previous (SHIFT+P)'));
setLabel(ctrlBar, 'ChaptersButton', __('Chapters'));
setLabel(ctrlBar, 'ChromecastButton', __('Open Chromecast menu'));
setLabel(ctrlBar, 'FullscreenToggle', player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)'));
try {
ctrlBar
.getChild('VolumePanel')
.getChild('MuteToggle')
.controlText(player.muted() || player.volume() === 0 ? __('Unmute (m)') : __('Mute (m)'));
} catch (e) {
logError('MuteToggle: ' + e);
}
resolveCtrlText({ type: 'play' });
resolveCtrlText({ type: 'pause' });
resolveCtrlText({ type: 'volumechange' });
resolveCtrlText({ type: 'fullscreenchange' });
break;
default:
logError('Unexpected: ' + e.type);
break;
}
}
}
function onPlayerReady(player: Player, options: {}) {
const h = (e) => resolveCtrlText(e, player);
player.on('play', h);
player.on('pause', h);
player.on('loadstart', h);
player.on('fullscreenchange', h);
player.on('volumechange', h);
}
/**
* Odysee custom i18n plugin.
* @param options
*/
function i18n(options: {}) {
this.ready(() => onPlayerReady(this, videojs.mergeOptions(defaultOptions, options)));
}
videojs.registerPlugin('i18n', i18n);
i18n.VERSION = VERSION;
export default i18n;