playlists can now be rearranged and updated

src/app/player/player.component.css

@@ -63,3 +63,17 @@
     bottom: 1px;
     position: relative;
 }
+
+.update-playlist-button-div {
+    float: right;
+    margin-right: 30px;
+    margin-top: 25px;
+    margin-bottom: 15px;
+}
+
+.spinner-div {
+    position: relative;
+    display: inline-block;
+    margin-right: 12px;
+    top: 8px;
+}

src/app/player/player.component.html

@@ -8,13 +8,21 @@
                 </vg-player>
             </div>
             <div class="col-12 my-2">
-                <mat-button-toggle-group style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
-                    <mat-button-toggle *ngFor="let name of fileNames; let i = index" [checked]="currentItem.title === name" (click)="onClickPlaylistItem(playlist[i], i)" class="toggle-button" [value]="name">{{decodeURI(name)}}</mat-button-toggle>
+                <mat-button-toggle-group cdkDropList (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
+                    <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{decodeURI(playlist_item.title)}}</mat-button-toggle>
                 </mat-button-toggle-group>
             </div>
         </div>
     </div>
 
+    <div class="update-playlist-button-div" *ngIf="playlistChanged()">
+        <div class="spinner-div">
+            <mat-spinner *ngIf="playlist_updating" [diameter]="25"></mat-spinner>
+        </div>
+        <button color="primary" [disabled]="playlist_updating" (click)="updatePlaylist()" mat-raised-button>Save changes <mat-icon>update</mat-icon></button>
+        
+    </div>
+
     <div *ngIf="playlist.length > 1">
         <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
         <button *ngIf="!id" color="accent" class="favorite-button" color="primary" (click)="namePlaylistDialog()" mat-fab><mat-icon class="save-icon">favorite</mat-icon></button>

src/app/player/player.component.ts

@@ -4,6 +4,7 @@ import { PostsService } from 'app/posts.services';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog, MatSnackBar } from '@angular/material';
 import { InputDialogComponent } from 'app/input-dialog/input-dialog.component';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 export interface IMedia {
   title: string;
@@ -19,6 +20,8 @@ export interface IMedia {
 export class PlayerComponent implements OnInit {
 
   playlist: Array<IMedia> = [];
+  original_playlist: string = null;
+  playlist_updating = false;
 
   currentIndex = 0;
   currentItem: IMedia = null;
@@ -82,6 +85,7 @@ export class PlayerComponent implements OnInit {
         this.playlist.push(mediaObject);
       }
       this.currentItem = this.playlist[this.currentIndex];
+      this.original_playlist = JSON.stringify(this.playlist);
     });
 
     // this.getFileInfos();
@@ -122,11 +126,20 @@ export class PlayerComponent implements OnInit {
   }
 
   getFileInfos() {
-    this.postsService.getFileInfo(this.fileNames, this.type, false).subscribe(res => {
+    const fileNames = this.getFileNames();
+    this.postsService.getFileInfo(fileNames, this.type, false).subscribe(res => {
 
     });
   }
 
+  getFileNames() {
+    const fileNames = [];
+    for (let i = 0; i < this.playlist.length; i++) {
+      fileNames.push(this.playlist[i].title);
+    }
+    return fileNames;
+  }
+
   decodeURI(string) {
     return decodeURI(string);
   }
@@ -179,7 +192,8 @@ export class PlayerComponent implements OnInit {
 
         // Eventually do additional checks on name
         if (name) {
-          this.postsService.createPlaylist(name, this.fileNames, this.type, null).subscribe(res => {
+          const fileNames = this.getFileNames();
+          this.postsService.createPlaylist(name, fileNames, this.type, null).subscribe(res => {
             if (res['success']) {
               dialogRef.close();
               const new_playlist = res['new_playlist'];
@@ -208,6 +222,30 @@ export class PlayerComponent implements OnInit {
     this.router.navigateByUrl(this.router.url + ';id=' + playlistID);
   }
 
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.playlist, event.previousIndex, event.currentIndex);
+  }
+
+   playlistChanged() {
+    return JSON.stringify(this.playlist) !== this.original_playlist;
+  }
+
+  updatePlaylist() {
+    const fileNames = this.getFileNames();
+    this.playlist_updating = true;
+    this.postsService.updatePlaylist(this.id, fileNames, this.type).subscribe(res => {
+    this.playlist_updating = false;
+      if (res['success']) {
+        const fileNamesEncoded = fileNames.join('|nvr|');
+        this.router.navigate(['/player', {fileNames: fileNamesEncoded, type: 'video', id: this.id}]);
+        this.openSnackBar('Successfully updated playlist.', '');
+        this.original_playlist = JSON.stringify(this.playlist);
+      } else {
+        this.openSnackBar('ERROR: Failed to update playlist.', '');
+      }
+    })
+  }
+
   // snackbar helper
   public openSnackBar(message: string, action: string) {
     this.snackBar.open(message, action, {

src/app/posts.services.ts

@@ -107,6 +107,12 @@ export class PostsService {
                                                             thumbnailURL: thumbnailURL});
     }
 
+    updatePlaylist(playlistID, fileNames, type) {
+        return this.http.post(this.path + 'updatePlaylist', {playlistID: playlistID,
+                                                            fileNames: fileNames,
+                                                            type: type});
+    }
+
     removePlaylist(playlistID, type) {
         return this.http.post(this.path + 'deletePlaylist', {playlistID: playlistID, type: type});
     }