santic/radio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS change, List of last played tracks

Browse Source
This commit is contained in:
santic-zombie
2020-04-25 23:13:24 +03:00
parent 25fc853d2a
commit 1c4c1b7a45
5 changed files with 70 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/msgbox.css
View File

@@ -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;

54
css/style.css
View File

@@ -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

8
index.html
View File

@@ -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>

6
js/audio.js
View File

@@ -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;
}

9
js/radio.js
View File

@@ -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);
}