sorting and updating now only possible on favorited (saved) playlists

fixed compilation bug in app.module

src/app/app.module.ts

@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule,
   MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule, MatGridListModule,
   MatProgressBarModule, MatExpansionModule,
-  MatGridList,
   MatProgressSpinnerModule,
   MatButtonToggleModule,
   MatDialogModule} from '@angular/material';
@@ -14,7 +13,6 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { HttpModule } from '@angular/http';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { PostsService } from 'app/posts.services';
-import {APP_BASE_HREF} from '@angular/common';
 import { FileCardComponent } from './file-card/file-card.component';
 import {RouterModule} from '@angular/router';
 import { AppRoutingModule } from './app-routing.module';
@@ -28,10 +26,9 @@ import { InputDialogComponent } from './input-dialog/input-dialog.component';
 import { LazyLoadImageModule, IsVisibleProps } from 'ng-lazyload-image';
 import { NgxContentLoadingModule } from 'ngx-content-loading';
 import { audioFilesMouseHovering, videoFilesMouseHovering } from './main/main.component';
-import { Observable } from 'rxjs';
 import { CreatePlaylistComponent } from './create-playlist/create-playlist.component';
 
-function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
+export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
   return (element.id === 'video' ? videoFilesMouseHovering : audioFilesMouseHovering);
 }
 

src/app/player/player.component.html

@@ -8,14 +8,14 @@
                 </vg-player>
             </div>
             <div class="col-12 my-2">
-                <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-group cdkDropList [cdkDropListSortingDisabled]="!id" (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="update-playlist-button-div" *ngIf="id && playlistChanged()">
         <div class="spinner-div">
             <mat-spinner *ngIf="playlist_updating" [diameter]="25"></mat-spinner>
         </div>