initial navigation
This commit is contained in:
parent
4e7e28ef07
commit
86fdcb4f98
3 changed files with 97 additions and 13 deletions
|
@ -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() {
|
||||
|
|
|
@ -2195,4 +2195,8 @@ div#captions {
|
|||
|
||||
[v-cloak] {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
.item-navigate:hover {
|
||||
text-decoration: underline;
|
||||
}
|
|
@ -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"> - </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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue