Implement playlist sorting

FreeTubeApp · Apr 10, 2024 · fe20a20 · fe20a20
1 parent c07dfb9
commit fe20a20
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 40 deletions.
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
@@ -21,24 +21,15 @@ const SORT_BY_VALUES = {
   CustomDescending: 'custom_descending',
   DateAddedNewest: 'date_added_descending',
   DateAddedOldest: 'date_added_ascending',
-  DatePublishedNewest: 'date_published_newest',
-  DatePublishedOldest: 'date_published_oldest',
+  // TODO: store video.published for user playlists
+  // DatePublishedNewest: 'date_published_newest',
+  // DatePublishedOldest: 'date_published_oldest',
   VideoTitleAscending: 'video_title_ascending',
   VideoTitleDescending: 'video_title_descending',
   AuthorAscending: 'author_ascending',
   AuthorDescending: 'author_descending',
 }
 
-const USER_PLAYLIST_ONLY_SORT_BY_VALUES = [
-  SORT_BY_VALUES.DateAddedNewest,
-  SORT_BY_VALUES.DateAddedOldest
-]
-
-const REMOTE_PLAYLIST_ONLY_SORT_BY_VALUES = [
-  SORT_BY_VALUES.DatePublishedNewest,
-  SORT_BY_VALUES.DatePublishedOldest
-]
-
 export default defineComponent({
   name: 'Playlist',
   components: {
@@ -105,9 +96,6 @@ export default defineComponent({
     userPlaylistSortOrder: function () {
       return this.$store.getters.getUserPlaylistSortOrder
     },
-    sortOrder: function () {
-      return this.isUserPlaylistRequested ? this.userPlaylistSortOrder : this.localSortOrder
-    },
     currentLocale: function () {
       return this.$i18n.locale.replace('_', '-')
     },
@@ -178,25 +166,20 @@ export default defineComponent({
       })
     },
     sortByValues() {
-      const sortByValues = Object.values(SORT_BY_VALUES)
-      if (!this.isUserPlaylistRequested) {
-        return sortByValues.filter((k) => !USER_PLAYLIST_ONLY_SORT_BY_VALUES.includes(k))
-      } else {
-        return sortByValues.filter((k) => !REMOTE_PLAYLIST_ONLY_SORT_BY_VALUES.includes(k))
-      }
+      return Object.values(SORT_BY_VALUES)
     },
     isSortOrderCustom() {
-      return this.sortOrder === SORT_BY_VALUES.Custom || this.sortOrder === SORT_BY_VALUES.CustomDescending
+      return this.userPlaylistSortOrder === SORT_BY_VALUES.Custom || this.userPlaylistSortOrder === SORT_BY_VALUES.CustomDescending
     },
     sortedPlaylistItems: function () {
-      if (this.sortOrder === SORT_BY_VALUES.Custom) {
+      if (this.userPlaylistSortOrder === SORT_BY_VALUES.Custom) {
         return this.playlistItems
-      } else if (this.sortOrder === SORT_BY_VALUES.CustomDescending) {
+      } else if (this.userPlaylistSortOrder === SORT_BY_VALUES.CustomDescending) {
         return this.playlistItems.toReversed()
       }
 
       return this.playlistItems.toSorted((a, b) => {
-        switch (this.sortOrder) {
+        switch (this.userPlaylistSortOrder) {
           case SORT_BY_VALUES.DateAddedNewest:
             return b.timeAdded - a.timeAdded
           case SORT_BY_VALUES.DateAddedOldest:
@@ -214,7 +197,7 @@ export default defineComponent({
           case SORT_BY_VALUES.AuthorDescending:
             return b.author.localeCompare(a.author, this.currentLocale)
           default:
-            console.error(`Unknown sortOrder: ${this.sortOrder}`)
+            console.error(`Unknown sortOrder: ${this.userPlaylistSortOrder}`)
             return 0
         }
       })
@@ -238,9 +221,9 @@ export default defineComponent({
       return this.sortByValues.map((k) => {
         switch (k) {
           case SORT_BY_VALUES.Custom:
-            return this.isUserPlaylistRequested ? this.$t('Playlist.Sort By.Custom') : this.$t('Playlist.Sort By.Default')
+            return this.$t('Playlist.Sort By.Custom')
           case SORT_BY_VALUES.CustomDescending:
-            return this.isUserPlaylistRequested ? this.$t('Playlist.Sort By.CustomDescending') : this.$t('Playlist.Sort By.DefaultDescending')
+            return this.$t('Playlist.Sort By.CustomDescending')
           case SORT_BY_VALUES.DateAddedNewest:
             return this.$t('Playlist.Sort By.DateAddedNewest')
           case SORT_BY_VALUES.DateAddedOldest:
@@ -583,14 +566,6 @@ export default defineComponent({
       }
     },
 
-    updateSortOrder: function (sortOrder) {
-      if (this.isUserPlaylistRequested) {
-        this.updateUserPlaylistSortOrder(sortOrder)
-      } else {
-        this.localSortOrder = sortOrder
-      }
-    },
-
     ...mapActions([
       'updateSubscriptionDetails',
       'updatePlaylist',

diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
@@ -46,12 +46,13 @@
         v-if="playlistItems.length > 0"
       >
         <ft-select
+          v-if="isUserPlaylistRequested"
           class="sortSelect"
-          :value="sortOrder"
+          :value="userPlaylistSortOrder"
           :select-names="sortBySelectNames"
           :select-values="sortBySelectValues"
           :placeholder="$t('Playlist.Sort By.Sort By')"
-          @change="updateSortOrder($event)"
+          @change="updateUserPlaylistSortOrder"
         />
         <template
           v-if="visiblePlaylistItems.length > 0"
@@ -77,8 +78,8 @@
               :can-remove-from-playlist="true"
               :video-index="playlistInVideoSearchMode ? playlistItems.findIndex(i => i === item) : index"
               :initial-visible-state="index < 10"
-              @move-video-up="sortOrder !== 'custom_descending' ? moveVideoUp(item.videoId, item.playlistItemId) : moveVideoDown(item.videoId, item.playlistItemId)"
-              @move-video-down="sortOrder !== 'custom_descending' ? moveVideoDown(item.videoId, item.playlistItemId) : moveVideoUp(item.videoId, item.playlistItemId)"
+              @move-video-up="userPlaylistSortOrder !== 'custom_descending' ? moveVideoUp(item.videoId, item.playlistItemId) : moveVideoDown(item.videoId, item.playlistItemId)"
+              @move-video-down="userPlaylistSortOrder !== 'custom_descending' ? moveVideoDown(item.videoId, item.playlistItemId) : moveVideoUp(item.videoId, item.playlistItemId)"
               @remove-from-playlist="removeVideoFromPlaylist(item.videoId, item.playlistItemId)"
             />
           </transition-group>