Easy way to add more thems, added a dark theme

mcc-macca · Apr 19, 2023 · 5f2e500 · 5f2e500
1 parent 5f4d209
commit 5f2e500
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 5 deletions.
diff --git a/api/spotify.py b/api/spotify.py
@@ -5,7 +5,7 @@
 
 from base64 import b64encode
 from dotenv import load_dotenv, find_dotenv
-from flask import Flask, Response, jsonify, render_template
+from flask import Flask, Response, jsonify, render_template, templating
 
 load_dotenv(find_dotenv())
 
@@ -17,6 +17,8 @@
 SPOTIFY_SECRET_ID = os.getenv("SPOTIFY_SECRET_ID")
 SPOTIFY_REFRESH_TOKEN = os.getenv("SPOTIFY_REFRESH_TOKEN")
 
+TEMPLATE_THEME = "dark"
+
 REFRESH_TOKEN_URL = "https://accounts.spotify.com/api/token"
 NOW_PLAYING_URL = "https://api.spotify.com/v1/me/player/currently-playing"
 RECENTLY_PLAYING_URL = (
@@ -82,6 +84,12 @@ def barGen(barCount):
         left += 4
     return barCSS
 
+def template(theme):
+    return{
+        'dark':'spotify-dark.html.j2',
+        'light':'spotify.html.js'
+    }[theme.lower()]
+
 
 def loadImageB64(url):
     resposne = requests.get(url)
@@ -121,7 +129,7 @@ def makeSVG(data):
         "status": currentStatus,
     }
 
-    return render_template("spotify.html.j2", **dataDict)
+    return render_template(template(TEMPLATE_THEME), **dataDict)
 
 
 @app.route("/", defaults={"path": ""})

diff --git a/api/templates/spotify-dark.html.j2 b/api/templates/spotify-dark.html.j2
@@ -0,0 +1,112 @@
+<svg width="480" height="133" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <foreignObject width="480" height="133">
+        <div xmlns="http://www.w3.org/1999/xhtml" class="container">
+            <style>
+                .main {
+                    /*margin-top: 40px;*/
+                    display: flex;
+                }
+
+                .currentStatus {
+                    float: left;
+                    font-size: 24px;
+                    position: static;
+                    margin-top: -5px;
+                    margin-left: 10px;
+                }
+                
+                .container {
+                    border-radius: 5px;
+                    padding: 10px 10px 10px 0px;
+                    background-color:#181414;
+                }
+
+                .art {
+                    width: 27%;
+                    float: left;
+                    margin-left: -5px;
+                }
+
+                .content {
+                    width: 71%;
+                }
+
+                .song {
+                    color: #f7f7f7;
+                    overflow:hidden;
+                    margin-top: 3px;
+                    font-size: 24px;
+                    text-align: center;
+                    white-space:nowrap;
+                    text-overflow:ellipsis;
+                }
+
+                .artist {
+                    color: #9f9f9f;
+                    font-size: 20px;
+                    margin-top: 4px;
+                    text-align: center;
+                    margin-bottom: 5px;
+                }
+
+                .cover {
+                    width: 100px;
+                    height: 100px;
+                    border-radius: 5px;
+                }
+
+                #bars {
+                    width: 40px;
+                    height: 30px;
+                    bottom: 23px;
+                    position: absolute;
+                    margin: -20px 0 0 0px;
+                }
+
+                .bar {
+                    width: 3px;
+                    bottom: 1px;
+                    height: 3px;
+                    position: absolute;
+                    background: #1DB954cc;
+                    animation: sound 0ms -800ms linear infinite alternate;
+                }
+                
+                div {
+                    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+                }
+                
+                @keyframes sound {
+                    0% {
+                        height: 3px;
+                        opacity: .35;
+                    }
+
+                    100% {
+                        height: 15px;
+                        opacity: 0.95;
+                    }
+                }
+
+                {{barCSS|safe}}
+            </style>
+
+            <!-- <div class="currentStatus">{{status}}</div> -->
+
+            <div class="main">
+                <a class="art" href="{}" target="_blank">
+                    <center>
+                        <img src="data:image/png;base64, {{image}}" class="cover" />
+                    </center>
+                </a>
+
+                <div class="content">
+                    <div class="song">{{songName}}</div>
+                    <div class="artist">{{artistName}}</div>
+                    <div id="bars">{{contentBar|safe}}</div>
+                </div>
+            </div>
+
+        </div>
+    </foreignObject>
+</svg>
diff --git a/api/templates/spotify.html.j2 b/api/templates/spotify.html.j2
@@ -18,7 +18,6 @@
                 .container {
                     border-radius: 5px;
                     padding: 10px 10px 10px 0px;
-                    background-color:#181414;
                 }
 
                 .art {
@@ -32,7 +31,7 @@
                 }
 
                 .song {
-                    color: #f7f7f7;
+                    color: #666;
                     overflow:hidden;
                     margin-top: 3px;
                     font-size: 24px;
@@ -42,7 +41,7 @@
                 }
 
                 .artist {
-                    color: #9f9f9f;
+                    color: #b3b3b3;
                     font-size: 20px;
                     margin-top: 4px;
                     text-align: center;