From 57afd09ad45e46cf7ac105bc86e76dfcf06cbb02 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Thu, 20 May 2021 21:32:11 +0200
Subject: [PATCH] Fixed interval, remove exo 2 and added loading screen.

---
 public/index.html | 11 ++++++---
 public/now.css    | 25 +++++++++++++++----
 public/now.js     | 61 +++++++++++++++++++++++++++++++++--------------
 3 files changed, 72 insertions(+), 25 deletions(-)
diff --git a/public/index.html b/public/index.html
index 7b36386..44bbbac 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,13 +5,18 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
         <title>Now Listening</title>
         <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="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+        <link href="//flash.moe/css/electrolize/style.css" type="text/css" rel="stylesheet"/>
+        <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" />
     </head>
     <body>
         <div class="background" id="background"></div>
         <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="index__title">Now Listening</div>
                 <div class="index__description">
@@ -22,7 +27,7 @@
                     <button class="index__submit fa fa-forward" id="submit"></button>
                 </div>
                 <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 class="container__user hidden" id="user">
diff --git a/public/now.css b/public/now.css
index e341e8b..b2d9bc4 100644
--- a/public/now.css
+++ b/public/now.css
@@ -10,10 +10,18 @@ body {
     width: 100%;
 }
 
+body {
+    overflow: hidden;
+}
+
 a {
     color: inherit;
     text-decoration: none;
 }
+a:hover,
+a:focus {
+    text-decoration: underline;
+}
 
 .hidden {
     display: none !important;
@@ -24,7 +32,7 @@ a {
     height: 100%;
     width: 100%;
     color: #fff;
-    font: 12px/20px 'Exo 2', sans-serif;
+    font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
 
     display: flex;
     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 {
     text-align: center;
     background: rgba(17, 17, 17, 0.8);
@@ -62,13 +77,15 @@ a {
     height: 100%;
     width: 100%;
     transition: background-color 2.1s;
+    filter: blur(10px);
+    transform: scale(1.2);
 }
 
 .index__title {
     font-weight: 200;
-    font-style: italic;
     font-size: 3em;
     line-height: 1.5em;
+    font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
 }
 
 .index__form {
@@ -90,7 +107,7 @@ a {
 .index__username {
     background: rgba(17, 17, 17, 0.5);
     border-right: 0;
-    font-family: 'Exo 2', sans-serif;
+    font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
     width: 100%;
 }
 
@@ -143,7 +160,7 @@ a {
 .info__title {
     font-size: 3em;
     line-height: 1.2em;
-    font-style: italic;
+    font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
     font-weight: 200;
 }
 
diff --git a/public/now.js b/public/now.js
index e29c942..06c3b5b 100644
--- a/public/now.js
+++ b/public/now.js
@@ -2,8 +2,10 @@ var fnp = {
     defaultCoverFnp: '/resources/no-cover.png',
     defaultCoverLfm: 'https://lastfm.freetls.fastly.net/i/u/300x300/2a96cbd8b46e442fc41c2b86b821562f.png',
     watch: {
-        userName: null,
-        interval: 0,
+        interval: 15 * 1000,
+        userName: '',
+        timeOut: 0,
+        stopping: false,
     },
     ui: {
         mode: '',
@@ -20,6 +22,9 @@ fnp.switchUser = function(userName) {
 fnp.updateHash = function() {
     var userName = decodeURIComponent(location.hash.substring(2));
 
+    this.ui.setBackgroundFade();
+    this.ui.goLoading();
+
     if(userName.length > 0) {
         this.watch.start(userName, function(response) {
             if(response.error) {
@@ -29,48 +34,63 @@ fnp.updateHash = function() {
             }
 
             var cover = response[0].images.extralarge;
-            console.log(cover);
             if(cover.length < 1 || cover === this.defaultCoverLfm)
                 cover = this.defaultCoverFnp;
-            console.log(cover);
 
             this.ui.setInfo(cover, response[0].name, response[0].artist.name, userName, response[0].nowplaying || false);
             this.ui.goUser();
         }.bind(this));
     } else {
-        this.watch.stop();
-        this.ui.goIndex();
-        this.ui.setBackgroundFade();
+        this.watch.stop(function() {
+            this.ui.goIndex();
+        }.bind(this));
     }
 };
 
 fnp.watch.start = function(userName, callback) {
     this.stop();
     this.userName = userName = (userName || '').toString();
-    this.fetch(function(response) {
+
+    this.callback = function(response) {
+        if(this.stopping)
+            return;
+
         if(response.error)
             this.stop();
+        else
+            this.timeOut = setTimeout(this.fetch.bind(this), this.interval);
 
         callback(response);
-    }.bind(this));
+    };
+    this.callback.bind(this);
+
+    this.fetch();
 };
-fnp.watch.stop = function() {
-    if(this.interval !== 0) {
-        clearInterval(this.interval);
-        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) {
-    if(typeof callback !== 'function')
+fnp.watch.fetch = function() {
+    if(typeof this.callback !== 'function')
         return;
     var xhr = new XMLHttpRequest;
     xhr.onreadystatechange = function() {
         if(xhr.readyState !== 4)
             return;
-        callback(JSON.parse(xhr.responseText));
-    };
+        this.callback(JSON.parse(xhr.responseText));
+    }.bind(this);
     xhr.open('GET', '/get.php?u=' + encodeURIComponent(this.userName));
     xhr.send();
 };
@@ -92,6 +112,9 @@ fnp.ui.goIndex = function() {
 fnp.ui.goUser = function() {
     this.setMode('user');
 };
+fnp.ui.goLoading = function() {
+    this.setMode('loading');
+};
 
 fnp.ui.setBackground = function(bgPath) {
     if(bgPath === '::fade') {
@@ -145,6 +168,7 @@ fnp.ui.setInfo = function(cover, title, artist, user, now) {
 window.onload = function() {
     fnp.ui.eIndex = document.getElementById('index');
     fnp.ui.eUser = document.getElementById('user');
+    fnp.ui.eLoading = document.getElementById('loading');
     fnp.ui.eBg = document.getElementById('background');
     fnp.ui.eFormUser = document.getElementById('username');
     fnp.ui.eFormSend = document.getElementById('submit');
@@ -158,6 +182,7 @@ window.onload = function() {
     fnp.ui.modes = [
         { name: 'index', elem: fnp.ui.eIndex },
         { name: 'user',  elem: fnp.ui.eUser },
+        { name: 'loading',  elem: fnp.ui.eLoading },
     ];
 
     fnp.ui.eInfoBack.onclick = function() {
