Add Library preview and delete capability

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { RemoteService } from './services/remote.service';
 import { SettingsService } from './services/settings.service';
 import { DownloadService } from './services/download.service';
 import { LibraryService } from './services/library.service';
+import { PlaybackService } from './services/playback.service';
 
 import { AppComponent } from './app.component';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
@@ -43,7 +44,8 @@ import { ModalComponent } from './components/modal/modal.component';
     RemoteService,
     SettingsService,
     DownloadService,
-    LibraryService
+    LibraryService,
+    PlaybackService
   ],
   bootstrap: [AppComponent]
 })

src/app/components/chart-item/chart-item.component.html

@@ -6,6 +6,7 @@
       <div class="meta">
         <p><strong>{{item.artist}}</strong> <span *ngIf="item.album">- {{item.album}}</span> <span *ngIf="item.year && item.year.trim()">({{item.year}})</span></p>
         <p style="margin-top: 0.5em;">Charted by {{item.charter}}</p>
+
       </div>
 
       <div class="description">
@@ -16,6 +17,11 @@
 
       <div class="buttons">
         <button class="ui button" (click)="detailsClicked.emit(item)">{{item.LOCALDATA ? 'Open Folder' : 'Details'}}</button>
+        <button class="ui positive toggle button" (click)="previewClicked.emit(item)">Preview</button>
+        <div *ngIf="item.LOCALDATA" class="ui vertical negative animated button" (click)="deleteClicked.emit(item)">
+          <div class="hidden content"><i class="trash icon"></i></div>
+          <div class="visible content">Delete</div>
+        </div>
         <div *ngIf="!item.LOCALDATA" class="ui vertical teal animated button" (click)="downloadClicked.emit(item)">
           <div class="hidden content"><i class="down arrow icon"></i></div>
           <div class="visible content">Add to library</div>

src/app/components/chart-item/chart-item.component.ts

@@ -11,7 +11,9 @@ export class ChartItemComponent implements OnInit {
   @Input() data: SongResult[];
 
   @Output() detailsClicked: EventEmitter<SongResult> = new EventEmitter();
+  @Output() previewClicked: EventEmitter<SongResult> = new EventEmitter();
   @Output() downloadClicked: EventEmitter<SongResult> = new EventEmitter();
+  @Output() deleteClicked: EventEmitter<SongResult> = new EventEmitter();
 
   constructor() { }
 

src/app/components/library/library.component.html

@@ -21,5 +21,5 @@
     <button class="ui teal button" (click)="scanLibrary()">Scan Again</button>
   </div>
 
-  <app-chart-item [data]="charts" mode="compact" (detailsClicked)="openFolder($event)"></app-chart-item>
+  <app-chart-item [data]="charts" mode="compact" (detailsClicked)="openFolder($event)" (deleteClicked)="deleteFile($event)" (previewClicked)="previewSong($event)"></app-chart-item>
 </div>

src/app/components/library/library.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, HostListener } from '@angular/core';
 import { SettingsService } from '../../services/settings.service';
 import { RemoteService } from '../../services/remote.service';
 import { LibraryService } from '../../services/library.service';
+import { PlaybackService } from '../../services/playback.service';
 import * as ini from 'ini';
 
 interface SimpleResult {
@@ -27,7 +28,7 @@ export class LibraryComponent implements OnInit {
   scrollBottomPadding = 50;
   canLoadScroll = true;
 
-  constructor(public settingsService: SettingsService, private remoteService: RemoteService, private libraryService: LibraryService) {
+  constructor(public settingsService: SettingsService, private remoteService: RemoteService, private libraryService: LibraryService, private playbackService: PlaybackService) {
     this.getNextSongBatch();
   }
 
@@ -62,6 +63,7 @@ export class LibraryComponent implements OnInit {
   }
 
   async scanLibrary() {
+    this.charts = [];
     const shouldContinue = await new Promise(resolve => {
       this.remoteService.remote.dialog.showMessageBox(
         this.remoteService.currentWindow,
@@ -143,4 +145,22 @@ export class LibraryComponent implements OnInit {
     this.remoteService.remote.shell.showItemInFolder(e.localPath);
   }
 
+  async deleteFile(e) {
+    var success = await this.remoteService.remote.shell.moveItemToTrash(e.localPath);
+    if(success){
+      this.scanLibrary();
+      //todo: why is this not working?
+      //const removeResult = await this.libraryService.removeLibraryItem(e);
+      //var index = this.charts.indexOf(e);
+      //this.charts.splice(index, 1);  
+    }
+  }
+
+  previewSong(e){
+    //console.log(e.localPath+"/song.ogg");
+
+    this.playbackService.playSong(e);
+  }
+
+
 }

src/app/services/library.service.ts

@@ -23,6 +23,14 @@ export class LibraryService {
     });
   }
 
+  removeLibraryItem(document): Promise<boolean> {
+    return new Promise(resolve => {
+      this.remoteService.talkIPC('library-remove-item-response', 'library-remove-item', document).then(res => {
+        resolve(res.args[0]);
+      });
+    });
+  }
+
   clearLibrary(): Promise<boolean> {
     return new Promise(resolve => {
       this.remoteService.talkIPC('library-clear-response', 'library-clear').then(res => {

src/app/services/playback.service.ts

@@ -0,0 +1,76 @@
+import { Injectable } from '@angular/core';
+import { RemoteService } from './remote.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlaybackService {
+  constructor(private remoteService: RemoteService) {}
+  audioTracks: any[];
+  currentSong: any;
+  async playSong(song){
+    var self = this;
+
+    //clear previous snippets
+    await this.destroyAudioTracks();
+    this.audioTracks = [];
+
+    if (this.currentSong && song == this.currentSong){
+      this.currentSong = null;
+    }
+    else{
+      await self.appendAudioFile(song.localPath+"/song.ogg");
+      await self.appendAudioFile(song.localPath+"/vocals.ogg");
+      await self.appendAudioFile(song.localPath+"/rhythm.ogg");
+      await self.appendAudioFile(song.localPath+"/guitar.ogg");
+      await self.appendAudioFile(song.localPath+"/drums.ogg");
+      await self.appendAudioFile(song.localPath+"/keys.ogg");
+      await self.appendAudioFile(song.localPath+"/drums_1.ogg");
+      await self.appendAudioFile(song.localPath+"/drums_2.ogg");
+      await self.appendAudioFile(song.localPath+"/drums_3.ogg");
+      await self.appendAudioFile(song.localPath+"/drums_4.ogg");
+      await self.playAudioTracks();
+      this.currentSong = song;
+    }
+  }
+
+  async appendAudioFile(path: string){
+    var self = this;
+    if (this.remoteService.fs.existsSync(path)) {
+      console.log('exists')
+          var snd  = new Audio();
+          var src  = document.createElement("source");
+          src.type = "audio/mpeg";
+          src.src  = path;
+          snd.currentTime=2;
+          snd.appendChild(src);
+          self.audioTracks.push(snd);
+          return true;
+    } else {
+      console.log('does not exist');
+      return false;
+    }
+  }
+
+  async playAudioTracks(){
+    console.log(this.audioTracks);
+    this.audioTracks.forEach((track) => {
+      track.play();
+    });
+  }
+
+  async destroyAudioTracks(){
+    if(this.audioTracks){
+      this.audioTracks.forEach((track) => {
+        console.log(track);
+        track.pause();
+        while (track.firstChild) {
+          track.removeChild(track.firstChild);
+        }
+        track.remove();
+        track = null;
+      });
+      this.audioTracks = [];
+    }
+  }
+}