LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix inital display of control bar text

Browse source
This commit is contained in:
saltrafael 2021-08-31 09:52:15 -03:00
parent 529ad258fe
commit 21372037b4
No known key found for this signature in database
GPG key ID: 9C7F1DC0B0F54515
1 changed files with 31 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -282,27 +282,42 @@ export default React.memo<Props>(function VideoJs(props: Props) {
}
}
function resolveCtrlText(e) {
// Override the player's control text. We override to:
// 1. Add keyboard shortcut to the tool-tip.
// 2. Override videojs' i18n and use our own (don't want to have 2 systems).
//
// Notes:
// - For dynamic controls (e.g. play/pause), those unfortunately need to be
// updated again at their event-listener level (that's just the way videojs
// updates the text), hence the need to listen to 'play', 'pause' and 'volumechange'
// on top of just 'loadstart'.
// - videojs changes the MuteToggle text at 'loadstart', so this was chosen
// as the listener to update static texts.
// Override the player's control text. We override to:
// 1. Add keyboard shortcut to the tool-tip.
// 2. Override videojs' i18n and use our own (don't want to have 2 systems).
//
// Notes:
// - For dynamic controls (e.g. play/pause), those unfortunately need to be
// updated again at their event-listener level (that's just the way videojs
// updates the text), hence the need to listen to 'play', 'pause' and 'volumechange'
// on top of just 'loadstart'.
// - videojs changes the MuteToggle text at 'loadstart', so this was chosen
// as the listener to update static texts.
function resolveCtrlText(e, initialPlay) {
const player = playerRef.current;
if (player) {
const controlBar = player.getChild('controlBar');
switch (e.type) {
case 'play':
controlBar.getChild('PlayToggle').controlText(__('Pause (space)'));
controlBar.getChild('PlayToggle').controlText(__('Pause (space/k)'));
if (initialPlay) {
controlBar.getChild('PlaybackRateMenuButton').controlText(__('Playback Rate (<, >)'));
controlBar.getChild('QualityButton').controlText(__('Quality'));
resolveCtrlText({ type: 'fullscreenchange' });
resolveCtrlText({ type: 'volumechange' });
resolveCtrlText({ type: 'fullscreenchange' });
// --- Do everything ---
// (1) The 'Theater mode' button should probably be changed to a class
// so that we can use getChild() with a specific name. There might be
// clashes if we add a new button in the future.
// (2) We'll have to get 'makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)'
// as a prop here so we can say "Theater mode|Default mode" instead of
// "Toggle Theater mode".
controlBar.getChild('Button').controlText(__('Toggle Theater mode (t)'));
}
break;
case 'pause':
controlBar.getChild('PlayToggle').controlText(__('Play (space)'));
controlBar.getChild('PlayToggle').controlText(__('Play (space/k)'));
break;
case 'volumechange':
controlBar
@ -316,20 +331,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
.controlText(player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)'));
break;
case 'loadstart':
// --- Do everything ---
controlBar.getChild('PlaybackRateMenuButton').controlText(__('Playback Rate (<, >)'));
controlBar.getChild('QualityButton').controlText(__('Quality'));
resolveCtrlText({ type: 'play' });
resolveCtrlText({ type: 'pause' });
resolveCtrlText({ type: 'volumechange' });
resolveCtrlText({ type: 'fullscreenchange' });
// (1) The 'Theater mode' button should probably be changed to a class
// so that we can use getChild() with a specific name. There might be
// clashes if we add a new button in the future.
// (2) We'll have to get 'makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)'
// as a prop here so we can say "Theater mode|Default mode" instead of
// "Toggle Theater mode".
controlBar.getChild('Button').controlText(__('Toggle Theater mode (t)'));
resolveCtrlText({ type: 'play' }, true);
break;
default:
if (isDev) throw Error('Unexpected: ' + e.type);
@ -347,6 +349,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
} else {
showTapButton(TAP.NONE);
}
resolveCtrlText({ type: 'play' }, true);
}
function onVolumeChange() {