Update search filters in line with YouTube changes

Author: absidue

src/renderer/components/FtSearchFilters/FtSearchFilters.vue

@@ -27,10 +27,10 @@
 
     <FtFlexBox class="radioFlexBox">
       <FtRadioButton
-        v-model="sortByValue"
-        :title="$t('Global.Sort By')"
-        :labels="sortByLabels"
-        :values="SORT_BY_VALUES"
+        v-model="prioritizeValue"
+        :title="$t('Search Filters.Prioritize.Prioritize')"
+        :labels="prioritizeLabels"
+        :values="PRIORITIZE_VALUES"
         class="searchRadio"
       />
       <FtRadioButton
@@ -87,16 +87,13 @@ import store from '../../store/index'
 
 const { t } = useI18n()
 
-const SORT_BY_VALUES = [
+const PRIORITIZE_VALUES = [
   'relevance',
-  'rating',
-  'upload_date',
-  'view_count'
+  'popularity'
 ]
 
 const TIME_VALUES = [
   '',
-  'hour',
   'today',
   'week',
   'month',
@@ -106,16 +103,17 @@ const TIME_VALUES = [
 const TYPE_VALUES = [
   'all',
   'video',
+  'shorts',
   'channel',
   'playlist',
   'movie'
 ]
 
 const DURATION_VALUES = [
   '',
-  'short',
-  'medium',
-  'long'
+  'under_three_mins',
+  'three_to_twenty_mins',
+  'over_twenty_mins'
 ]
 
 const FEATURE_VALUES = [
@@ -140,16 +138,13 @@ const NOT_ALLOWED_FOR_MOVIES_FEATURES = [
 
 const title = computed(() => t('Search Filters.Search Filters'))
 
-const sortByLabels = computed(() => [
-  t('Search Filters.Sort By.Most Relevant'),
-  t('Search Filters.Sort By.Rating'),
-  t('Search Filters.Sort By.Upload Date'),
-  t('Search Filters.Sort By.View Count')
+const prioritizeLabels = computed(() => [
+  t('Search Filters.Prioritize.Most Relevant'),
+  t('Search Filters.Prioritize.Popularity')
 ])
 
 const timeLabels = computed(() => [
   t('Search Filters.Time.Any Time'),
-  t('Search Filters.Time.Last Hour'),
   t('Search Filters.Time.Today'),
   t('Search Filters.Time.This Week'),
   t('Search Filters.Time.This Month'),
@@ -159,16 +154,17 @@ const timeLabels = computed(() => [
 const typeLabels = computed(() => [
   t('Search Filters.Type.All Types'),
   t('Search Filters.Type.Videos'),
+  t('Global.Shorts'),
   t('Search Filters.Type.Channels'),
   t('Playlists'),
   t('Search Filters.Type.Movies')
 ])
 
 const durationLabels = computed(() => [
   t('Search Filters.Duration.All Durations'),
-  t('Search Filters.Duration.Short (< 4 minutes)'),
-  t('Search Filters.Duration.Medium (4 - 20 minutes)'),
-  t('Search Filters.Duration.Long (> 20 minutes)')
+  t('Search Filters.Duration.< 3 minutes'),
+  t('Search Filters.Duration.3 - 20 minutes'),
+  t('Search Filters.Duration.> 20 minutes')
 ])
 
 const featureLabels = computed(() => [
@@ -186,14 +182,18 @@ const featureLabels = computed(() => [
 
 const searchSettings = store.getters.getSearchSettings
 
-/** @type {import('vue').Ref<'relevance' | 'rating' | 'upload_date' | 'view_count'>} */
-const sortByValue = ref(searchSettings.sortBy)
+/** @type {import('vue').Ref<'relevance' | 'popularity'>} */
+const prioritizeValue = ref(searchSettings.prioritize)
 
-watch(sortByValue, (value) => {
-  store.commit('setSearchSortBy', value)
+watch(prioritizeValue, (value) => {
+  if (value === 'popularity' && (typeValue.value === 'channel' || typeValue.value === 'playlist')) {
+    typeValue.value = 'all'
+  }
+
+  store.commit('setSearchPrioritize', value)
 })
 
-/** @type {import('vue').Ref<'' | 'hour' | 'today' | 'week' | 'month' | 'year'>} */
+/** @type {import('vue').Ref<'' | 'today' | 'week' | 'month' | 'year'>} */
 const timeValue = ref(searchSettings.time)
 
 watch(timeValue, (value) => {
@@ -204,14 +204,16 @@ watch(timeValue, (value) => {
   store.commit('setSearchTime', value)
 })
 
-/** @type {import('vue').Ref<'all' | 'video' | 'channel' | 'playlist' | 'movie'>} */
+/** @type {import('vue').Ref<'all' | 'video' | 'shorts' | 'channel' | 'playlist' | 'movie'>} */
 const typeValue = ref(searchSettings.type)
 
 watch(typeValue, (value) => {
-  if (value === 'channel' || value === 'playlist') {
+  if (value === 'shorts') {
+    durationValue.value = ''
+  } else if (value === 'channel' || value === 'playlist') {
     timeValue.value = ''
     durationValue.value = ''
-    sortByValue.value = SORT_BY_VALUES[0]
+    prioritizeValue.value = PRIORITIZE_VALUES[0]
     if (featuresValue.value.length > 0) {
       featuresValue.value = []
     }
@@ -224,7 +226,7 @@ watch(typeValue, (value) => {
   store.commit('setSearchType', value)
 })
 
-/** @type {import('vue').Ref<'' | 'short' | 'medium' | 'long'>} */
+/** @type {import('vue').Ref<'' | 'under_three_mins' | 'three_to_twenty_mins' | 'over_twenty_mins'>} */
 const durationValue = ref(searchSettings.duration)
 
 watch(durationValue, (value) => {
@@ -247,7 +249,7 @@ watch(featuresValue, (values) => {
 }, { deep: true })
 
 const searchFilterValueChanged = computed(() => {
-  return sortByValue.value !== SORT_BY_VALUES[0] ||
+  return prioritizeValue.value !== PRIORITIZE_VALUES[0] ||
     timeValue.value !== TIME_VALUES[0] ||
     typeValue.value !== TYPE_VALUES[0] ||
     durationValue.value !== DURATION_VALUES[0] ||
@@ -270,7 +272,7 @@ function isVideoOrMovieOrAll(type) {
 }
 
 function clearFilters() {
-  sortByValue.value = SORT_BY_VALUES[0]
+  prioritizeValue.value = PRIORITIZE_VALUES[0]
   timeValue.value = TIME_VALUES[0]
   typeValue.value = TYPE_VALUES[0]
   durationValue.value = DURATION_VALUES[0]

src/renderer/helpers/api/invidious.js

@@ -540,17 +540,24 @@ export async function getInvidiousPopularFeed() {
  * @param {any} searchSettings
  */
 export async function getInvidiousSearchResults(query, page, searchSettings) {
+  const DURATION_MAP = {
+    '': '',
+    under_three_mins: 'short',
+    three_to_twenty_mins: 'medium',
+    over_twenty_mins: 'long',
+  }
+
   /** @type {Promise<(InvidiousChannelObject | InvidiousPlaylistObject | InvidiousVideoType | InvidiousHashtagObject)[] | null>} */
   let results = await invidiousAPICall({
     resource: 'search',
     id: '',
     params: {
       q: query,
       page,
-      sort_by: searchSettings.sortBy,
+      sort_by: searchSettings.prioritize,
       date: searchSettings.time,
-      duration: searchSettings.duration,
-      type: searchSettings.type,
+      duration: DURATION_MAP[searchSettings.duration],
+      type: searchSettings.type === 'popularity' ? 'view_count' : 'searchSettings.type',
       features: searchSettings.features.join(',')
     }
   })

src/renderer/helpers/api/local.js

@@ -1794,8 +1794,8 @@ function convertSearchFilters(filters) {
   // others have empty strings that we don't want to pass to youtubei.js
 
   if (filters) {
-    if (filters.sortBy) {
-      convertedFilters.sort_by = filters.sortBy
+    if (filters.prioritize) {
+      convertedFilters.prioritize = filters.prioritize
     }
 
     if (filters.time) {

src/renderer/helpers/utils.js

@@ -483,12 +483,12 @@ export function formatDurationAsTimestamp(lengthSeconds) {
 }
 
 /**
- * @param {{sortBy? : string, time?: string, duration?: string, features: string[]}?} filtersA
- * @param {{sortBy? : string, time?: string, duration?: string, features: string[]}?} filtersB
+ * @param {{prioritize? : string, time?: string, duration?: string, features: string[]}?} filtersA
+ * @param {{prioritize? : string, time?: string, duration?: string, features: string[]}?} filtersB
  * @returns {boolean}
  */
 export function searchFiltersMatch(filtersA, filtersB) {
-  return filtersA?.sortBy === filtersB?.sortBy &&
+  return filtersA?.prioritize === filtersB?.prioritize &&
     filtersA?.time === filtersB?.time &&
     filtersA?.type === filtersB?.type &&
     filtersA?.duration === filtersB?.duration &&

src/renderer/store/modules/utils.js

@@ -34,7 +34,7 @@ const state = {
   regionValues: [],
   recentBlogPosts: [],
   searchSettings: {
-    sortBy: 'relevance',
+    prioritize: 'relevance',
     time: '',
     type: 'all',
     duration: '',
@@ -440,7 +440,7 @@ const actions = {
 
         const searchSettings = state.searchSettings
         const query = {
-          sortBy: searchSettings.sortBy,
+          prioritize: searchSettings.prioritize,
           time: searchSettings.time,
           type: searchSettings.type,
           duration: searchSettings.duration,
@@ -739,8 +739,8 @@ const mutations = {
     state.searchFilterValueChanged = value
   },
 
-  setSearchSortBy (state, value) {
-    state.searchSettings.sortBy = value
+  setSearchPrioritize (state, value) {
+    state.searchSettings.prioritize = value
   },
 
   setSearchTime (state, value) {

static/locales/af.yaml

@@ -70,15 +70,11 @@ Search Listing:
     8K: 8K
 Search Filters:
   Search Filters: 'Soekfilters'
-  Sort By:
+  Prioritize:
     Most Relevant: 'Mees relevant'
-    Rating: 'Gradering'
-    Upload Date: 'Oplaaddatum'
-    View Count: 'Beskouingsaantal'
   Time:
     Time: 'Tyd'
     Any Time: 'Enige tyd'
-    Last Hour: 'Laaste uur'
     Today: 'Vandag'
     This Week: 'Hierdie week'
     This Month: 'Hierdie maand'
@@ -93,9 +89,9 @@ Search Filters:
   Duration:
     Duration: 'Duur'
     All Durations: 'Alle durasies'
-    Short (< 4 minutes): 'Kort (<4 minute)'
-    Medium (4 - 20 minutes): 'Medium (4 - 20 minute)'
-    Long (> 20 minutes): 'Lank (> 20 minute)'
+    '< 3 minutes': '<3 minute'
+    '3 - 20 minutes': '3 - 20 minute'
+    '> 20 minutes': '> 20 minute'
   Features:
     Features: 'Funksies'
     HD: 'HD'

static/locales/ar.yaml

@@ -45,15 +45,11 @@ Search / Go to URL: 'ابحث / اذهب إلى رابط'
   # In Filter Button
 Search Filters:
   Search Filters: 'فلاتر البحث'
-  Sort By:
+  Prioritize:
     Most Relevant: 'الأكثر صلة'
-    Rating: 'التقييم'
-    Upload Date: 'تاريخ الرفع'
-    View Count: 'عدد المشاهدات'
   Time:
     Time: 'الوقت'
     Any Time: 'أي وقت'
-    Last Hour: 'آخر ساعة'
     Today: 'اليوم'
     This Week: 'هذا الأسبوع'
     This Month: 'هذا الشهر'
@@ -68,10 +64,6 @@ Search Filters:
   Duration:
     Duration: 'المدة'
     All Durations: 'كل الآوقات'
-    Short (< 4 minutes): 'قصير (< 4 دقائق)'
-    Long (> 20 minutes): 'طويل (> 20 دقيقة)'
-  # On Search Page
-    Medium (4 - 20 minutes): متوسط (4 - 20 دقيقة)
   Search Results: 'نتائج البحث'
   Fetching results. Please wait: 'جاري إحضار النتائج. الرجاء الانتظار'
   Fetch more results: 'إحضار المزيد من النتائج'

static/locales/awa.yaml

@@ -73,15 +73,11 @@ Search Listing:
   # In Filter Button
 Search Filters:
   Search Filters: 'हेरय कै फिलटर'
-  Sort By:
+  Prioritize:
     Most Relevant: 'सबसे ठीक'
-    Rating: 'रेटिंग'
-    Upload Date: 'अपलोड तारिख'
-    View Count: 'ब्यू कै गिनती'
   Time:
     Time: 'समय'
     Any Time: 'कबो भी'
-    Last Hour: 'पिछले घंटा'
     Today: 'आज'
     This Week: 'यहि हफ्ता'
     This Month: 'यहि महीना'
@@ -96,9 +92,6 @@ Search Filters:
   Duration:
     Duration: 'मियाद'
     All Durations: 'सब अवधि (मियाद)'
-    Short (< 4 minutes): '4 मिनट से छोट'
-    Medium (4 - 20 minutes): 'मद्धिम 4 से 20 मिनट कै'
-    Long (> 20 minutes): 'बड़वार 20 मिनट से जादा'
   Features:
     Features: 'सुबिधा'
     HD: 'एचडी'

static/locales/az.yaml

@@ -38,15 +38,11 @@ Search Bar:
   Remove: Sil
 Search Filters:
   Search Filters: 'Axtarış Filtrləri'
-  Sort By:
+  Prioritize:
     Most Relevant: 'Ən Münasib'
-    Rating: 'Qiymətləndirmə'
-    Upload Date: 'Yükləmə Tarixi'
-    View Count: 'Baxış Sayı'
   Time:
     Time: 'Vaxt'
     Any Time: 'İstənilən Vaxt'
-    Last Hour: 'Son Saat'
     Today: 'Bu gün'
     This Week: 'Bu Həftə'
     This Month: 'Bu Ay'
@@ -61,10 +57,9 @@ Search Filters:
   Duration:
     Duration: 'Müddət'
     All Durations: 'Bütün Müddətlər'
-    Short (< 4 minutes): 'Qısa (<4 dəqiqədən az)'
-    Long (> 20 minutes): 'Uzun (> 20 dəqiqədən çox)'
-  # On Search Page
-    Medium (4 - 20 minutes): Orta (4-20 dəqiqə)
+    '< 3 minutes': '<3 dəqiqədən az'
+    '> 20 minutes': '> 20 dəqiqədən çox'
+    '3 - 20 minutes': 3-20 dəqiq
   Search Results: 'Axtarış Nəticələri'
   Fetching results. Please wait: 'Nəticələr alınır. Zəhmət olmasa, gözləyin'
   Fetch more results: 'Daha çox nəticə əldə edin'

static/locales/be.yaml

@@ -56,15 +56,11 @@ Search Bar:
   Remove: Выдаліць
 Search Filters:
   Search Filters: 'Фільтры пошуку'
-  Sort By:
+  Prioritize:
     Most Relevant: 'Найбольш рэлевантныя'
-    Rating: 'Рэйтынг'
-    Upload Date: 'Дата запампоўвання'
-    View Count: 'Колькасць праглядаў'
   Time:
     Time: 'Час'
     Any Time: 'За ўвесь час'
-    Last Hour: 'За апошнюю гадзіну'
     Today: 'Сёння'
     This Week: 'За гэты тыдзень'
     This Month: 'За гэты месяц'
@@ -79,9 +75,9 @@ Search Filters:
   Duration:
     Duration: 'Працягласць'
     All Durations: 'Любая працягласць'
-    Short (< 4 minutes): 'Кароткія (< 4 хвілін)'
-    Medium (4 - 20 minutes): 'Сярэднія (4-20 хвілін)'
-    Long (> 20 minutes): 'Доўгія (> 20 хвілін)'
+    '< 3 minutes': '< 3 хвілін'
+    '3 - 20 minutes': '3-20 хвілін'
+    '> 20 minutes': '> 20 хвілін'
   # On Search Page
   Search Results: 'Вынікі пошуку'
   Fetching results. Please wait: 'Атрыманне вынікаў. Калі ласка, пачакайце'