mirror of
https://github.com/lnbits/lnbits-legend.git
synced 2025-02-26 15:42:30 +01:00
fe2cbe8774
* Improved styling of Spotify redirect URI clipboard copy text * Jukebox extension - Moved links to Spotify into buttons to make set up steps more obvious * Jukebox extension - Tweaks to titles of set up steps to clarify * Prettified jukebox template
388 lines
11 KiB
HTML
388 lines
11 KiB
HTML
{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
|
|
%} {% block page %}
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-12 col-md-7 q-gutter-y-md">
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-btn
|
|
unelevated
|
|
color="primary"
|
|
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"
|
|
>
|
|
<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
|
|
>
|
|
<div v-if="col.name == 'id'"></div>
|
|
<div v-else>{{ col.label }}</div>
|
|
</q-th>
|
|
<q-th auto-width></q-th>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<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-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-tooltip> Delete Jukebox </q-tooltip>
|
|
</q-btn>
|
|
</q-td>
|
|
<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>
|
|
</q-tr>
|
|
</template>
|
|
</q-table>
|
|
{% endraw %}
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-5 q-gutter-y-md">
|
|
<q-card>
|
|
<q-card-section>
|
|
<h6 class="text-subtitle1 q-my-none">
|
|
{{SITE_TITLE}} jukebox extension
|
|
</h6>
|
|
</q-card-section>
|
|
<q-card-section class="q-pa-none">
|
|
<q-separator></q-separator>
|
|
<q-list> {% include "jukebox/_api_docs.html" %} </q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
|
|
<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="primary"
|
|
inactive-color="secondary"
|
|
vertical
|
|
animated
|
|
>
|
|
<q-step
|
|
:name="1"
|
|
title="1. Pick Wallet and 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="primary"
|
|
@click="step = 2"
|
|
>Continue</q-btn
|
|
>
|
|
<q-btn v-else color="primary" disable>Continue</q-btn>
|
|
</div>
|
|
<div class="col-8">
|
|
<q-btn
|
|
color="primary"
|
|
class="float-right"
|
|
@click="closeFormDialog"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="2"
|
|
title="2. Add API keys"
|
|
icon="vpn_key"
|
|
:done="step > 2"
|
|
>
|
|
<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 Developer Dashboard
|
|
<br />
|
|
<br />
|
|
<q-btn
|
|
type="a"
|
|
target="_blank"
|
|
color="primary"
|
|
href="https://developer.spotify.com/dashboard/applications"
|
|
>Open the Spotify Developer Dashboard</q-btn
|
|
>
|
|
|
|
<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"
|
|
>
|
|
<template #append>
|
|
<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="primary"
|
|
@click="submitSpotifyKeys"
|
|
>Submit keys</q-btn
|
|
>
|
|
<q-btn v-else color="primary" disable color="primary"
|
|
>Submit keys</q-btn
|
|
>
|
|
</div>
|
|
<div class="col-8">
|
|
<q-btn
|
|
color="primary"
|
|
class="float-right"
|
|
@click="closeFormDialog"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="3"
|
|
title="3. Add Redirect URI"
|
|
icon="link"
|
|
:done="step > 3"
|
|
>
|
|
<img src="/jukebox/static/spotapi1.gif" />
|
|
<p>
|
|
In the app go to edit-settings, set the redirect URI to this link
|
|
</p>
|
|
<q-card
|
|
class="cursor-pointer word-break"
|
|
@click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')"
|
|
>
|
|
<q-card-section style="word-break: break-all">
|
|
{% raw %}{{ locationcb }}{{ jukeboxDialog.data.sp_id }}{% endraw
|
|
%}
|
|
</q-card-section>
|
|
<q-tooltip> Click to copy URL </q-tooltip>
|
|
</q-card>
|
|
<br />
|
|
<q-btn
|
|
type="a"
|
|
target="_blank"
|
|
color="primary"
|
|
href="https://developer.spotify.com/dashboard/applications"
|
|
>Open the Spotify Application Settings</q-btn
|
|
>
|
|
<br /><br />
|
|
<p>
|
|
After adding the redirect URI, click the "Authorise access" button
|
|
below.
|
|
</p>
|
|
|
|
<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="primary"
|
|
@click="authAccess"
|
|
>Authorise access</q-btn
|
|
>
|
|
<q-btn v-else color="primary" disable color="primary"
|
|
>Authorise access</q-btn
|
|
>
|
|
</div>
|
|
<div class="col-8">
|
|
<q-btn
|
|
color="primary"
|
|
class="float-right"
|
|
@click="closeFormDialog"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
</q-step>
|
|
|
|
<q-step
|
|
:name="4"
|
|
title="4. Select Device and Playlists"
|
|
icon="queue_music"
|
|
active-color="primary"
|
|
: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="primary"
|
|
@click="createJukebox"
|
|
>Create Jukebox</q-btn
|
|
>
|
|
<q-btn v-else color="primary" disable>Create Jukebox</q-btn>
|
|
</div>
|
|
<div class="col-7">
|
|
<q-btn
|
|
color="primary"
|
|
class="float-right"
|
|
@click="closeFormDialog"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
</q-step>
|
|
</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>
|
|
<script src="/jukebox/static/js/index.js"></script>
|
|
{% endblock %}
|