Updated create playlist dialog to not require a type to be set prior

- duration and registered variables are now set for playlists

backend/app.js

@@ -2382,13 +2382,16 @@ app.post('/api/createPlaylist', optionalJwt, async (req, res) => {
     let fileNames = req.body.fileNames;
     let type = req.body.type;
     let thumbnailURL = req.body.thumbnailURL;
+    let duration = req.body.duration;
 
     let new_playlist = {
-        'name': playlistName,
+        name: playlistName,
         fileNames: fileNames,
         id: shortid.generate(),
         thumbnailURL: thumbnailURL,
-        type: type
+        type: type,
+        registered: Date.now(),
+        duration: duration
     };
 
     if (req.isAuthenticated()) {

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

@@ -1,18 +1,34 @@
 <h4 mat-dialog-title i18n="Create a playlist dialog title">Create a playlist</h4>
 <form>
-    <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>
-        <mat-form-field 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>
-            <mat-option *ngFor="let file of filesToSelectFrom" [value]="file.id">{{file.id}}</mat-option>
-            </mat-select>
-        </mat-form-field>
+    <div *ngIf="filesToSelectFrom || (audiosToSelectFrom && videosToSelectFrom)">
+        <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.id">{{file.id}}</mat-option></ng-container>
+                    <ng-container *ngIf="audiosToSelectFrom && type === 'audio'"><mat-option *ngFor="let file of audiosToSelectFrom" [value]="file.id">{{file.id}}</mat-option></ng-container>
+                    <ng-container *ngIf="videosToSelectFrom && type === 'video'"><mat-option *ngFor="let file of videosToSelectFrom" [value]="file.id">{{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>
     </div>
 </form>
 

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

@@ -14,6 +14,8 @@ export class CreatePlaylistComponent implements OnInit {
   filesToSelectFrom = null;
   type = null;
   filesSelect = new FormControl();
+  audiosToSelectFrom = null;
+  videosToSelectFrom = null;
   name = '';
 
   create_in_progress = false;
@@ -28,12 +30,30 @@ export class CreatePlaylistComponent implements OnInit {
       this.filesToSelectFrom = this.data.filesToSelectFrom;
       this.type = this.data.type;
     }
+
+    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() {
     const thumbnailURL = this.getThumbnailURL();
+    const duration = this.calculateDuration();
     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, this.type, thumbnailURL, duration).subscribe(res => {
       this.create_in_progress = false;
       if (res['success']) {
         this.dialogRef.close(true);
@@ -44,8 +64,12 @@ export class CreatePlaylistComponent implements OnInit {
   }
 
   getThumbnailURL() {
-    for (let i = 0; i < this.filesToSelectFrom.length; i++) {
-      const file = this.filesToSelectFrom[i];
+    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 };
@@ -55,4 +79,35 @@ export class CreatePlaylistComponent implements OnInit {
     return null;
   }
 
+  getDuration(file_id) {
+    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 === file_id) {
+        return file.duration;
+      }
+    }
+    return null;
+  }
+
+  calculateDuration() {
+    let sum = 0;
+    for (let i = 0; i < this.filesSelect.value.length; i++) {
+      const duration_val = this.getDuration(this.filesSelect.value[i]);
+      sum += typeof duration_val === 'string' ? this.durationStringToNumber(duration_val) : duration_val;
+    }
+    return sum;
+  }
+
+  durationStringToNumber(dur_str) {
+    let num_sum = 0;
+    const dur_str_parts = dur_str.split(':');
+    for (let i = dur_str_parts.length-1; i >= 0; i--) {
+      num_sum += parseInt(dur_str_parts[i])*(60**(dur_str_parts.length-1-i));
+    }
+    return num_sum;
+  }
 }

src/app/posts.services.ts

@@ -265,11 +265,12 @@ export class PostsService implements CanActivate {
         return this.http.post(this.path + 'disableSharing', {uid: uid, type: type, is_playlist: is_playlist}, this.httpOptions);
     }
 
-    createPlaylist(playlistName, fileNames, type, thumbnailURL) {
+    createPlaylist(playlistName, fileNames, type, thumbnailURL, duration = null) {
         return this.http.post(this.path + 'createPlaylist', {playlistName: playlistName,
                                                             fileNames: fileNames,
                                                             type: type,
-                                                            thumbnailURL: thumbnailURL}, this.httpOptions);
+                                                            thumbnailURL: thumbnailURL,
+                                                            duration: duration}, this.httpOptions);
     }
 
     getPlaylist(playlistID, type, uuid = null) {