Added modify playlist component

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

@@ -0,0 +1,28 @@
+<h4 mat-dialog-title><ng-container i18n="Modify playlist dialog title">Modify playlist</ng-container></h4>
+
+<mat-dialog-content>
+    <!-- Playlist info -->
+    <div>
+        <mat-form-field color="accent">
+            <input matInput placeholder="Name" i18n-placeholder="Name" [(ngModel)]="playlist.name">
+        </mat-form-field>
+    </div>
+
+    <!-- Playlist order -->
+    <mat-button-toggle-group class="media-list" cdkDropList (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
+        <mat-button-toggle class="media-box" cdkDrag *ngFor="let playlist_item of playlist.fileNames; let i = index" [checked]="false"><div><div class="playlist-item-text">{{playlist_item}}</div> <button (click)="removeContent(i)" class="remove-item-button" mat-icon-button><mat-icon>cancel</mat-icon></button></div></mat-button-toggle>
+    </mat-button-toggle-group>
+
+    <div class="add-content-button">
+        <button [disabled]="available_files.length === 0" mat-stroked-button [matMenuTriggerFor]="menu">Add more content</button>
+    </div>
+    <mat-menu #menu="matMenu">
+        <button *ngFor="let file of available_files" (click)="addContent(file)" mat-menu-item>{{file}}</button>
+    </mat-menu>
+
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <!-- Save -->
+    <button [disabled]="!playlistChanged()" (click)="updatePlaylist()" [disabled]="playlistChanged()" mat-raised-button color="accent">Save</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,50 @@
+.media-list {
+    
+}
+  
+.media-box {
+
+}
+  
+.cdk-drag-preview {
+box-sizing: border-box;
+border-radius: 4px;
+box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+            0 8px 10px 1px rgba(0, 0, 0, 0.14),
+            0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+  
+.cdk-drag-placeholder {
+opacity: 0;
+}
+
+.cdk-drag-animating {
+transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.media-box:last-child {
+border: none;
+}
+
+.media-list.cdk-drop-list-dragging .media-box:not(.cdk-drag-placeholder) {
+transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.add-content-button {
+margin-top: 15px;
+margin-bottom: 10px;
+}
+
+.remove-item-button {
+    right: 10px;
+    position: absolute;
+    top: 4px;
+}
+
+.playlist-item-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 70%;
+    margin: 0 auto;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModifyPlaylistComponent } from './modify-playlist.component';
+
+describe('ModifyPlaylistComponent', () => {
+  let component: ModifyPlaylistComponent;
+  let fixture: ComponentFixture<ModifyPlaylistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModifyPlaylistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModifyPlaylistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,81 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-modify-playlist',
+  templateUrl: './modify-playlist.component.html',
+  styleUrls: ['./modify-playlist.component.scss']
+})
+export class ModifyPlaylistComponent implements OnInit {
+
+  original_playlist = null;
+  playlist = null;
+  available_files = [];
+  all_files = [];
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
+              private postsService: PostsService,
+              public dialogRef: MatDialogRef<ModifyPlaylistComponent>) { }
+
+  ngOnInit(): void {
+    if (this.data) {
+      this.playlist = JSON.parse(JSON.stringify(this.data.playlist));
+      this.original_playlist = JSON.parse(JSON.stringify(this.data.playlist));
+      this.getFiles();
+    }
+  }
+
+  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']);
+      });
+    }
+  }
+
+  processFiles(new_files = null) {
+    if (new_files) { this.all_files = new_files.map(file => file.id); }
+    this.available_files = this.all_files.filter(e => !this.playlist.fileNames.includes(e))
+  }
+
+  updatePlaylist() {
+    this.postsService.updatePlaylist(this.playlist).subscribe(res => {
+      this.postsService.openSnackBar('Playlist updated successfully.');
+      this.getPlaylist();
+    });
+  }
+
+  playlistChanged() {
+    return JSON.stringify(this.playlist) === JSON.stringify(this.original_playlist);
+  }
+
+  getPlaylist() {
+    this.postsService.getPlaylist(this.playlist.id, this.playlist.type, null).subscribe(res => {
+      if (res['playlist']) {
+        this.playlist = res['playlist'];
+        this.original_playlist = JSON.parse(JSON.stringify(this.playlist));
+      }
+    });
+  }
+
+  addContent(file) {
+    this.playlist.fileNames.push(file);
+    this.processFiles();
+  }
+
+  removeContent(index) {
+    this.playlist.fileNames.splice(index, 1);
+    this.processFiles();
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.playlist.fileNames, event.previousIndex, event.currentIndex);
+  }
+
+}