From bfdff79dd5c8bcb529d458a18b11e51fff92ae2e Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Wed, 5 May 2021 15:58:33 +0100
Subject: [PATCH] Added shareable qr, broke jukebox creation

---
 lnbits/extensions/jukebox/config.json         |  2 +-
 lnbits/extensions/jukebox/static/js/index.js  | 42 +++++++++++++++----
 .../extensions/jukebox/static/js/jukebox.js   | 19 +++++++++
 .../jukebox/templates/jukebox/index.html      | 38 ++++++++++++++---
 lnbits/extensions/jukebox/views_api.py        | 12 ++++++
 5 files changed, 100 insertions(+), 13 deletions(-)
 create mode 100644 lnbits/extensions/jukebox/static/js/jukebox.js

diff --git a/lnbits/extensions/jukebox/config.json b/lnbits/extensions/jukebox/config.json
index def7c7a30..91134bc28 100644
--- a/lnbits/extensions/jukebox/config.json
+++ b/lnbits/extensions/jukebox/config.json
@@ -1,6 +1,6 @@
 {
   "name": "SpotifyJukebox",
   "short_description": "Spotify jukebox middleware",
-  "icon": "audiotrack",
+  "icon": "radio",
   "contributors": ["benarc"]
 }
diff --git a/lnbits/extensions/jukebox/static/js/index.js b/lnbits/extensions/jukebox/static/js/index.js
index fde881374..ae50af928 100644
--- a/lnbits/extensions/jukebox/static/js/index.js
+++ b/lnbits/extensions/jukebox/static/js/index.js
@@ -72,11 +72,24 @@ new Vue({
         show: false,
         data: {}
       },
-      spotifyDialog: false
+      spotifyDialog: false,
+      qrCodeDialog: {
+        show: false,
+        data: null
+      }
     }
   },
   computed: {},
   methods: {
+    openQrCodeDialog: function (linkId) {
+      var link = _.findWhere(this.JukeboxLinks, {id: linkId})
+
+      this.qrCodeDialog.data = _.clone(link)
+      console.log(this.qrCodeDialog.data)
+      this.qrCodeDialog.data.url =
+        window.location.protocol + '//' + window.location.host
+      this.qrCodeDialog.show = true
+    },
     getJukeboxes() {
       self = this
       LNbits.api
@@ -123,6 +136,7 @@ new Vue({
       self.jukeboxDialog.data.sp_device = []
       self.jukeboxDialog.data.sp_playlists = []
       self.jukeboxDialog.data.sp_id = self.jukeboxDialog.data.id
+      self.jukeboxDialog.data.price = String(self.jukeboxDialog.data.price)
       self.jukeboxDialog.show = true
     },
     closeFormDialog() {
@@ -210,18 +224,24 @@ new Vue({
     },
     createJukebox() {
       self = this
-      console.log(this.jukeboxDialog.data)
-      this.jukeboxDialog.data.sp_playlists = this.jukeboxDialog.data.sp_playlists.join()
+      self.jukeboxDialog.data.sp_playlists = self.jukeboxDialog.data.sp_playlists.join()
+      self.updateDB()
+      self.jukeboxDialog.show = false
+    },
+    updateDB(){
+      self = this
+      console.log(self.jukeboxDialog.data)
       LNbits.api
         .request(
           'PUT',
-          '/jukebox/api/v1/jukebox/' + this.jukeboxDialog.data.sp_id,
+          '/jukebox/api/v1/jukebox/' + self.jukeboxDialog.data.sp_id,
           self.g.user.wallets[0].adminkey,
           self.jukeboxDialog.data
         )
         .then(function (response) {
-          self.JukeboxLinks.push(mapJukebox(response.data))
-          self.jukeboxDialog.show = false
+          console.log(response.data)
+          self.getJukeboxes()
+          //self.JukeboxLinks.push(mapJukebox(response.data))
         })
     },
     playlistApi(method, url, body) {
@@ -235,6 +255,10 @@ new Vue({
       )
       xhr.send(body)
       xhr.onload = function () {
+        if(xhr.status == 401){
+          self.refreshAccessToken()
+          self.playlistApi('GET', 'https://api.spotify.com/v1/me/playlists', null)
+        }
         let responseObj = JSON.parse(xhr.response)
         self.jukeboxDialog.data.playlists = null
         self.playlists = []
@@ -262,6 +286,10 @@ new Vue({
       )
       xhr.send(body)
       xhr.onload = function () {
+        if(xhr.status == 401){
+          self.refreshAccessToken()
+          self.deviceApi('GET', 'https://api.spotify.com/v1/me/player/devices', null)
+        }
         let responseObj = JSON.parse(xhr.response)
         self.jukeboxDialog.data.devices = []
 
@@ -319,7 +347,7 @@ new Vue({
         if (responseObj.access_token) {
           self.jukeboxDialog.data.sp_access_token = responseObj.access_token
           self.jukeboxDialog.data.sp_refresh_token = responseObj.refresh_token
-          console.log(responseObj)
+          self.updateDB()
         }
       }
     }
diff --git a/lnbits/extensions/jukebox/static/js/jukebox.js b/lnbits/extensions/jukebox/static/js/jukebox.js
new file mode 100644
index 000000000..b6e26f138
--- /dev/null
+++ b/lnbits/extensions/jukebox/static/js/jukebox.js
@@ -0,0 +1,19 @@
+/* globals Quasar, Vue, _, VueQrcode, windowMixin, LNbits, LOCALE */
+
+Vue.component(VueQrcode.name, VueQrcode)
+
+new Vue({
+  el: '#vue',
+  mixins: [windowMixin],
+  data() {
+    return {
+    }
+  },
+  computed: {},
+  methods: {
+  
+  },
+  created() {
+
+  }
+})
diff --git a/lnbits/extensions/jukebox/templates/jukebox/index.html b/lnbits/extensions/jukebox/templates/jukebox/index.html
index 1b0a59498..e9e60ace8 100644
--- a/lnbits/extensions/jukebox/templates/jukebox/index.html
+++ b/lnbits/extensions/jukebox/templates/jukebox/index.html
@@ -48,13 +48,11 @@
                   unelevated
                   dense
                   size="xs"
-                  icon="link"
+                  icon="launch"
                   :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  type="a"
-                  :href="props.row.displayUrl"
-                  target="_blank"
+                  @click="openQrCodeDialog(props.row.sp_id)"
                 >
-                  <q-tooltip> Jukebox link </q-tooltip>
+                  <q-tooltip> Jukebox QR </q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width>
@@ -308,6 +306,36 @@
       </q-stepper>
     </q-card>
   </q-dialog>
+
+  <q-dialog v-model="qrCodeDialog.show" position="top">
+    <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
+      <center><h5 class="q-my-none">Shareable Jukebox QR</h5></center>
+      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
+        <qrcode
+          :value="qrCodeDialog.data.url + '/jukebox/' + qrCodeDialog.data.id"
+          :options="{width: 800}"
+          class="rounded-borders"
+        ></qrcode>
+      </q-responsive>
+      <div class="row q-mt-lg q-gutter-sm">
+        <q-btn
+          outline
+          color="grey"
+          @click="copyText(qrCodeDialog.data.url + '/jukebox/' + qrCodeDialog.data.id, 'Link copied to clipboard!')"
+          >Copy jukebox link</q-btn
+        >
+        <q-btn
+          outline
+          color="grey"
+          type="a"
+          :href="qrCodeDialog.data.url + '/jukebox/' + qrCodeDialog.data.id"
+          target="_blank"
+          >Open jukebox</q-btn
+        >
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+      </div>
+    </q-card>
+  </q-dialog>
 </div>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
 <script src="https://cdn.jsdelivr.net/npm/pica@6.1.1/dist/pica.min.js"></script>
diff --git a/lnbits/extensions/jukebox/views_api.py b/lnbits/extensions/jukebox/views_api.py
index 358358dd9..df93883d6 100644
--- a/lnbits/extensions/jukebox/views_api.py
+++ b/lnbits/extensions/jukebox/views_api.py
@@ -102,3 +102,15 @@ async def api_delete_item(juke_id):
         )
     except:
         return "", HTTPStatus.NO_CONTENT
+
+
+
+################JUKEBOX ENDPOINTS##################
+
+
+@jukebox_ext.route("/api/v1/jukebox/jb/<sp_id>", methods=["GET"])
+async def api_get_jukebox_songs(sp_id):
+    jukebox = await get_jukebox(sp_id)
+    print(jukebox.playlists.split(",")[0].split("-")[1])
+
+    return jsonify(jukebox._asdict()), HTTPStatus.CREATED
\ No newline at end of file