Updated playlist file selection to use recent videos component

Playlists are now file type agnostic

Updated translations

src/app/components/custom-playlists/custom-playlists.component.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { CreatePlaylistComponent } from 'app/create-playlist/create-playlist.component';
 import { ModifyPlaylistComponent } from 'app/dialogs/modify-playlist/modify-playlist.component';
+import { Playlist } from 'api-types';
 
 @Component({
   selector: 'app-custom-playlists',
@@ -32,7 +33,7 @@ export class CustomPlaylistsComponent implements OnInit {
     });
   }
 
-  getAllPlaylists() {
+  getAllPlaylists(): void {
     this.playlists_received = false;
     // must call getAllFiles as we need to get category playlists as well
     this.postsService.getPlaylists(true).subscribe(res => {
@@ -42,10 +43,10 @@ export class CustomPlaylistsComponent implements OnInit {
   }
 
   // creating a playlist
-  openCreatePlaylistDialog() {
+  openCreatePlaylistDialog(): void {
     const dialogRef = this.dialog.open(CreatePlaylistComponent, {
-      data: {
-      }
+      minWidth: '90vw',
+      minHeight: '95vh'
     });
     dialogRef.afterClosed().subscribe(result => {
       if (result) {
@@ -57,7 +58,7 @@ export class CustomPlaylistsComponent implements OnInit {
     });
   }
 
-  goToPlaylist(info_obj) {
+  goToPlaylist(info_obj: { file: Playlist; }): void {
     const playlist = info_obj.file;
     const playlistID = playlist.id;
 
@@ -76,7 +77,7 @@ export class CustomPlaylistsComponent implements OnInit {
     }
   }
 
-  downloadPlaylist(playlist_id, playlist_name) {
+  downloadPlaylist(playlist_id: string, playlist_name: string): void {
     this.downloading_content[playlist_id] = true;
     this.postsService.downloadPlaylistFromServer(playlist_id).subscribe(res => {
       this.downloading_content[playlist_id] = false;
@@ -86,11 +87,11 @@ export class CustomPlaylistsComponent implements OnInit {
 
   }
 
-  deletePlaylist(args) {
+  deletePlaylist(args: { file: Playlist; index: number; }): void {
     const playlist = args.file;
     const index = args.index;
     const playlistID = playlist.id;
-    this.postsService.removePlaylist(playlistID, playlist.type).subscribe(res => {
+    this.postsService.removePlaylist(playlistID).subscribe(res => {
       if (res['success']) {
         this.playlists.splice(index, 1);
         this.postsService.openSnackBar('Playlist successfully removed.', '');
@@ -99,7 +100,7 @@ export class CustomPlaylistsComponent implements OnInit {
     });
   }
 
-  editPlaylistDialog(args) {
+  editPlaylistDialog(args: { playlist: Playlist; index: number; }): void {
     const playlist = args.playlist;
     const index = args.index;
     const dialogRef = this.dialog.open(ModifyPlaylistComponent, {
@@ -109,7 +110,7 @@ export class CustomPlaylistsComponent implements OnInit {
       }
     });
 
-    dialogRef.afterClosed().subscribe(res => {
+    dialogRef.afterClosed().subscribe(() => {
       // updates playlist in file manager if it changed
       if (dialogRef.componentInstance.playlist_updated) {
         this.playlists[index] = dialogRef.componentInstance.original_playlist;

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});
+  }
 }

src/app/components/unified-file-card/unified-file-card.component.html

@@ -23,7 +23,7 @@
         <ng-container *ngIf="!is_playlist && !loading">
             <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
             <button (click)="navigateToSubscription()" mat-menu-item *ngIf="file_obj.sub_id"><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
-            <button *ngIf="availablePlaylists" [matMenuTriggerFor]="addtoplaylist" mat-menu-item><mat-icon>playlist_add</mat-icon>&nbsp;<ng-container i18n="Add to playlist menu item">Add to playlist</ng-container></button>
+            <button [disabled]="!availablePlaylists || availablePlaylists.length === 0" [matMenuTriggerFor]="addtoplaylist" mat-menu-item><mat-icon>playlist_add</mat-icon>&nbsp;<ng-container i18n="Add to playlist menu item">Add to playlist</ng-container></button>
             <mat-menu #addtoplaylist="matMenu">
                 <ng-container *ngFor="let playlist of availablePlaylists">
                     <button *ngIf="(playlist.type === 'audio') === file_obj.isAudio" [disabled]="playlist.uids?.includes(file_obj.uid)" (click)="emitAddFileToPlaylist(playlist.id)" mat-menu-item>{{playlist.name}}</button>