Legibility improvements

api/spotify.py

@@ -9,21 +9,27 @@ from flask import Flask, Response, jsonify, render_template
 
 load_dotenv(find_dotenv())
 
-# Spotify:
+# Spotify scopes:
 #   user-read-currently-playing
 #   user-read-recently-played
 SPOTIFY_CLIENT_ID = os.getenv("SPOTIFY_CLIENT_ID")
 SPOTIFY_SECRET_ID = os.getenv("SPOTIFY_SECRET_ID")
 SPOTIFY_REFRESH_TOKEN = os.getenv("SPOTIFY_REFRESH_TOKEN")
 
-SPOTIFY_URL_REFRESH_TOKEN = "https://accounts.spotify.com/api/token"
+REFRESH_TOKEN_URL = "https://accounts.spotify.com/api/token"
-SPOTIFY_URL_NOW_PLAYING = "https://api.spotify.com/v1/me/player/currently-playing"
+NOW_PLAYING_URL = "https://api.spotify.com/v1/me/player/currently-playing"
-SPOTIFY_URL_RECENTLY_PLAY = "https://api.spotify.com/v1/me/player/recently-played?limit=10"
+RECENTLY_PLAYING_URL = (
+    "https://api.spotify.com/v1/me/player/recently-played?limit=10"
+)
 
 app = Flask(__name__)
 
+
 def getAuth():
-    return b64encode(f"{SPOTIFY_CLIENT_ID}:{SPOTIFY_SECRET_ID}".encode()).decode("ascii")
+    return b64encode(f"{SPOTIFY_CLIENT_ID}:{SPOTIFY_SECRET_ID}".encode()).decode(
+        "ascii"
+    )
+
 
 def refreshToken():
     data = {
@@ -33,53 +39,57 @@ def refreshToken():
 
     headers = {"Authorization": "Basic {}".format(getAuth())}
 
-    response = requests.post(SPOTIFY_URL_REFRESH_TOKEN, data=data, headers=headers)
+    response = requests.post(REFRESH_TOKEN_URL, data=data, headers=headers)
     return response.json()["access_token"]
 
+
 def recentlyPlayed():
     token = refreshToken()
     headers = {"Authorization": f"Bearer {token}"}
-    response = requests.get(SPOTIFY_URL_RECENTLY_PLAY, headers=headers)
+    response = requests.get(RECENTLY_PLAYING_URL, headers=headers)
 
     if response.status_code == 204:
         return {}
-
     return response.json()
 
+
 def nowPlaying():
     token = refreshToken()
     headers = {"Authorization": f"Bearer {token}"}
-    response = requests.get(SPOTIFY_URL_NOW_PLAYING, headers=headers)
+    response = requests.get(NOW_PLAYING_URL, headers=headers)
 
     if response.status_code == 204:
         return {}
-
     return response.json()
 
+
 def barGen(barCount):
     barCSS = ""
     left = 1
     for i in range(1, barCount + 1):
         anim = random.randint(1000, 1350)
-        barCSS += ".bar:nth-child({})  {{ left: {}px; animation-duration: {}ms; }}".format(
+        barCSS += (
-            i, left, anim
+            ".bar:nth-child({})  {{ left: {}px; animation-duration: {}ms; }}".format(
+                i, left, anim
+            )
         )
         left += 4
-
     return barCSS
 
+
 def loadImageB64(url):
     resposne = requests.get(url)
     return b64encode(resposne.content).decode("ascii")
 
+
 def makeSVG(data):
     barCount = 84
     contentBar = "".join(["<div class='bar'></div>" for i in range(barCount)])
     barCSS = barGen(barCount)
 
-    if data == {} or data["item"] == 'None':
+    if data == {} or data["item"] == "None":
-        #contentBar = "" #Shows/Hides the EQ bar if no song is currently playing
+        # contentBar = "" #Shows/Hides the EQ bar if no song is currently playing
-        currentStatus = "Last seen playing:"
+        currentStatus = "Was playing:"
         recentPlays = recentlyPlayed()
         recentPlaysLength = len(recentPlays["items"])
         itemIndex = random.randint(0, recentPlaysLength - 1)
@@ -87,7 +97,6 @@ def makeSVG(data):
     else:
         item = data["item"]
         currentStatus = "Vibing to:"
-
     image = loadImageB64(item["album"]["images"][1]["url"])
     artistName = item["artists"][0]["name"].replace("&", "&amp;")
     songName = item["name"].replace("&", "&amp;")
@@ -98,11 +107,12 @@ def makeSVG(data):
         "artistName": artistName,
         "songName": songName,
         "image": image,
-        "status": currentStatus
+        "status": currentStatus,
     }
 
     return render_template("spotify.html.j2", **dataDict)
 
+
 @app.route("/", defaults={"path": ""})
 @app.route("/<path:path>")
 def catch_all(path):
@@ -114,5 +124,6 @@ def catch_all(path):
 
     return resp
 
+
 if __name__ == "__main__":
     app.run(debug=True)

api/templates/spotify.html.j2

@@ -2,19 +2,15 @@
     <foreignObject width="480" height="133">
         <div xmlns="http://www.w3.org/1999/xhtml" class="container">
             <style>
-                div {
-                    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
-                }
-
                 .main {
                     /*margin-top: 40px;*/
                     display: flex;
                 }
 
                 .currentStatus {
-                    position: static;
                     float: left;
                     font-size: 24px;
+                    position: static;
                     margin-top: -5px;
                     margin-left: 10px;
                 }
@@ -25,8 +21,8 @@
                 }
 
                 .art {
-                    float: left;
                     width: 27%;
+                    float: left;
                     margin-left: -5px;
                 }
 
@@ -35,55 +31,55 @@
                 }
 
                 .song {
-                    font-size: 24px;
                     color: #666;
-                    text-align: center;
-                    margin-top: 3px;
-                    white-space:nowrap;
                     overflow:hidden;
+                    margin-top: 3px;
+                    font-size: 24px;
+                    text-align: center;
+                    white-space:nowrap;
                     text-overflow:ellipsis;
                 }
 
                 .artist {
-                    font-size: 20px;
                     color: #b3b3b3;
+                    font-size: 20px;
+                    margin-top: 4px;
                     text-align: center;
                     margin-bottom: 5px;
-                    margin-top: 4px;
                 }
 
                 .cover {
-                    border-radius: 5px;
-                    height: 100px;
                     width: 100px;
+                    height: 100px;
+                    border-radius: 5px;
                 }
 
                 #bars {
+                    width: 40px;
                     height: 30px;
                     bottom: 23px;
-                    margin: -20px 0 0 0px;
                     position: absolute;
-                    width: 40px;
+                    margin: -20px 0 0 0px;
                 }
 
                 .bar {
-                    background: #1DB954cc;
+                    width: 3px;
                     bottom: 1px;
                     height: 3px;
                     position: absolute;
-                    width: 3px;
+                    background: #1DB954cc;
                     animation: sound 0ms -800ms linear infinite alternate;
                 }
                 
                 @keyframes sound {
                     0% {
-                        opacity: .35;
                         height: 3px;
+                        opacity: .35;
                     }
 
                     100% {
-                        opacity: 1;
                         height: 15px;
+                        opacity: 0.95;
                     }
                 }
 
@@ -93,7 +89,7 @@
             <!-- <div class="currentStatus">{{status}}</div> -->
 
             <div class="main">
-                <a class="art" href="{}" target="_BLANK">
+                <a class="art" href="{}" target="_blank">
                     <center>
                         <img src="data:image/png;base64, {{image}}" class="cover" />
                     </center>