Update to use getIconForSortPreference util function with all arrows pointing down

Author: kommunarr

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js

@@ -10,6 +10,7 @@ import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import {
   showToast,
+  getIconForSortPreference
 } from '../../helpers/utils'
 
 const SORT_BY_VALUES = {
@@ -154,19 +155,6 @@ export default defineComponent({
     sortBySelectValues() {
       return Object.values(SORT_BY_VALUES)
     },
-    sortIcon: function () {
-      switch (this.sortBy) {
-        case SORT_BY_VALUES.NameDescending:
-        case SORT_BY_VALUES.LatestCreatedFirst:
-        case SORT_BY_VALUES.LatestUpdatedFirst:
-          return ['fas', 'arrow-down-short-wide']
-        case SORT_BY_VALUES.NameAscending:
-        case SORT_BY_VALUES.EarliestCreatedFirst:
-        case SORT_BY_VALUES.EarliestUpdatedFirst:
-        default:
-          return ['fas', 'arrow-up-wide-short']
-      }
-    }
   },
   watch: {
     allPlaylistsLength(val, oldVal) {
@@ -282,6 +270,8 @@ export default defineComponent({
       this.query = query
     },
 
+    getIconForSortPreference: (s) => getIconForSortPreference(s),
+
     ...mapActions([
       'addVideos',
       'updatePlaylist',

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue

@@ -40,7 +40,7 @@
         :select-names="sortBySelectNames"
         :select-values="sortBySelectValues"
         :placeholder="$t('User Playlists.Sort By.Sort By')"
-        :icon="sortIcon"
+        :icon="getIconForSortPreference(sortBy)"
         @change="sortBy = $event"
       />
     </div>

src/renderer/helpers/utils.js

@@ -15,6 +15,35 @@ function currentLocale () {
   return i18n.locale.replace('_', '-')
 }
 
+export function getIconForSortPreference(sortPreference) {
+  switch (sortPreference) {
+    case 'name_descending':
+    case 'author_descending':
+    case 'video_title_descending':
+      return ['fas', 'sort-alpha-down-alt']
+    case 'name_ascending':
+    case 'author_ascending':
+    case 'video_title_ascending':
+      return ['fas', 'sort-alpha-down']
+    case 'latest_updated_first':
+    case 'latest_created_first':
+    case 'latest_played_first':
+    case 'date_added_descending':
+    case 'last':
+    case 'newest':
+    case 'popular':
+    case 'custom':
+      return ['fas', 'arrow-down-wide-short']
+    case 'earliest_updated_first':
+    case 'earliest_created_first':
+    case 'earliest_played_first':
+    case 'date_added_ascending':
+    case 'oldest':
+    default:
+      return ['fas', 'arrow-down-short-wide']
+  }
+}
+
 /**
  * @param {string} publishedText
  * @param {boolean} isLive

src/renderer/main.js

@@ -15,10 +15,10 @@ import {
   faAngleUp,
   faArrowDown,
   faArrowDownShortWide,
+  faArrowDownWideShort,
   faArrowLeft,
   faArrowRight,
   faArrowUp,
-  faArrowUpWideShort,
   faBars,
   faBookmark,
   faCheck,
@@ -74,6 +74,8 @@ import {
   faServer,
   faShareAlt,
   faSlidersH,
+  faSortAlphaDown,
+  faSortAlphaDownAlt,
   faSortDown,
   faStepBackward,
   faStepForward,
@@ -106,10 +108,10 @@ library.add(
   faAngleUp,
   faArrowDown,
   faArrowDownShortWide,
+  faArrowDownWideShort,
   faArrowLeft,
   faArrowRight,
   faArrowUp,
-  faArrowUpWideShort,
   faBars,
   faBookmark,
   faCheck,
@@ -166,6 +168,8 @@ library.add(
   faServer,
   faShareAlt,
   faSlidersH,
+  faSortAlphaDown,
+  faSortAlphaDownAlt,
   faSortDown,
   faStepBackward,
   faStepForward,

src/renderer/views/Channel/Channel.js

@@ -18,7 +18,8 @@ import {
   copyToClipboard,
   extractNumberFromString,
   formatNumber,
-  showToast
+  showToast,
+  getIconForSortPreference
 } from '../../helpers/utils'
 import { isNullOrEmpty } from '../../helpers/strings'
 import packageDetails from '../../../../package.json'
@@ -1950,17 +1951,7 @@ export default defineComponent({
       })
     },
 
-    sortIconFor: function (sortPreference) {
-      switch (sortPreference) {
-        case 'last':
-        case 'newest':
-        case 'popular':
-          return ['fas', 'arrow-down-short-wide']
-        case 'oldest':
-        default:
-          return ['fas', 'arrow-up-wide-short']
-      }
-    },
+    getIconForSortPreference: (s) => getIconForSortPreference(s),
 
     ...mapActions([
       'showOutlines',

src/renderer/views/Channel/Channel.vue

@@ -237,7 +237,7 @@
           :select-names="videoLiveShortSelectNames"
           :select-values="videoLiveShortSelectValues"
           :placeholder="$t('Search Filters.Sort By.Sort By')"
-          :icon="sortIconFor(videoSortBy)"
+          :icon="getIconForSortPreference(videoSortBy)"
           @change="videoSortBy = $event"
         />
         <ft-select
@@ -247,7 +247,7 @@
           :select-names="videoLiveShortSelectNames"
           :select-values="videoLiveShortSelectValues"
           :placeholder="$t('Search Filters.Sort By.Sort By')"
-          :icon="sortIconFor(shortSortBy)"
+          :icon="getIconForSortPreference(shortSortBy)"
           @change="shortSortBy = $event"
         />
         <ft-select
@@ -257,7 +257,7 @@
           :select-names="videoLiveShortSelectNames"
           :select-values="videoLiveShortSelectValues"
           :placeholder="$t('Search Filters.Sort By.Sort By')"
-          :icon="sortIconFor(liveSortBy)"
+          :icon="getIconForSortPreference(liveSortBy)"
           @change="liveSortBy = $event"
         />
         <ft-select
@@ -267,7 +267,7 @@
           :select-names="playlistSelectNames"
           :select-values="playlistSelectValues"
           :placeholder="$t('Search Filters.Sort By.Sort By')"
-          :icon="sortIconFor(playlistSortBy)"
+          :icon="getIconForSortPreference(playlistSortBy)"
           @change="playlistSortBy = $event"
         />
       </div>

src/renderer/views/Playlist/Playlist.js

@@ -14,7 +14,7 @@ import {
   getLocalPlaylistContinuation,
   parseLocalPlaylistVideo,
 } from '../../helpers/api/local'
-import { extractNumberFromString, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
+import { extractNumberFromString, getIconForSortPreference, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
 import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 const SORT_BY_VALUES = {
@@ -241,20 +241,6 @@ export default defineComponent({
     sortBySelectValues() {
       return this.sortByValues
     },
-    sortIcon: function () {
-      switch (this.sortOrder) {
-        case SORT_BY_VALUES.DateAddedNewest:
-        case SORT_BY_VALUES.VideoTitleDescending:
-        case SORT_BY_VALUES.AuthorDescending:
-          return ['fas', 'arrow-down-short-wide']
-        case SORT_BY_VALUES.DateAddedOldest:
-        case SORT_BY_VALUES.VideoTitleAscending:
-        case SORT_BY_VALUES.AuthorAscending:
-        case SORT_BY_VALUES.Custom:
-        default:
-          return ['fas', 'arrow-up-wide-short']
-      }
-    }
   },
   watch: {
     $route () {
@@ -571,6 +557,8 @@ export default defineComponent({
       }
     },
 
+    getIconForSortPreference: (s) => getIconForSortPreference(s),
+
     ...mapActions([
       'updateSubscriptionDetails',
       'updatePlaylist',

src/renderer/views/Playlist/Playlist.vue

@@ -50,7 +50,7 @@
           :select-names="sortBySelectNames"
           :select-values="sortBySelectValues"
           :placeholder="$t('Playlist.Sort By.Sort By')"
-          :icon="sortIcon"
+          :icon="getIconForSortPreference(sortOrder)"
           @change="updateUserPlaylistSortOrder"
         />
         <template

src/renderer/views/UserPlaylists/UserPlaylists.js

@@ -12,6 +12,7 @@ import FtInput from '../../components/ft-input/ft-input.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
+import { getIconForSortPreference } from '../../helpers/utils'
 
 const SORT_BY_VALUES = {
   NameAscending: 'name_ascending',
@@ -164,21 +165,6 @@ export default defineComponent({
     sortBySelectValues() {
       return Object.values(SORT_BY_VALUES)
     },
-    sortIcon: function () {
-      switch (this.sortBy) {
-        case SORT_BY_VALUES.NameDescending:
-        case SORT_BY_VALUES.LatestCreatedFirst:
-        case SORT_BY_VALUES.LatestUpdatedFirst:
-        case SORT_BY_VALUES.LatestPlayedFirst:
-          return ['fas', 'arrow-down-short-wide']
-        case SORT_BY_VALUES.NameAscending:
-        case SORT_BY_VALUES.EarliestCreatedFirst:
-        case SORT_BY_VALUES.EarliestPlayedFirst:
-        case SORT_BY_VALUES.EarliestUpdatedFirst:
-        default:
-          return ['fas', 'arrow-up-wide-short']
-      }
-    }
   },
   watch: {
     lowerCaseQuery() {
@@ -257,6 +243,8 @@ export default defineComponent({
       })
     },
 
+    getIconForSortPreference: (s) => getIconForSortPreference(s),
+
     ...mapActions([
       'showCreatePlaylistPrompt'
     ])

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -49,7 +49,7 @@
             :select-names="sortBySelectNames"
             :select-values="sortBySelectValues"
             :placeholder="$t('User Playlists.Sort By.Sort By')"
-            :icon="sortIcon"
+            :icon="getIconForSortPreference(sortBy)"
             @change="sortBy = $event"
           />
         </div>