Updated playlist file selection to use recent videos component

Playlists are now file type agnostic

Updated translations

Public API v1.yaml

@@ -1939,7 +1939,6 @@ components:
         - uids
         - playlistName
         - thumbnailURL
-        - type
       type: object
       properties:
         playlistName:
@@ -1948,8 +1947,6 @@ components:
           type: array
           items:
             type: string
-        type:
-          $ref: '#/components/schemas/FileType'
         thumbnailURL:
           type: string
     CreatePlaylistResponse:
@@ -1979,15 +1976,17 @@ components:
       required:
         - playlist
         - success
-        - type
       type: object
       properties:
         playlist:
           $ref: '#/components/schemas/Playlist'
-        type:
-          $ref: '#/components/schemas/FileType'
         success:
           type: boolean
+        file_objs:
+          type: array
+          description: File objects for every uid in the playlist's uids property, in the same order
+          items:
+            $ref: '#/components/schemas/DatabaseFile'
     GetPlaylistsRequest:
       type: object
       properties:
@@ -2012,13 +2011,10 @@ components:
     DeletePlaylistRequest:
       required:
         - playlist_id
-        - type
       type: object
       properties:
         playlist_id:
           type: string
-        type:
-          $ref: '#/components/schemas/FileType'
     DownloadFileRequest:
       type: object
       properties:

backend/app.js

