okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

playlist / library search in remote

Browse source
This commit is contained in:
vapormusic 2022-01-22 21:10:52 +07:00
parent db8ece0b2a
commit a91c8539c3
4 changed files with 564 additions and 479 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/main/base/wsapi.ts
View file

@ -186,7 +186,7 @@ export class wsapi {
response.message = "Previous"; response.message = "Previous";
break; break;
case "musickit-api": 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; break;
case "musickit-library-api": case "musickit-library-api":
break; break;
@ -218,7 +218,7 @@ export class wsapi {
this._win.hide() this._win.hide()
break; break;
case "play-mediaitem": 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"; response.message = "Playing track";
break; break;
case "get-status": case "get-status":

12
src/renderer/js/WSAPI_Interop.js
View file

@ -2,12 +2,12 @@ const wsapi = {
cache: {playParams: {id: 0}, status: null, remainingTime: 0}, cache: {playParams: {id: 0}, status: null, remainingTime: 0},
playbackCache: {status: null, time: Date.now()}, playbackCache: {status: null, time: Date.now()},
search(term, limit) { 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)) ipcRenderer.send('wsapi-returnSearch', JSON.stringify(results))
}) })
}, },
searchLibrary(term, limit) { 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)) ipcRenderer.send('wsapi-returnSearchLibrary', JSON.stringify(results))
}) })
}, },
@ -47,10 +47,16 @@ const wsapi = {
returnDynamic(data, type) { returnDynamic(data, type) {
ipcRenderer.send('wsapi-returnDynamic', JSON.stringify(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)=>{ MusicKit.getInstance().api[method](id, params).then((results)=>{
ipcRenderer.send('wsapi-returnMusicKitApi', JSON.stringify(results), method) ipcRenderer.send('wsapi-returnMusicKitApi', JSON.stringify(results), method)
}) })
}
}, },
getPlaybackState () { getPlaybackState () {
ipcRenderer.send('wsapi-updatePlaybackState', MusicKitInterop.getAttributes()); ipcRenderer.send('wsapi-updatePlaybackState', MusicKitInterop.getAttributes());

113
src/web-remote/index.html
View file

@ -218,6 +218,9 @@
<button class="search-tab" @click="search.tab = 'artists'" <button class="search-tab" @click="search.tab = 'artists'"
:class="searchTabClass('artists')">Artists :class="searchTabClass('artists')">Artists
</button> </button>
<button class="search-tab" @click="search.tab = 'playlists'"
:class="searchTabClass('playlists')">Playlists
</button>
</div> </div>
</div> </div>
<div class="search-body-container"> <div class="search-body-container">
@ -306,7 +309,8 @@
</div> </div>
</template> </template>
<template v-if="search.results['library-albums'] != null"> <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="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="album.attributes.artwork" <div class="list-entry-image" v-if="album.attributes.artwork"
@ -328,10 +332,12 @@
<template v-if="canShowSearchTab('artists')"> <template v-if="canShowSearchTab('artists')">
<div class="list-entry-header">Artists</div> <div class="list-entry-header">Artists</div>
<template v-if="search.results.artists != null"> <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="row">
<div class="col-auto flex-center"> <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)}"> :style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
</div> </div>
</div> </div>
@ -347,10 +353,12 @@
</div> </div>
</template> </template>
<template v-if="search.results['library-artists'] != null"> <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="row">
<div class="col-auto flex-center"> <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)}"> :style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
</div> </div>
</div> </div>
@ -366,6 +374,52 @@
</div> </div>
</template> </template>
</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> </div>
</transition> </transition>
</div> </div>
@ -374,10 +428,11 @@
</transition> </transition>
<!-- Track Select Actions --> <!-- Track Select Actions -->
<transition name="wpfade"> <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"> <div class="md-body context-menu-body">
<button class="context-menu-item context-menu-item--left" <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="row">
<div class="col-auto flex-center" v-if="search.selected.attributes.artwork" <div class="col-auto flex-center" v-if="search.selected.attributes.artwork"
style="display:flex;align-items: center;"> style="display:flex;align-items: center;">
@ -401,7 +456,7 @@
</div> </div>
<div class="md-body context-menu-body" style="height: auto;"> <div class="md-body context-menu-body" style="height: auto;">
<button class="context-menu-item context-menu-item--left" <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="row">
<div class="col"> <div class="col">
Play Play
@ -412,7 +467,7 @@
</div> </div>
</button> </button>
<button class="context-menu-item context-menu-item--left" <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="row">
<div class="col"> <div class="col">
Play Next Play Next
@ -423,7 +478,7 @@
</div> </div>
</button> </button>
<button class="context-menu-item context-menu-item--left" <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="row">
<div class="col"> <div class="col">
Play Later Play Later
@ -527,22 +582,22 @@
<div class="md-body artist-body"> <div class="md-body artist-body">
<h2>Songs</h2> <h2>Songs</h2>
<div class="song-scroller-horizontal"> <div class="song-scroller-horizontal">
<button v-for="song in artistPage.data.relationships['songs'].data" class="song-placeholder" <button v-for="song in artistPage.data.relationships['songs'].data"
@click="trackSelect(song)"> class="song-placeholder" @click="trackSelect(song)">
{{ song.attributes.name }} {{ song.attributes.name }}
</button> </button>
</div> </div>
<h2>Albums</h2> <h2>Albums</h2>
<div class="mediaitem-scroller-horizontal"> <div class="mediaitem-scroller-horizontal">
<button v-for="album in artistPage.data.relationships['albums'].data" class="album-placeholder" <button v-for="album in artistPage.data.relationships['albums'].data"
@click="showAlbum(album.attributes.playParams.id)"> class="album-placeholder" @click="showAlbum(album.attributes.playParams.id)">
{{ album.attributes.name }} {{ album.attributes.name }}
</button> </button>
</div> </div>
<h2>Playlists</h2> <h2>Playlists</h2>
<div class="mediaitem-scroller-horizontal"> <div class="mediaitem-scroller-horizontal">
<button v-for="playlist in artistPage.data.relationships['playlists'].data" <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 }} {{ playlist.attributes.name }}
</button> </button>
</div> </div>
@ -573,8 +628,8 @@
</div> </div>
</div> </div>
<div class="md-header" style="text-align: right;padding: 5px 16px;"> <div class="md-header" style="text-align: right;padding: 5px 16px;">
<button class="md-btn playback-button--small autoplay" v-if="!player.currentMediaItem.autoplayEnabled" <button class="md-btn playback-button--small autoplay"
@click="setAutoplay(true)"></button> v-if="!player.currentMediaItem.autoplayEnabled" @click="setAutoplay(true)"></button>
<button class="md-btn playback-button--small autoplay activeColor" v-else <button class="md-btn playback-button--small autoplay activeColor" v-else
@click="setAutoplay(false)"></button> @click="setAutoplay(false)"></button>
</div> </div>
@ -583,7 +638,8 @@
</div> </div>
<div class="md-body queue-body" style="overflow-y:auto;" id="list-queue" v-else> <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"> <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="list-entry" :class="getQueuePositionClass(position)">
<div class="row" style="width:100%;"> <div class="row" style="width:100%;">
<div class="col-auto"> <div class="col-auto">
@ -691,31 +747,38 @@
<div class="albumpage-album-name"> <div class="albumpage-album-name">
{{ albumPage.data.attributes["name"] }} {{ albumPage.data.attributes["name"] }}
</div> </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"] }} {{ albumPage.data.attributes["artistName"] }}
</div> </div>
</template>
<template>
<div class="albumpage-misc-info"> <div class="albumpage-misc-info">
{{ albumPage.data.attributes.genreNames[0] }} ∙ {{ new {{ albumPage.data.attributes.genreNames ? albumPage.data.attributes.genreNames[0] :
Date(albumPage.data.attributes.releaseDate).getFullYear() }} '' }} ∙ {{
albumPage.data.attributes.releaseDate ? new
Date(albumPage.data.attributes.releaseDate).getFullYear() : '' }}
</div> </div>
</template>
<div class="row" style="margin-top: 20px;"> <div class="row" style="margin-top: 20px;">
<div class="col"> <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 style="width:100%;">Play
</button> </button>
</div> </div>
<div class="col"> <div class="col">
<button class="wr-btn" style="width:100%;" <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> </button>
</div> </div>
</div> </div>
<div class="albumpage-album-notes" v-if="albumPage.data.attributes['editorialNotes']"> <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> </div>
<button @click="albumPage.editorsNotes = true" class="notes-more">More</button> <button @click="albumPage.editorsNotes = true" class="notes-more">More</button>
</div> </div>
</div> </div>
<div class="md-body artist-body"> <div class="md-body artist-body">
<div class="list-entry-header">Tracks</div> <div class="list-entry-header">Tracks</div>

