From b87a9f1e2fd896b8e3b2f12429b7ffb15ea4521b Mon Sep 17 00:00:00 2001
From: Isaac Grynsztein <IsaacMGrynsztein@gmail.com>
Date: Sat, 29 Feb 2020 03:08:02 -0500
Subject: [PATCH] fixed bug where playlist titles included their relative path

---
 src/app/player/player.component.html |  2 +-
 src/app/player/player.component.ts   | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/player/player.component.html b/src/app/player/player.component.html
index 4c5d88f..f424988 100644
--- a/src/app/player/player.component.html
+++ b/src/app/player/player.component.html
@@ -9,7 +9,7 @@
             </div>
             <div class="col-12 my-2">
                 <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 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">{{playlist_item.label}}</mat-button-toggle>
                 </mat-button-toggle-group>
             </div>
         </div>
diff --git a/src/app/player/player.component.ts b/src/app/player/player.component.ts
index 0b9b72a..90343b4 100644
--- a/src/app/player/player.component.ts
+++ b/src/app/player/player.component.ts
@@ -10,6 +10,7 @@ export interface IMedia {
   title: string;
   src: string;
   type: string;
+  label: string;
 }
 
 @Component({
@@ -77,10 +78,20 @@ export class PlayerComponent implements OnInit {
         const fileName = this.fileNames[i];
         const baseLocation = (this.type === 'audio') ? this.audioFolderPath : this.videoFolderPath;
         const fullLocation = this.baseStreamPath + baseLocation + encodeURI(fileName); // + (this.type === 'audio' ? '.mp3' : '.mp4');
+        // if it has a slash (meaning it's in a directory), only get the file name for the label
+        let label = null;
+        const decodedName = decodeURIComponent(fileName);
+        const hasSlash = decodedName.includes('/') || decodedName.includes('\\');
+        if (hasSlash) {
+          label = decodedName.replace(/^.*[\\\/]/, '');
+        } else {
+          label = decodedName;
+        }
         const mediaObject: IMedia = {
           title: fileName,
           src: fullLocation,
-          type: fileType
+          type: fileType,
+          label: label
         }
         this.playlist.push(mediaObject);
       }