Fix inital display of control bar text
This commit is contained in:
parent
529ad258fe
commit
21372037b4
1 changed files with 31 additions and 28 deletions
|
@ -282,7 +282,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function resolveCtrlText(e) {
|
|
||||||
// Override the player's control text. We override to:
|
// Override the player's control text. We override to:
|
||||||
// 1. Add keyboard shortcut to the tool-tip.
|
// 1. Add keyboard shortcut to the tool-tip.
|
||||||
// 2. Override videojs' i18n and use our own (don't want to have 2 systems).
|
// 2. Override videojs' i18n and use our own (don't want to have 2 systems).
|
||||||
|
@ -294,15 +293,31 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
// on top of just 'loadstart'.
|
// on top of just 'loadstart'.
|
||||||
// - videojs changes the MuteToggle text at 'loadstart', so this was chosen
|
// - videojs changes the MuteToggle text at 'loadstart', so this was chosen
|
||||||
// as the listener to update static texts.
|
// as the listener to update static texts.
|
||||||
|
function resolveCtrlText(e, initialPlay) {
|
||||||
const player = playerRef.current;
|
const player = playerRef.current;
|
||||||
if (player) {
|
if (player) {
|
||||||
const controlBar = player.getChild('controlBar');
|
const controlBar = player.getChild('controlBar');
|
||||||
switch (e.type) {
|
switch (e.type) {
|
||||||
case 'play':
|
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;
|
break;
|
||||||
case 'pause':
|
case 'pause':
|
||||||
controlBar.getChild('PlayToggle').controlText(__('Play (space)'));
|
controlBar.getChild('PlayToggle').controlText(__('Play (space/k)'));
|
||||||
break;
|
break;
|
||||||
case 'volumechange':
|
case 'volumechange':
|
||||||
controlBar
|
controlBar
|
||||||
|
@ -316,20 +331,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
.controlText(player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)'));
|
.controlText(player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)'));
|
||||||
break;
|
break;
|
||||||
case 'loadstart':
|
case 'loadstart':
|
||||||
// --- Do everything ---
|
resolveCtrlText({ type: 'play' }, true);
|
||||||
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)'));
|
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
if (isDev) throw Error('Unexpected: ' + e.type);
|
if (isDev) throw Error('Unexpected: ' + e.type);
|
||||||
|
@ -347,6 +349,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
} else {
|
} else {
|
||||||
showTapButton(TAP.NONE);
|
showTapButton(TAP.NONE);
|
||||||
}
|
}
|
||||||
|
resolveCtrlText({ type: 'play' }, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onVolumeChange() {
|
function onVolumeChange() {
|
||||||
|
|
Loading…
Reference in a new issue