diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js index 37395194dc1d2..2fef45a71c890 100644 --- a/src/renderer/components/ft-input/ft-input.js +++ b/src/renderer/components/ft-input/ft-input.js @@ -121,6 +121,7 @@ export default defineComponent({ inputDataPresent: function () { return this.inputDataDisplayed.length > 0 }, + inputDataDisplayed() { if (!this.isSearch) { return this.inputData } @@ -134,7 +135,7 @@ export default defineComponent({ searchStateKeyboardSelectedOptionValue() { if (this.searchState.keyboardSelectedOptionIndex === -1) { return null } - return this.getTextForArrayAtIndex(this.visibleDataList, this.searchState.keyboardSelectedOptionIndex) + return this.visibleDataList[this.searchState.keyboardSelectedOptionIndex] }, }, watch: { @@ -160,9 +161,6 @@ export default defineComponent({ this.updateVisibleDataList() }, methods: { - getTextForArrayAtIndex: function (array, index) { - return array[index] - }, handleClick: function (e) { // No action if no input text if (!this.inputDataPresent) { @@ -267,7 +265,7 @@ export default defineComponent({ handleRemoveClick: function (index) { if (!this.dataListProperties[index]?.isRemoveable) { return } - // keep focus in input even if removed "Remove" button was clicked + // keep input in focus even when the to-be-removed "Remove" button was clicked this.$refs.input.focus() this.removalMade = true this.$emit('remove', this.visibleDataList[index]) @@ -277,27 +275,29 @@ export default defineComponent({ * @param {KeyboardEvent} event */ handleKeyDown: function (event) { + // Update Input box value if enter key was pressed and option selected if (event.key === 'Enter') { - // Update Input box value if enter key was pressed and option selected if (this.removeButtonSelectedIndex !== -1) { this.handleRemoveClick(this.removeButtonSelectedIndex) } else if (this.searchState.selectedOption !== -1) { this.searchState.showOptions = false event.preventDefault() - this.inputData = this.getTextForArrayAtIndex(this.visibleDataList, this.searchState.selectedOption) + this.inputData = this.visibleDataList[this.searchState.selectedOption] this.handleOptionClick(this.searchState.selectedOption) } else { this.handleClick(event) } - // Early return + return } if (this.visibleDataList.length === 0) { return } this.searchState.showOptions = true - const isArrow = event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' - if (!isArrow) { + + const isArrowKeyPress = event.key.startsWith('Arrow') + + if (!isArrowKeyPress) { const selectedOptionValue = this.searchStateKeyboardSelectedOptionValue // Keyboard selected & is char if (!isNullOrEmpty(selectedOptionValue) && isKeyboardEventKeyPrintableChar(event.key)) { @@ -310,34 +310,20 @@ export default defineComponent({ } event.preventDefault() - - if (event.key === 'ArrowRight') { - this.removeButtonSelectedIndex = this.searchState.selectedOption - } - if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { const newIndex = this.searchState.selectedOption + (event.key === 'ArrowDown' ? 1 : -1) this.updateSelectedOptionIndex(newIndex) - // reset removal + // unset selection of "Remove" button this.removeButtonSelectedIndex = -1 + } else { + // "select" the Remove button through right arrow navigation, and unselect it with the left arrow + const newIndex = event.key === 'ArrowRight' ? this.searchState.selectedOption : -1 + this.removeButtonSelectedIndex = newIndex } - - if (this.searchState.selectedOption !== -1 && event.key === 'ArrowRight') { - this.removeButtonSelectedIndex = this.searchState.selectedOption - } - }, - - getIconFor: function (index) { - if (this.dataListTypes[index] === 'search-history') { - return 'clock-rotate-left' - } else if (this.dataListTypes[index] === 'search-suggestion') { - return 'magnifying-glass' - } - - return null }, + // Updates the selected dropdown option index and handles the under/over-flow behavior updateSelectedOptionIndex: function (index) { this.searchState.selectedOption = index // Allow deselecting suggestion diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js index 5eedfdb18f176..6b848d551a27b 100644 --- a/src/renderer/components/top-nav/top-nav.js +++ b/src/renderer/components/top-nav/top-nav.js @@ -133,19 +133,19 @@ export default defineComponent({ return this.$store.getters.getLatestSearchHistoryNames }, - // show latest search history when the search bar is empty activeDataList: function () { if (!this.enableSearchSuggestions) { return [] } + // show latest search history when the search bar is empty if (this.usingOnlySearchHistoryResults) { return this.$store.getters.getLatestSearchHistoryNames } const searchResults = [...this.latestMatchingSearchHistoryNames] for (const searchSuggestion of this.searchSuggestionsDataList) { - // prevent duplicate results + // prevent duplicate results between search history entries and YT search suggestions if (this.latestMatchingSearchHistoryNames.includes(searchSuggestion)) { continue } @@ -161,9 +161,9 @@ export default defineComponent({ }, activeDataListProperties: function () { - const searchHistoryNameLength = this.usingOnlySearchHistoryResults ? this.latestSearchHistoryNames.length : this.latestMatchingSearchHistoryNames.length + const searchHistoryEntriesCount = this.usingOnlySearchHistoryResults ? this.latestSearchHistoryNames.length : this.latestMatchingSearchHistoryNames.length return this.activeDataList.map((_, i) => { - const isSearchHistoryEntry = searchHistoryNameLength > i + const isSearchHistoryEntry = i < searchHistoryEntriesCount return isSearchHistoryEntry ? { isRemoveable: true, iconName: 'clock-rotate-left' } : { isRemoveable: false, iconName: 'magnifying-glass' } diff --git a/src/renderer/store/modules/search-history.js b/src/renderer/store/modules/search-history.js index c93528b91b223..a0494f4eb0592 100644 --- a/src/renderer/store/modules/search-history.js +++ b/src/renderer/store/modules/search-history.js @@ -36,26 +36,6 @@ const getters = { const searchHistoryEntry = state.searchHistoryEntries.find(p => p._id === id) return searchHistoryEntry }, - - getSearchHistoryIdsForMatchingUserPlaylistIds: (state) => (playlistIds) => { - const searchHistoryIds = [] - const allSearchHistoryEntries = state.searchHistoryEntries - const searchHistoryEntryLimitedIdsMap = new Map() - allSearchHistoryEntries.forEach((searchHistoryEntry) => { - searchHistoryEntryLimitedIdsMap.set(searchHistoryEntry._id, searchHistoryEntry._id) - }) - - playlistIds.forEach((playlistId) => { - const id = `/playlist/${playlistId}?playlistType=user&searchQueryText=` - if (!searchHistoryEntryLimitedIdsMap.has(id)) { - return - } - - searchHistoryIds.push(searchHistoryEntryLimitedIdsMap.get(id)) - }) - - return searchHistoryIds - } } const actions = { async grabSearchHistoryEntries({ commit }) { @@ -103,15 +83,6 @@ const actions = { } }, - async removeUserPlaylistSearchHistoryEntries({ dispatch, getters }, userPlaylistIds) { - const searchHistoryIds = getters.getSearchHistoryIdsForMatchingUserPlaylistIds(userPlaylistIds) - if (searchHistoryIds.length === 0) { - return - } - - dispatch('removeSearchHistoryEntries', searchHistoryIds) - }, - async removeAllSearchHistoryEntries({ commit }) { try { await DBSearchHistoryHandlers.deleteAll() @@ -133,7 +104,7 @@ const mutations = { upsertSearchHistoryEntryToList(state, updatedSearchHistoryEntry) { state.searchHistoryEntries = state.searchHistoryEntries.filter((p) => { - return p.name !== updatedSearchHistoryEntry._id + return p._id !== updatedSearchHistoryEntry._id }) state.searchHistoryEntries.unshift(updatedSearchHistoryEntry)