Show error message when search is over the YouTube search limit of 10…

…0 characters (#4992)

* Show error message when search is over 100 characters

* Address review comments

* Address review comments

* #4992 - Review comment changes

* Code review changes - Move search character limit value to constants.js

* Update comment based on review

src/constants.js

@@ -76,9 +76,13 @@ const SyncEvents = {
 // Utils
 const MAIN_PROFILE_ID = 'allChannels'
 
+// YouTube search character limit is 100 characters
+const SEARCH_CHAR_LIMIT = 100
+
 export {
   IpcChannels,
   DBActions,
   SyncEvents,
-  MAIN_PROFILE_ID
+  MAIN_PROFILE_ID,
+  SEARCH_CHAR_LIMIT
 }

src/renderer/helpers/api/local.js

@@ -1,6 +1,7 @@
 import { ClientType, Endpoints, Innertube, Misc, UniversalCache, Utils, YT } from 'youtubei.js'
 import Autolinker from 'autolinker'
 import { join } from 'path'
+import { SEARCH_CHAR_LIMIT } from '../../../constants'
 
 import { PlayerCache } from './PlayerCache'
 import {
@@ -63,6 +64,12 @@ async function createInnertube({ withPlayer = false, location = undefined, safet
 let searchSuggestionsSession = null
 
 export async function getLocalSearchSuggestions(query) {
+  if (query.length > SEARCH_CHAR_LIMIT) {
+    // There's an event handler on the search input so avoid displaying an exception
+    console.error(`Query is over ${SEARCH_CHAR_LIMIT} characters`)
+    return
+  }
+
   // reuse innertube instance to keep the search suggestions snappy
   if (searchSuggestionsSession === null) {
     searchSuggestionsSession = await createInnertube()

src/renderer/views/Search/Search.js

@@ -11,6 +11,7 @@ import {
 } from '../../helpers/utils'
 import { getLocalSearchContinuation, getLocalSearchResults } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
+import { SEARCH_CHAR_LIMIT } from '../../../constants'
 
 export default defineComponent({
   name: 'Search',
@@ -92,6 +93,12 @@ export default defineComponent({
   },
   methods: {
     checkSearchCache: function (payload) {
+      if (payload.query.length > SEARCH_CHAR_LIMIT) {
+        console.warn(`Search character limit is: ${SEARCH_CHAR_LIMIT}`)
+        showToast(this.$t('Search character limit', { searchCharacterLimit: SEARCH_CHAR_LIMIT }))
+        return
+      }
+
       const sameSearch = this.sessionSearchHistory.filter((search) => {
         return search.query === payload.query && searchFiltersMatch(payload.searchSettings, search.searchSettings)
       })

static/locales/en-US.yaml

@@ -60,6 +60,7 @@ Global:
 Search / Go to URL: Search / Go to URL
 Search Bar:
   Clear Input: Clear Input
+Search character limit: Search query is over the {searchCharacterLimit} character limit
   # In Filter Button
 Search Filters:
   Search Filters: Search Filters