Add Playlist Sort By Video Duration

src/renderer/helpers/playlists.js

@@ -5,6 +5,8 @@ export const SORT_BY_VALUES = {
   AuthorDescending: 'author_descending',
   VideoTitleAscending: 'video_title_ascending',
   VideoTitleDescending: 'video_title_descending',
+  VideoDurationAscending: 'video_duration_ascending',
+  VideoDurationDescending: 'video_duration_descending',
   Custom: 'custom'
 }
 
@@ -19,7 +21,9 @@ export function getSortedPlaylistItems(playlistItems, sortOrder, locale, reverse
     sortOrder === SORT_BY_VALUES.VideoTitleAscending ||
     sortOrder === SORT_BY_VALUES.VideoTitleDescending ||
     sortOrder === SORT_BY_VALUES.AuthorAscending ||
-    sortOrder === SORT_BY_VALUES.AuthorDescending
+    sortOrder === SORT_BY_VALUES.AuthorDescending ||
+    sortOrder === SORT_BY_VALUES.VideoDurationAscending ||
+    sortOrder === SORT_BY_VALUES.VideoDurationDescending
   ) {
     collator = new Intl.Collator([locale, 'en'])
   }
@@ -45,6 +49,16 @@ function compareTwoPlaylistItems(a, b, sortOrder, collator) {
       return collator.compare(a.author, b.author)
     case SORT_BY_VALUES.AuthorDescending:
       return collator.compare(b.author, a.author)
+    case SORT_BY_VALUES.VideoDurationAscending: {
+      const aLengthForSort = (isNaN(a.lengthSeconds) || a.lengthSeconds === 0) ? 0 : a.lengthSeconds
+      const bLengthForSort = (isNaN(b.lengthSeconds) || b.lengthSeconds === 0) ? 0 : b.lengthSeconds
+      return aLengthForSort - bLengthForSort
+    }
+    case SORT_BY_VALUES.VideoDurationDescending: {
+      const aLengthForSort = (isNaN(a.lengthSeconds) || a.lengthSeconds === 0) ? 0 : a.lengthSeconds
+      const bLengthForSort = (isNaN(b.lengthSeconds) || b.lengthSeconds === 0) ? 0 : b.lengthSeconds
+      return bLengthForSort - aLengthForSort
+    }
     default:
       console.error(`Unknown sortOrder: ${sortOrder}`)
       return 0

src/renderer/views/Playlist/Playlist.js

@@ -74,6 +74,7 @@ export default defineComponent({
       getPlaylistInfoDebounce: function() {},
       playlistInEditMode: false,
       forceListView: false,
+      alreadyShownNotice: false,
 
       videoSearchQuery: '',
 
@@ -180,6 +181,7 @@ export default defineComponent({
       return this.sortOrder === SORT_BY_VALUES.Custom
     },
     sortedPlaylistItems: function () {
+      this.showNoticesSometimes()
       return getSortedPlaylistItems(this.playlistItems, this.sortOrder, this.currentLocale)
     },
     visiblePlaylistItems: function () {
@@ -214,6 +216,10 @@ export default defineComponent({
             return this.$t('Playlist.Sort By.AuthorAscending')
           case SORT_BY_VALUES.AuthorDescending:
             return this.$t('Playlist.Sort By.AuthorDescending')
+          case SORT_BY_VALUES.VideoDurationAscending:
+            return this.$t('Playlist.Sort By.VideoDurationAscending')
+          case SORT_BY_VALUES.VideoDurationDescending:
+            return this.$t('Playlist.Sort By.VideoDurationDescending')
           default:
             console.error(`Unknown sort: ${k}`)
             return k
@@ -420,6 +426,20 @@ export default defineComponent({
       showToast(this.$t('User Playlists.SinglePlaylistView.Toast.This playlist does not exist'))
     },
 
+    showNoticesSometimes: function () {
+      if (this.alreadyShownNotice) return
+      if (
+        this.sortOrder === SORT_BY_VALUES.VideoDurationAscending ||
+        this.sortOrder === SORT_BY_VALUES.VideoDurationDescending
+      ) {
+        const anyVideoMissingDuration = this.playlistItems.some(v => isNaN(v.lengthSeconds) || v.lengthSeconds === 0)
+        if (anyVideoMissingDuration) {
+          showToast(this.$t('User Playlists.SinglePlaylistView.Toast.This playlist has a video with a duration error'), 5000)
+          this.alreadyShownNotice = true
+        }
+      }
+    },
+
     getNextPage: function () {
       switch (this.infoSource) {
         case 'local':

static/locales/en-GB.yaml

@@ -174,6 +174,8 @@ User Playlists:
       This playlist is protected and cannot be removed.: This playlist is protected
         and cannot be removed.
       This playlist does not exist: This playlist does not exist
+
+      This playlist has a video with a duration error: This playlist contains at least one video that doesn't have a duration, it will be sorted as if their duration is zero.
       Playlist {playlistName} has been deleted.: Playlist {playlistName} has been
         deleted.
       Video has been removed: Video has been removed
@@ -1006,6 +1008,8 @@ Playlist:
     AuthorAscending: Author (A-Z)
     AuthorDescending: Author (Z-A)
     VideoTitleAscending: Title (A-Z)
+    VideoDurationAscending: Duration (Shortest first)
+    VideoDurationDescending: Duration (Longest first)
 Toggle Theatre Mode: 'Toggle Theatre Mode'
 Change Format:
   Change Media Formats: 'Change Media Formats'

static/locales/en-US.yaml

@@ -236,6 +236,8 @@ User Playlists:
       Playlist {playlistName} is the new quick bookmark playlist.: Playlist {playlistName} is the new quick bookmark playlist.
 
       This playlist does not exist: This playlist does not exist
+
+      This playlist has a video with a duration error: This playlist contains at least one video that doesn't have a duration, it will be sorted as if their duration is zero.
   AddVideoPrompt:
     Select a playlist to add your N videos to: 'Select a playlist to add your video to | Select a playlist to add your {videoCount} videos to'
     N playlists selected: '{playlistCount} Selected'
@@ -928,6 +930,8 @@ Playlist:
     AuthorDescending: Author (Z-A)
     VideoTitleAscending: Title (A-Z)
     VideoTitleDescending: Title (Z-A)
+    VideoDurationAscending: Duration (Shortest first)
+    VideoDurationDescending: Duration (Longest first)
     Custom: Custom
 
 # On Video Watch Page