Migrated settings-window.ejs to new lastfm

This commit is contained in:
Core 2022-06-28 13:38:48 +01:00
parent 462fa30980
commit e032302b5d
No known key found for this signature in database
GPG key ID: FE9BF1B547F8F3C6

View file

@ -994,18 +994,18 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.discordrpc.enabled" switch /> <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.enabled" switch />
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.clientName')}} {{$root.getLz('settings.option.connectivity.discordRPC.clientName')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<select class="md-select" v-model="app.cfg.general.discordrpc.client"> <select class="md-select" v-model="app.cfg.connectivity.discord_rpc.client">
<option value="Cider">{{$root.getLz('app.name')}}</option> <option value="Cider">{{$root.getLz('app.name')}}</option>
<option value="AppleMusic">{{$root.getLz('term.appleMusic')}} <option value="AppleMusic">{{$root.getLz('term.appleMusic')}}
</option> </option>
@ -1014,40 +1014,40 @@
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.clearOnPause')}} {{$root.getLz('settings.option.connectivity.discordRPC.clearOnPause')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.discordrpc.clear_on_pause" switch /> <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch />
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.hideButtons')}} {{$root.getLz('settings.option.connectivity.discordRPC.hideButtons')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.discordrpc.hide_buttons" switch /> <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch />
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.hideTimestamp')}} {{$root.getLz('settings.option.connectivity.discordRPC.hideTimestamp')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.discordrpc.hide_timestamp" switch /> <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch />
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br /> {{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br />
<small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album}, <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album},
@ -1055,12 +1055,12 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="text" v-model="app.cfg.general.discordrpc.details_format" /> <input type="text" v-model="app.cfg.connectivity.discord_rpc.details_format" />
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}} {{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}}
<small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album}, <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album},
@ -1068,12 +1068,12 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="text" v-model="app.cfg.general.discordrpc.state_format" /> <input type="text" v-model="app.cfg.connectivity.discord_rpc.state_format" />
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.reload')}} {{$root.getLz('settings.option.connectivity.discordRPC.reload')}}
</div> </div>
@ -1090,9 +1090,9 @@
{{$root.getLz('settings.option.connectivity.lastfmScrobble')}} {{$root.getLz('settings.option.connectivity.lastfmScrobble')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto" > <div class="md-option-segment md-option-segment_auto" >
<button class="md-btn" id="lfmConnect" ref="lfmConnect" <button class="md-btn" id="lfmConnect" @click="app.cfg.connectivity.lastfm.enabled ? lfmDisconnect() : lfmAuthorize()">
@click="app.LastFMAuthenticate()"> {{$root.getLz(`term.${$root.cfg.connectivity.lastfm.enabled ? "disconnect" : "connect"}`)}}<br>
{{$root.getLz('term.connect')}} <small>{{app.cfg.connectivity.lastfm.enabled ? `${$root.getLz('term.authed')}: ${$root.cfg.connectivity.lastfm.secrets.username}` : '' }}</small>
</button> </button>
</div> </div>
</div> </div>
@ -1108,32 +1108,33 @@
</div> </div>
<div class="md-option-line" v-show="app.cfg.lastfm.enabled"> <div class="md-option-line" v-show="app.cfg.lastfm.enabled">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.lastfmScrobble.nowPlaying')}} {{$root.getLz('settings.option.connectivity.lastfmScrobble.delay')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.lastfm.NowPlaying" switch /> <input type="number" min="50" max="100" v-model="app.cfg.connectivity.lastfm.scrobble_after"/>
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.lastfm.enabled"> <div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
<div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.lastfmScrobble.removeFeatured')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists"
switch />
</label>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.lastfm.enabled">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop')}} {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop')}}
<small>{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop.description')}}</small>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.lastfm.filterLoop" switch /> <input type="checkbox" v-model="app.cfg.connectivity.lastfm.filter_loop" switch/>
</label>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
<div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterTypes')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" @change="filterChange" value="song">{{$root.getLz('term.songs')}}<br>
<input type="checkbox" @change="filterChange" value="musicVideo">{{$root.getLz('term.musicVideos')}}<br>
</label> </label>
</div> </div>
</div> </div>
@ -1421,7 +1422,8 @@
app: this.$root, app: this.$root,
themes: ipcRenderer.sendSync("get-themes"), themes: ipcRenderer.sendSync("get-themes"),
tabIndex: 0, tabIndex: 0,
canChangeHash: false canChangeHash: false,
lastfmConnecting: false
} }
}, watch: { }, watch: {
tabIndex: function (val) { tabIndex: function (val) {
@ -1430,15 +1432,6 @@
} }
} }
}, },
mounted: function () {
if (app.cfg.lastfm.enabled) {
const element = document.getElementById('lfmConnect');
if (element) {
element.innerHTML = `Disconnect\n<p style="font-size: 8px"><i>(Authed: ${app.cfg.lastfm.auth_token})</i></p>`;
element.onclick = app.LastFMDeauthorize;
}
}
},
methods: { methods: {
close() { close() {
this.$root.modals.settings = false this.$root.modals.settings = false
@ -1554,6 +1547,41 @@
}, },
reloadDiscordRPC() { reloadDiscordRPC() {
ipcRenderer.send('reloadRPC') ipcRenderer.send('reloadRPC')
},
lfmDisconnect() {
this.$root.cfg.connectivity.lastfm.enabled = false;
this.$root.cfg.connectivity.lastfm.secrets.username = "";
this.$root.cfg.connectivity.lastfm.secrets.key = "";
ipcRenderer.send('lastfm:disconnect');
},
async lfmAuthorize() {
this.lastfmConnecting = true;
window.open(await ipcRenderer.invoke('lastfm:url'));
app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));
/* Just a timeout for the button */
setTimeout(() => {
if (!this.$root.cfg.connectivity.lastfm.enabled) {
app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
console.warn('[lastfm:authorize] Last.fm authorization timed out.');
this.lastfmConnecting = false;
}
}, 20000);
ipcRenderer.once('lastfm:authenticated', (_e, session) => {
this.$root.cfg.connectivity.lastfm.secrets.username = session.username
this.$root.cfg.connectivity.lastfm.secrets.key = session.key
this.$root.cfg.connectivity.lastfm.enabled = true
this.lastfmConnecting = false;
app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
})
},
filterChange(e) {
this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
},
submitToken() {
const token = document.getElementById('lfmToken').value;
ipcRenderer.send('lastfm:auth', token);
} }
} }
}) })