playlist / library search in remote
This commit is contained in:
vapormusic
parent
db8ece0b2a
commit
a91c8539c3
4 changed files with 564 additions and 479 deletions
|
|
@ -186,7 +186,7 @@ export class wsapi {
|
|||
response.message = "Previous";
|
||||
break;
|
||||
case "musickit-api":
|
||||
this._win.webContents.executeJavaScript(`wsapi.musickitApi(\`${data.method}\`, \`${data.id}\`, ${JSON.stringify(data.params)})`);
|
||||
this._win.webContents.executeJavaScript(`wsapi.musickitApi(\`${data.method}\`, \`${data.id}\`, ${JSON.stringify(data.params)} , ${data.library})`);
|
||||
break;
|
||||
case "musickit-library-api":
|
||||
break;
|
||||
|
|
@ -218,7 +218,7 @@ export class wsapi {
|
|||
this._win.hide()
|
||||
break;
|
||||
case "play-mediaitem":
|
||||
this._win.webContents.executeJavaScript(`wsapi.playTrackById(${data.id}, \`${data.kind}\`)`);
|
||||
this._win.webContents.executeJavaScript(`wsapi.playTrackById("${data.id}", \`${data.kind}\`)`);
|
||||
response.message = "Playing track";
|
||||
break;
|
||||
case "get-status":
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ const wsapi = {
|
|||
cache: {playParams: {id: 0}, status: null, remainingTime: 0},
|
||||
playbackCache: {status: null, time: Date.now()},
|
||||
search(term, limit) {
|
||||
MusicKit.getInstance().api.search(term, {limit: limit, types: 'songs,artists,albums'}).then((results)=>{
|
||||
MusicKit.getInstance().api.search(term, {limit: limit, types: 'songs,artists,albums,playlists'}).then((results)=>{
|
||||
ipcRenderer.send('wsapi-returnSearch', JSON.stringify(results))
|
||||
})
|
||||
},
|
||||
searchLibrary(term, limit) {
|
||||
MusicKit.getInstance().api.library.search(term, {limit: limit, types: 'library-songs,library-artists,library-albums'}).then((results)=>{
|
||||
MusicKit.getInstance().api.library.search(term, {limit: limit, types: 'library-songs,library-artists,library-albums,library-playlists'}).then((results)=>{
|
||||
ipcRenderer.send('wsapi-returnSearchLibrary', JSON.stringify(results))
|
||||
})
|
||||
},
|
||||
|
|
@ -47,10 +47,16 @@ const wsapi = {
|
|||
returnDynamic(data, type) {
|
||||
ipcRenderer.send('wsapi-returnDynamic', JSON.stringify(data), type)
|
||||
},
|
||||
musickitApi(method, id, params) {
|
||||
musickitApi(method, id, params, library = false) {
|
||||
if (library) {
|
||||
MusicKit.getInstance().api.library[method](id, params).then((results)=>{
|
||||
ipcRenderer.send('wsapi-returnMusicKitApi', JSON.stringify(results), method)
|
||||
})
|
||||
} else {
|
||||
MusicKit.getInstance().api[method](id, params).then((results)=>{
|
||||
ipcRenderer.send('wsapi-returnMusicKitApi', JSON.stringify(results), method)
|
||||
})
|
||||
}
|
||||
},
|
||||
getPlaybackState () {
|
||||
ipcRenderer.send('wsapi-updatePlaybackState', MusicKitInterop.getAttributes());
|
||||
|
|
|
|||
|
|
@ -218,6 +218,9 @@
|
|||
<button class="search-tab" @click="search.tab = 'artists'"
|
||||
:class="searchTabClass('artists')">Artists
|
||||
</button>
|
||||
<button class="search-tab" @click="search.tab = 'playlists'"
|
||||
:class="searchTabClass('playlists')">Playlists
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-body-container">
|
||||
|
|
@ -306,7 +309,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-if="search.results['library-albums'] != null">
|
||||
<div class="list-entry" v-for="album in search.results['library-albums'].data">
|
||||
<div class="list-entry" v-for="album in search.results['library-albums'].data"
|
||||
@click="showAlbum(album.id, true)">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="album.attributes.artwork"
|
||||
|
|
@ -328,10 +332,12 @@
|
|||
<template v-if="canShowSearchTab('artists')">
|
||||
<div class="list-entry-header">Artists</div>
|
||||
<template v-if="search.results.artists != null">
|
||||
<div class="list-entry" @click="showArtist(artist.id)" v-for="artist in search.results.artists.data">
|
||||
<div class="list-entry" @click="showArtist(artist.id)"
|
||||
v-for="artist in search.results.artists.data">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image artist" v-if="artist.attributes.artwork"
|
||||
<div class="list-entry-image artist"
|
||||
v-if="artist.attributes.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -347,10 +353,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-if="search.results['library-artists'] != null">
|
||||
<div class="list-entry" v-for="artist in search.results['library-artists'].data">
|
||||
<div class="list-entry"
|
||||
v-for="artist in search.results['library-artists'].data">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image artist" v-if="artist.attributes.artwork"
|
||||
<div class="list-entry-image artist"
|
||||
v-if="artist.attributes.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -366,6 +374,52 @@
|
|||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="canShowSearchTab('playlists')">
|
||||
<div class="list-entry-header">Playlists</div>
|
||||
<template v-if="search.results.playlists != null">
|
||||
<div class="list-entry" v-for="playlist in search.results.playlists.data"
|
||||
@click="showPlaylist(playlist.attributes.playParams.id)">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="playlist.attributes.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(playlist.attributes.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ playlist.attributes.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ playlist.attributes.artistName }}
|
||||
<!-- <span class="lossless-badge" v-if="album.audioTraits.includes('lossless')">Lossless</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="search.results['library-playlists'] != null">
|
||||
<div class="list-entry" v-for="playlist in search.results['library-playlists'].data"
|
||||
@click="showPlaylist(playlist.attributes.playParams.id, true)"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="playlist.attributes.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(playlist.attributes.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ playlist.attributes.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ playlist.attributes.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
|
@ -374,10 +428,11 @@
|
|||
</transition>
|
||||
<!-- Track Select Actions -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel context-menu" style="overflow-y:auto;" v-if="search.trackSelect">
|
||||
<div class="md-container md-container_panel context-menu" style="overflow-y:auto;"
|
||||
v-if="search.trackSelect">
|
||||
<div class="md-body context-menu-body">
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playMediaItemById(search.selected.attributes.playParams.id);clearSelectedTrack()">
|
||||
@click="playMediaItemById(search.selected.attributes.playParams?.id ?? search.selected.id );clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center" v-if="search.selected.attributes.artwork"
|
||||
style="display:flex;align-items: center;">
|
||||
|
|
@ -401,7 +456,7 @@
|
|||
</div>
|
||||
<div class="md-body context-menu-body" style="height: auto;">
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
||||
@click="playMediaItemById(search.selected.attributes.playParams?.id ?? search.selected.id );clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play
|
||||
|
|
@ -412,7 +467,7 @@
|
|||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playNext('song', search.selected.id);clearSelectedTrack()">
|
||||
@click="playNext('song',search.selected.attributes.playParams?.id ?? search.selected.id );clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play Next
|
||||
|
|
@ -423,7 +478,7 @@
|
|||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playLater('song', search.selected.id);clearSelectedTrack()">
|
||||
@click="playLater('song', search.selected.attributes.playParams?.id ?? search.selected.id );clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play Later
|
||||
|
|
@ -527,22 +582,22 @@
|
|||
<div class="md-body artist-body">
|
||||
<h2>Songs</h2>
|
||||
<div class="song-scroller-horizontal">
|
||||
<button v-for="song in artistPage.data.relationships['songs'].data" class="song-placeholder"
|
||||
@click="trackSelect(song)">
|
||||
<button v-for="song in artistPage.data.relationships['songs'].data"
|
||||
class="song-placeholder" @click="trackSelect(song)">
|
||||
{{ song.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
<h2>Albums</h2>
|
||||
<div class="mediaitem-scroller-horizontal">
|
||||
<button v-for="album in artistPage.data.relationships['albums'].data" class="album-placeholder"
|
||||
@click="showAlbum(album.attributes.playParams.id)">
|
||||
<button v-for="album in artistPage.data.relationships['albums'].data"
|
||||
class="album-placeholder" @click="showAlbum(album.attributes.playParams.id)">
|
||||
{{ album.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
<h2>Playlists</h2>
|
||||
<div class="mediaitem-scroller-horizontal">
|
||||
<button v-for="playlist in artistPage.data.relationships['playlists'].data"
|
||||
class="album-placeholder">
|
||||
@click="showPlaylist(playlist.attributes.playParams.id)" class="album-placeholder">
|
||||
{{ playlist.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -573,8 +628,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="md-header" style="text-align: right;padding: 5px 16px;">
|
||||
<button class="md-btn playback-button--small autoplay" v-if="!player.currentMediaItem.autoplayEnabled"
|
||||
@click="setAutoplay(true)"></button>
|
||||
<button class="md-btn playback-button--small autoplay"
|
||||
v-if="!player.currentMediaItem.autoplayEnabled" @click="setAutoplay(true)"></button>
|
||||
<button class="md-btn playback-button--small autoplay activeColor" v-else
|
||||
@click="setAutoplay(false)"></button>
|
||||
</div>
|
||||
|
|
@ -583,7 +638,8 @@
|
|||
</div>
|
||||
<div class="md-body queue-body" style="overflow-y:auto;" id="list-queue" v-else>
|
||||
<draggable v-model="queue.temp" handle=".handle" filter=".passed" @change="queueMove">
|
||||
<template v-for="(song, position) in queue.temp" v-if="position > player.queue['_position']">
|
||||
<template v-for="(song, position) in queue.temp"
|
||||
v-if="position > player.queue['_position']">
|
||||
<div class="list-entry" :class="getQueuePositionClass(position)">
|
||||
<div class="row" style="width:100%;">
|
||||
<div class="col-auto">
|
||||
|
|
@ -691,31 +747,38 @@
|
|||
<div class="albumpage-album-name">
|
||||
{{ albumPage.data.attributes["name"] }}
|
||||
</div>
|
||||
<div class="albumpage-artist-name" @click="showArtist(albumPage.data['artists'][0]['id'])">
|
||||
<template v-if="albumPage.data.attributes['artists']">
|
||||
<div class="albumpage-artist-name"
|
||||
@click="showArtist(albumPage.data.attributes['artists'][0]['id'])">
|
||||
{{ albumPage.data.attributes["artistName"] }}
|
||||
</div>
|
||||
</template>
|
||||
<template>
|
||||
<div class="albumpage-misc-info">
|
||||
{{ albumPage.data.attributes.genreNames[0] }} ∙ {{ new
|
||||
Date(albumPage.data.attributes.releaseDate).getFullYear() }}
|
||||
{{ albumPage.data.attributes.genreNames ? albumPage.data.attributes.genreNames[0] :
|
||||
'' }} ∙ {{
|
||||
albumPage.data.attributes.releaseDate ? new
|
||||
Date(albumPage.data.attributes.releaseDate).getFullYear() : '' }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<div class="col">
|
||||
<button class="wr-btn" @click="playAlbum(albumPage.data.attributes.id, false)"
|
||||
<button class="wr-btn" @click="playCustom(albumPage.data.attributes.playParams.id, albumPage.data.attributes.playParams.kind, false)"
|
||||
style="width:100%;">Play
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="wr-btn" style="width:100%;"
|
||||
@click="playAlbum(albumPage.data.attributes.id, true)">Shuffle
|
||||
@click="playCustom(albumPage.data.attributes.playParams.id, albumPage.data.attributes.playParams.kind, true)">Shuffle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="albumpage-album-notes" v-if="albumPage.data.attributes['editorialNotes']">
|
||||
<div class="notes-preview" v-html="albumPage.data.attributes['editorialNotes']['standard']">
|
||||
<div class="notes-preview"
|
||||
v-html="albumPage.data.attributes['editorialNotes']['standard']">
|
||||
</div>
|
||||
<button @click="albumPage.editorsNotes = true" class="notes-more">More</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="md-body artist-body">
|
||||
<div class="list-entry-header">Tracks</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
var socket;
|
||||
|
||||
Vue.component('footer-player', {
|
||||
|
|
@ -56,13 +57,14 @@ var app = new Vue({
|
|||
searchScroll(e) {
|
||||
this.search.lastY = e.target.scrollTop;
|
||||
},
|
||||
musicKitAPI(method, id, params) {
|
||||
musicKitAPI(method, id, params, library = false) {
|
||||
socket.send(
|
||||
JSON.stringify({
|
||||
action: "musickit-api",
|
||||
method: method,
|
||||
id: id,
|
||||
params: params
|
||||
params: params,
|
||||
library : library
|
||||
})
|
||||
)
|
||||
},
|
||||
|
|
@ -361,15 +363,20 @@ var app = new Vue({
|
|||
showArtistByName(name) {
|
||||
this.musicKitAPI("search", name, { types: "artists" })
|
||||
},
|
||||
showAlbum(id) {
|
||||
showAlbum(id,library = false) {
|
||||
this.search.lastPage = "album"
|
||||
this.screen = "album-page"
|
||||
this.musicKitAPI("album", id, {})
|
||||
this.musicKitAPI("album", id, {}, library)
|
||||
},
|
||||
showArtist(id) {
|
||||
showPlaylist(id, library = false) {
|
||||
this.search.lastPage = "album"
|
||||
this.screen = "album-page"
|
||||
this.musicKitAPI("playlist", id, {}, library)
|
||||
},
|
||||
showArtist(id, library = false) {
|
||||
this.search.lastPage = "artist"
|
||||
this.screen = "artist-page"
|
||||
this.musicKitAPI("artist", id, { include: "songs,playlists,albums" })
|
||||
this.musicKitAPI("artist", id, { include: "songs,playlists,albums" }, library)
|
||||
},
|
||||
showQueue() {
|
||||
this.queue.temp = this.player["queue"]["_queueItems"]
|
||||
|
|
@ -425,6 +432,14 @@ var app = new Vue({
|
|||
}
|
||||
this.playMediaItemById(id, 'album');
|
||||
},
|
||||
playCustom(id, kind, shuffle = false) {
|
||||
if (shuffle) {
|
||||
this.setShuffle(true)
|
||||
} else {
|
||||
this.setShuffle(false)
|
||||
}
|
||||
this.playMediaItemById(id, kind);
|
||||
},
|
||||
getLyrics() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "get-lyrics",
|
||||
|
|
@ -512,6 +527,7 @@ var app = new Vue({
|
|||
case "musickitapi.search":
|
||||
self.showArtist(response.data["artists"][0]["id"]);
|
||||
break;
|
||||
case "musickitapi.playlist":
|
||||
case "musickitapi.album":
|
||||
if (self.screen == "album-page") {
|
||||
self.albumPage.data = response.data
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue