Updated playlist file selection to use recent videos component

Playlists are now file type agnostic

Updated translations

src/app/components/recent-videos/recent-videos.component.html

@@ -17,7 +17,8 @@
             </div>
         </div>
         <div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
-            <h4 class="my-videos-title" i18n="My files title">My files</h4>
+            <h4 *ngIf="!customHeader" class="my-videos-title" i18n="My files title">My files</h4>
+            <h4 *ngIf="customHeader" class="my-videos-title">{{customHeader}}</h4>
         </div>
         <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
             <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
@@ -28,7 +29,7 @@
     </div>
 </div>
 <div>
-    <div class="container" style="margin-bottom: 16px">
+    <div *ngIf="!selectMode" class="container" style="margin-bottom: 16px">
         <div class="row justify-content-center">
             <ng-container *ngIf="normal_files_received && paged_data">
                 <div *ngFor="let file of paged_data; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
@@ -46,6 +47,31 @@
         </div>
     </div>
 
+    <div *ngIf="selectMode">
+        <mat-selection-list *ngIf="normal_files_received" (selectionChange)="fileSelectionChanged($event)">
+            <mat-list-option [selected]="selected_data.includes(file.uid)" *ngFor="let file of paged_data" [value]="file.uid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-10">
+                            <mat-icon class="audio-video-icon">{{(file.type === 'audio' || file.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>
+                            {{file.title}}
+                        </div>
+                        <div class="col-2">{{file.registered | date:'shortDate'}}</div>
+                    </div>
+                </div>
+                
+            </mat-list-option>
+        </mat-selection-list>
+
+        <ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
+            <mat-selection-list *ngIf="!normal_files_received">
+                <mat-list-option *ngFor="let file of paged_data">
+                    <content-loader class="list-ghosts" [primaryColor]="postsService.theme.ghost_primary" [secondaryColor]="postsService.theme.ghost_secondary" width="250" height="8"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="8" /></content-loader>
+                </mat-list-option>
+            </mat-selection-list>
+        </ng-container>
+    </div>
+
     <div *ngIf="usePaginator">
         <div style="position: absolute; margin-left: 8px; margin-top: 5px; scale: 0.8">
             <mat-form-field>

src/app/components/recent-videos/recent-videos.component.scss

@@ -61,4 +61,14 @@
     .my-videos-title {
         top: 0px;
     }
+}
+
+.list-ghosts {
+    position: relative;
+    top: 4px;
+}
+
+.audio-video-icon {
+    position: relative;
+    top: 6px;
 }

src/app/components/recent-videos/recent-videos.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 import { Router } from '@angular/router';
-import { FileType, FileTypeFilter } from '../../../api-types';
+import { DatabaseFile, FileType, FileTypeFilter } from '../../../api-types';
 import { MatPaginator } from '@angular/material/paginator';
 import { Subject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
@@ -14,7 +14,10 @@ import { distinctUntilChanged } from 'rxjs/operators';
 export class RecentVideosComponent implements OnInit {
 
   @Input() usePaginator = true;
+  @Input() selectMode = false;
   @Input() sub_id = null;
+  @Input() customHeader = null;
+  @Output() fileSelectionEmitter = new EventEmitter<{new_selection: string[], thumbnailURL: string}>();
 
   cached_file_count = 0;
   loading_files = null;
@@ -61,7 +64,9 @@ export class RecentVideosComponent implements OnInit {
   playlists = null;
 
   pageSize = 10;
-  paged_data = null;
+  paged_data: DatabaseFile[] = null;
+
+  selected_data: string[] = [];
 
   @ViewChild('paginator') paginator: MatPaginator
 
@@ -358,4 +363,21 @@ export class RecentVideosComponent implements OnInit {
     this.loading_files = Array(this.pageSize).fill(0);
     this.getAllFiles();
   }
+
+  fileSelectionChanged(event): void {
+    const adding = event.option._selected;
+    const value = event.option.value;
+    if (adding)
+      this.selected_data.push(value);
+    else
+      this.selected_data = this.selected_data.filter(e => e !== value);
+
+    let thumbnail_url = null;
+    if (this.selected_data.length) {
+      const file_obj = this.paged_data.find(file => file.uid === this.selected_data[0]);
+      if (file_obj) { thumbnail_url = file_obj['thumbnailURL'] }
+    }
+
+    this.fileSelectionEmitter.emit({new_selection: this.selected_data, thumbnailURL: thumbnail_url});
+  }
 }