Recently playing mod

api/spotify-playing.py

@@ -1,31 +1,30 @@
-from flask import Flask, Response, jsonify, render_template
-from base64 import b64encode
-
-from dotenv import load_dotenv, find_dotenv
-load_dotenv(find_dotenv())
-
-import requests
-import json
 import os
+import json
 import random
+import requests
+
+from base64 import b64encode
+from dotenv import load_dotenv, find_dotenv
+from flask import Flask, Response, jsonify, render_template
+
+load_dotenv(find_dotenv())
 
 SPOTIFY_CLIENT_ID = os.getenv("SPOTIFY_CLIENT_ID")
 SPOTIFY_SECRET_ID = os.getenv("SPOTIFY_SECRET_ID")
 SPOTIFY_REFRESH_TOKEN = os.getenv("SPOTIFY_REFRESH_TOKEN")
 
-# scope user-read-currently-playing/user-read-recently-played
+# Scopes:
+#   user-read-currently-playing
+#   user-read-recently-played
 SPOTIFY_URL_REFRESH_TOKEN = "https://accounts.spotify.com/api/token"
 SPOTIFY_URL_NOW_PLAYING = "https://api.spotify.com/v1/me/player/currently-playing"
 SPOTIFY_URL_RECENTLY_PLAY = "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")
 
-
 def refreshToken():
     data = {
         "grant_type": "refresh_token",
@@ -48,11 +47,8 @@ def recentlyPlayed():
     return response.json()
 
 def nowPlaying():
-
     token = refreshToken()
-
     headers = {"Authorization": f"Bearer {token}"}
-
     response = requests.get(SPOTIFY_URL_NOW_PLAYING, headers=headers)
 
     if response.status_code == 204:
@@ -82,24 +78,24 @@ def makeSVG(data):
     barCSS = barGen(barCount)
 
     if data == {}:
-        content_bar = ""
-        recent_plays = recentlyPlayed()
-        size_recent_play = len(recent_plays["items"])
-        idx = random.randint(0, size_recent_play - 1)
-        item = recent_plays["items"][idx]["track"]
+        #contentBar = ""
+        recentlyPlayed = recentlyPlayed()
+        recentLength = len(recentlyPlayed["items"])
+        itemIndex = random.randint(0, recentLength - 1)
+        item = recentlyPlayed["items"][itemIndex]["track"]
     else:
         item = data["item"]
 
-    img = loadImageB64(item["album"]["images"][1]["url"])
+    image = loadImageB64(item["album"]["images"][1]["url"])
     artistName = item["artists"][0]["name"].replace("&", "&")
     songName = item["name"].replace("&", "&")
 
     dataDict = {
-        "content_bar": contentBar,
-        "css_bar": barCSS,
-        "artist_name": artistName,
-        "song_name": songName,
-        "img": img,
+        "contentBar": contentBar,
+        "barCSS": barCSS,
+        "artistName": artistName,
+        "songName": songName,
+        "image": image
     }
 
     return render_template("spotify.html.j2", **dataDict)
@@ -107,7 +103,6 @@ def makeSVG(data):
 @app.route("/", defaults={"path": ""})
 @app.route("/<path:path>")
 def catch_all(path):
-
     data = nowPlaying()
     svg = makeSVG(data)
 

api/templates/preview.html

@@ -61,9 +61,11 @@
         }
 
         .cover {
+            position: absolute;
             border-radius: 5px;
             height: 100px;
             width: 100px;
+            z-index: -1;
         }
 
         #bars {
@@ -99,16 +101,14 @@
     <div class="main">
         <a class="art" href="{}" target="_BLANK">
             <center>
-                <img src="https://source.unsplash.com/random/500x500" class="cover" />
+                <img src="https://source.unsplash.com/random/500x500" class="cover"/>
             </center>
         </a>
 
         <div class="text">
             <div class="song">Song</div>
             <div class="artist">Arist</div>
-            <div id="bars">
-                {{content_bar|safe}}
-            </div>
+            <div id="bars">Bars</div>
         </div>
     </div>
 

api/templates/spotify.html.j2

@@ -43,9 +43,9 @@
                     color: #666;
                     text-align: center;
                     margin-top: 3px;
-                    white-space:nowrap;
-                    overflow:hidden;
-                    text-overflow:ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
 
                 .artist {
@@ -53,6 +53,7 @@
                     color: #b3b3b3;
                     text-align: center;
                     margin-bottom: 5px;
+                    margin-top: 5px;
                 }
 
                 .logo {
@@ -97,19 +98,19 @@
 
                 {{css_bar|safe}}
             </style>
-            
+
             <div class="main">
                 <a class="art" href="{}" target="_BLANK">
                     <center>
-                            <img src="data:image/png;base64, {{img}}" class="cover" />
+                            <img src="data:image/png;base64, {{image}}" class="cover" />
                     </center>
                 </a>
 
                 <div class="text">
-                    <div class="song">{{song_name}}</div>
-                    <div class="artist">{{artist_name}}</div>
+                    <div class="song">{{songName}}</div>
+                    <div class="artist">{{artistName}}</div>
                     <div id="bars">
-                        {{content_bar|safe}}
+                        {{contentBar|safe}}
                     </div>
                 </div>
             </div>