initial navigation

This commit is contained in:
vapormusic 2021-12-09 14:54:39 +07:00
parent 4e7e28ef07
commit 86fdcb4f98
3 changed files with 97 additions and 13 deletions

View file

@ -140,6 +140,7 @@ const app = new Vue({
start: 0,
end: 0
},
tmpVar: [],
chrome: {
hideUserInfo: false,
artworkReady: false,
@ -265,12 +266,19 @@ const app = new Vue({
document.body.removeAttribute("loading")
},
async getPlaylistFromID(id) {
const params = {include: "tracks",
l: "en-gb",
platform: "web",
"include[library-playlists]": "catalog,tracks",
"fields[playlists]": "curatorName,playlistType,name,artwork,url",
"include[library-songs]": "catalog,artists,albums",
"fields[songs]": "artistUrl,albumUrl"}
try {
this.showingPlaylist = await app.mk.api.library.playlist(id)
this.showingPlaylist = await app.mk.api.library.playlist(id,params)
} catch (e) {
console.log(e);
try {
this.showingPlaylist = await app.mk.api.playlist(id)
this.showingPlaylist = await app.mk.api.playlist(id,params)
} catch (err) {
console.log(err)
}
@ -282,7 +290,7 @@ const app = new Vue({
"views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
"extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
"extend[playlists]": "trackCount",
"omit[resource:songs]": "relationships",
"include[songs]": "albums",
"fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount",
"limit[artists:top-songs]": 20,
"art[url]": "f"
@ -338,6 +346,63 @@ const app = new Vue({
}
document.querySelector("#app-content").scrollTop = 0
},
async searchAndNavigate(item,target){
app.tmpVar = item;
switch(target){
case "artist":
let artistId = '';
try {
if (item.relationships.artists && item.relationships.artists.data.length > 0) {
if (item.relationships.artists.data[0].type === "artists") { artistId = item.relationships.artists.data[0].id }
} else {
const url = (item.relationships.catalog.data[0].attributes.artistUrl);
artistId = (url).substring(url.lastIndexOf('/') + 1)
if (artistId.includes('viewCollaboration')) { artistId = artistId.substring(artistId.lastIndexOf('ids=') + 4, artistId.lastIndexOf('-')) }
}
}
catch (_) { }
if (artistId == "") {
let artistQuery = await app.mk.api.search(item.attributes.artistName, { limit: 1, types: 'artists' })
try {
if (artistQuery.artists.data.length > 0) {
artistId = artistQuery.artists.data[0].id;
console.log(artistId)
}
}
catch (e) {console.log(e)}
}
console.log(artistId);
if (artistId != "")
app.getArtistFromID(artistId);
break;
case "album":
let albumId = '';
try {
if (item.relationships.albums && item.relationships.artists.albums.length > 0) {
if (item.relationships.albums.data[0].type === "album") { albumId = item.relationships.albums.data[0].id }
}
}
catch (_) { }
if (albumId == "") {
let albumQuery = await app.mk.api.search(item.attributes.albumName, { limit: 1, types: 'albums' })
try {
if (albumQuery.albums.data.length > 0) {
albumId = albumQuery.albums.data[0].id;
console.log(albumId)
}
}
catch (e) {console.log(e)}
}
console.log(albumId);
if (albumId != "")
{
app.getTypeFromID("album",albumId, false);
app.page = "album_" + albumId;}
break;
}
},
pushNavigationEvent(item) {
let self = this
@ -611,13 +676,21 @@ const app = new Vue({
this.library.downloadNotification.message = "Updating library songs..."
function downloadChunk() {
const params = {"include[library-songs]": "artists,albums",
"fields[artists]":"name,url,id",
"fields[albums]":"name,url,id",
l: "en-gb",
platform: "web",
"fields[songs]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url",
limit: 100,
}
self.library.songs.downloadState = 1
if (downloaded == null) {
app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((response) => {
app.mk.api.library.songs("", params, {includeResponseMeta: !0}).then((response) => {
processChunk(response)
})
} else {
downloaded.next("", {limit: 100}, {includeResponseMeta: !0}).then((response) => {
downloaded.next("", params, {includeResponseMeta: !0}).then((response) => {
processChunk(response)
})
}
@ -1193,7 +1266,7 @@ const app = new Vue({
"include[editorial-items]": "contents",
"include[albums]": "artists",
"include[artists]": "artists",
"include[songs]": "artists",
"include[songs]": "artists,albums",
"include[music-videos]": "artists",
"extend": "artistUrl",
"fields[artists]": "url,name,artwork,hero",
@ -1390,7 +1463,9 @@ document.addEventListener('musickitloaded', function () {
const request = new XMLHttpRequest();
request.addEventListener("load", initMusicKit);
request.open("GET", "https://api.cider.sh/");
request.send();
request.timeout = 1000;
request.send();
});
function refreshFocus() {

View file

@ -2195,4 +2195,8 @@ div#captions {
[v-cloak] {
display: none !important
}
.item-navigate:hover {
text-decoration: underline;
}

View file

@ -7,21 +7,26 @@
<button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button>
<button v-else>❤️</button>
</div>
<div class="artwork" v-if="showArtwork == true">
<div class="artwork" v-if="showArtwork == true" @click="playTrack()">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="34"
:type="item.type"></mediaitem-artwork>
</div>
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @click="playTrack()">
<div class="title text-overflow-elipsis">
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @click.self="playTrack()">
<div class="title text-overflow-elipsis" @click.self="playTrack()">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis">
<template v-if="item.attributes.artistName">
<div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
<template v-if="item.attributes.artistName" >
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
{{ item.attributes.artistName }}
</div>
<template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template>
<template v-if="item.attributes.albumName">
- {{ item.attributes.albumName }}
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
{{ item.attributes.albumName }}
</div>
</template>
</template>
</div>