prettier

2025-09-27 20:36:16 +02:00 · 2021-06-24 01:40:24 +01:00
parent e7824e0e8d
commit e51ef5b722
8 changed files with 449 additions and 226 deletions
--- a/lnbits/extensions/jukebox/static/js/index.js
+++ b/lnbits/extensions/jukebox/static/js/index.js
@@ -93,7 +93,11 @@ new Vue({
    getJukeboxes() {
      self = this
      LNbits.api
-        .request('GET', '/jukebox/api/v1/jukebox', self.g.user.wallets[0].adminkey)
+        .request(
+          'GET',
+          '/jukebox/api/v1/jukebox',
+          self.g.user.wallets[0].adminkey
+        )
        .then(function (response) {
          self.JukeboxLinks = response.data.map(mapJukebox)
        })
@@ -195,9 +199,9 @@ new Vue({
              if (self.jukeboxDialog.data.sp_access_token) {
                self.refreshPlaylists()
                self.refreshDevices()
-                console.log("this.devices")
+                console.log('this.devices')
                console.log(self.devices)
-                console.log("this.devices")
+                console.log('this.devices')
                setTimeout(function () {
                  if (self.devices.length < 1 || self.playlists.length < 1) {
                    self.$q.notify({
--- a/lnbits/extensions/jukebox/static/js/jukebox.js
+++ b/lnbits/extensions/jukebox/static/js/jukebox.js
@@ -6,14 +6,9 @@ new Vue({
  el: '#vue',
  mixins: [windowMixin],
  data() {
-    return {
-    }
+    return {}
  },
  computed: {},
-  methods: {
-  
-  },
-  created() {
-
-  }
+  methods: {},
+  created() {}
 })
--- a/lnbits/extensions/jukebox/templates/jukebox/_api_docs.html
+++ b/lnbits/extensions/jukebox/templates/jukebox/_api_docs.html
@@ -1,24 +1,33 @@
 <q-card-section>
-  To use this extension you need a Spotify client ID and client secret. You
-  get these by creating an app in the Spotify developers dashboard
-  <a style="color:#43a047" href="https://developer.spotify.com/dashboard/applications">here </a>
-  <br /><br />Select the playlists you want people to be able to pay for,
-  share the frontend page, profit :) <br /><br />
-  Made by, <a style="color:#43a047" href="https://twitter.com/arcbtc">benarc</a>. Inspired by,
-  <a style="color:#43a047" href="https://twitter.com/pirosb3/status/1056263089128161280">pirosb3</a>.
+  To use this extension you need a Spotify client ID and client secret. You get
+  these by creating an app in the Spotify developers dashboard
+  <a
+    style="color: #43a047"
+    href="https://developer.spotify.com/dashboard/applications"
+    >here
+  </a>
+  <br /><br />Select the playlists you want people to be able to pay for, share
+  the frontend page, profit :) <br /><br />
+  Made by,
+  <a style="color: #43a047" href="https://twitter.com/arcbtc">benarc</a>.
+  Inspired by,
+  <a
+    style="color: #43a047"
+    href="https://twitter.com/pirosb3/status/1056263089128161280"
+    >pirosb3</a
+  >.
 </q-card-section>

-
-
-
-
-
-<q-expansion-item group="extras" icon="swap_vertical_circle" label="API info" :content-inset-level="0.5">
+<q-expansion-item
+  group="extras"
+  icon="swap_vertical_circle"
+  label="API info"
+  :content-inset-level="0.5"
+>
  <q-expansion-item group="api" dense expand-separator label="List jukeboxes">
    <q-card>
      <q-card-section>
-        <code><span class="text-blue">GET</span>
-          /jukebox/api/v1/jukebox</code>
+        <code><span class="text-blue">GET</span> /jukebox/api/v1/jukebox</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
        <code>{"X-Api-Key": &lt;admin_key&gt;}</code><br />
        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
@@ -27,7 +36,8 @@
        </h5>
        <code>[&lt;jukebox_object&gt;, ...]</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code>curl -X GET {{ request.url_root }}api/v1/jukebox -H "X-Api-Key: {{
+        <code
+          >curl -X GET {{ request.url_root }}api/v1/jukebox -H "X-Api-Key: {{
          g.user.wallets[0].adminkey }}"
        </code>
      </q-card-section>
@@ -36,8 +46,10 @@
  <q-expansion-item group="api" dense expand-separator label="Get jukebox">
    <q-card>
      <q-card-section>
-        <code><span class="text-blue">GET</span>
-          /jukebox/api/v1/jukebox/&lt;juke_id&gt;</code>
+        <code
+          ><span class="text-blue">GET</span>
+          /jukebox/api/v1/jukebox/&lt;juke_id&gt;</code
+        >
        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
        <code>{"X-Api-Key": &lt;admin_key&gt;}</code><br />
        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
@@ -46,36 +58,44 @@
        </h5>
        <code>&lt;jukebox_object&gt;</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code>curl -X GET {{ request.url_root }}api/v1/jukebox/&lt;juke_id&gt; -H "X-Api-Key: {{
-          g.user.wallets[0].adminkey }}"
+        <code
+          >curl -X GET {{ request.url_root }}api/v1/jukebox/&lt;juke_id&gt; -H
+          "X-Api-Key: {{ g.user.wallets[0].adminkey }}"
        </code>
      </q-card-section>
    </q-card>
  </q-expansion-item>
-  <q-expansion-item group="api" dense expand-separator label="Create/update track">
+  <q-expansion-item
+    group="api"
+    dense
+    expand-separator
+    label="Create/update track"
+  >
    <q-card>
      <q-card-section>
-        <code><span class="text-green">POST/PUT</span>
-          /jukebox/api/v1/jukebox/</code>
+        <code
+          ><span class="text-green">POST/PUT</span>
+          /jukebox/api/v1/jukebox/</code
+        >
        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
        <code>{"X-Api-Key": &lt;admin_key&gt;}</code><br />
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Body (application/json)
-        </h5>
+        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
        <h5 class="text-caption q-mt-sm q-mb-none">
          Returns 200 OK (application/json)
        </h5>
        <code>&lt;jukbox_object&gt;</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code>curl -X POST {{ request.url_root }}api/v1/jukebox/ -d
-          '{"user": &lt;string, user_id&gt;,
-          "title": &lt;string&gt;, "wallet":&lt;string&gt;, "sp_user":
-          &lt;string, spotify_user_account&gt;, "sp_secret": &lt;string, spotify_user_secret&gt;, "sp_access_token":
-          &lt;string, not_required&gt;, "sp_refresh_token":
-          &lt;string, not_required&gt;, "sp_device": &lt;string, spotify_user_secret&gt;, "sp_playlists":
-          &lt;string, not_required&gt;, "price":
-          &lt;integer, not_required&gt;}' -H "Content-type:
-          application/json" -H "X-Api-Key: {{g.user.wallets[0].adminkey }}"
+        <code
+          >curl -X POST {{ request.url_root }}api/v1/jukebox/ -d '{"user":
+          &lt;string, user_id&gt;, "title": &lt;string&gt;,
+          "wallet":&lt;string&gt;, "sp_user": &lt;string,
+          spotify_user_account&gt;, "sp_secret": &lt;string,
+          spotify_user_secret&gt;, "sp_access_token": &lt;string,
+          not_required&gt;, "sp_refresh_token": &lt;string, not_required&gt;,
+          "sp_device": &lt;string, spotify_user_secret&gt;, "sp_playlists":
+          &lt;string, not_required&gt;, "price": &lt;integer, not_required&gt;}'
+          -H "Content-type: application/json" -H "X-Api-Key:
+          {{g.user.wallets[0].adminkey }}"
        </code>
      </q-card-section>
    </q-card>
@@ -83,8 +103,10 @@
  <q-expansion-item group="api" dense expand-separator label="Delete jukebox">
    <q-card>
      <q-card-section>
-        <code><span class="text-red">DELETE</span>
-          /jukebox/api/v1/jukebox/&lt;juke_id&gt;</code>
+        <code
+          ><span class="text-red">DELETE</span>
+          /jukebox/api/v1/jukebox/&lt;juke_id&gt;</code
+        >
        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
        <code>{"X-Api-Key": &lt;admin_key&gt;}</code><br />
        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
@@ -93,9 +115,11 @@
        </h5>
        <code>&lt;jukebox_object&gt;</code>
        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code>curl -X DELETE {{ request.url_root }}api/v1/jukebox/&lt;juke_id&gt; -H "X-Api-Key: {{
-          g.user.wallets[0].adminkey }}"
+        <code
+          >curl -X DELETE {{ request.url_root }}api/v1/jukebox/&lt;juke_id&gt;
+          -H "X-Api-Key: {{ g.user.wallets[0].adminkey }}"
        </code>
      </q-card-section>
    </q-card>
-  </q-expansion-item>
+  </q-expansion-item></q-expansion-item
+>
--- a/lnbits/extensions/jukebox/templates/jukebox/error.html
+++ b/lnbits/extensions/jukebox/templates/jukebox/error.html
@@ -12,7 +12,9 @@
            style="font-size: 20rem"
          ></q-icon>

-          <h5 class="q-my-none">Ask the host to turn on the device and launch spotify</h5>
+          <h5 class="q-my-none">
+            Ask the host to turn on the device and launch spotify
+          </h5>
          <br />
        </center>
      </q-card-section>
--- a/lnbits/extensions/jukebox/templates/jukebox/index.html
+++ b/lnbits/extensions/jukebox/templates/jukebox/index.html
@@ -4,18 +4,36 @@
  <div class="col-12 col-md-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
-        <q-btn unelevated color="green-7" class="q-ma-lg" @click="openNewDialog()">Add Spotify Jukebox</q-btn>
+        <q-btn
+          unelevated
+          color="green-7"
+          class="q-ma-lg"
+          @click="openNewDialog()"
+          >Add Spotify Jukebox</q-btn
+        >

        {% raw %}

-        <q-table flat dense :data="JukeboxLinks" row-key="id" :columns="JukeboxTable.columns"
-          :pagination.sync="JukeboxTable.pagination" :filter="filter">
+        <q-table
+          flat
+          dense
+          :data="JukeboxLinks"
+          row-key="id"
+          :columns="JukeboxTable.columns"
+          :pagination.sync="JukeboxTable.pagination"
+          :filter="filter"
+        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>

-              <q-th v-for="col in props.cols" :key="col.name" :props="props" auto-width>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                auto-width
+              >
                <div v-if="col.name == 'id'"></div>
                <div v-else>{{ col.label }}</div>
              </q-th>
@@ -26,18 +44,43 @@
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
-                <q-btn unelevated dense size="xs" icon="launch" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
-                  @click="openQrCodeDialog(props.row.sp_id)">
+                <q-btn
+                  unelevated
+                  dense
+                  size="xs"
+                  icon="launch"
+                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
+                  @click="openQrCodeDialog(props.row.sp_id)"
+                >
                  <q-tooltip> Jukebox QR </q-tooltip>
                </q-btn>
              </q-td>
              <q-td auto-width>
-                <q-btn flat dense size="xs" @click="updateJukebox(props.row.id)" icon="edit" color="light-blue"></q-btn>
-                <q-btn flat dense size="xs" @click="deleteJukebox(props.row.id)" icon="cancel" color="pink">
+                <q-btn
+                  flat
+                  dense
+                  size="xs"
+                  @click="updateJukebox(props.row.id)"
+                  icon="edit"
+                  color="light-blue"
+                ></q-btn>
+                <q-btn
+                  flat
+                  dense
+                  size="xs"
+                  @click="deleteJukebox(props.row.id)"
+                  icon="cancel"
+                  color="pink"
+                >
                  <q-tooltip> Delete Jukebox </q-tooltip>
                </q-btn>
              </q-td>
-              <q-td v-for="col in props.cols" :key="col.name" :props="props" auto-width>
+              <q-td
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                auto-width
+              >
                <div v-if="col.name == 'id'"></div>
                <div v-else>{{ col.value }}</div>
              </q-td>
@@ -63,23 +106,62 @@

  <q-dialog v-model="jukeboxDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-md q-pt-lg q-mt-md" style="width: 100%">
-      <q-stepper v-model="step" active-color="green-7" inactive-color="green-10" vertical animated>
-        <q-step :name="1" title="Pick wallet, price" icon="account_balance_wallet" :done="step > 1">
-          <q-input filled class="q-pt-md" dense v-model.trim="jukeboxDialog.data.title" label="Jukebox name"></q-input>
-          <q-select class="q-pb-md q-pt-md" filled dense emit-value v-model="jukeboxDialog.data.wallet"
-            :options="g.user.walletOptions" label="Wallet to use"></q-select>
-          <q-input filled dense v-model.trim="jukeboxDialog.data.price" type="number" max="1440" label="Price per track"
-            class="q-pb-lg">
+      <q-stepper
+        v-model="step"
+        active-color="green-7"
+        inactive-color="green-10"
+        vertical
+        animated
+      >
+        <q-step
+          :name="1"
+          title="Pick wallet, price"
+          icon="account_balance_wallet"
+          :done="step > 1"
+        >
+          <q-input
+            filled
+            class="q-pt-md"
+            dense
+            v-model.trim="jukeboxDialog.data.title"
+            label="Jukebox name"
+          ></q-input>
+          <q-select
+            class="q-pb-md q-pt-md"
+            filled
+            dense
+            emit-value
+            v-model="jukeboxDialog.data.wallet"
+            :options="g.user.walletOptions"
+            label="Wallet to use"
+          ></q-select>
+          <q-input
+            filled
+            dense
+            v-model.trim="jukeboxDialog.data.price"
+            type="number"
+            max="1440"
+            label="Price per track"
+            class="q-pb-lg"
+          >
          </q-input>
          <div class="row">
            <div class="col-4">
              <q-btn
                v-if="jukeboxDialog.data.title != null && jukeboxDialog.data.price != null && jukeboxDialog.data.wallet != null"
-                color="green-7" @click="step = 2">Continue</q-btn>
+                color="green-7"
+                @click="step = 2"
+                >Continue</q-btn
+              >
              <q-btn v-else color="green-7" disable>Continue</q-btn>
            </div>
            <div class="col-8">
-              <q-btn color="green-7" class="float-right" @click="closeFormDialog">Cancel</q-btn>
+              <q-btn
+                color="green-7"
+                class="float-right"
+                @click="closeFormDialog"
+                >Cancel</q-btn
+              >
            </div>
          </div>

@@ -90,26 +172,57 @@
          <img src="/jukebox/static/spotapi.gif" />
          To use this extension you need a Spotify client ID and client secret.
          You get these by creating an app in the Spotify developers dashboard
-          <a target="_blank" style="color:#43a047" href="https://developer.spotify.com/dashboard/applications">here</a>.
-          <q-input filled class="q-pb-md q-pt-md" dense v-model.trim="jukeboxDialog.data.sp_user" label="Client ID">
+          <a
+            target="_blank"
+            style="color: #43a047"
+            href="https://developer.spotify.com/dashboard/applications"
+            >here</a
+          >.
+          <q-input
+            filled
+            class="q-pb-md q-pt-md"
+            dense
+            v-model.trim="jukeboxDialog.data.sp_user"
+            label="Client ID"
+          >
          </q-input>

-          <q-input dense v-model="jukeboxDialog.data.sp_secret" filled :type="isPwd ? 'password' : 'text'"
-            label="Client secret">
+          <q-input
+            dense
+            v-model="jukeboxDialog.data.sp_secret"
+            filled
+            :type="isPwd ? 'password' : 'text'"
+            label="Client secret"
+          >
            <template #append>
-              <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd">
+              <q-icon
+                :name="isPwd ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="isPwd = !isPwd"
+              >
              </q-icon>
            </template>
          </q-input>

          <div class="row q-mt-md">
            <div class="col-4">
-              <q-btn v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
-                color="green-7" @click="submitSpotifyKeys">Submit keys</q-btn>
-              <q-btn v-else color="green-7" disable color="green-7">Submit keys</q-btn>
+              <q-btn
+                v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
+                color="green-7"
+                @click="submitSpotifyKeys"
+                >Submit keys</q-btn
+              >
+              <q-btn v-else color="green-7" disable color="green-7"
+                >Submit keys</q-btn
+              >
            </div>
            <div class="col-8">
-              <q-btn color="green-7" class="float-right" @click="closeFormDialog">Cancel</q-btn>
+              <q-btn
+                color="green-7"
+                class="float-right"
+                @click="closeFormDialog"
+                >Cancel</q-btn
+              >
            </div>
          </div>

@@ -120,42 +233,93 @@
          <img src="/jukebox/static/spotapi1.gif" />
          In the app go to edit-settings, set the redirect URI to this link
          <br />
-          <q-btn dense outline unelevated color="green-7" size="xs"
-            @click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')">{% raw %}{{ locationcb
-            }}{{ jukeboxDialog.data.sp_id }}{% endraw
+          <q-btn
+            dense
+            outline
+            unelevated
+            color="green-7"
+            size="xs"
+            @click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')"
+            >{% raw %}{{ locationcb }}{{ jukeboxDialog.data.sp_id }}{% endraw
            %}<q-tooltip> Click to copy URL </q-tooltip>
          </q-btn>
          <br />
          Settings can be found
-          <a target="_blank" style="color:#43a047" href="https://developer.spotify.com/dashboard/applications">here</a>.
+          <a
+            target="_blank"
+            style="color: #43a047"
+            href="https://developer.spotify.com/dashboard/applications"
+            >here</a
+          >.

          <div class="row q-mt-md">
            <div class="col-4">
-              <q-btn v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
-                color="green-7" @click="authAccess">Authorise access</q-btn>
-              <q-btn v-else color="green-7" disable color="green-7">Authorise access</q-btn>
+              <q-btn
+                v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
+                color="green-7"
+                @click="authAccess"
+                >Authorise access</q-btn
+              >
+              <q-btn v-else color="green-7" disable color="green-7"
+                >Authorise access</q-btn
+              >
            </div>
            <div class="col-8">
-              <q-btn color="green-7" class="float-right" @click="closeFormDialog">Cancel</q-btn>
+              <q-btn
+                color="green-7"
+                class="float-right"
+                @click="closeFormDialog"
+                >Cancel</q-btn
+              >
            </div>
          </div>

          <br />
        </q-step>

-        <q-step :name="4" title="Select playlists" icon="queue_music" active-color="green-8" :done="step > 4">
-          <q-select class="q-pb-md q-pt-md" filled dense emit-value v-model="jukeboxDialog.data.sp_device"
-            :options="devices" label="Device jukebox will play to"></q-select>
-          <q-select class="q-pb-md" filled dense multiple emit-value v-model="jukeboxDialog.data.sp_playlists"
-            :options="playlists" label="Playlists available to the jukebox"></q-select>
+        <q-step
+          :name="4"
+          title="Select playlists"
+          icon="queue_music"
+          active-color="green-8"
+          :done="step > 4"
+        >
+          <q-select
+            class="q-pb-md q-pt-md"
+            filled
+            dense
+            emit-value
+            v-model="jukeboxDialog.data.sp_device"
+            :options="devices"
+            label="Device jukebox will play to"
+          ></q-select>
+          <q-select
+            class="q-pb-md"
+            filled
+            dense
+            multiple
+            emit-value
+            v-model="jukeboxDialog.data.sp_playlists"
+            :options="playlists"
+            label="Playlists available to the jukebox"
+          ></q-select>
          <div class="row q-mt-md">
            <div class="col-5">
-              <q-btn v-if="jukeboxDialog.data.sp_device != null && jukeboxDialog.data.sp_playlists != null"
-                color="green-7" @click="createJukebox">Create Jukebox</q-btn>
+              <q-btn
+                v-if="jukeboxDialog.data.sp_device != null && jukeboxDialog.data.sp_playlists != null"
+                color="green-7"
+                @click="createJukebox"
+                >Create Jukebox</q-btn
+              >
              <q-btn v-else color="green-7" disable>Create Jukebox</q-btn>
            </div>
            <div class="col-7">
-              <q-btn color="green-7" class="float-right" @click="closeFormDialog">Cancel</q-btn>
+              <q-btn
+                color="green-7"
+                class="float-right"
+                @click="closeFormDialog"
+                >Cancel</q-btn
+              >
            </div>
          </div>
        </q-step>
@@ -169,15 +333,28 @@
        <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>
+        <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
+          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>
--- a/lnbits/extensions/jukebox/templates/jukebox/jukebox.html
+++ b/lnbits/extensions/jukebox/templates/jukebox/jukebox.html
@@ -9,7 +9,8 @@
            <img style="width: 100px" :src="currentPlay.image" />
          </div>
          <div class="col-8">
-            <strong style="font-size: 20px">{{ currentPlay.name }}</strong><br />
+            <strong style="font-size: 20px">{{ currentPlay.name }}</strong
+            ><br />
            <strong style="font-size: 15px">{{ currentPlay.artist }}</strong>
          </div>
        </div>
@@ -19,15 +20,30 @@
    <q-card class="q-mt-lg">
      <q-card-section>
        <p style="font-size: 22px">Pick a song</p>
-        <q-select outlined v-model="playlist" :options="playlists" label="playlists" @input="selectPlaylist()">
+        <q-select
+          outlined
+          v-model="playlist"
+          :options="playlists"
+          label="playlists"
+          @input="selectPlaylist()"
+        >
        </q-select>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
-        <q-virtual-scroll style="max-height: 300px" :items="currentPlaylist" separator>
+        <q-virtual-scroll
+          style="max-height: 300px"
+          :items="currentPlaylist"
+          separator
+        >
          <template v-slot="{ item, index }">
-            <q-item :key="index" dense clickable v-ripple
-              @click="payForSong(item.id, item.name, item.artist, item.image)">
+            <q-item
+              :key="index"
+              dense
+              clickable
+              v-ripple
+              @click="payForSong(item.id, item.name, item.artist, item.image)"
+            >
              <q-item-section>
                <q-item-label>
                  {{ item.name }} - ({{ item.artist }})
@@ -55,7 +71,8 @@
      </q-card-section>
      <br />
      <div class="row q-mt-lg q-gutter-sm">
-        <q-btn outline color="grey" @click="getInvoice(receive.id)">Play for {% endraw %}{{ price }}{% raw %} sats
+        <q-btn outline color="grey" @click="getInvoice(receive.id)"
+          >Play for {% endraw %}{{ price }}{% raw %} sats
        </q-btn>
      </div>
    </q-card>
@@ -63,10 +80,16 @@
  <q-dialog v-model="receive.dialogues.second" position="top">
    <q-card class="q-pa-lg lnbits__dialog-card">
      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
-        <qrcode :value="'lightning:' + receive.paymentReq" :options="{width: 800}" class="rounded-borders"></qrcode>
+        <qrcode
+          :value="'lightning:' + receive.paymentReq"
+          :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(receive.paymentReq)">Copy invoice</q-btn>
+        <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
+          >Copy invoice</q-btn
+        >
      </div>
    </q-card>
  </q-dialog>
@@ -138,7 +161,6 @@
              song_id
          )
          .then(function (response) {
-
            self.receive.paymentReq = response.data[0][1]
            self.receive.paymentHash = response.data[0][0]
            self.receive.dialogues.second = true
@@ -153,21 +175,27 @@
                self.receive.dialogues.first = false
                self.receive.dialogues.second = false
                self.$q.notify({
-                  message:
-                    'Processing',
+                  message: 'Processing'
                })
                LNbits.api
                  .request(
                    'GET',
-                    '/jukebox/api/v1/jukebox/jb/invoicep/' + song_id + '/{{ juke_id }}/' + self.receive.paymentHash)
+                    '/jukebox/api/v1/jukebox/jb/invoicep/' +
+                      song_id +
+                      '/{{ juke_id }}/' +
+                      self.receive.paymentHash
+                  )
                  .then(function (response1) {
-
                    if (response1.data[2] == song_id) {
-                      setTimeout(function () { self.getCurrent() }, 500)
+                      setTimeout(function () {
+                        self.getCurrent()
+                      }, 500)
                      self.$q.notify({
                        color: 'green',
                        message:
-                          'Success! "' + self.receive.name + '" will be played soon',
+                          'Success! "' +
+                          self.receive.name +
+                          '" will be played soon',
                        timeout: 3000
                      })

@@ -176,17 +204,14 @@
                    }
                  })
                  .catch(err => {
-
                    LNbits.utils.notifyApiError(err)
                    self.paid = false
                    response1 = []
                  })
              }
            }, 3000)
-
          })
          .catch(err => {
-
            self.$q.notify({
              color: 'warning',
              html: true,
@@ -197,16 +222,17 @@
          })
      },
      checkInvoice(juke_id, paymentHash) {
-
        var self = this
        LNbits.api
          .request(
            'GET',
-            '/jukebox/api/v1/jukebox/jb/checkinvoice/' + juke_id + '/' + paymentHash,
+            '/jukebox/api/v1/jukebox/jb/checkinvoice/' +
+              juke_id +
+              '/' +
+              paymentHash,
            'filla'
          )
          .then(function (response) {
-
            self.paid = response.data.paid
          })
          .catch(function (error) {
@@ -214,21 +240,16 @@
          })
      },
      getCurrent() {
-
        LNbits.api
-          .request(
-            'GET',
-            '/jukebox/api/v1/jukebox/jb/currently/{{juke_id}}')
+          .request('GET', '/jukebox/api/v1/jukebox/jb/currently/{{juke_id}}')
          .then(function (res) {
            if (res.data.id) {
-
              self.currentlyPlaying = res.data
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
-
      },
      selectPlaylist() {
        self = this