Send sorted user playlist to watch-video-playlist

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -10,6 +10,7 @@ import {
   untilEndOfLocalPlayList,
 } from '../../helpers/api/local'
 import { invidiousGetPlaylistInfo } from '../../helpers/api/invidious'
+import { getSortedPlaylistItems } from '../../helpers/playlists'
 
 export default defineComponent({
   name: 'WatchVideoPlaylist',
@@ -152,6 +153,15 @@ export default defineComponent({
         },
       }
     },
+    userPlaylistSortOrder: function () {
+      return this.$store.getters.getUserPlaylistSortOrder
+    },
+    sortOrder: function () {
+      return this.isUserPlaylist ? this.userPlaylistSortOrder : SORT_BY_VALUES.Custom
+    },
+    sortedPlaylistItems: function () {
+      return getSortedPlaylistItems(this.playlistItems, this.sortOrder, this.currentLocale)
+    },
   },
   watch: {
     userPlaylistsReady: function() {
@@ -387,14 +397,18 @@ export default defineComponent({
       this.channelId = cachedPlaylist.channelId
 
       if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious' || cachedPlaylist.continuationData === null) {
-        this.playlistItems = cachedPlaylist.items
+        this.playlistItems = this.isUserPlaylist
+          ? getSortedPlaylistItems(cachedPlaylist.items, this.sortOrder, this.currentLocale)
+          : cachedPlaylist.items
       } else {
         const videos = cachedPlaylist.items
         await untilEndOfLocalPlayList(cachedPlaylist.continuationData, (p) => {
           videos.push(...p.items.map(parseLocalPlaylistVideo))
         }, { runCallbackOnceFirst: false })
 
-        this.playlistItems = videos
+        this.playlistItems = this.isUserPlaylist
+          ? getSortedPlaylistItems(videos, this.sortOrder, this.currentLocale)
+          : videos
       }
 
       this.isLoading = false
@@ -478,13 +492,13 @@ export default defineComponent({
       this.channelId = ''
 
       if (this.playlistItems.length === 0 || allowPlayingVideoRemoval) {
-        this.playlistItems = playlist.videos
+        this.playlistItems = getSortedPlaylistItems(playlist.videos, this.sortOrder, this.currentLocale)
       } else {
         // `this.currentVideo` relies on `playlistItems`
         const latestPlaylistContainsCurrentVideo = playlist.videos.some(v => v.playlistItemId === this.playlistItemId)
         // Only update list of videos if latest video list still contains currently playing video
         if (latestPlaylistContainsCurrentVideo) {
-          this.playlistItems = playlist.videos
+          this.playlistItems = getSortedPlaylistItems(playlist.videos, this.sortOrder, this.currentLocale)
         }
       }
 

src/renderer/helpers/playlists.js

@@ -0,0 +1,35 @@
+export const SORT_BY_VALUES = {
+  DateAddedNewest: 'date_added_descending',
+  DateAddedOldest: 'date_added_ascending',
+  AuthorAscending: 'author_ascending',
+  AuthorDescending: 'author_descending',
+  VideoTitleAscending: 'video_title_ascending',
+  VideoTitleDescending: 'video_title_descending',
+  Custom: 'custom'
+}
+
+export function getSortedPlaylistItems(playlistItems, sortOrder, locale) {
+  if (sortOrder === SORT_BY_VALUES.Custom) {
+    return playlistItems
+  }
+
+  return playlistItems.toSorted((a, b) => {
+    switch (sortOrder) {
+      case SORT_BY_VALUES.DateAddedNewest:
+        return b.timeAdded - a.timeAdded
+      case SORT_BY_VALUES.DateAddedOldest:
+        return a.timeAdded - b.timeAdded
+      case SORT_BY_VALUES.VideoTitleAscending:
+        return a.title.localeCompare(b.title, locale)
+      case SORT_BY_VALUES.VideoTitleDescending:
+        return b.title.localeCompare(a.title, locale)
+      case SORT_BY_VALUES.AuthorAscending:
+        return a.author.localeCompare(b.author, locale)
+      case SORT_BY_VALUES.AuthorDescending:
+        return b.author.localeCompare(a.author, locale)
+      default:
+        console.error(`Unknown sortOrder: ${sortOrder}`)
+        return 0
+    }
+  })
+}

src/renderer/views/Playlist/Playlist.js

@@ -15,16 +15,7 @@ import {
 } from '../../helpers/api/local'
 import { extractNumberFromString, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
 import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
-
-const SORT_BY_VALUES = {
-  DateAddedNewest: 'date_added_descending',
-  DateAddedOldest: 'date_added_ascending',
-  AuthorAscending: 'author_ascending',
-  AuthorDescending: 'author_descending',
-  VideoTitleAscending: 'video_title_ascending',
-  VideoTitleDescending: 'video_title_descending',
-  Custom: 'custom',
-}
+import { getSortedPlaylistItems, SORT_BY_VALUES } from '../../helpers/playlists'
 
 export default defineComponent({
   name: 'Playlist',
@@ -176,29 +167,7 @@ export default defineComponent({
       return this.sortOrder === SORT_BY_VALUES.Custom
     },
     sortedPlaylistItems: function () {
-      if (this.sortOrder === SORT_BY_VALUES.Custom) {
-        return this.playlistItems
-      }
-
-      return this.playlistItems.toSorted((a, b) => {
-        switch (this.sortOrder) {
-          case SORT_BY_VALUES.DateAddedNewest:
-            return b.timeAdded - a.timeAdded
-          case SORT_BY_VALUES.DateAddedOldest:
-            return a.timeAdded - b.timeAdded
-          case SORT_BY_VALUES.VideoTitleAscending:
-            return a.title.localeCompare(b.title, this.currentLocale)
-          case SORT_BY_VALUES.VideoTitleDescending:
-            return b.title.localeCompare(a.title, this.currentLocale)
-          case SORT_BY_VALUES.AuthorAscending:
-            return a.author.localeCompare(b.author, this.currentLocale)
-          case SORT_BY_VALUES.AuthorDescending:
-            return b.author.localeCompare(a.author, this.currentLocale)
-          default:
-            console.error(`Unknown sortOrder: ${this.sortOrder}`)
-            return 0
-        }
-      })
+      return getSortedPlaylistItems(this.playlistItems, this.sortOrder, this.currentLocale)
     },
     visiblePlaylistItems: function () {
       if (!this.isUserPlaylistRequested) {