add sort select to my videos, change default sort to -publishedAt

fixes #3779

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

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;

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)
       )

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
     ]
   }