added save button to player component and updated download button

src/app/player/player.component.css

@@ -44,7 +44,18 @@
     bottom: 25px;
 }
 
+.favorite-button {
+    left: 25px;
+    position: absolute;
+    bottom: 25px;
+}
+
 .video-col {
     padding-right: 0px;
     padding-left: 0.01px;
 }
+
+.save-icon {
+    bottom: 1px;
+    position: relative;
+}

src/app/player/player.component.html

@@ -16,9 +16,10 @@
     </div>
 
     <div *ngIf="playlist.length > 1">
-        <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon>save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
+        <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>
     </div>
     <div *ngIf="playlist.length === 1">
-        <button class="save-button" color="primary" (click)="downloadFile()" [disabled]="downloading" mat-fab><mat-icon>save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
+        <button class="save-button" color="primary" (click)="downloadFile()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
     </div>
 </div>

src/app/player/player.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit, HostListener } from '@angular/core';
+import { Component, OnInit, HostListener, EventEmitter } from '@angular/core';
 import { VgAPI } from 'videogular2/compiled/core';
 import { PostsService } from 'app/posts.services';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog, MatSnackBar } from '@angular/material';
+import { InputDialogComponent } from 'app/input-dialog/input-dialog.component';
 
 export interface IMedia {
   title: string;
@@ -33,6 +35,8 @@ export class PlayerComponent implements OnInit {
 
   downloading = false;
 
+  id = null;
+
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.innerWidth = window.innerWidth;
@@ -43,6 +47,7 @@ export class PlayerComponent implements OnInit {
 
     this.fileNames = this.route.snapshot.paramMap.get('fileNames').split('|nvr|');
     this.type = this.route.snapshot.paramMap.get('type');
+    this.id = this.route.snapshot.paramMap.get('id');
 
     // loading config
     this.postsService.loadNavItems().subscribe(result => { // loads settings
@@ -83,7 +88,8 @@ export class PlayerComponent implements OnInit {
 
   }
 
-  constructor(private postsService: PostsService, private route: ActivatedRoute) {
+  constructor(private postsService: PostsService, private route: ActivatedRoute, private dialog: MatDialog, private router: Router,
+              public snackBar: MatSnackBar) {
 
   }
 
@@ -157,4 +163,57 @@ export class PlayerComponent implements OnInit {
     });
   }
 
+  namePlaylistDialog() {
+    const done = new EventEmitter<any>();
+      const dialogRef = this.dialog.open(InputDialogComponent, {
+        width: '300px',
+        data: {
+          inputTitle: 'Name the playlist',
+          inputPlaceholder: 'Name',
+          submitText: 'Favorite',
+          doneEmitter: done
+        }
+      });
+
+      done.subscribe(name => {
+
+        // Eventually do additional checks on name
+        if (name) {
+          this.postsService.createPlaylist(name, this.fileNames, this.type, null).subscribe(res => {
+            if (res['success']) {
+              dialogRef.close();
+              const new_playlist = res['new_playlist'];
+              this.openSnackBar('Playlist \'' + name + '\' successfully created!', '')
+              this.playlistPostCreationHandler(new_playlist.id);
+            }
+          });
+        }
+      });
+  }
+
+  /*
+  createPlaylist(name) {
+    this.postsService.createPlaylist(name, this.fileNames, this.type, null).subscribe(res => {
+      if (res['success']) {
+        console.log('Success!');
+      }
+    });
+  }
+  */
+
+  playlistPostCreationHandler(playlistID) {
+    // changes the route without moving from the current view or
+    // triggering a navigation event
+    this.id = playlistID;
+    console.log(this.router.url);
+    this.router.navigateByUrl(this.router.url + ';id=' + playlistID);
+  }
+
+  // snackbar helper
+  public openSnackBar(message: string, action: string) {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
 }