From 3b6b71fd91a886fb9ba0618cd10dee61664d6ca1 Mon Sep 17 00:00:00 2001
From: ntsd <jo06942@gmail.com>
Date: Tue, 21 Jul 2020 15:40:10 +0700
Subject: [PATCH 1/4] Add .env.example

---
 .env.example | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..418d0fd
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+SPOTIFY_CLIENT_ID='___'
+SPOTIFY_SECRET_ID='____'
+BASE_URL='http://localhost:3000/api'
+FIREBASE='__BASE64_FIREBASE_JSON_FILE__'

From 2335b29588f2b46d8bda5c3a0a7d8a0729413fda Mon Sep 17 00:00:00 2001
From: ntsd <jo06942@gmail.com>
Date: Tue, 21 Jul 2020 15:52:44 +0700
Subject: [PATCH 2/4] Add cover image url params on view

---
 api/templates/spotify.html.j2 | 3 +++
 api/view.py                   | 7 ++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/api/templates/spotify.html.j2 b/api/templates/spotify.html.j2
index 789500e..26968b5 100644
--- a/api/templates/spotify.html.j2
+++ b/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>
diff --git a/api/view.py b/api/view.py
index a427bf4..eb50b5f 100644
--- a/api/view.py
+++ b/api/view.py
@@ -55,7 +55,7 @@ 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")
 
@@ -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"

From 83aa3e21b2c634b7938aedb14ae75f947aa2f498 Mon Sep 17 00:00:00 2001
From: ntsd <jo06942@gmail.com>
Date: Tue, 21 Jul 2020 16:31:34 +0700
Subject: [PATCH 3/4] Fix svg height when no cover image

---
 api/view.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/view.py b/api/view.py
index eb50b5f..becae1d 100644
--- a/api/view.py
+++ b/api/view.py
@@ -59,7 +59,7 @@ 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:

From d8b253ae394e652e357b035af035c4741230614a Mon Sep 17 00:00:00 2001
From: ntsd <jo06942@gmail.com>
Date: Tue, 21 Jul 2020 16:51:48 +0700
Subject: [PATCH 4/4] Add checkbox cover image and update url

---
 api/templates/callback.html.j2 | 48 +++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/api/templates/callback.html.j2 b/api/templates/callback.html.j2
index 871d409..8e5ba82 100644
--- a/api/templates/callback.html.j2
+++ b/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/clipboard@2.0.6/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) {