Add hidden cover image option

.env.example

@@ -0,0 +1,4 @@
+SPOTIFY_CLIENT_ID='___'
+SPOTIFY_SECRET_ID='____'
+BASE_URL='http://localhost:3000/api'
+FIREBASE='__BASE64_FIREBASE_JSON_FILE__'

api/templates/callback.html.j2

@@ -41,11 +41,25 @@
     <div class="container">
       <br><br>
       <h2 class="header center orange-text">Markdown code</h2>
+
+      <div class="row center">
+        <div class="row">
+          <div class="col s6 m4">
+            <label>
+              <input type="checkbox" class="filled-in" checked="checked" id="cover-image-checkbox" />
+              <span>Cover Image</span>
+            </label>
+          </div>
+          <div class="col s6 m4"></div>
+          <div class="col s6 m4"></div>
+        </div>
+      </div>
+
       <div class="row center">
         <div class="col s0 m1"></div>
         <div class="col s12 m10">
           <textarea id="markdown-code"
-            style="width: 100%;height: 100px; padding: 10px;">[![spotify-github-profile]({{BASE_URL}}/view?uid={{uid}})](https://github.com/kittinan/spotify-github-profile)</textarea>
+            style="width: 100%;height: 100px; padding: 10px;"></textarea>
         </div>
         <div class="col s0 m1"></div>
       </div>
@@ -59,8 +73,7 @@
       </div>
 
       <div class="row center">
-        <img src="{{BASE_URL}}/view?uid={{uid}}" />
-
+        <img id="example-view" />
       </div>
       <br><br>
 
@@ -82,6 +95,35 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
 
+  <script>
+    var uid = "{{uid}}";
+    var viewUrl = "{{BASE_URL}}/view?";
+    var markdownCodeTextArea = $('#markdown-code');
+    var exampleView = $("#example-view");
+    var urlParams = {
+      uid: uid,
+      cover_image: true,
+    };
+
+    function updateUrl() {
+      var viewUrlWithParams = viewUrl + $.param(urlParams, true);
+      exampleView.attr('src', viewUrlWithParams);
+      markdownCodeTextArea.text(`[![spotify-github-profile](${viewUrlWithParams})](https://github.com/kittinan/spotify-github-profile)`);
+    }
+
+    updateUrl();
+
+    var coverImageCheckbox = $("#cover-image-checkbox");
+    coverImageCheckbox.change(function() {
+        if(this.checked) {
+          urlParams.cover_image = true;
+        } else {
+          urlParams.cover_image = false;
+        }
+        updateUrl();
+    });
+  </script>
+
   <script>
     var clipboard = new ClipboardJS('.btn');
     clipboard.on('success', function (e) {

api/templates/spotify.html.j2

@@ -95,11 +95,14 @@
             <div id='bars'>
                 {{content_bar|safe}}
             </div>
+
+            {% if cover_image %}
             <a href="{}" target="_BLANK">
                 <center>
                         <img src="data:image/png;base64, {{img}}" width="300" height="300" class="cover" />
                 </center>
             </a>
+            {% endif %}
 
             {% else %}
                 <div class="playing not-play">Nothing playing on Spotify</div>

api/view.py

@@ -55,11 +55,11 @@ def load_image_b64(url):
 
 
 @functools.lru_cache(maxsize=128)
-def make_svg(artist_name, song_name, img, is_now_playing):
+def make_svg(artist_name, song_name, img, is_now_playing, cover_image):
 
     print("make_svg")
 
-    height = 445
+    height = 445 if cover_image else 145
     num_bar = 75
 
     if is_now_playing:
@@ -79,8 +79,8 @@ def make_svg(artist_name, song_name, img, is_now_playing):
         "title_text": title_text,
         "artist_name": artist_name,
         "song_name": song_name,
-        "content_bar": content_bar,
         "img": img,
+        "cover_image": cover_image,
     }
 
     return render_template("spotify.html.j2", **rendered_data)
@@ -100,6 +100,7 @@ def catch_all(path):
     global CACHE_TOKEN_INFO
 
     uid = request.args.get("uid")
+    cover_image = request.args.get("cover_image", default='true') == 'true'
 
     # Load token from cache memory
     token_info = get_cache_token_info(uid)
@@ -165,7 +166,7 @@ def catch_all(path):
     artist_name = item["artists"][0]["name"]
     song_name = item["name"]
 
-    svg = make_svg(artist_name, song_name, img, is_now_playing)
+    svg = make_svg(artist_name, song_name, img, is_now_playing, cover_image)
 
     resp = Response(svg, mimetype="image/svg+xml")
     resp.headers["Cache-Control"] = "s-maxage=1"