Implement case sensitive search in history (#5446)

* $ Refactor a bit first * * Implement case sensitive search in history
FreeTubeApp · Aug 16, 2024 · 7a1217e · 7a1217e
1 parent c43ded9
commit 7a1217e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 31 deletions.
diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
@@ -7,8 +7,25 @@ import FtElementList from '../../components/FtElementList/FtElementList.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 FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import { ctrlFHandler } from '../../helpers/utils'
 
+const identity = (v) => v
+
+function filterVideosWithQuery(videos, query, attrProcessor = identity) {
+  return videos.filter((video) => {
+    if (typeof (video.title) === 'string' && attrProcessor(video.title).includes(query)) {
+      return true
+    } else if (typeof (video.author) === 'string' && attrProcessor(video.author).includes(query)) {
+      return true
+    }
+
+    return false
+  }).sort((a, b) => {
+    return b.timeWatched - a.timeWatched
+  })
+}
+
 export default defineComponent({
   name: 'History',
   components: {
@@ -19,12 +36,14 @@ export default defineComponent({
     'ft-button': FtButton,
     'ft-input': FtInput,
     'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
+    'ft-toggle-switch': FtToggleSwitch,
   },
   data: function () {
     return {
       isLoading: false,
       dataLimit: 100,
       searchDataLimit: 100,
+      doCaseSensitiveSearch: false,
       showLoadMoreButton: false,
       query: '',
       activeData: [],
@@ -49,9 +68,11 @@ export default defineComponent({
       this.filterHistoryAsync()
     },
     fullData() {
-      this.activeData = this.fullData
       this.filterHistory()
-    }
+    },
+    doCaseSensitiveSearch() {
+      this.filterHistory()
+    },
   },
   mounted: function () {
     document.addEventListener('keydown', this.keyboardShortcutHandler)
@@ -63,11 +84,7 @@ export default defineComponent({
 
     this.activeData = this.fullData
 
-    if (this.activeData.length < this.historyCacheSorted.length) {
-      this.showLoadMoreButton = true
-    } else {
-      this.showLoadMoreButton = false
-    }
+    this.showLoadMoreButton = this.activeData.length < this.historyCacheSorted.length
 
     this.filterHistoryDebounce = debounce(this.filterHistory, 500)
   },
@@ -92,34 +109,21 @@ export default defineComponent({
     filterHistory: function() {
       if (this.query === '') {
         this.activeData = this.fullData
-        if (this.activeData.length < this.historyCacheSorted.length) {
-          this.showLoadMoreButton = true
-        } else {
-          this.showLoadMoreButton = false
-        }
-      } else {
-        const lowerCaseQuery = this.query.toLowerCase()
-        const filteredQuery = this.historyCacheSorted.filter((video) => {
-          if (typeof (video.title) === 'string' && video.title.toLowerCase().includes(lowerCaseQuery)) {
-            return true
-          } else if (typeof (video.author) === 'string' && video.author.toLowerCase().includes(lowerCaseQuery)) {
-            return true
-          }
+        this.showLoadMoreButton = this.activeData.length < this.historyCacheSorted.length
+        return
+      }
 
-          return false
-        }).sort((a, b) => {
-          return b.timeWatched - a.timeWatched
-        })
-        if (filteredQuery.length <= this.searchDataLimit) {
-          this.showLoadMoreButton = false
-        } else {
-          this.showLoadMoreButton = true
-        }
-        this.activeData = filteredQuery.length < this.searchDataLimit ? filteredQuery : filteredQuery.slice(0, this.searchDataLimit)
+      let filteredQuery = []
+      if (this.doCaseSensitiveSearch) {
+        filteredQuery = filterVideosWithQuery(this.historyCacheSorted, this.query)
+      } else {
+        filteredQuery = filterVideosWithQuery(this.historyCacheSorted, this.query.toLowerCase(), (s) => s.toLowerCase())
       }
+      this.activeData = filteredQuery.length < this.searchDataLimit ? filteredQuery : filteredQuery.slice(0, this.searchDataLimit)
+      this.showLoadMoreButton = this.activeData.length > this.searchDataLimit
     },
     keyboardShortcutHandler: function (event) {
       ctrlFHandler(event, this.$refs.searchBar)
-    }
+    },
   }
 })
diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
@@ -18,6 +18,17 @@
         @input="(input) => query = input"
         @clear="query = ''"
       />
+      <div
+        class="optionsRow"
+      >
+        <ft-toggle-switch
+          v-if="fullData.length > 1"
+          :label="$t('History.Case Sensitive Search')"
+          :compact="true"
+          :default-value="doCaseSensitiveSearch"
+          @change="doCaseSensitiveSearch = !doCaseSensitiveSearch"
+        />
+      </div>
       <ft-flex-box
         v-show="fullData.length === 0"
       >

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -264,6 +264,7 @@ History:
   Your history list is currently empty.: Your history list is currently empty.
   Empty Search Message: There are no videos in your history that match your search
   Search bar placeholder: "Search in History"
+  Case Sensitive Search: Case Sensitive Search
 Settings:
   # On Settings Page
   Settings: Settings