From 874103b31f29cb1b11bc134175ff04757334a369 Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Mon, 6 Aug 2018 19:08:30 +0100
Subject: [PATCH] Feat: link from Playback Card to songdetails and albumlist
 Fix: html ids in camelCase

---
 htdocs/css/mpd.css |  1 -
 htdocs/index.html  |  8 ++++----
 htdocs/js/mpd.js   | 34 +++++++++++++++++++++++-----------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index 40c65c6..7c27a2f 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -176,7 +176,6 @@ main {
 }
 
 a.card-img-top {
- height:250px;
  overflow:hidden;
  display:block;
 }
diff --git a/htdocs/index.html b/htdocs/index.html
index cfd0237..e0b5088 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -76,9 +76,9 @@
       <div class="card-header">Playback</div>
       <div class="card-body">
         <div class="album-cover" id="album-cover"></div>
-        <h1 id="currenttrack"></h1>
-        <h3 id="artist"></h3>
-        <h4 id="album"></h4>
+        <h1 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h1>
+        <h3 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h3>
+        <h4 id="currentAlbum"></h4>
         <div class="row">
           <div class="col-8">
             <input type="range" min="0" max="100" step="1" class="form-control-range" id="progressBar">
@@ -322,7 +322,7 @@
           </table>
         </div>
         
-        <div id="BrowseDatabaseAlbumCards" class="row hide"></div>
+        <div id="BrowseDatabaseAlbumList" class="row hide"></div>
         
         <div class="btn-toolbar hide" id="BrowseDatabaseButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 81eb8dc..c315dd9 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -75,6 +75,7 @@ domCache.progressBar = document.getElementById('progressBar');
 domCache.volumeBar = document.getElementById('volumeBar');
 domCache.outputs = document.getElementById('outputs');
 domCache.btnAdd = document.getElementById('nav-add2homescreen');
+domCache.currentTrack = document.getElementById('currentTrack');
 
 var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
 var modalSettings = new Modal(document.getElementById('modalSettings'));
@@ -338,9 +339,10 @@ function appInit() {
     addFilterLetter('BrowseDatabaseFilterLetters');
     addFilterLetter('BrowsePlaylistsFilterLetters');
 
-    var hrefs = document.querySelectorAll('button[data-href], a[data-href]');
+    var hrefs = document.querySelectorAll('[data-href]');
     var hrefsLen = hrefs.length;
     for (var i = 0; i < hrefsLen; i++) {
+        hrefs[i].classList.add('clickable');
         hrefs[i].addEventListener('click', function(event) {
             event.preventDefault();
             event.stopPropagation();
@@ -1141,7 +1143,7 @@ function parseListDBtags(obj) {
     if (app.current.app !== 'Browse' && app.current.tab !== 'Database' && app.current.view !== 'Artist') return;
   
     if (obj.tagtype == 'AlbumArtist') {
-        document.getElementById('BrowseDatabaseAlbumCards').classList.add('hide');
+        document.getElementById('BrowseDatabaseAlbumList').classList.add('hide');
         document.getElementById('BrowseDatabaseArtistList').classList.remove('hide');
         document.getElementById('btnBrowseDatabaseArtist').parentNode.classList.add('hide');
         var nrItems = obj.data.length;
@@ -1176,11 +1178,11 @@ function parseListDBtags(obj) {
         document.getElementById('BrowseDatabaseArtistList').classList.remove('opacity05');                              
                                
     } else if (obj.tagtype == 'Album') {
-        document.getElementById('BrowseDatabaseAlbumCards').classList.remove('hide');
+        document.getElementById('BrowseDatabaseAlbumList').classList.remove('hide');
         document.getElementById('BrowseDatabaseArtistList').classList.add('hide');
         document.getElementById('btnBrowseDatabaseArtist').parentNode.classList.remove('hide');    
         var nrItems = obj.data.length;
-        var cardContainer = document.getElementById('BrowseDatabaseAlbumCards');
+        var cardContainer = document.getElementById('BrowseDatabaseAlbumList');
         var cards = cardContainer.querySelectorAll('.col-md');
         for (var i = 0; i < nrItems; i++) {
             var id=genId(obj.data[i].value);
@@ -1212,7 +1214,7 @@ function parseListDBtags(obj) {
             cards[i].remove();
         }
         setPagination(obj.totalEntities);
-        document.getElementById('BrowseDatabaseAlbumCards').classList.remove('opacity05');        
+        document.getElementById('BrowseDatabaseAlbumList').classList.remove('opacity05');        
     }
 }
 
@@ -1339,6 +1341,14 @@ function replaceQueue(type, uri, name) {
     }
 }
 
+function songClick() {
+    songDetails(domCache.currentTrack.getAttribute('data-uri'));
+}
+
+function artistClick() {
+    appGoto('Browse', 'Database', 'Album', '0/-/' + document.getElementById('currentArtist').innerText);
+}
+
 function songDetails(uri) {
     sendAPI({"cmd": "MPD_API_GET_SONGDETAILS", "data": {"uri": uri}}, parseSongDetails);
     modalSongDetails.show();
@@ -1837,23 +1847,25 @@ function songChange(obj) {
         textNotification += obj.data.artist;
         htmlNotification += obj.data.artist;
         pageTitle += obj.data.artist + ' - ';
-        document.getElementById('artist').innerText = obj.data.artist;
+        document.getElementById('currentArtist').innerText = obj.data.artist;
     } else {
-        document.getElementById('artist').innerText = '';
+        document.getElementById('currentArtist').innerText = '';
     }
     if (typeof obj.data.album != 'undefined' && obj.data.album.length > 0 && obj.data.album != '-') {
         textNotification += ' - ' + obj.data.album;
         htmlNotification += '<br/>' + obj.data.album;
-        document.getElementById('album').innerText = obj.data.album;
+        document.getElementById('currentAlbum').innerText = obj.data.album;
     }
     else {
-        document.getElementById('album').innerText = '';
+        document.getElementById('currentAlbum').innerText = '';
     }
     if (typeof obj.data.title != 'undefined' && obj.data.title.length > 0) {
         pageTitle += obj.data.title;
-        document.getElementById('currenttrack').innerText = obj.data.title;
+        domCache.currentTrack.innerText = obj.data.title;
+        domCache.currentTrack.setAttribute('data-uri', obj.data.uri);
     } else {
-        document.getElementById('currenttrack').innerText = '';
+        domCache.currentTrack.innerText = '';
+        domCache.currentTrack.setAttribute('data-uri', '');
     }
     document.title = pageTitle;
     //Update Artist in queue view for http streams