lnbits-legend/lnbits/extensions/jukebox/templates/jukebox/jukebox.html

{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-sm-6 col-md-5 col-lg-4">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <p style="font-size: 22px">Currently playing</p>
        <div class="row">
          <div class="col-4">
            <img style="width: 100px" :src="currentPlay.image" />
          </div>
          <div class="col-8">
            {% raw %}
            <strong style="font-size: 20px">{{ currentPlay.name }}</strong
            ><br />
            <strong style="font-size: 15px">{{ currentPlay.artist }}</strong>
          </div>
          {% endraw %}
        </div>
      </q-card-section>
    </q-card>

    <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>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-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-section>
                <q-item-label>
                  {% raw %} {{ item.name }} - ({{ item.artist }}){% endraw %}
                </q-item-label>
              </q-item-section>
            </q-item>
          </template>
        </q-virtual-scroll>
      </q-card-section>
    </q-card>

    <q-dialog v-model="receive.dialogues.first" position="top">
      <q-card class="q-pa-lg lnbits__dialog-card">
        <q-card-section class="q-pa-none">
          <div class="row">
            <div class="col-4">
              <img style="width: 100px" :src="receive.image" />
            </div>
            <div class="col-8">
              {% raw %}
              <strong style="font-size: 20px">{{ receive.name }}</strong><br />
              <strong style="font-size: 15px">{{ receive.artist }}</strong>
            </div>
          </div>
        </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 }}sats
          </q-btn>
        </div>
      </q-card>
    </q-dialog>
    <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.toUpperCase()"
            :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
          >
        </div>
      </q-card>
    </q-dialog>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data() {
      return {
        currentPlaylist: [],
        currentlyPlaying: {},
        playlists: {},
        playlist: '',
        heavyList: [],
        selectedWallet: {},
        paid: false,
        receive: {
          dialogues: {
            first: false,
            second: false
          },
          paymentReq: '',
          paymentHash: '',
          name: '',
          artist: '',
          image: '',
          id: '',
          showQR: false,
          data: null,
          dismissMsg: null,
          paymentChecker: null
        }
      }
    },
    computed: {
      currentPlay() {
        return this.currentlyPlaying
      }
    },
    methods: {
      payForSong(song_id, name, artist, image) {
        self = this
        self.receive.name = name
        self.receive.artist = artist
        self.receive.image = image
        self.receive.id = song_id
        self.receive.dialogues.first = true
      },
      getInvoice(song_id) {
        self = this
        var dialog = this.receive
        LNbits.api
          .request(
            'GET',
            '/jukebox/api/v1/jukebox/jb/invoice/' +
              '{{ juke_id }}' +
              '/' +
              song_id
          )
          .then(function (response) {
            console.log(response.data)
            self.receive.paymentReq = response.data.invoice
            self.receive.paymentHash = response.data.payment_hash
            self.receive.dialogues.second = true
            dialog.data = response.data

            dialog.dismissMsg = self.$q.notify({
              timeout: 0,
              message: 'Waiting for payment...'
            })
            dialog.paymentChecker = setInterval(function () {
              LNbits.api
                .request(
                  'GET',
                  '/jukebox/api/v1/jukebox/jb/checkinvoice/' +
                    self.receive.paymentHash +
                    '/{{ juke_id }}'
                )
                .then(function (res) {
                  console.log(res)
                  if (res.data.paid == true) {
                    clearInterval(dialog.paymentChecker)
                    LNbits.api
                      .request(
                        'GET',
                        '/jukebox/api/v1/jukebox/jb/invoicep/' +
                          self.receive.id +
                          '/{{ juke_id }}/' +
                          self.receive.paymentHash
                      )
                      .then(function (ress) {
                        console.log('ress')
                        console.log(ress)
                        console.log('ress')
                        if (ress.data.song_id == self.receive.id) {
                          clearInterval(dialog.paymentChecker)
                          dialog.dismissMsg()
                          self.receive.dialogues.second = false

                          self.$q.notify({
                            type: 'positive',
                            message:
                              'Success! "' +
                              self.receive.name +
                              '" will be played soon',
                            timeout: 3000
                          })
                          self.receive.dialogues.first = false
                        }
                      })
                  }
                })
            }, 3000)

            setTimeout(() => {
              self.getCurrent()
            }, 500)
          })
          .catch(err => {
            self.$q.notify({
              color: 'warning',
              html: true,
              message:
                '<center>Device is not connected! <br/> Ask the host to turn on their device and have Spotify open</center>',
              timeout: 5000
            })
          })
      },
      getCurrent() {
        LNbits.api
          .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
        LNbits.api
          .request(
            'GET',
            '/jukebox/api/v1/jukebox/jb/playlist/' +
              '{{ juke_id }}' +
              '/' +
              self.playlist.split(',')[0].split('-')[1]
          )
          .then(function (response) {
            self.currentPlaylist = response.data
          })
          .catch(err => {
            LNbits.utils.notifyApiError(err)
          })
      },
      currentSong() {}
    },
    created() {
      this.getCurrent()
      this.playlists = JSON.parse('{{ playlists | tojson }}')
      this.selectedWallet.inkey = '{{ inkey }}'
      self = this
      LNbits.api
        .request(
          'GET',
          '/jukebox/api/v1/jukebox/jb/playlist/' +
            '{{ juke_id }}' +
            '/' +
            self.playlists[0].split(',')[0].split('-')[1]
        )
        .then(function (response) {
          self.currentPlaylist = response.data
        })
        .catch(err => {
          LNbits.utils.notifyApiError(err)
        })
    }
  })
</script>
{% endblock %}