flash/now.flash.moe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fixed interval, remove exo 2 and added loading screen.

Browse source
This commit is contained in:
flash 2021-05-20 21:32:11 +02:00
parent 8f503a6b10
commit 57afd09ad4
3 changed files with 72 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
public/index.html
View file

@ -5,13 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Now Listening</title> <title>Now Listening</title>
<meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="telephone=no" />
<link href="https://fonts.googleapis.com/css?family=Exo+2:400,400italic,200,200italic" rel="stylesheet" type="text/css" /> <link href="//flash.moe/css/electrolize/style.css" type="text/css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="/now.css" type="text/css" rel="stylesheet" /> <link href="/now.css" type="text/css" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="background" id="background"></div> <div class="background" id="background"></div>
<div class="container"> <div class="container">
<div class="container__loading hidden" id="loading">
<div class="loading">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
</div>
<div class="container__index hidden" id="index"> <div class="container__index hidden" id="index">
<div class="index__title">Now Listening</div> <div class="index__title">Now Listening</div>
<div class="index__description"> <div class="index__description">
@ -22,7 +27,7 @@
<button class="index__submit fa fa-forward" id="submit"></button> <button class="index__submit fa fa-forward" id="submit"></button>
</div> </div>
<div class="index__dev"> <div class="index__dev">
<a class="fa fa-code" href="https://github.com/flashwave/now-listening" title="Written"></a> by <a class="fa fa-flash" href="https://flash.moe" title="flash"></a> <a href="//flash.moe">flashwave</a> 2016-2021 | <a href="//github.com/flashwave/now-listening">Source</a>
</div> </div>
</div> </div>
<div class="container__user hidden" id="user"> <div class="container__user hidden" id="user">

25
public/now.css
View file

