VIM-like Navigation

src/constants.js

@@ -151,6 +151,7 @@ const KeyboardShortcuts = {
       HISTORY_BACKWARD_ALT_MAC: 'cmd+[',
       HISTORY_FORWARD_ALT_MAC: 'cmd+]',
       FULLSCREEN: 'f11',
+      VIM_ENABLED_FULLSCREEN: 'f10',
       NAVIGATE_TO_SETTINGS: 'ctrl+,',
       NAVIGATE_TO_HISTORY: 'ctrl+H',
       NAVIGATE_TO_HISTORY_MAC: 'cmd+Y',
@@ -165,7 +166,11 @@ const KeyboardShortcuts = {
       RESET_ZOOM: 'ctrl+0',
       ZOOM_IN: 'ctrl+plus',
       ZOOM_OUT: 'ctrl+-'
-
+    },
+    VIM: {
+      SHOW_VIM_WAYPOINTS: 'w',
+      SCROLL_DOWN: 'j',
+      SCROLL_UP: 'k',
     },
     SITUATIONAL: {
       REFRESH: 'r',
@@ -188,6 +193,7 @@ const KeyboardShortcuts = {
     PLAYBACK: {
       PLAY: 'k',
       LARGE_REWIND: 'j',
+      VIM_ENABLED_LARGE_REWIND: 'h',
       LARGE_FAST_FORWARD: 'l',
       SMALL_REWIND: 'arrowleft',
       SMALL_FAST_FORWARD: 'arrowright',

src/renderer/App.js

@@ -76,6 +76,9 @@ export default defineComponent({
     isKeyboardShortcutPromptShown: function () {
       return this.$store.getters.getIsKeyboardShortcutPromptShown
     },
+    areVimWaypointsShown: function () {
+      return this.$store.getters.getAreVimWaypointsShown
+    },
     showAddToPlaylistPrompt: function () {
       return this.$store.getters.getShowAddToPlaylistPrompt
     },
@@ -156,6 +159,10 @@ export default defineComponent({
 
     openDeepLinksInNewWindow: function () {
       return this.$store.getters.getOpenDeepLinksInNewWindow
+    },
+
+    enableVimNavigation: function () {
+      return this.$store.getters.getEnableVimNavigation
     }
   },
   watch: {
@@ -344,20 +351,59 @@ export default defineComponent({
     },
 
     activateKeyboardShortcuts: function () {
+      if (this.enableVimNavigation) {
+        ['click', 'scroll'].forEach((eventName) =>
+          document.addEventListener(eventName, (e) => {
+            this.$store.commit('setAreVimWaypointsShown', { key: 'Esc' })
+          })
+        )
+        document.addEventListener('keydown', (e) => {
+          // Only handle if not in an input field and not in waypoint mode
+          if (e.target.tagName !== 'INPUT' && !this.areVimWaypointsShown.selector.length) {
+            if (e.key === 'j') {
+              // If the 'J' key is pressed
+              window.scrollBy({
+                top: 30,
+                behavior: 'auto'
+              })
+            } else if (e.key === 'k') {
+              // If the 'K' key is pressed
+              window.scrollBy({
+                top: -30,
+                behavior: 'auto'
+              })
+            }
+          }
+        })
+      }
       document.addEventListener('keydown', this.handleKeyboardShortcuts)
       document.addEventListener('mousedown', () => {
         this.hideOutlines()
       })
     },
 
     handleKeyboardShortcuts: function (event) {
+      // If this.areVimWaypointsShown.selector starts with an f it means
+      // the user is in nav mode so capture any input and pass it to
+      // setAreVimWaypointsShown
+      if (this.areVimWaypointsShown.selector[0] === 'w' && !event.ctrlKey && this.enableVimNavigation) {
+        this.$store.commit('setAreVimWaypointsShown', { key: event.key })
+        return
+      }
       // ignore user typing in HTML `input` elements
       if (event.shiftKey && event.key === '?' && event.target.tagName !== 'INPUT') {
         this.$store.commit('setIsKeyboardShortcutPromptShown', !this.isKeyboardShortcutPromptShown)
       }
 
-      if (event.key === 'Tab') {
-        this.showOutlines()
+      switch (event.key) {
+        case 'w':
+          if (event.target.tagName !== 'INPUT' && this.enableVimNavigation && !event.ctrlKey) {
+            this.$store.commit('setAreVimWaypointsShown', { key: event.key })
+          }
+          break
+        case 'Tab':
+          this.showOutlines()
+          break
       }
     },
 

src/renderer/components/FtKeyboardShortcutPrompt/FtKeyboardShortcutPrompt.vue

@@ -81,6 +81,10 @@ const situationalAppShortcuts = computed(() =>
   getLocalizedShortcutNamesAndValues(KeyboardShortcuts.APP.SITUATIONAL)
 )
 
+const VimAppShortcuts = computed(() =>
+  getLocalizedShortcutNamesAndValues(KeyboardShortcuts.APP.VIM)
+)
+
 const primarySections = computed(() => [
   [
     {
@@ -101,14 +105,24 @@ const primarySections = computed(() => [
       title: t('KeyboardShortcutPrompt.Sections.App.Situational'),
       shortcutDictionary: situationalAppShortcuts.value
     }
+  ],
+  [
+    {
+      title: t('KeyboardShortcutPrompt.Sections.App.VIM'),
+      shortcutDictionary: VimAppShortcuts.value
+    }
   ]
 ])
 
 const isMac = process.platform === 'darwin'
+const enableVimNavigation = computed(() => store.getters.getEnableVimNavigation)
 
 const localizedShortcutNameToShortcutsMappings = computed(() => {
   return [
     [t('KeyboardShortcutPrompt.Show Keyboard Shortcuts'), ['SHOW_SHORTCUTS']],
+    [t('KeyboardShortcutPrompt.Show Vim Waypoints'), ['SHOW_VIM_WAYPOINTS']],
+    [t('KeyboardShortcutPrompt.Scroll Down'), ['SCROLL_DOWN']],
+    [t('KeyboardShortcutPrompt.Scroll Up'), ['SCROLL_UP']],
     [t('KeyboardShortcutPrompt.History Backward'), [
       'HISTORY_BACKWARD',
       ...isMac ? ['HISTORY_BACKWARD_ALT_MAC'] : [],
@@ -147,8 +161,7 @@ const localizedShortcutNameToShortcutsMappings = computed(() => {
     [t('KeyboardShortcutPrompt.Take Screenshot'), ['TAKE_SCREENSHOT']],
     [t('KeyboardShortcutPrompt.Stats'), ['STATS']],
 
-    [t('KeyboardShortcutPrompt.Play'), ['PLAY']],
-    [t('KeyboardShortcutPrompt.Large Rewind'), ['LARGE_REWIND']],
+    [t('KeyboardShortcutPrompt.Large Rewind'), [enableVimNavigation.value ? 'VIM_ENABLED_LARGE_REWIND' : 'LARGE_REWIND']],
     [t('KeyboardShortcutPrompt.Large Fast Forward'), ['LARGE_FAST_FORWARD']],
     [t('KeyboardShortcutPrompt.Small Rewind'), ['SMALL_REWIND']],
     [t('KeyboardShortcutPrompt.Small Fast Forward'), ['SMALL_FAST_FORWARD']],

src/renderer/components/ProxySettings/ProxySettings.css

@@ -2,14 +2,19 @@
   margin-block-end: 1rem;
 }
 
-.proxy-warning {
+.proxy-warning,
+.vim-warning {
   padding-block: 12px;
   padding-inline: 4%;
   background-color: var(--accent-color);
   color: var(--text-with-accent-color);
   font-weight: bold;
 }
 
+.vim-warning {
+  margin-block: 1px;
+}
+
 .warning-icon {
   font-size: large;
 }

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

@@ -2061,10 +2061,27 @@ export default defineComponent({
       seekBySeconds(dist, true)
     }
 
+    const areVimWaypointsShown = computed(() => {
+      return store.getters.getAreVimWaypointsShown
+    })
+
+    const vimEnabled = computed(() => {
+      return store.getters.getEnableVimNavigation
+    })
+
     /**
      * @param {KeyboardEvent} event
      */
     function keyboardShortcutHandler(event) {
+      const passToVim =
+        // If vim keys are enabled, ctrl is not held down, and the key is not f, j, or k.
+        (vimEnabled.value && !event.ctrlKey && ['w', 'j', 'k'].includes(event.key)) || // OR
+        // The waypoints are already on the screen
+        ((areVimWaypointsShown.value.selector || []).length && areVimWaypointsShown.value.selector[0] === 'w')
+
+      if (passToVim) {
+        return
+      }
       if (!player || !hasLoaded.value) {
         return
       }
@@ -2105,12 +2122,12 @@ export default defineComponent({
       switch (event.key.toLowerCase()) {
         case ' ':
         case 'spacebar': // older browsers might return spacebar instead of a space character
-        case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.PLAY:
+        case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK[vimEnabled.value ? 'VIM_ENABLED_PLAY' : 'PLAY']:
           // Toggle Play/Pause
           event.preventDefault()
           video_.paused ? video_.play() : video_.pause()
           break
-        case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK.LARGE_REWIND:
+        case KeyboardShortcuts.VIDEO_PLAYER.PLAYBACK[vimEnabled.value ? 'VIM_ENABLED_LARGE_REWIND' : 'LARGE_REWIND']:
           // Rewind by 2x the time-skip interval (in seconds)
           event.preventDefault()
           seekBySeconds(-defaultSkipInterval.value * player.getPlaybackRate() * 2)
@@ -2130,7 +2147,7 @@ export default defineComponent({
           event.preventDefault()
           changePlayBackRate(videoPlaybackRateInterval.value)
           break
-        case KeyboardShortcuts.VIDEO_PLAYER.GENERAL.FULLSCREEN:
+        case KeyboardShortcuts.VIDEO_PLAYER.GENERAL['FULLSCREEN']:
           // Toggle full screen
           event.preventDefault()
           ui.getControls().toggleFullScreen()

src/renderer/components/general-settings/general-settings.js

@@ -203,6 +203,10 @@ export default defineComponent({
 
     openDeepLinksInNewWindow: function () {
       return this.$store.getters.getOpenDeepLinksInNewWindow
+    },
+
+    enableVimNavigation: function() {
+      return this.$store.getters.getEnableVimNavigation
     }
   },
   created: function () {
@@ -273,6 +277,7 @@ export default defineComponent({
       'updateExternalLinkHandling',
       'updateGeneralAutoLoadMorePaginatedItemsEnabled',
       'updateOpenDeepLinksInNewWindow',
+      'updateEnableVimNavigation',
     ])
   }
 })

src/renderer/components/general-settings/general-settings.vue

@@ -45,6 +45,20 @@
           :tooltip="$t('Tooltips.General Settings.Open Deep Links In New Window')"
           @change="updateOpenDeepLinksInNewWindow"
         />
+        <p class="vim-warning">
+          <FontAwesomeIcon
+            :icon="['fas', 'circle-exclamation']"
+            class="warning-icon"
+            fixed-width
+          />
+          {{ $t('Settings.General Settings.VIM Warning') }}
+        </p>
+        <ft-toggle-switch
+          :label="$t('Settings.General Settings.Enable VIM key-bindings')"
+          :default-value="enableVimNavigation"
+          :compact="true"
+          @change="updateEnableVimNavigation"
+        />
       </div>
     </div>
     <div class="switchGrid">

src/renderer/store/modules/settings.js

@@ -226,6 +226,7 @@ const state = {
   onlyShowLatestFromChannel: false,
   onlyShowLatestFromChannelNumber: 1,
   openDeepLinksInNewWindow: false,
+  enableVimNavigation: false,
   playNextVideo: false,
   proxyHostname: '127.0.0.1',
   proxyPort: '9050',