fix(/ADA-1296): The 'C' keypress show/hide the Captions only when pla…

…yer clicked with mouse but not when navigated with tabs

src/components/settings/settings.tsx

@@ -74,26 +74,6 @@ class Settings extends Component<any, any> {
   _buttonRef: HTMLButtonElement | null = null;
   _lastActiveTextLanguage: string = '';
   _keyboardEventHandlers: Array<KeyboardEventHandlers> = [
-    {
-      key: {
-        code: KeyMap.C
-      },
-      action: () => {
-        const {player, logger} = this.props;
-        const activeTextTrack = player.getActiveTracks().text;
-        if (activeTextTrack) {
-          if (activeTextTrack.language === 'off' && this._lastActiveTextLanguage) {
-            logger.debug(`Changing text track to language`, this._lastActiveTextLanguage);
-            const selectedTextTrack = player.getTracks('text').find(track => track.language === this._lastActiveTextLanguage);
-            player.selectTrack(selectedTextTrack);
-          } else if (activeTextTrack.language !== 'off' && !this._lastActiveTextLanguage) {
-            logger.debug(`Hiding text track`);
-            this._lastActiveTextLanguage = activeTextTrack.language;
-            player.hideTextTrack();
-          }
-        }
-      }
-    },
     {
       key: {
         code: KeyMap.PERIOD,
@@ -142,6 +122,7 @@ class Settings extends Component<any, any> {
   componentDidMount() {
     const {eventManager} = this.props;
     eventManager.listen(document, 'click', e => this.handleClickOutside(e));
+    eventManager.listen(document, 'keydown', e => this.handleCCToggle(e));
     this.props.registerKeyboardEvents(this._keyboardEventHandlers);
   }
 
@@ -188,6 +169,24 @@ class Settings extends Component<any, any> {
     }
   }
 
+  handleCCToggle(event: KeyboardEvent) {
+    if (event.key === 'c' || event.key === 'C') {
+      const {player, logger} = this.props;
+      const activeTextTrack = player.getActiveTracks().text;
+      if (activeTextTrack) {
+        if (activeTextTrack.language === 'off' && this._lastActiveTextLanguage) {
+          logger.debug(`Changing text track to language`, this._lastActiveTextLanguage);
+          const selectedTextTrack = player.getTracks('text').find(track => track.language === this._lastActiveTextLanguage);
+          player.selectTrack(selectedTextTrack);
+        } else if (activeTextTrack.language !== 'off' && !this._lastActiveTextLanguage) {
+          logger.debug(`Hiding text track`);
+          this._lastActiveTextLanguage = activeTextTrack.language;
+          player.hideTextTrack();
+        }
+      }
+    }
+  }
+
   /**
    * We update the last language selected here upon trackTracks props change. This is done to make sure we update the
    * last text track lanague upon language menu selection and using the (C) keyboard key.