28
src/web-remote/index.js
View file

@ -1,3 +1,4 @@
var socket; var socket;
Vue.component('footer-player', { Vue.component('footer-player', {
@ -56,13 +57,14 @@ var app = new Vue({
searchScroll(e) { searchScroll(e) {
this.search.lastY = e.target.scrollTop; this.search.lastY = e.target.scrollTop;
}, },
musicKitAPI(method, id, params) { musicKitAPI(method, id, params, library = false) {
socket.send( socket.send(
JSON.stringify({ JSON.stringify({
action: "musickit-api", action: "musickit-api",
method: method, method: method,
id: id, id: id,
params: params params: params,
library : library
}) })
) )
}, },
@ -361,15 +363,20 @@ var app = new Vue({
showArtistByName(name) { showArtistByName(name) {
this.musicKitAPI("search", name, { types: "artists" }) this.musicKitAPI("search", name, { types: "artists" })
}, },
showAlbum(id) { showAlbum(id,library = false) {
this.search.lastPage = "album" this.search.lastPage = "album"
this.screen = "album-page" 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.search.lastPage = "artist"
this.screen = "artist-page" this.screen = "artist-page"
this.musicKitAPI("artist", id, { include: "songs,playlists,albums" }) this.musicKitAPI("artist", id, { include: "songs,playlists,albums" }, library)
}, },
showQueue() { showQueue() {
this.queue.temp = this.player["queue"]["_queueItems"] this.queue.temp = this.player["queue"]["_queueItems"]
@ -425,6 +432,14 @@ var app = new Vue({
} }
this.playMediaItemById(id, 'album'); this.playMediaItemById(id, 'album');
}, },
playCustom(id, kind, shuffle = false) {
if (shuffle) {
this.setShuffle(true)
} else {
this.setShuffle(false)
}
this.playMediaItemById(id, kind);
},
getLyrics() { getLyrics() {
socket.send(JSON.stringify({ socket.send(JSON.stringify({
action: "get-lyrics", action: "get-lyrics",
@ -512,6 +527,7 @@ var app = new Vue({
case "musickitapi.search": case "musickitapi.search":
self.showArtist(response.data["artists"][0]["id"]); self.showArtist(response.data["artists"][0]["id"]);
break; break;
case "musickitapi.playlist":
case "musickitapi.album": case "musickitapi.album":
if (self.screen == "album-page") { if (self.screen == "album-page") {
self.albumPage.data = response.data self.albumPage.data = response.data