Add labels for History and Settings app shortcuts, and update variable naming

Author: kommunarr

src/constants.js

@@ -113,12 +113,15 @@ const SyncEvents = {
   },
 }
 
-// note: the multi-character shortcut values are currently just for presentational use
+// note: the multi-key shortcut values are currently just for display use in action titles
 const KeyboardShortcuts = {
   APP: {
     HISTORY_BACKWARD: 'alt+arrowleft',
     HISTORY_FORWARD: 'alt+arrowright',
-    NEW_WINDOW: 'ctrl+N'
+    NEW_WINDOW: 'ctrl+N',
+    NAVIGATE_TO_SETTINGS: 'ctrl+,',
+    NAVIGATE_TO_HISTORY: 'ctrl+H',
+    NAVIGATE_TO_HISTORY_MAC: 'cmd+Y',
   },
   FEED: {
     REFRESH: 'r'

src/renderer/components/ft-refresh-widget/ft-refresh-widget.js

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import { KeyboardShortcuts } from '../../../constants'
-import { addKeyboardShortcutToActionLabel } from '../../helpers/utils'
+import { addKeyboardShortcutToActionTitle } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'FtRefreshWidget',
@@ -26,7 +26,7 @@ export default defineComponent({
   emits: ['click'],
   computed: {
     refreshFeedButtonTitle: function() {
-      return addKeyboardShortcutToActionLabel(
+      return addKeyboardShortcutToActionTitle(
         this.$t('Feed.Refresh Feed', { subscriptionName: this.title }),
         KeyboardShortcuts.FEED.REFRESH
       )

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js

@@ -24,7 +24,7 @@ import {
   translateSponsorBlockCategory
 } from '../../helpers/player/utils'
 import {
-  addKeyboardShortcutToActionLabel,
+  addKeyboardShortcutToActionTitle,
   getPicturesPath,
   showSaveDialog,
   showToast
@@ -1014,7 +1014,7 @@ export default defineComponent({
           return
         }
 
-        const localizationWithShortcut = addKeyboardShortcutToActionLabel(
+        const localizationWithShortcut = addKeyboardShortcutToActionTitle(
           originalLocalization,
           shortcut
         )

src/renderer/components/ft-shaka-video-player/player-components/FullWindowButton.js

@@ -2,7 +2,7 @@ import shaka from 'shaka-player'
 
 import i18n from '../../../i18n/index'
 import { KeyboardShortcuts } from '../../../../constants'
-import { addKeyboardShortcutToActionLabel } from '../../../helpers/utils'
+import { addKeyboardShortcutToActionTitle } from '../../../helpers/utils'
 
 export class FullWindowButton extends shaka.ui.Element {
   /**
@@ -78,7 +78,7 @@ export class FullWindowButton extends shaka.ui.Element {
 
     const baseAriaLabel = this.fullWindowEnabled_ ? i18n.t('Video.Player.Exit Full Window') : i18n.t('Video.Player.Full Window')
 
-    this.button_.ariaLabel = addKeyboardShortcutToActionLabel(
+    this.button_.ariaLabel = addKeyboardShortcutToActionTitle(
       baseAriaLabel,
       KeyboardShortcuts.VIDEO_PLAYER.FULLWINDOW
     )

src/renderer/components/ft-shaka-video-player/player-components/ScreenshotButton.js

@@ -2,7 +2,7 @@ import shaka from 'shaka-player'
 
 import i18n from '../../../i18n/index'
 import { KeyboardShortcuts } from '../../../../constants'
-import { addKeyboardShortcutToActionLabel } from '../../../helpers/utils'
+import { addKeyboardShortcutToActionTitle } from '../../../helpers/utils'
 
 export class ScreenshotButton extends shaka.ui.Element {
   /**
@@ -51,7 +51,7 @@ export class ScreenshotButton extends shaka.ui.Element {
 
   /** @private */
   updateLocalisedStrings_() {
-    const label = addKeyboardShortcutToActionLabel(
+    const label = addKeyboardShortcutToActionTitle(
       i18n.t('Video.Player.Take Screenshot'),
       KeyboardShortcuts.VIDEO_PLAYER.TAKE_SCREENSHOT
     )

src/renderer/components/ft-shaka-video-player/player-components/StatsButton.js

@@ -2,7 +2,7 @@ import shaka from 'shaka-player'
 
 import i18n from '../../../i18n/index'
 import { KeyboardShortcuts } from '../../../../constants'
-import { addKeyboardShortcutToActionLabel } from '../../../helpers/utils'
+import { addKeyboardShortcutToActionTitle } from '../../../helpers/utils'
 
 export class StatsButton extends shaka.ui.Element {
   /**
@@ -70,7 +70,7 @@ export class StatsButton extends shaka.ui.Element {
     this.icon_.textContent = this.showStats_ ? 'insert_chart' : 'insert_chart_outlined'
 
     const baseLabel = this.showStats_ ? i18n.t('Video.Player.Hide Stats') : i18n.t('Video.Player.Show Stats')
-    const label = addKeyboardShortcutToActionLabel(
+    const label = addKeyboardShortcutToActionTitle(
       baseLabel,
       KeyboardShortcuts.VIDEO_PLAYER.STATS
     )

src/renderer/components/ft-shaka-video-player/player-components/TheatreModeButton.js

@@ -2,7 +2,7 @@ import shaka from 'shaka-player'
 
 import i18n from '../../../i18n/index'
 import { KeyboardShortcuts } from '../../../../constants'
-import { addKeyboardShortcutToActionLabel } from '../../../helpers/utils'
+import { addKeyboardShortcutToActionTitle } from '../../../helpers/utils'
 
 export class TheatreModeButton extends shaka.ui.Element {
   /**
@@ -77,7 +77,7 @@ export class TheatreModeButton extends shaka.ui.Element {
 
     const baseAriaLabel = this.theatreModeEnabled_ ? i18n.t('Video.Player.Exit Theatre Mode') : i18n.t('Video.Player.Theatre Mode')
 
-    this.button_.ariaLabel = addKeyboardShortcutToActionLabel(
+    this.button_.ariaLabel = addKeyboardShortcutToActionTitle(
       baseAriaLabel,
       KeyboardShortcuts.VIDEO_PLAYER.THEATRE_MODE
     )

src/renderer/components/side-nav/side-nav.js

@@ -2,7 +2,8 @@ import { defineComponent } from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import SideNavMoreOptions from '../side-nav-more-options/side-nav-more-options.vue'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
-import { deepCopy } from '../../helpers/utils'
+import { deepCopy, localizeAndAddKeyboardShortcutToActionTitle } from '../../helpers/utils'
+import { KeyboardShortcuts } from '../../../constants'
 
 export default defineComponent({
   name: 'SideNav',
@@ -80,6 +81,22 @@ export default defineComponent({
       return {
         hiddenLabels: this.hideText
       }
+    },
+    historyTitle: function() {
+      const shortcut = process.platform === 'darwin'
+        ? KeyboardShortcuts.APP.NAVIGATE_TO_HISTORY_MAC
+        : KeyboardShortcuts.APP.NAVIGATE_TO_HISTORY
+
+      return localizeAndAddKeyboardShortcutToActionTitle(
+        this.$t('History.History'),
+        shortcut
+      )
+    },
+    settingsTitle: function() {
+      return localizeAndAddKeyboardShortcutToActionTitle(
+        this.$t('Settings.Settings'),
+        KeyboardShortcuts.APP.NAVIGATE_TO_SETTINGS
+      )
     }
   }
 })

src/renderer/components/side-nav/side-nav.vue

@@ -132,7 +132,7 @@
         class="navOption mobileShow"
         role="button"
         to="/history"
-        :title="$t('History.History')"
+        :title="historyTitle"
       >
         <div
           class="thumbnailContainer"
@@ -156,7 +156,7 @@
         class="navOption mobileShow"
         role="button"
         to="/settings"
-        :title="$t('Settings.Settings')"
+        :title="settingsTitle"
       >
         <div
           class="thumbnailContainer"

src/renderer/components/top-nav/top-nav.js

@@ -5,7 +5,7 @@ import FtProfileSelector from '../ft-profile-selector/ft-profile-selector.vue'
 import debounce from 'lodash.debounce'
 
 import { IpcChannels, KeyboardShortcuts, MOBILE_WIDTH_THRESHOLD } from '../../../constants'
-import { localizeAndAddKeyboardShortcutToActionLabel, openInternalPath } from '../../helpers/utils'
+import { localizeAndAddKeyboardShortcutToActionTitle, openInternalPath } from '../../helpers/utils'
 import { translateWindowTitle } from '../../helpers/strings'
 import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
@@ -87,21 +87,21 @@ export default defineComponent({
     },
 
     forwardText: function () {
-      return localizeAndAddKeyboardShortcutToActionLabel(
+      return localizeAndAddKeyboardShortcutToActionTitle(
         this.$t('Forward'),
         KeyboardShortcuts.APP.HISTORY_FORWARD
       )
     },
 
     backwardText: function () {
-      return localizeAndAddKeyboardShortcutToActionLabel(
+      return localizeAndAddKeyboardShortcutToActionTitle(
         this.$t('Back'),
         KeyboardShortcuts.APP.HISTORY_BACKWARD
       )
     },
 
     newWindowText: function () {
-      return localizeAndAddKeyboardShortcutToActionLabel(
+      return localizeAndAddKeyboardShortcutToActionTitle(
         this.$t('Open New Window'),
         KeyboardShortcuts.APP.NEW_WINDOW
       )

src/renderer/helpers/utils.js

@@ -894,10 +894,11 @@ function getIndividualLocalizedShortcut(shortcut) {
   switch (shortcut) {
     case 'alt':
       return i18n.t('Keys.alt')
+    case 'cmd':
     case 'ctrl':
       return process.platform === 'darwin'
-        ? i18n.t('Keys.ctrl')
-        : i18n.t('Keys.cmd')
+        ? i18n.t('Keys.cmd')
+        : i18n.t('Keys.ctrl')
     case 'arrowleft':
       return i18n.t('Keys.arrowleft')
     case 'arrowright':
@@ -911,6 +912,10 @@ function getIndividualLocalizedShortcut(shortcut) {
   }
 }
 
+/**
+ * @param {string} shortcut
+ * @returns {string} the localized and recombined shortcut
+ */
 function getLocalizedShortcut(shortcut) {
   const shortcuts = shortcut.split('+')
   const localizedShortcuts = shortcuts.map((shortcut) => getIndividualLocalizedShortcut(shortcut))
@@ -919,14 +924,24 @@ function getLocalizedShortcut(shortcut) {
   return localizedShortcuts.join(shortcutJoinOperator)
 }
 
-export function addKeyboardShortcutToActionLabel(actionLabel, shortcut) {
+/**
+ * @param {string} actionTitle
+ * @param {string} shortcut
+ * @returns {string} the localized action title with keyboard shortcut
+ */
+export function addKeyboardShortcutToActionTitle(actionTitle, shortcut) {
   return i18n.t('KeyboardShortcutTemplate', {
-    label: actionLabel,
+    label: actionTitle,
     shortcut
   })
 }
 
-export function localizeAndAddKeyboardShortcutToActionLabel(localizedActionLabel, unlocalizedShortcut) {
+/**
+ * @param {string} localizedActionTitle
+ * @param {string} unlocalizedShortcut
+ * @returns {string} the localized action title with keyboard shortcut
+ */
+export function localizeAndAddKeyboardShortcutToActionTitle(localizedActionTitle, unlocalizedShortcut) {
   const localizedShortcut = getLocalizedShortcut(unlocalizedShortcut)
-  return addKeyboardShortcutToActionLabel(localizedActionLabel, localizedShortcut)
+  return addKeyboardShortcutToActionTitle(localizedActionTitle, localizedShortcut)
 }