Intuitive input bindings (#4970)

* Configure 'Enter' to submit form being edited * Configure Ctrl+F keyboard listeners on pages with prominent search bar * Move lambda data functions to methods * Remove unnecessary 'return's * Add Ctrl+F handling to Channel search bar * Fix disabled ft-select label bug * Fix linting issue
FreeTubeApp · Apr 29, 2024 · 7410bea · 7410bea
1 parent 3ab5c3d
commit 7410bea
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 16 deletions.
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -10,6 +10,7 @@ import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import {
   showToast,
+  ctrlFHandler,
   getIconForSortPreference
 } from '../../helpers/utils'
 
@@ -199,12 +200,13 @@ export default defineComponent({
   },
   mounted: function () {
     this.lastActiveElement = document.activeElement
-
     this.updateQueryDebounce = debounce(this.updateQuery, 500)
     // User might want to search first if they have many playlists
     this.$refs.searchBar.focus()
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
   },
   beforeDestroy() {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
     this.lastActiveElement?.focus()
   },
   methods: {
@@ -270,6 +272,10 @@ export default defineComponent({
       this.query = query
     },
 
+    keyboardShortcutHandler: function (event) {
+      ctrlFHandler(event, this.$refs.searchBar)
+    },
+
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
     ...mapActions([

diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
@@ -46,6 +46,7 @@
               :value="translatedProfileName"
               :show-action-button="false"
               @input="e => profileName = e"
+              @keydown.enter.native="saveProfile"
             />
           </div>
           <div>

diff --git a/src/renderer/components/ft-select/ft-select.vue b/src/renderer/components/ft-select/ft-select.vue
@@ -26,9 +26,9 @@
     <span class="select-highlight" />
     <span class="select-bar" />
     <label
+      v-if="!disabled"
       class="select-label"
       :for="sanitizedId ?? sanitizedPlaceholder"
-      :hidden="disabled"
     >
       <font-awesome-icon
         :icon="icon"

diff --git a/src/renderer/components/password-settings/password-settings.vue b/src/renderer/components/password-settings/password-settings.vue
@@ -22,6 +22,7 @@
         input-type="password"
         :value="password"
         @input="e => password = e"
+        @keydown.enter.native="handleSetPassword"
       />
       <ft-button
         class="centerButton"

diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
@@ -7,6 +7,7 @@ import FtInput from '../ft-input/ft-input.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import {
+  ctrlFHandler,
   formatNumber,
   showToast,
 } from '../../helpers/utils'
@@ -411,19 +412,9 @@ export default defineComponent({
       this.$emit('search-video-query-change', query)
     },
 
-    keyboardShortcutHandler(event) {
-      switch (event.key) {
-        case 'F':
-        case 'f':
-          if (this.searchVideoModeAllowed && ((process.platform !== 'darwin' && event.ctrlKey) || (process.platform === 'darwin' && event.metaKey))) {
-            nextTick(() => {
-              // Some elements only present after rendering update
-              this.$refs.searchInput.focus()
-            })
-          }
-      }
+    keyboardShortcutHandler: function (event) {
+      ctrlFHandler(event, this.$refs.searchInput)
     },
-
     ...mapActions([
       'showAddToPlaylistPromptForManyVideos',
       'updatePlaylist',

diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
@@ -39,6 +39,7 @@
         :show-label="false"
         :value="newTitle"
         @input="(input) => (newTitle = input)"
+        @keydown.enter.native="savePlaylistInfo"
       />
       <h2
         v-else
@@ -66,6 +67,7 @@
       :show-label="false"
       :value="newDescription"
       @input="(input) => newDescription = input"
+      @keydown.enter.native="savePlaylistInfo"
     />
     <p
       v-else

diff --git a/src/renderer/components/proxy-settings/proxy-settings.vue b/src/renderer/components/proxy-settings/proxy-settings.vue
@@ -30,13 +30,15 @@
           :show-label="true"
           :value="proxyHostname"
           @input="handleUpdateProxyHostname"
+          @keydown.enter.native="testProxy"
         />
         <ft-input
           :placeholder="$t('Settings.Proxy Settings.Proxy Port Number')"
           :show-action-button="false"
           :show-label="true"
           :value="proxyPort"
           @input="handleUpdateProxyPort"
+          @keydown.enter.native="testProxy"
         />
       </ft-flex-box>
       <p

diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js
@@ -4,6 +4,7 @@ import { IpcChannels } from '../../constants'
 import FtToastEvents from '../components/ft-toast/ft-toast-events'
 import i18n from '../i18n/index'
 import router from '../router/index'
+import { nextTick } from 'vue'
 
 // allowed characters in channel handle: A-Z, a-z, 0-9, -, _, .
 // https://support.google.com/youtube/answer/11585688#change_handle
@@ -862,3 +863,13 @@ export async function fetchWithTimeout(timeoutMs, input, init) {
     }
   }
 }
+
+export function ctrlFHandler(event, inputElement) {
+  switch (event.key) {
+    case 'F':
+    case 'f':
+      if (((process.platform !== 'darwin' && event.ctrlKey) || (process.platform === 'darwin' && event.metaKey))) {
+        nextTick(() => inputElement?.focus())
+      }
+  }
+}
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
@@ -16,6 +16,7 @@ import autolinker from 'autolinker'
 import {
   setPublishedTimestampsInvidious,
   copyToClipboard,
+  ctrlFHandler,
   extractNumberFromString,
   formatNumber,
   showToast,
@@ -435,6 +436,7 @@ export default defineComponent({
   },
   mounted: function () {
     this.isLoading = true
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
 
     if (this.$route.query.url) {
       this.resolveChannelUrl(this.$route.query.url, this.$route.params.currentTab)
@@ -461,6 +463,9 @@ export default defineComponent({
       })
     }
   },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     resolveChannelUrl: async function (url, tab = undefined) {
       let id
@@ -1951,6 +1956,10 @@ export default defineComponent({
       })
     },
 
+    keyboardShortcutHandler: function (event) {
+      ctrlFHandler(event, this.$refs.channelSearchBar)
+    },
+
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
     ...mapActions([

diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
@@ -206,6 +206,7 @@
 
           <ft-input
             v-if="showSearchBar"
+            ref="channelSearchBar"
             :placeholder="$t('Channel.Search Channel')"
             :show-clear-text-button="true"
             class="channelSearch"

diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
@@ -7,6 +7,7 @@ import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
+import { ctrlFHandler } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'History',
@@ -53,6 +54,7 @@ export default defineComponent({
     }
   },
   mounted: function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
     const limit = sessionStorage.getItem('historyLimit')
 
     if (limit !== null) {
@@ -69,6 +71,9 @@ export default defineComponent({
 
     this.filterHistoryDebounce = debounce(this.filterHistory, 500)
   },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     increaseLimit: function () {
       if (this.query !== '') {
@@ -113,5 +118,8 @@ export default defineComponent({
         this.activeData = filteredQuery.length < this.searchDataLimit ? filteredQuery : filteredQuery.slice(0, this.searchDataLimit)
       }
     },
+    keyboardShortcutHandler: function (event) {
+      ctrlFHandler(event, this.$refs.searchBar)
+    }
   }
 })
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.js b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
@@ -6,6 +6,7 @@ import FtInput from '../../components/ft-input/ft-input.vue'
 import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
 import { invidiousGetChannelInfo, youtubeImageUrlToInvidious, invidiousImageUrlToInvidious } from '../../helpers/api/invidious'
 import { getLocalChannel } from '../../helpers/api/local'
+import { ctrlFHandler } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'SubscribedChannels',
@@ -26,7 +27,7 @@ export default defineComponent({
       },
       thumbnailSize: 176,
       ytBaseURL: 'https://yt3.ggpht.com',
-      errorCount: 0
+      errorCount: 0,
     }
   },
   computed: {
@@ -78,8 +79,12 @@ export default defineComponent({
     }
   },
   mounted: function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
     this.getSubscription()
   },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     getSubscription: function () {
       this.subscribedChannels = this.activeSubscriptionList.slice().sort((a, b) => {
@@ -155,6 +160,10 @@ export default defineComponent({
       }
     },
 
+    keyboardShortcutHandler: function (event) {
+      ctrlFHandler(event, this.$refs.searchBarChannels)
+    },
+
     ...mapActions([
       'updateSubscriptionDetails'
     ])

diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js
@@ -12,7 +12,7 @@ import FtInput from '../../components/ft-input/ft-input.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
-import { getIconForSortPreference } from '../../helpers/utils'
+import { ctrlFHandler, getIconForSortPreference } from '../../helpers/utils'
 
 const SORT_BY_VALUES = {
   NameAscending: 'name_ascending',
@@ -184,6 +184,7 @@ export default defineComponent({
     },
   },
   mounted: function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
     const limit = sessionStorage.getItem('favoritesLimit')
     if (limit !== null) {
       this.dataLimit = limit
@@ -200,6 +201,9 @@ export default defineComponent({
 
     this.filterPlaylistDebounce = debounce(this.filterPlaylist, 500)
   },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     increaseLimit: function () {
       if (this.query !== '') {
@@ -243,6 +247,10 @@ export default defineComponent({
       })
     },
 
+    keyboardShortcutHandler: function (event) {
+      ctrlFHandler(event, this.$refs.searchBar)
+    },
+
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
     ...mapActions([