@@ -1339,9 +1339,8 @@ app.post('/api/getSubscriptions', optionalJwt, async (req, res) => {
 app.post('/api/createPlaylist', optionalJwt, async (req, res) => {
     let playlistName = req.body.playlistName;
     let uids = req.body.uids;
-    let type = req.body.type;
 
-    const new_playlist = await db_api.createPlaylist(playlistName, uids, type, req.isAuthenticated() ? req.user.uid : null);
+    const new_playlist = await db_api.createPlaylist(playlistName, uids, req.isAuthenticated() ? req.user.uid : null);
 
     res.send({
         new_playlist: new_playlist,
@@ -1369,7 +1368,6 @@ app.post('/api/getPlaylist', optionalJwt, async (req, res) => {
     res.send({
         playlist: playlist,
         file_objs: file_objs,
-        type: playlist && playlist.type,
         success: !!playlist
     });
 });

backend/db.js

@@ -357,7 +357,7 @@ exports.addMetadataPropertyToDB = async (property_key) => {
     }
 }
 
-exports.createPlaylist = async (playlist_name, uids, type, user_uid = null) => {
+exports.createPlaylist = async (playlist_name, uids, user_uid = null) => {
     const first_video = await exports.getVideo(uids[0]);
     const thumbnailToUse = first_video['thumbnailURL'];
     
@@ -366,7 +366,6 @@ exports.createPlaylist = async (playlist_name, uids, type, user_uid = null) => {
         uids: uids,
         id: uuid(),
         thumbnailURL: thumbnailToUse,
-        type: type,
         registered: Date.now(),
         randomize_order: false
     };

backend/subscriptions.js

@@ -178,7 +178,7 @@ async function deleteSubscriptionFile(sub, file, deleteForever, file_uid = null,
     ]);
 
     if (jsonExists) {
-        retrievedID = JSON.parse(await fs.readFile(jsonPath, 'utf8'))['id'];
+        retrievedID = fs.readJSONSync(jsonPath)['id'];
         await fs.unlink(jsonPath);
     }
 

src/api-types/models/CreatePlaylistRequest.ts

@@ -2,11 +2,8 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import type { FileType } from './FileType';
-
 export type CreatePlaylistRequest = {
     playlistName: string;
     uids: Array<string>;
-    type: FileType;
     thumbnailURL: string;
 };

src/api-types/models/DeletePlaylistRequest.ts

@@ -2,9 +2,6 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import type { FileType } from './FileType';
-
 export type DeletePlaylistRequest = {
     playlist_id: string;
-    type: FileType;
 };

src/api-types/models/GetPlaylistResponse.ts

@@ -2,11 +2,14 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import type { FileType } from './FileType';
+import type { DatabaseFile } from './DatabaseFile';
 import type { Playlist } from './Playlist';
 
 export type GetPlaylistResponse = {
     playlist: Playlist;
-    type: FileType;
     success: boolean;
+    /**
+     * File objects for every uid in the playlist's uids property, in the same order
+     */
+    file_objs?: Array<DatabaseFile>;
 };

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>

src/app/create-playlist/create-playlist.component.html

@@ -1,34 +1,12 @@
 <h4 mat-dialog-title i18n="Create a playlist dialog title">Create a playlist</h4>
 <form>
-    <div *ngIf="filesToSelectFrom || (audiosToSelectFrom && videosToSelectFrom)">
+    <div>
         <div>
             <mat-form-field color="accent">
                 <input [(ngModel)]="name" matInput placeholder="Name" i18n-placeholder="Playlist name placeholder" type="text" required aria-required [ngModelOptions]="{standalone: true}">
             </mat-form-field>
         </div>
-        <div *ngIf="!filesToSelectFrom">
-            <mat-form-field color="accent">
-                <mat-select placeholder="Type" i18n-placeholder="Type select" [(ngModel)]="type" [ngModelOptions]="{standalone: true}">
-                    <mat-option value="audio"><ng-container i18n="Audio">Audio</ng-container></mat-option>
-                    <mat-option value="video"><ng-container i18n="Video">Video</ng-container></mat-option>
-                </mat-select>
-            </mat-form-field>
-        </div>
-        <div>
-            <mat-form-field *ngIf="type && ((filesToSelectFrom && filesToSelectFrom.length > 0) || (type === 'audio' && audiosToSelectFrom && audiosToSelectFrom.length > 0) || (type === 'video' && videosToSelectFrom && videosToSelectFrom.length > 0))" color="accent">
-                <mat-label *ngIf="type === 'audio'"><ng-container i18n="Audio files title">Audio files</ng-container></mat-label>
-                <mat-label *ngIf="type === 'video'"><ng-container i18n="Videos title">Videos</ng-container></mat-label>
-                <mat-select [formControl]="filesSelect" multiple required aria-required>
-                    <ng-container *ngIf="filesToSelectFrom"><mat-option *ngFor="let file of filesToSelectFrom" [value]="file.uid">{{file.id}}</mat-option></ng-container>
-                    <ng-container *ngIf="audiosToSelectFrom && type === 'audio'"><mat-option *ngFor="let file of audiosToSelectFrom" [value]="file.uid">{{file.id}}</mat-option></ng-container>
-                    <ng-container *ngIf="videosToSelectFrom && type === 'video'"><mat-option *ngFor="let file of videosToSelectFrom" [value]="file.uid">{{file.id}}</mat-option></ng-container>
-                </mat-select>
-            </mat-form-field>
-            <!-- No videos available -->
-            <div style="margin-bottom: 15px;" *ngIf="type && ((filesToSelectFrom && filesToSelectFrom.length === 0) || (type === 'audio' && audiosToSelectFrom && audiosToSelectFrom.length === 0) || (type === 'video' && videosToSelectFrom && videosToSelectFrom.length === 0))">
-                No files available.
-            </div>
-        </div>
+        <app-recent-videos [selectMode]="true" [customHeader]="'Select files'" (fileSelectionEmitter)="fileSelectionChanged($event)"></app-recent-videos>
     </div>
 </form>
 

src/app/create-playlist/create-playlist.component.ts

@@ -17,42 +17,20 @@ export class CreatePlaylistComponent implements OnInit {
   audiosToSelectFrom = null;
   videosToSelectFrom = null;
   name = '';
+  cached_thumbnail_url = null;
 
   create_in_progress = false;
 
-  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
-              private postsService: PostsService,
+  constructor(private postsService: PostsService,
               public dialogRef: MatDialogRef<CreatePlaylistComponent>) { }
 
 
-  ngOnInit() {
-    if (this.data) {
-      this.filesToSelectFrom = this.data.filesToSelectFrom;
-      this.type = this.data.type;
-    }
+  ngOnInit(): void {}
 
-    if (!this.filesToSelectFrom) {
-      this.getMp3s();
-      this.getMp4s();
-    }
-  }
-
-  getMp3s() {
-    this.postsService.getMp3s().subscribe(result => {
-      this.audiosToSelectFrom = result['mp3s'];
-    });
-  }
-
-  getMp4s() {
-    this.postsService.getMp4s().subscribe(result => {
-      this.videosToSelectFrom = result['mp4s'];
-    });
-  }
-
-  createPlaylist() {
+  createPlaylist(): void {
     const thumbnailURL = this.getThumbnailURL();
     this.create_in_progress = true;
-    this.postsService.createPlaylist(this.name, this.filesSelect.value, this.type, thumbnailURL).subscribe(res => {
+    this.postsService.createPlaylist(this.name, this.filesSelect.value, thumbnailURL).subscribe(res => {
       this.create_in_progress = false;
       if (res['success']) {
         this.dialogRef.close(true);
@@ -62,19 +40,13 @@ export class CreatePlaylistComponent implements OnInit {
     });
   }
 
-  getThumbnailURL() {
-    let properFilesToSelectFrom = this.filesToSelectFrom;
-    if (!this.filesToSelectFrom) {
-      properFilesToSelectFrom = this.type === 'audio' ? this.audiosToSelectFrom : this.videosToSelectFrom;
-    }
-    for (let i = 0; i < properFilesToSelectFrom.length; i++) {
-      const file = properFilesToSelectFrom[i];
-      if (file.id === this.filesSelect.value[0]) {
-        // different services store the thumbnail in different places
-        if (file.thumbnailURL) { return file.thumbnailURL };
-        if (file.thumbnail) { return file.thumbnail };
-      }
-    }
-    return null;
+  getThumbnailURL(): string {
+    return this.cached_thumbnail_url;
+  }
+
+  fileSelectionChanged({new_selection, thumbnailURL}: {new_selection: string[], thumbnailURL: string}): void {
+    this.filesSelect.setValue(new_selection);
+    if (new_selection.length) this.cached_thumbnail_url = thumbnailURL;
+    else                      this.cached_thumbnail_url = null;
   }
 }

src/app/dialogs/modify-playlist/modify-playlist.component.ts

@@ -35,15 +35,9 @@ export class ModifyPlaylistComponent implements OnInit {
   }
 
   getFiles() {
-    if (this.playlist.type === 'audio') {
-      this.postsService.getMp3s().subscribe(res => {
-        this.processFiles(res['mp3s']);
-      });
-    } else {
-      this.postsService.getMp4s().subscribe(res => {
-        this.processFiles(res['mp4s']);
-      });
-    }
+    this.postsService.getAllFiles().subscribe(res => {
+      this.processFiles(res['files']);
+    });
   }
 
   processFiles(new_files = null) {

src/app/main/main.component.html

@@ -60,7 +60,7 @@
                     </div>
                 </form>
                 <br/>
-                <mat-checkbox [disabled]="current_download" (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">
+                <mat-checkbox [disabled]="autoplay && current_download" (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">
                     <ng-container i18n="Only Audio checkbox">
                         Only Audio
                     </ng-container>

src/app/main/main.component.ts

@@ -10,12 +10,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { ArgModifierDialogComponent } from 'app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
 import { RecentVideosComponent } from 'app/components/recent-videos/recent-videos.component';
-import { Download, FileType } from 'api-types';
-
-export let audioFilesMouseHovering = false;
-export let videoFilesMouseHovering = false;
-export let audioFilesOpened = false;
-export let videoFilesOpened = false;
+import { DatabaseFile, Download, FileType, Playlist } from 'api-types';
 
 @Component({
   selector: 'app-root',
@@ -78,7 +73,6 @@ export class MainComponent implements OnInit {
   mp4s: any[] = [];
   playlists = {'audio': [], 'video': []};
   playlist_thumbnails = {};
-  downloading_content = {'audio': {}, 'video': {}};
   downloads: Download[] = [];
   download_uids: string[] = [];
   current_download: Download = null;
@@ -466,11 +460,9 @@ export class MainComponent implements OnInit {
     }
   }
 
-  downloadFileFromServer(file, type: string): void {
+  downloadFileFromServer(file: DatabaseFile, type: string): void {
     const ext = type === 'audio' ? 'mp3' : 'mp4'
-    this.downloading_content[type][file.id] = true;
     this.postsService.downloadFileFromServer(file.uid).subscribe(res => {
-      this.downloading_content[type][file.id] = false;
       const blob: Blob = res;
       saveAs(blob, decodeURIComponent(file.id) + `.${ext}`);
 
@@ -481,9 +473,8 @@ export class MainComponent implements OnInit {
     });
   }
 
-  downloadPlaylist(playlist): void {
+  downloadPlaylist(playlist: Playlist): void {
     this.postsService.downloadPlaylistFromServer(playlist.id).subscribe(res => {
-      if (playlist.id) { this.downloading_content[playlist.type][playlist.id] = false };
       const blob: Blob = res;
       saveAs(blob, playlist.name + '.zip');
     });

src/app/posts.services.ts

@@ -358,7 +358,7 @@ export class PostsService implements CanActivate {
         return this.http.post<GetFileResponse>(this.path + 'getFile', body, this.httpOptions);
     }
 
-    getAllFiles(sort: Sort, range: number[], text_search: string, file_type_filter: FileTypeFilter, sub_id: string) {
+    getAllFiles(sort: Sort = null, range: number[] = null, text_search: string = null, file_type_filter: FileTypeFilter = FileTypeFilter.BOTH, sub_id: string = null) {
         const body: GetAllFilesRequest = {sort: sort, range: range, text_search: text_search, file_type_filter: file_type_filter, sub_id: sub_id};
         return this.http.post<GetAllFilesResponse>(this.path + 'getAllFiles', body, this.httpOptions);
     }
@@ -447,10 +447,9 @@ export class PostsService implements CanActivate {
         return this.http.post<SuccessObject>(this.path + 'disableSharing', body, this.httpOptions);
     }
 
-    createPlaylist(playlistName: string, uids: string[], type: FileType, thumbnailURL: string) {
+    createPlaylist(playlistName: string, uids: string[], thumbnailURL: string) {
         const body: CreatePlaylistRequest = {playlistName: playlistName,
             uids: uids,
-            type: type,
             thumbnailURL: thumbnailURL};
         return this.http.post<CreatePlaylistResponse>(this.path + 'createPlaylist', body, this.httpOptions);
     }
@@ -475,8 +474,8 @@ export class PostsService implements CanActivate {
         return this.http.post<SuccessObject>(this.path + 'updatePlaylist', body, this.httpOptions);
     }
 
-    removePlaylist(playlist_id: string, type: FileType) {
-        const body: DeletePlaylistRequest = {playlist_id: playlist_id, type: type};
+    removePlaylist(playlist_id: string) {
+        const body: DeletePlaylistRequest = {playlist_id: playlist_id};
         return this.http.post<SuccessObject>(this.path + 'deletePlaylist', body, this.httpOptions);
     }
 

src/assets/i18n/messages.en.xlf

@@ -590,7 +590,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/recent-videos/recent-videos.component.html</context>
-          <context context-type="linenumber">24</context>
+          <context context-type="linenumber">25</context>
         </context-group>
         <note priority="1" from="description">search field description</note>
       </trans-unit>
@@ -690,7 +690,7 @@
         <source>No files found.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/recent-videos/recent-videos.component.html</context>
-          <context context-type="linenumber">38</context>
+          <context context-type="linenumber">39</context>
         </context-group>
         <note priority="1" from="description">No files found</note>
       </trans-unit>
@@ -698,7 +698,7 @@
         <source>File type</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/recent-videos/recent-videos.component.html</context>
-          <context context-type="linenumber">52</context>
+          <context context-type="linenumber">78</context>
         </context-group>
         <note priority="1" from="description">File type</note>
       </trans-unit>
@@ -706,7 +706,7 @@
         <source>Both</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/recent-videos/recent-videos.component.html</context>
-          <context context-type="linenumber">54</context>
+          <context context-type="linenumber">80</context>
         </context-group>
         <note priority="1" from="description">Both</note>
       </trans-unit>
@@ -714,7 +714,7 @@
         <source>Video only</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/recent-videos/recent-videos.component.html</context>
-          <context context-type="linenumber">55</context>
+          <context context-type="linenumber">81</context>
         </context-group>
         <note priority="1" from="description">Video only</note>
       </trans-unit>
@@ -722,7 +722,7 @@
         <source>Audio only</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/recent-videos/recent-videos.component.html</context>
-          <context context-type="linenumber">56</context>
+          <context context-type="linenumber">82</context>
         </context-group>
         <note priority="1" from="description">Audio only</note>
       </trans-unit>
@@ -991,10 +991,6 @@
           <context context-type="sourcefile">src/app/components/unified-file-card/unified-file-card.component.html</context>
           <context context-type="linenumber">24</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/subscription/subscription-file-card/subscription-file-card.component.html</context>
-          <context context-type="linenumber">7</context>
-        </context-group>
         <note priority="1" from="description">Video info button</note>
       </trans-unit>
       <trans-unit id="a0720c36ee1057e5c54a86591b722485c62d7b1a" datatype="html">
@@ -1019,10 +1015,6 @@
           <context context-type="sourcefile">src/app/components/unified-file-card/unified-file-card.component.html</context>
           <context context-type="linenumber">34</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/subscription/subscription-file-card/subscription-file-card.component.html</context>
-          <context context-type="linenumber">8</context>
-        </context-group>
         <note priority="1" from="description">Delete and redownload subscription video button</note>
       </trans-unit>
       <trans-unit id="2031adb51e07a41844e8ba7704b054e98345c9c1" datatype="html">
@@ -1031,10 +1023,6 @@
           <context context-type="sourcefile">src/app/components/unified-file-card/unified-file-card.component.html</context>
           <context context-type="linenumber">37</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/subscription/subscription-file-card/subscription-file-card.component.html</context>
-          <context context-type="linenumber">9</context>
-        </context-group>
         <note priority="1" from="description">Delete forever subscription video button</note>
       </trans-unit>
       <trans-unit id="826b25211922a1b46436589233cb6f1a163d89b7" datatype="html">
@@ -1093,46 +1081,6 @@
         </context-group>
         <note priority="1" from="description">Playlist name placeholder</note>
       </trans-unit>
-      <trans-unit id="f61c6867295f3b53d23557021f2f4e0aa1d0b8fc" datatype="html">
-        <source>Type</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/create-playlist/create-playlist.component.html</context>
-          <context context-type="linenumber">11</context>
-        </context-group>
-        <note priority="1" from="description">Type select</note>
-      </trans-unit>
-      <trans-unit id="f0baeb8b69d120073b6d60d34785889b0c3232c8" datatype="html">
-        <source>Audio</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/create-playlist/create-playlist.component.html</context>
-          <context context-type="linenumber">12</context>
-        </context-group>
-        <note priority="1" from="description">Audio</note>
-      </trans-unit>
-      <trans-unit id="2d1ea268a6a9f483dbc2cbfe19bf4256a57a6af4" datatype="html">
-        <source>Video</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/create-playlist/create-playlist.component.html</context>
-          <context context-type="linenumber">13</context>
-        </context-group>
-        <note priority="1" from="description">Video</note>
-      </trans-unit>
-      <trans-unit id="f47e2d56dd8a145b2e9599da9730c049d52962a2" datatype="html">
-        <source>Audio files</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/create-playlist/create-playlist.component.html</context>
-          <context context-type="linenumber">19</context>
-        </context-group>
-        <note priority="1" from="description">Audio files title</note>
-      </trans-unit>
-      <trans-unit id="a52dae09be10ca3a65da918533ced3d3f4992238" datatype="html">
-        <source>Videos</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/create-playlist/create-playlist.component.html</context>
-          <context context-type="linenumber">20</context>
-        </context-group>
-        <note priority="1" from="description">Videos title</note>
-      </trans-unit>
       <trans-unit id="cec82c0a545f37420d55a9b6c45c20546e82f94e" datatype="html">
         <source>About YoutubeDL-Material</source>
         <context-group purpose="location">
@@ -2108,7 +2056,7 @@
         <source>Download for <x id="url" equiv-text="url"/> has been queued!</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/main/main.component.ts</context>
-          <context context-type="linenumber">403</context>
+          <context context-type="linenumber">397</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dad95154dcef3509b8cc705046061fd24994bbb7" datatype="html">
@@ -2906,14 +2854,6 @@
           <context context-type="linenumber">48</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="2054791b822475aeaea95c0119113de3200f5e1c" datatype="html">
-        <source>Length:</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/subscription/subscription-file-card/subscription-file-card.component.html</context>
-          <context context-type="linenumber">3</context>
-        </context-group>
-        <note priority="1" from="description">Video duration label</note>
-      </trans-unit>
       <trans-unit id="e2319dec5b4ccfb6ed9f55ccabd63650a8fdf547" datatype="html">
         <source>Your subscriptions</source>
         <context-group purpose="location">