Improve video playlist search UX (#4929)

* Enable playlist video search mode by default; add Ctrl+F binding

* Fix subject-verb agreement on two search labels

* Remove playlist video search bar when only one video is in the playlist

* Add check for search video mode allowed that is requisite for keybinding

* Remove unnecessary 'async function' in mounted

* Fix styling issue

Author: kommunarr

src/renderer/components/playlist-info/playlist-info.js

@@ -259,6 +259,12 @@ export default defineComponent({
 
     this.updateQueryDebounce = debounce(this.updateQuery, 500)
   },
+  mounted: function () {
+    document.addEventListener('keydown', this.keyboardShortcutHandler)
+  },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.keyboardShortcutHandler)
+  },
   methods: {
     toggleCopyVideosPrompt: function (force = false) {
       if (this.moreVideoDataAvailable && !this.isUserPlaylist && !force) {
@@ -403,24 +409,18 @@ export default defineComponent({
       this.query = query
       this.$emit('search-video-query-change', query)
     },
-    enableVideoSearchMode() {
-      this.searchVideoMode = true
-      this.$emit('search-video-mode-on')
 
-      nextTick(() => {
-        // Some elements only present after rendering update
-        this.$refs.searchInput.focus()
-      })
-    },
-    disableVideoSearchMode() {
-      this.searchVideoMode = false
-      this.updateQuery('')
-      this.$emit('search-video-mode-off')
-
-      nextTick(() => {
-        // Some elements only present after rendering update
-        this.$refs.enableSearchModeButton?.focus()
-      })
+    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()
+            })
+          }
+      }
     },
 
     ...mapActions([

src/renderer/components/playlist-info/playlist-info.scss

@@ -75,12 +75,6 @@
 
 .searchInputsRow {
   margin-block-start: 8px;
-
-  display: grid;
-
-  /* 2 columns */
-  grid-template-columns: 1fr auto;
-  column-gap: 8px;
 }
 
 @media only screen and (max-width: 1250px) {

src/renderer/components/playlist-info/playlist-info.vue

@@ -76,7 +76,6 @@
     <hr>
 
     <div
-      v-if="!searchVideoMode"
       class="channelShareWrapper"
     >
       <router-link
@@ -107,14 +106,6 @@
       </div>
 
       <div class="playlistOptions">
-        <ft-icon-button
-          v-if="searchVideoModeAllowed && videoCount > 0 && !editMode"
-          ref="enableSearchModeButton"
-          :title="$t('User Playlists.SinglePlaylistView.Search for Videos')"
-          :icon="['fas', 'search']"
-          theme="secondary"
-          @click="enableVideoSearchMode"
-        />
         <ft-icon-button
           v-if="editMode"
           :title="$t('User Playlists.Save Changes')"
@@ -198,7 +189,7 @@
     </div>
 
     <div
-      v-if="searchVideoModeAllowed && searchVideoMode"
+      v-if="searchVideoModeAllowed"
       class="searchInputsRow"
     >
       <ft-input
@@ -211,12 +202,6 @@
         @input="(input) => updateQueryDebounce(input)"
         @clear="updateQueryDebounce('')"
       />
-      <ft-icon-button
-        :title="$t('User Playlists.Cancel')"
-        :icon="['fas', 'times']"
-        theme="secondary"
-        @click="disableVideoSearchMode"
-      />
     </div>
   </div>
 </template>

src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js

@@ -80,7 +80,7 @@ export default defineComponent({
       this.dataLimit = this.initialDataLimit
     }
   },
-  mounted: async function () {
+  mounted: function () {
     document.addEventListener('keydown', this.keyboardShortcutHandler)
   },
   beforeDestroy: function () {

src/renderer/views/Playlist/Playlist.js

@@ -60,7 +60,6 @@ export default defineComponent({
       getPlaylistInfoDebounce: function() {},
       playlistInEditMode: false,
 
-      playlistInVideoSearchMode: false,
       videoSearchQuery: '',
 
       promptOpen: false,
@@ -112,9 +111,8 @@ export default defineComponent({
         return this.continuationData !== null
       }
     },
-
-    searchVideoModeAllowed() {
-      return this.isUserPlaylistRequested
+    playlistInVideoSearchMode() {
+      return this.processedVideoSearchQuery !== ''
     },
     searchQueryTextRequested() {
       return this.$route.query.searchQueryText ?? ''
@@ -199,8 +197,7 @@ export default defineComponent({
   created: function () {
     this.getPlaylistInfoDebounce = debounce(this.getPlaylistInfo, 100)
 
-    if (this.searchVideoModeAllowed && this.searchQueryTextPresent) {
-      this.playlistInVideoSearchMode = true
+    if (this.isUserPlaylistRequested && this.searchQueryTextPresent) {
       this.videoSearchQuery = this.searchQueryTextRequested
     }
   },

src/renderer/views/Playlist/Playlist.vue

@@ -22,7 +22,7 @@
       :view-count="viewCount"
       :info-source="infoSource"
       :more-video-data-available="moreVideoDataAvailable"
-      :search-video-mode-allowed="searchVideoModeAllowed"
+      :search-video-mode-allowed="isUserPlaylistRequested && videoCount > 1"
       :search-video-mode-enabled="playlistInVideoSearchMode"
       :search-query-text="searchQueryTextRequested"
       class="playlistInfo"
@@ -31,8 +31,6 @@
       }"
       @enter-edit-mode="playlistInEditMode = true"
       @exit-edit-mode="playlistInEditMode = false"
-      @search-video-mode-on="playlistInVideoSearchMode = true"
-      @search-video-mode-off="playlistInVideoSearchMode = false"
       @search-video-query-change="(v) => videoSearchQuery = v"
       @prompt-open="promptOpen = true"
       @prompt-close="promptOpen = false"

static/locales/en-US.yaml

@@ -141,7 +141,7 @@ User Playlists:
   Your saved videos are empty. Click on the save button on the corner of a video to have it listed here: Your saved videos are empty. Click on the save button on the corner of a video to have
     it listed here
   You have no playlists. Click on the create new playlist button to create a new one.: You have no playlists. Click on the create new playlist button to create a new one.
-  Empty Search Message: There are no videos in this playlist that matches your search
+  Empty Search Message: There are no videos in this playlist that match your search
   Search bar placeholder: Search for Playlists
   Playlists with Matching Videos: Playlists with Matching Videos
 
@@ -235,7 +235,7 @@ History:
   History: History
   Watch History: Watch History
   Your history list is currently empty.: Your history list is currently empty.
-  Empty Search Message: There are no videos in your history that matches your search
+  Empty Search Message: There are no videos in your history that match your search
   Search bar placeholder: "Search in History"
 Settings:
   # On Settings Page