Version dropdown and Album Art

src/app/components/browse/chart-sidebar/chart-sidebar.component.html

@@ -1,6 +1,6 @@
-<div class="ui fluid card">
-  <div class="ui placeholder">
-    <div class="square image"></div>
+<div *ngIf="selectedVersion" class="ui fluid card">
+  <div class="ui placeholder" [ngClass]="{'placeholder': !albumArtBuffer}">
+    <img class="ui square image" [src]="getAlbumArtSrc()">
   </div>
   <div id="chartDropdown" class="ui fluid selection dropdown">
     <input type="hidden" name="Chart">
@@ -16,7 +16,7 @@
   </div>
   <div id="textPanel" class="content">
     <span class="header">{{selectedVersion?.avTagName}}</span>
-    <div *ngIf="selectedVersion" class="description">
+    <div class="description">
       <div>{{charterPlural}} {{selectedVersion?.charters}}</div>
       <div *ngIf="selectedVersion?.tags">Tags: {{selectedVersion.tags}}</div>
       <div>Audio Length: {{getSongLength()}}</div>
@@ -25,8 +25,8 @@
 
   </div>
   <div class="ui positive buttons">
-    <div class="ui button">Download Latest</div>
-    <div id="versionButton" class="ui floating dropdown icon button">
+    <div class="ui button" (click)="onDownloadClicked()">Download Latest</div>
+    <div id="versionDropdown" class="ui floating dropdown icon button">
       <i class="dropdown icon"></i>
       <div class="menu">
         <div class="item">Version 1</div>

src/app/components/browse/chart-sidebar/chart-sidebar.component.scss

@@ -11,6 +11,6 @@
   flex-grow: 1;
 }
 
-#versionButton {
-  max-width: 30px;
+#versionDropdown {
+  max-width: min-content;
 }

src/app/components/browse/chart-sidebar/chart-sidebar.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 import { SongResult } from 'src/electron/shared/interfaces/search.interface'
 import { ElectronService } from 'src/app/core/services/electron.service'
 import { VersionResult } from 'src/electron/shared/interfaces/songDetails.interface'
+import { AlbumArtService } from 'src/app/core/services/album-art.service'
 
 @Component({
   selector: 'app-chart-sidebar',
@@ -12,12 +13,14 @@ export class ChartSidebarComponent {
 
   selectedVersion: VersionResult
   charterPlural: string
+  albumArtBuffer: Buffer
 
   private charts: { chartID: number, versions: VersionResult[] }[]
 
-  constructor(private electronService: ElectronService) { }
+  constructor(private electronService: ElectronService, private albumArtService: AlbumArtService) { }
 
   async onRowClicked(result: SongResult) {
+    const albumArt = this.albumArtService.getImage(result.id)
     const results = await this.electronService.invoke('song-details', result.id)
 
     // Group results by chartID
@@ -30,8 +33,17 @@ export class ChartSidebarComponent {
         this.charts.push({ chartID: result.chartID, versions: [result] })
       }
     }
-
     this.initChartDropdown()
+
+    this.albumArtBuffer = await albumArt
+  }
+
+  getAlbumArtSrc() {
+    if (this.albumArtBuffer) {
+      return 'data:image/jpg;base64,' + this.albumArtBuffer.toString('base64')
+    } else {
+      return undefined
+    }
   }
 
   /**
@@ -66,9 +78,12 @@ export class ChartSidebarComponent {
     const chart = this.charts.find(chart => chart.chartID == chartID)
     this.selectedVersion = chart.versions[0]
     this.charterPlural = this.selectedVersion.charterIDs.split('&').length == 1 ? 'Charter:' : 'Charters:'
-    //TODO init version dropdown
+    this.initVersionDropdown()
   }
 
+  /**
+   * Converts <this.selectedVersion.song_length> into a readable duration.
+   */
   getSongLength() {
     if (this.selectedVersion.song_length == 0) {
       return 'Unknown'
@@ -83,4 +98,42 @@ export class ChartSidebarComponent {
     seconds = Math.floor(seconds % 60)
     return `${hours == 0 ? '' : hours + ':'}${minutes == 0 ? '' : minutes + ':'}${seconds < 10 ? '0' + seconds : seconds}`
   }
+
+  /**
+   * Initializes the version dropdown from <this.selectedVersion> (or removes it if there's only one version)
+   */
+  private initVersionDropdown() {
+    const $versionDropdown = $('#versionDropdown')
+    const versions = this.charts.find(chart => chart.chartID == this.selectedVersion.chartID).versions
+    if (versions.length < 2) {
+      $versionDropdown.hide()
+    } else {
+      const values = versions.map(version => {
+        return {
+          value: version.versionID,
+          text: this.getLastModified(version.lastModified),
+          name: this.getLastModified(version.lastModified)
+        }
+      })
+      $versionDropdown.dropdown('setup menu', { values })
+      $versionDropdown.dropdown('setting', 'onChange', (versionID: number) => {
+        console.log(`Selected version: ${versionID}`)
+        return this.selectedVersion = versions.find(version => version.versionID = versionID)
+      })
+      $versionDropdown.dropdown('set selected', values[0].value)
+      $versionDropdown.show()
+    }
+  }
+
+  /**
+   * Converts the <lastModified> value to a user-readable format.
+   * @param lastModified The UNIX timestamp for the lastModified date.
+   */
+  private getLastModified(lastModified: number) {
+    return new Date(lastModified).toLocaleDateString()
+  }
+
+  onDownloadClicked() {
+    console.log(this.selectedVersion.downloadLink)
+  }
 }

src/app/core/services/album-art.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core'
+import { ElectronService } from './electron.service'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AlbumArtService {
+
+  constructor(private electronService: ElectronService) { }
+
+  private imageCache: { [songID: number]: Buffer } = {}
+
+  async getImage(songID: number): Promise<Buffer | null> {
+    if (this.imageCache[songID] == undefined) {
+      const albumArtResult = await this.electronService.invoke('album-art', songID)
+      if (albumArtResult) {
+        this.imageCache[songID] = albumArtResult.art
+      } else {
+        this.imageCache[songID] = null
+      }
+    }
+
+    return this.imageCache[songID]
+  }
+}