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

new UI

Browse Source
This commit is contained in:
santic-zombie
2020-04-02 10:19:10 +03:00
parent 485716e10a
commit 71e751e48c
4 changed files with 131 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
css/style.css
View File

@@ -16,43 +16,85 @@ body {
overflow: auto; overflow: auto;
} }
#song{ #RadioBox{
width: 400px; width: 410px;
height: 340px; height: 350px;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px; border-radius: 10px;
color: #fff; color: #fff;
} }
.btn { .tagBOX{
width: 100px; width: 410px;
height: 60px; height: 150px;
border-radius: 5px; }
.tagA {
width: 400px;
height: 20px;
border-radius: 5px 5px 0 0;
border: #f54e4e; border: #f54e4e;
background-color: #f54e4e; background-color: #000;
color: #fff; color: #fff;
transition: 0.5s ease all; transition: 0.5s ease all;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin: auto; margin-left: auto;
justify-content : center; margin-right: auto
} }
.btn:hover { .tagA:hover {
color: #f54e4e; color: #000;
background-color: #fff; background-color: #fff;
} }
.btn-wrap { .tagB {
max-width: 250px; width: 400px;
margin: auto; height: 20px;
display: -webkit-flex; border-radius: 0;
display: -moz-flex; border: #f54e4e;
display: -ms-flex; background-color: #fff;
display: -o-flex; color: #000;
display: flex; transition: 0.5s ease all;
outline: none;
text-align: center;
margin-left: auto;
margin-right: auto
}
.tagC {
width: 400px;
height: 20px;
border-radius: 0;
border: #f54e4e;
background-color: #000;
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
margin-left: auto;
margin-right: auto
}
.tagC:hover {
color: #000;
background-color: #fff;
}
.tagD {
width: 400px;
height: 20px;
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
} }
h1::before { h1::before {
@@ -82,6 +124,37 @@ h1 {
margin:10px 50px; margin:10px 50px;
} }
.btn {
width: 100px;
height: 60px;
border-radius: 5px;
border: #f54e4e;
background-color: #000;
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
margin: auto;
justify-content : center;
}
.btn:hover {
color: #000;
background-color: #fff;
}
.btn-wrap {
max-width: 250px;
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
DIV { DIV {
text-align: center text-align: center
} }

23
index.html
View File

@@ -18,13 +18,26 @@
<body> <body>
<div class="parent"> <div class="parent">
<div id="song"> <div id="RadioBox">
<h1>Just Radio</h1> <h1>Just Radio</h1>
<div id="myPlay">-</div> <div id="PlayStat">Stopped</div>
<br>
<a name="lastFMlink" href="" target="_blank"><div id="title">title</div></a> <div class="tagWindow">
<form name="artistURL" action="" target="_blank">
<button class="tagA">
Artist
</button>
</form>
<div id="artistName" class="tagB">ArtistName</div>
<form name="songURL" action="" target="_blank">
<button class="tagC">
Song
</button>
</form>
<div id="songName" class="tagD">SongName</div>
</div>
<br> <br>
@@ -46,7 +59,7 @@
<br> <br>
<input id="volume" type="range" min="0" max="10" value="2" step="0.1" /> <input id="volume" type="range" min="0" max="10" value="2" step="0.1" />
</div> </div>
</div> </div>
</div> </div>

4
js/audio.js
View File

@@ -6,13 +6,13 @@ audio.volume = 0.01;
var play = document.getElementById('play'); var play = document.getElementById('play');
play.addEventListener('click', function() { play.addEventListener('click', function() {
$("#myPlay").text("Now playing:"); $("#PlayStat").text("Now playing");
audio.play(); audio.play();
}, false); }, false);
var pause = document.getElementById('pause'); var pause = document.getElementById('pause');
pause.addEventListener('click', function() { pause.addEventListener('click', function() {
$("#myPlay").text("Paused"); $("#PlayStat").text("Paused");
audio.pause(); audio.pause();
}, false); }, false);

23
js/radio.js
View File

@@ -40,9 +40,9 @@ function show()
if (MPDartist == '' && MPDCurr != MPDfile) { if (MPDartist == '' && MPDCurr != MPDfile) {
MPDartist = MPDfile.replace(/\s-.*/,'').replace(/^\s*/,'').replace(/\s*$/,''); MPDartist = MPDfile.replace(/\s-.*/,'').replace(/^\s*/,'').replace(/\s*$/,'');
MPDsong = MPDfile.replace(/^.*\s-/,'').replace(/^\s*/,'').replace(/\s*$/,''); MPDsong = MPDfile.replace(/^.*\s-/,'').replace(/^\s*/,'').replace(/\s*$/,'');
getLastFM_url(MPDartist, MPDsong); getLastFM_info(MPDartist, MPDsong);
} else if (MPDCurr != MPDfile) { } else if (MPDCurr != MPDfile) {
getLastFM_url(MPDartist, MPDsong); getLastFM_info(MPDartist, MPDsong);
} }
MPDCurr = MPDfile; MPDCurr = MPDfile;
}); });
@@ -55,15 +55,26 @@ $(document).ready(
} }
); );
function getLastFM_url(FMartist, FMsong) function getLastFM_info(FMartist, FMsong)
{ {
lastfm.artist.getInfo({artist: FMartist}, {success: function(data){ lastfm.artist.getInfo({artist: FMartist}, {success: function(data){
console.log(data.artist.url); console.log(data.artist.url);
// формируем ссылку на артиста в LastFM // формируем ссылку на артиста в LastFM
document.querySelector('a[name="lastFMlink"]').setAttribute('href', data.artist.url); document.querySelector('form[name="artistURL"]').setAttribute('action', data.artist.url);
// выводим название артиста и трека ссылкой // выводим название артиста
$('#title').html(FMartist+' - '+FMsong); $("#artistName").text(FMartist);
}, error: function(code, message){ }, error: function(code, message){
console.log('Error #'+code+': '+message);} console.log('Error #'+code+': '+message);}
}); });
lastfm.track.getInfo({track: FMsong, artist: FMartist}, {success: function(data){
console.log(data.track.url);
// формируем ссылку на артиста в LastFM
document.querySelector('form[name="songURL"]').setAttribute('action', data.track.url);
// выводим название трека
$("#songName").text(FMsong);
}, error: function(code, message){
console.log('Error #'+code+': '+message);}
});
} }