@ -10,10 +10,18 @@ body {
width: 100%; width: 100%;
} }
body {
overflow: hidden;
}
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
a:hover,
a:focus {
text-decoration: underline;
}
.hidden { .hidden {
display: none !important; display: none !important;
@ -24,7 +32,7 @@ a {
height: 100%; height: 100%;
width: 100%; width: 100%;
color: #fff; color: #fff;
font: 12px/20px 'Exo 2', sans-serif; font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
display: flex; display: flex;
align-items: center; align-items: center;
@ -39,6 +47,13 @@ a {
} }
} }
.container__loading {
text-align: center;
background: rgba(17, 17, 17, 0.8);
box-shadow: 0 1px 4px #111;
padding: 10px;
}
.container__index { .container__index {
text-align: center; text-align: center;
background: rgba(17, 17, 17, 0.8); background: rgba(17, 17, 17, 0.8);
@ -62,13 +77,15 @@ a {
height: 100%; height: 100%;
width: 100%; width: 100%;
transition: background-color 2.1s; transition: background-color 2.1s;
filter: blur(10px);
transform: scale(1.2);
} }
.index__title { .index__title {
font-weight: 200; font-weight: 200;
font-style: italic;
font-size: 3em; font-size: 3em;
line-height: 1.5em; line-height: 1.5em;
font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
} }
.index__form { .index__form {
@ -90,7 +107,7 @@ a {
.index__username { .index__username {
background: rgba(17, 17, 17, 0.5); background: rgba(17, 17, 17, 0.5);
border-right: 0; border-right: 0;
font-family: 'Exo 2', sans-serif; font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
width: 100%; width: 100%;
} }
@ -143,7 +160,7 @@ a {
.info__title { .info__title {
font-size: 3em; font-size: 3em;
line-height: 1.2em; line-height: 1.2em;
font-style: italic; font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
font-weight: 200; font-weight: 200;
} }

59
public/now.js
View file

@ -2,8 +2,10 @@ var fnp = {
defaultCoverFnp: '/resources/no-cover.png', defaultCoverFnp: '/resources/no-cover.png',
defaultCoverLfm: 'https://lastfm.freetls.fastly.net/i/u/300x300/2a96cbd8b46e442fc41c2b86b821562f.png', defaultCoverLfm: 'https://lastfm.freetls.fastly.net/i/u/300x300/2a96cbd8b46e442fc41c2b86b821562f.png',
watch: { watch: {
userName: null, interval: 15 * 1000,
interval: 0, userName: '',
timeOut: 0,
stopping: false,
}, },
ui: { ui: {
mode: '', mode: '',
@ -20,6 +22,9 @@ fnp.switchUser = function(userName) {
fnp.updateHash = function() { fnp.updateHash = function() {
var userName = decodeURIComponent(location.hash.substring(2)); var userName = decodeURIComponent(location.hash.substring(2));
this.ui.setBackgroundFade();
this.ui.goLoading();
if(userName.length > 0) { if(userName.length > 0) {
this.watch.start(userName, function(response) { this.watch.start(userName, function(response) {
if(response.error) { if(response.error) {
@ -29,48 +34,63 @@ fnp.updateHash = function() {
} }
var cover = response[0].images.extralarge; var cover = response[0].images.extralarge;
console.log(cover);
if(cover.length < 1 || cover === this.defaultCoverLfm) if(cover.length < 1 || cover === this.defaultCoverLfm)
cover = this.defaultCoverFnp; cover = this.defaultCoverFnp;
console.log(cover);
this.ui.setInfo(cover, response[0].name, response[0].artist.name, userName, response[0].nowplaying || false); this.ui.setInfo(cover, response[0].name, response[0].artist.name, userName, response[0].nowplaying || false);
this.ui.goUser(); this.ui.goUser();
}.bind(this)); }.bind(this));
} else { } else {
this.watch.stop(); this.watch.stop(function() {
this.ui.goIndex(); this.ui.goIndex();
this.ui.setBackgroundFade(); }.bind(this));
} }
}; };
fnp.watch.start = function(userName, callback) { fnp.watch.start = function(userName, callback) {
this.stop(); this.stop();
this.userName = userName = (userName || '').toString(); this.userName = userName = (userName || '').toString();
this.fetch(function(response) {
this.callback = function(response) {
if(this.stopping)
return;
if(response.error) if(response.error)
this.stop(); this.stop();
else
this.timeOut = setTimeout(this.fetch.bind(this), this.interval);
callback(response); callback(response);
}.bind(this));
}; };
fnp.watch.stop = function() { this.callback.bind(this);
if(this.interval !== 0) {
clearInterval(this.interval); this.fetch();
this.interval = 0; };
fnp.watch.stop = function(callback) {
if(this.stopping)
return;
this.stopping = true;
if(this.timeOut !== 0) {
clearTimeout(this.timeOut);
this.timeOut = 0;
} }
this.userName = null; this.userName = '';
if(callback)
callback();
this.stopping = false;
}; };
fnp.watch.fetch = function(callback) { fnp.watch.fetch = function() {
if(typeof callback !== 'function') if(typeof this.callback !== 'function')
return; return;
var xhr = new XMLHttpRequest; var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if(xhr.readyState !== 4) if(xhr.readyState !== 4)
return; return;
callback(JSON.parse(xhr.responseText)); this.callback(JSON.parse(xhr.responseText));
}; }.bind(this);
xhr.open('GET', '/get.php?u=' + encodeURIComponent(this.userName)); xhr.open('GET', '/get.php?u=' + encodeURIComponent(this.userName));
xhr.send(); xhr.send();
}; };
@ -92,6 +112,9 @@ fnp.ui.goIndex = function() {
fnp.ui.goUser = function() { fnp.ui.goUser = function() {
this.setMode('user'); this.setMode('user');
}; };
fnp.ui.goLoading = function() {
this.setMode('loading');
};
fnp.ui.setBackground = function(bgPath) { fnp.ui.setBackground = function(bgPath) {
if(bgPath === '::fade') { if(bgPath === '::fade') {
@ -145,6 +168,7 @@ fnp.ui.setInfo = function(cover, title, artist, user, now) {
window.onload = function() { window.onload = function() {
fnp.ui.eIndex = document.getElementById('index'); fnp.ui.eIndex = document.getElementById('index');
fnp.ui.eUser = document.getElementById('user'); fnp.ui.eUser = document.getElementById('user');
fnp.ui.eLoading = document.getElementById('loading');
fnp.ui.eBg = document.getElementById('background'); fnp.ui.eBg = document.getElementById('background');
fnp.ui.eFormUser = document.getElementById('username'); fnp.ui.eFormUser = document.getElementById('username');
fnp.ui.eFormSend = document.getElementById('submit'); fnp.ui.eFormSend = document.getElementById('submit');
@ -158,6 +182,7 @@ window.onload = function() {
fnp.ui.modes = [ fnp.ui.modes = [
{ name: 'index', elem: fnp.ui.eIndex }, { name: 'index', elem: fnp.ui.eIndex },
{ name: 'user', elem: fnp.ui.eUser }, { name: 'user', elem: fnp.ui.eUser },
{ name: 'loading', elem: fnp.ui.eLoading },
]; ];
fnp.ui.eInfoBack.onclick = function() { fnp.ui.eInfoBack.onclick = function() {