From 1c4c1b7a45a7a1f10e1deafb28f82327d09a5e5c Mon Sep 17 00:00:00 2001
From: santic-zombie <santicmail@rambler.ru>
Date: Sat, 25 Apr 2020 23:13:24 +0300
Subject: [PATCH] CSS change, List of last played tracks

---
 css/msgbox.css |  2 +-
 css/style.css  | 54 +++++++++++++++++++++++++++++++++++++++++++++-----
 index.html     |  8 ++++++++
 js/audio.js    |  6 +++---
 js/radio.js    |  9 +++++++++
 5 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/css/msgbox.css b/css/msgbox.css
index 96ed1b7..be922f6 100644
--- a/css/msgbox.css
+++ b/css/msgbox.css
@@ -8,7 +8,7 @@
     right: 20px;
     text-align: center;
     border-radius: 10px;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(60, 60, 60, 0.9);
 }
 #jGrowl{
     margin: 0 12px 0 12px;
diff --git a/css/style.css b/css/style.css
index cea358b..a3ed0d5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -12,15 +12,15 @@ body {
   display: flex;
   align-items: center;
   align-content: center;
-  justify-content: center;
+  justify-content: left;
   overflow: auto;
 }
 
 #RadioBox{
   width: 450px;
-  height: 490px;
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 10px;
+  height: 100%;
+  background-color: rgba(60, 60, 60, 0.9);
+  /* border-radius: 10px; */
   padding: 0 5px;
   color: #fff;
 }
@@ -52,7 +52,7 @@ body {
 
 .tagB {
   width: 100%;
-	//height: 20px;
+	/* height: 20px; */
 	border-radius: 0 0 5px 5px;
 	border: #f54e4e;
 	background-color: #fff;
@@ -136,12 +136,56 @@ h1 {
 	//margin: auto;
 }
 
+.mute_btn:hover {
+  color: #000;
+	background-color: #fff;
+}
+
 .volume-wrap {
   align-items: center;
   justify-content: center;
 	display: flex;
 }
 
+.tcon {
+  width: 100%;
+  border-radius: 5px 5px 0 0;
+  border: #f54e4e;
+  background-color: #000;
+  color: #fff;
+  transition: 0.5s ease all;
+  outline: none;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.tlist {
+  width: 100%;
+  height: 35%;
+  border-radius: 0 0 5px 5px;
+  border: #f54e4e;
+  background-color: #fff;
+  color: #000;
+  transition: 0.5s ease all;
+  outline: none;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: auto;
+}
+
+.list_el {
+  border-bottom: 2px double #000;
+  background-color: #d3d3d3;
+  color: #000;
+}
+
+.list_el:nth-child(odd) {
+  border-bottom: 2px double #000;
+  background-color: #fff;
+  color: #000;
+}
 
 DIV {
   text-align: center
diff --git a/index.html b/index.html
index 77ba26b..c4dd93b 100755
--- a/index.html
+++ b/index.html
@@ -74,6 +74,14 @@
 			<input id="volume" type="range" class="slider muteEl" min="0" max="10" value="1" step="0.1" />
 		</div>
 
+		<br>
+
+		<div class=tcon>
+			Last played tracks
+		</div>
+		<div id="track_list" class=tlist>
+		</div>
+
 		<div id="jGrowl"></div>
 
 	</div>
diff --git a/js/audio.js b/js/audio.js
index 64b40cc..e007f60 100644
--- a/js/audio.js
+++ b/js/audio.js
@@ -24,7 +24,7 @@ $("#volume").mousemove(function(){
 
 var copyClipBoard = document.getElementById('buff');
 copyClipBoard.addEventListener('click', function () {
-  var   MsgText    = $('<div id="message-success"><p>Trackname copied to clipboard</p></div>');
+  var   MsgText    = $('<div id="message-success"><p>Track name copied to clipboard</p></div>');
   PopUpMsg(MsgText);
   //нашли наш контейнер
   var ta = document.getElementById('trackname');
@@ -49,11 +49,11 @@ copyClipBoard.addEventListener('click', function () {
       .toggleClass('fas fa-volume-up')
       .toggleClass('fas fa-volume-mute');
       if (audio.muted === false) {
-        var   MsgText    = $('<div id="message-success"><p>Mute Sound</p></div>');
+        var   MsgText    = $('<div id="message-success"><p>Mute sound</p></div>');
         PopUpMsg(MsgText);
         audio.muted = true;
       } else {
-        var   MsgText    = $('<div id="message-success"><p>unmute Sound</p></div>');
+        var   MsgText    = $('<div id="message-success"><p>Unmute sound</p></div>');
         PopUpMsg(MsgText);
         audio.muted = false;
       }
diff --git a/js/radio.js b/js/radio.js
index d2b2255..ea2b31a 100644
--- a/js/radio.js
+++ b/js/radio.js
@@ -33,10 +33,12 @@ function show()
         getArtistURL(MPDartist);
         $("#trackname span").text(MPDartist+" - "+MPDsong);
         getYouTubeRequest(MPDfile);
+        addText(MPDfile);
       } else if (MPDCurr != MPDfile) {
           getArtistURL(MPDartist);
           $("#trackname span").text(MPDartist+" - "+MPDsong);
           getYouTubeRequest(MPDfile);
+          addText(MPDfile);
         }
       MPDCurr = MPDfile;
     });
@@ -88,3 +90,10 @@ function showResults(results) {
   document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL);
   console.log("https://www.youtube.com/watch?v="+YouURL);
 }
+
+function addText(MPDfile) {
+  let last_track = document.createElement('div');
+  last_track.className = "list_el";
+  last_track.innerHTML = MPDfile;
+  track_list.prepend(last_track);
+}