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;
}
#song{
width: 400px;
height: 340px;
#RadioBox{
width: 410px;
height: 350px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
color: #fff;
}
.btn {
width: 100px;
height: 60px;
border-radius: 5px;
.tagBOX{
width: 410px;
height: 150px;
}
.tagA {
width: 400px;
height: 20px;
border-radius: 5px 5px 0 0;
border: #f54e4e;
background-color: #f54e4e;
background-color: #000;
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
margin: auto;
justify-content : center;
margin-left: auto;
margin-right: auto
}
.btn:hover {
color: #f54e4e;
.tagA: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;
.tagB {
width: 400px;
height: 20px;
border-radius: 0;
border: #f54e4e;
background-color: #fff;
color: #000;
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 {
@@ -82,6 +124,37 @@ h1 {
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 {
text-align: center
}

23
index.html
View File

@@ -18,13 +18,26 @@
<body>
<div class="parent">
<div id="song">
<div id="RadioBox">
<h1>Just Radio</h1>
<div id="myPlay">-</div>
<a name="lastFMlink" href="" target="_blank"><div id="title">title</div></a>
<div id="PlayStat">Stopped</div>
<br>
<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>
@@ -46,7 +59,7 @@
<br>
<input id="volume" type="range" min="0" max="10" value="2" step="0.1" />
</div>
</div>
</div>

4
js/audio.js
View File

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

23
js/radio.js
View File

@@ -40,9 +40,9 @@ function show()
if (MPDartist == '' && MPDCurr != MPDfile) {
MPDartist = 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) {
getLastFM_url(MPDartist, MPDsong);
getLastFM_info(MPDartist, MPDsong);
}
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){
console.log(data.artist.url);
// формируем ссылку на артиста в LastFM
document.querySelector('a[name="lastFMlink"]').setAttribute('href', data.artist.url);
// выводим название артиста и трека ссылкой
$('#title').html(FMartist+' - '+FMsong);
document.querySelector('form[name="artistURL"]').setAttribute('action', data.artist.url);
// выводим название артиста
$("#artistName").text(FMartist);
}, error: function(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);}
});
}