From ad63ff53c764a5b0633375dcbc1adcccccb1893e Mon Sep 17 00:00:00 2001
From: novatorem <anovaec@gmail.com>
Date: Sun, 23 Aug 2020 10:34:18 -0400
Subject: [PATCH] Song name limit

---
 SetUp.md                      |  6 ++++
 api/spotify-playing.py        |  2 +-
 api/templates/preview.html    | 61 ++++++++++++++++++++---------------
 api/templates/spotify.html.j2 | 11 +++----
 4 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/SetUp.md b/SetUp.md
index 182a394..5903717 100644
--- a/SetUp.md
+++ b/SetUp.md
@@ -42,3 +42,9 @@ curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorizat
         * `SPOTIFY_SECRET_ID`
 
 * Deploy!
+
+## ReadMe
+
+You can now use the following in your readme:
+
+```[![Spotify](https://novatorem.vercel.app/api/spotify-playing)](https://open.spotify.com/user/USER_NAME)```
\ No newline at end of file
diff --git a/api/spotify-playing.py b/api/spotify-playing.py
index fd98229..e34e153 100644
--- a/api/spotify-playing.py
+++ b/api/spotify-playing.py
@@ -77,7 +77,7 @@ def loadImageB64(url):
     return b64encode(resposne.content).decode("ascii")
 
 def makeSVG(data):
-    barCount = 85
+    barCount = 83
     contentBar = "".join(["<div class='bar'></div>" for i in range(barCount)])
     barCSS = barGen(barCount)
 
diff --git a/api/templates/preview.html b/api/templates/preview.html
index fdb35fc..a6c12e0 100644
--- a/api/templates/preview.html
+++ b/api/templates/preview.html
@@ -6,17 +6,13 @@
 
         .main {
             display: flex;
-        }
-
-        .art {
-            float: left;
-            width: 33.33%;
+            width: "480px";
+            height: "133px";
         }
 
         .container {
-            background-color: #121212;
-            border-radius: 10px;
-            padding: 10px 10px
+            border-radius: 5px;
+            padding: 10px 10px 10px 0px;
         }
 
         .playing {
@@ -32,20 +28,31 @@
             color: #ff1616;
         }
 
-        .artist {
-            font-weight: bold;
-            font-size: 24px;
-            color: #fff;
-            text-align: left;
-            margin-top: 5px;
+        .art {
+            float: left;
+            width: 27%;
+            margin-left: -5px;
+        }
+
+        .text {
+            width: 71%;
         }
 
         .song {
+            font-size: 24px;
+            color: #666;
+            text-align: center;
+            margin-top: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .artist {
             font-size: 20px;
             color: #b3b3b3;
-            text-align: left;
-            margin-top: 15px;
-            margin-bottom: 15px;
+            text-align: center;
+            margin-bottom: 5px;
         }
 
         .logo {
@@ -55,18 +62,20 @@
 
         .cover {
             border-radius: 5px;
-            margin-top: 9px;
+            height: 100px;
+            width: 100px;
         }
 
         #bars {
             height: 30px;
+            bottom: 23px;
             margin: -20px 0 0 0px;
             position: absolute;
             width: 40px;
         }
 
         .bar {
-            background: #53b14f;
+            background: #1DB954cc;
             bottom: 1px;
             height: 3px;
             position: absolute;
@@ -82,25 +91,25 @@
 
             100% {
                 opacity: 1;
-                height: 28px;
+                height: 15px;
             }
         }
-
-        
     </style>
+
     <div class="main">
         <a class="art" href="{}" target="_BLANK">
             <center>
-                    <img src="data:image/png;base64, {{img}}" width="200" height="200" class="cover" />
+                <img src="https://source.unsplash.com/random/500x500" class="cover" />
             </center>
         </a>
 
         <div class="text">
-            <div class="artist">Artist</div>
             <div class="song">Song</div>
-            <div id="bars"></div>
+            <div class="artist">Arist</div>
+            <div id="bars">
+                {{content_bar|safe}}
+            </div>
         </div>
     </div>
-    
 
 </div>
\ No newline at end of file
diff --git a/api/templates/spotify.html.j2 b/api/templates/spotify.html.j2
index c96c466..d9d9a5d 100644
--- a/api/templates/spotify.html.j2
+++ b/api/templates/spotify.html.j2
@@ -43,6 +43,9 @@
                     color: #666;
                     text-align: center;
                     margin-top: 3px;
+                    white-space:nowrap;
+                    overflow:hidden;
+                    text-overflow:ellipsis;
                 }
 
                 .artist {
@@ -94,9 +97,7 @@
 
                 {{css_bar|safe}}
             </style>
-
-            {% if song_name %}
-
+            
             <div class="main">
                 <a class="art" href="{}" target="_BLANK">
                     <center>
@@ -111,10 +112,6 @@
                         {{content_bar|safe}}
                     </div>
                 </div>
-
-                {% else %}
-                    <div class="playing not-play">Nothing playing on Spotify</div>
-                {% endif %}
             </div>
 
         </div>