From 8e286cdca4ccfbd1ee5edc4b4446a6f81e7586a4 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Fri, 26 Feb 2021 14:08:09 +0100
Subject: [PATCH] add sort select to my videos, change default sort to
 -publishedAt

fixes #3779
---
 .../+my-library/my-videos/my-videos.component.html    | 11 +++++++++++
 .../+my-library/my-videos/my-videos.component.scss    |  4 ++++
 .../app/+my-library/my-videos/my-videos.component.ts  |  7 ++++++-
 server/models/utils.ts                                |  8 ++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 6e6bf12f4..b0d49efa2 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -25,6 +25,17 @@
     <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
     <span class="sr-only" i18n>Clear filters</span>
   </div>
+
+  <div class="peertube-select-container peertube-select-button ml-2">
+    <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
+      <option value="undefined" disabled>Sort by</option>
+      <option value="-publishedAt" i18n>Last published first</option>
+      <option value="-createdAt" i18n>Last created first</option>
+      <option value="-views" i18n>Most viewed first</option>
+      <option value="-likes" i18n>Most liked first</option>
+      <option value="-duration" i18n>Longest first</option>
+    </select>
+  </div>
 </div>
 
 <my-videos-selection
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index a03baa056..b10f8b0ab 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -5,6 +5,10 @@ input[type=text] {
   @include peertube-input-text(300px);
 }
 
+.peertube-select-container {
+  @include peertube-select-container(auto);
+}
+
 h1 {
   display: flex;
   justify-content: space-between;
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 0bc923e73..d6e66e617 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -43,6 +43,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
   videosSearch: string
   videosSearchChanged = new Subject<string>()
   getVideosObservableFunction = this.getVideosObservable.bind(this)
+  sort: VideoSortField = '-publishedAt'
 
   user: User
 
@@ -80,6 +81,10 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
     this.videosSearchChanged.next()
   }
 
+  onChangeSortColumn () {
+    this.videosSelection.reloadVideos()
+  }
+
   disableForReuse () {
     this.videosSelection.disableForReuse()
   }
@@ -91,7 +96,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
   getVideosObservable (page: number, sort: VideoSortField) {
     const newPagination = immutableAssign(this.pagination, { currentPage: page })
 
-    return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
+    return this.videoService.getMyVideos(newPagination, this.sort, this.videosSearch)
       .pipe(
         tap(res => this.pagination.totalItems = res.total)
       )
diff --git a/server/models/utils.ts b/server/models/utils.ts
index 5337ae75d..ec51c66bf 100644
--- a/server/models/utils.ts
+++ b/server/models/utils.ts
@@ -54,6 +54,14 @@ function getVideoSort (value: string, lastSort: OrderItem = [ 'id', 'ASC' ]): Or
 
       [ Sequelize.col('VideoModel.views'), direction ],
 
+      lastSort
+    ]
+  } else if (field === 'publishedAt') {
+    return [
+      [ 'ScheduleVideoUpdate', 'updateAt', direction + ' NULLS LAST' ],
+
+      [ Sequelize.col('VideoModel.publishedAt'), direction ],
+
       lastSort
     ]
   }