From 21372037b468b8ab615e5ea82984d862f8a07872 Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Tue, 31 Aug 2021 09:52:15 -0300
Subject: [PATCH] Fix inital display of control bar text

---
 .../viewers/videoViewer/internal/videojs.jsx  | 59 ++++++++++---------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index a3fcc48de..8b31e490e 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -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() {