Merge branch 'feature/playlist-2023-05' into custom-builds/current

* feature/playlist-2023-05:
  $- Remove unnecessary property assignments
  + Update playlists view to add sorting option
  $ Just assign bool value instead of if-else
  * Use v-if instead of v-show

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

@@ -34,16 +34,7 @@ export default Vue.extend({
   computed: {
     allPlaylists: function () {
       const playlists = this.$store.getters.getAllPlaylists
-      return [].concat(playlists).map((playlist) => {
-        playlist.title = playlist.playlistName
-        playlist.type = 'playlist'
-        playlist.thumbnail = ''
-        playlist.channelName = ''
-        playlist.channelId = ''
-        playlist.playlistId = ''
-        playlist.videoCount = playlist.videos.length
-        return playlist
-      }).sort((a, b) => {
+      return [].concat(playlists).sort((a, b) => {
         // Sort by `lastUpdatedAt`, then alphabetically
         if (a.lastUpdatedAt > b.lastUpdatedAt) {
           return -1

src/renderer/views/UserPlaylists/UserPlaylists.css

@@ -16,6 +16,11 @@
   vertical-align: middle;
 }
 
+.sortSelect {
+  /* Put it on the right */
+  margin-left: auto;
+}
+
 .message {
   color: var(--tertiary-text-color);
 }

src/renderer/views/UserPlaylists/UserPlaylists.js

@@ -6,10 +6,32 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtTooltip from '../../components/ft-tooltip/ft-tooltip.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
+import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 
+const SORT_BY_VALUES = {
+  NameAscending: 'name_ascending',
+  NameDescending: 'name_descending',
+
+  LatestCreatedFirst: 'latest_created_first',
+  EarliestCreatedFirst: 'earliest_created_first',
+
+  LatestUpdatedFirst: 'latest_updated_first',
+  EarliestUpdatedFirst: 'earliest_updated_first',
+}
+const SORT_BY_NAMES = {
+  NameAscending: 'A-Z',
+  NameDescending: 'Z-A',
+
+  LatestCreatedFirst: 'Latest Created',
+  EarliestCreatedFirst: 'Earliest Created',
+
+  LatestUpdatedFirst: 'Latest Updated',
+  EarliestUpdatedFirst: 'Earliest Updated',
+}
+
 export default defineComponent({
   name: 'UserPlaylists',
   components: {
@@ -18,6 +40,7 @@ export default defineComponent({
     'ft-tooltip': FtTooltip,
     'ft-loader': FtLoader,
     'ft-button': FtButton,
+    'ft-select': FtSelect,
     'ft-element-list': FtElementList,
     'ft-icon-button': FtIconButton,
     'ft-input': FtInput,
@@ -30,6 +53,7 @@ export default defineComponent({
       showLoadMoreButton: false,
       query: '',
       activeData: [],
+      sortBy: SORT_BY_VALUES.LatestUpdatedFirst,
     }
   },
   computed: {
@@ -43,28 +67,24 @@ export default defineComponent({
 
     allPlaylists: function () {
       const playlists = this.$store.getters.getAllPlaylists
-      return [].concat(playlists).map((playlist) => {
-        playlist.title = playlist.playlistName
-        playlist.type = 'playlist'
-        playlist.thumbnail = ''
-        playlist.channelName = ''
-        playlist.channelId = ''
-        playlist.playlistId = ''
-        playlist.videoCount = playlist.videos.length
-        return playlist
-      }).sort((a, b) => {
-        // Sort by favorites, watch later, then alphabetically
-        if (a._id === 'favorites') {
-          return -1
-        } else if (b._id === 'favorites') {
-          return 1
-        } else if (a._id === 'watchLater') {
-          return -1
-        } else if (b._id === 'watchLater') {
-          return 1
+      return [].concat(playlists).sort((a, b) => {
+        switch (this.sortBy) {
+          case SORT_BY_VALUES.NameAscending:
+            return a.playlistName.localeCompare(b.playlistName, this.locale)
+          case SORT_BY_VALUES.NameDescending:
+            return b.playlistName.localeCompare(a.playlistName, this.locale)
+          case SORT_BY_VALUES.LatestCreatedFirst:
+            return a.createdAt > b.createdAt ? -1 : 1
+          case SORT_BY_VALUES.EarliestCreatedFirst:
+            return a.createdAt < b.createdAt ? -1 : 1
+          case SORT_BY_VALUES.LatestUpdatedFirst:
+            return a.lastUpdatedAt > b.lastUpdatedAt ? -1 : 1
+          case SORT_BY_VALUES.EarliestUpdatedFirst:
+            return a.lastUpdatedAt < b.lastUpdatedAt ? -1 : 1
+          default:
+            console.error(`Unknown sortby: ${this.sortBy}`)
+            return 0
         }
-
-        return a.title.localeCompare(b.title, this.locale)
       })
     },
 
@@ -80,6 +100,13 @@ export default defineComponent({
     lowerCaseQuery: function() {
       return this.query.toLowerCase()
     },
+
+    sortBySelectNames() {
+      return Object.keys(SORT_BY_VALUES).map(k => SORT_BY_NAMES[k])
+    },
+    sortBySelectValues() {
+      return Object.values(SORT_BY_VALUES)
+    },
   },
   watch: {
     lowerCaseQuery() {
@@ -90,21 +117,24 @@ export default defineComponent({
       this.activeData = this.fullData
       this.filterPlaylist()
     },
+    sortBy() {
+      sessionStorage.setItem('UserPlaylists/sortBy', this.sortBy)
+    }
   },
   mounted: function () {
     const limit = sessionStorage.getItem('favoritesLimit')
-
     if (limit !== null) {
       this.dataLimit = limit
     }
 
+    const sortBy = sessionStorage.getItem('UserPlaylists/sortBy')
+    if (sortBy != null) {
+      this.sortBy = sortBy
+    }
+
     this.activeData = this.fullData
 
-    if (this.activeData.length < this.allPlaylists.length) {
-      this.showLoadMoreButton = true
-    } else {
-      this.showLoadMoreButton = false
-    }
+    this.showLoadMoreButton = this.activeData.length < this.allPlaylists.length
 
     this.filterPlaylistDebounce = debounce(this.filterPlaylist, 500)
   },

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <ft-loader
-      v-show="isLoading"
+      v-if="isLoading"
       :fullscreen="true"
     />
     <ft-card
-      v-show="!isLoading"
+      v-if="!isLoading"
       class="card"
     >
       <div class="heading">
@@ -20,31 +20,40 @@
           @click="createNewPlaylist"
         />
         <ft-input
-          v-show="fullData.length > 0"
+          v-if="fullData.length > 0"
           ref="searchBar"
           :placeholder="$t('User Playlists.Search bar placeholder')"
           :show-clear-text-button="true"
           :show-action-button="false"
           @input="(input) => query = input"
           @clear="query = ''"
         />
+        <ft-select
+          v-if="fullData.length > 0"
+          class="sortSelect"
+          :value="sortBy"
+          :select-names="sortBySelectNames"
+          :select-values="sortBySelectValues"
+          :placeholder="'Sort By'"
+          @change="sortBy = $event"
+        />
       </div>
       <ft-flex-box
-        v-show="fullData.length === 0"
+        v-if="fullData.length === 0"
       >
         <p class="message">
           You have no playlist. Click on the create new playlist button to create a new one.
         </p>
       </ft-flex-box>
       <ft-flex-box
-        v-show="activeData.length === 0 && fullData.length > 0"
+        v-else-if="activeData.length === 0 && fullData.length > 0"
       >
         <p class="message">
           {{ $t("User Playlists['Empty Search Message']") }}
         </p>
       </ft-flex-box>
       <ft-element-list
-        v-if="activeData.length > 0 && !isLoading"
+        v-else-if="activeData.length > 0 && !isLoading"
         :data="activeData"
         :use-channels-hidden-preference="false"
       />