Added basis for library-songs, made search a component, changed search layout, added new app.mkapi
Added basis for library-songs, made search a component, changed search layout, added new app.mkapi
This commit is contained in:
booploops
parent
9e8f972e93
commit
a5885cf31b
5 changed files with 224 additions and 50 deletions
|
|
@ -218,9 +218,9 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
|
|||
--bs-gutter-y: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(-1 * var(--bs-gutter-y));
|
||||
margin-right: calc(-0.5 * var(--bs-gutter-x));
|
||||
margin-left: calc(-0.5 * var(--bs-gutter-x));
|
||||
/*margin-top: calc(-1 * var(--bs-gutter-y));*/
|
||||
/*margin-right: calc(-0.5 * var(--bs-gutter-x));*/
|
||||
/*margin-left: calc(-0.5 * var(--bs-gutter-x));*/
|
||||
}
|
||||
|
||||
.row > * {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<link rel="manifest" href="./manifest.json?v=2">
|
||||
</head>
|
||||
|
||||
<body oncontextmenu="return false;">
|
||||
<body oncontextmenu="return false;" loading="1">
|
||||
<div id="app">
|
||||
<div id="app-main">
|
||||
<div class="app-chrome">
|
||||
|
|
@ -219,30 +219,24 @@
|
|||
<!-- Search -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'search'">
|
||||
<cider-search :search="search"></cider-search>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Songs -->
|
||||
<transition name="wpfade" v-on:enter="getLibrarySongs()">
|
||||
<template v-if="page == 'library-songs'">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">{{ search.term }}</h1>
|
||||
<template v-if="search.results['meta']">
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Artists</h3>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.artists.data"></mediaitem-square>
|
||||
</template>
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Songs</h3>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in search.results.songs.data"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Albums</h3>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.albums.data"></mediaitem-square>
|
||||
</template>
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Playlists</h3>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.playlists.data"></mediaitem-square>
|
||||
</template>
|
||||
</template>
|
||||
<h1 class="header-text">Songs</h1>
|
||||
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search"
|
||||
style="width:100%;"
|
||||
spellcheck="false"
|
||||
placeholder="Search..."
|
||||
class="search-input">
|
||||
</div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in library.songs.listing"></mediaitem-list-item>
|
||||
</div>
|
||||
</template>
|
||||
</transition>
|
||||
|
|
@ -255,6 +249,76 @@
|
|||
<div class="bg-artwork"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/x-template" id="cider-search">
|
||||
<div class="content-inner">
|
||||
<div class="row">
|
||||
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
|
||||
<template >
|
||||
<h3>Top Result</h3>
|
||||
<mediaitem-square :item="getTopResult()"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col" v-if="search.results.songs">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Songs</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.songs.data.length == search.limit">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in search.results.songs.data"></mediaitem-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="search.results['meta']">
|
||||
<template v-if="search.results.albums">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Albums</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.albums.data.length == search.limit">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.albums.data"></mediaitem-square>
|
||||
</template>
|
||||
<template v-if="search.results.artists">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Artists</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.artists.data.length == search.limit">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.artists.data"></mediaitem-square>
|
||||
</template>
|
||||
<template v-if="search.results.playlists">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Playlists</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.playlists.data.length == search.limit">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.playlists.data"></mediaitem-square>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="am-musiccovershelf">
|
||||
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<button class="app-sidebar-item"
|
||||
:class="$parent.getSidebarItemClass(page)"
|
||||
|
|
@ -264,11 +328,11 @@
|
|||
|
||||
<script type="text/x-template" id="mediaitem-list-item">
|
||||
<template>
|
||||
<div @click="$parent.playMediaItemById(item.id, item.type)"
|
||||
<div @click="app.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-list-item">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 55)}
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 34)}
|
||||
"></div>
|
||||
<div class="info-rect">
|
||||
<div class="title text-overflow-elipsis">
|
||||
|
|
@ -277,6 +341,9 @@
|
|||
<div class="subtitle text-overflow-elipsis">
|
||||
<template v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
<template v-if="item.attributes.albumName">
|
||||
- {{ item.attributes.albumName }}
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -289,11 +356,11 @@
|
|||
|
||||
<script type="text/x-template" id="mediaitem-hrect">
|
||||
<template>
|
||||
<div @click="$parent.playMediaItemById(item.id, item.type)"
|
||||
<div @click="app.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-hrect">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 70)}
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 70)}
|
||||
"></div>
|
||||
<div class="info-rect">
|
||||
<div class="title text-overflow-elipsis">
|
||||
|
|
@ -312,11 +379,11 @@
|
|||
|
||||
<script type="text/x-template" id="mediaitem-square">
|
||||
<template>
|
||||
<div @click="$parent.playMediaItemById(item.id, item.type)"
|
||||
<div @click="app.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-square">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,20 @@ Vue.component('mediaitem-list-item', {
|
|||
methods: {}
|
||||
});
|
||||
|
||||
Vue.component('cider-search', {
|
||||
template: "#cider-search",
|
||||
props: ['search'],
|
||||
methods: {
|
||||
getTopResult() {
|
||||
if (this.search.results["meta"]) {
|
||||
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const MusicKitTools = {
|
||||
getHeader() {
|
||||
return new Headers({
|
||||
|
|
@ -41,7 +55,8 @@ const app = new Vue({
|
|||
quickPlayQuery: "",
|
||||
search: {
|
||||
term: "",
|
||||
results: {}
|
||||
results: {},
|
||||
limit: 10
|
||||
},
|
||||
playerLCD: {
|
||||
playbackDuration: 0
|
||||
|
|
@ -49,6 +64,12 @@ const app = new Vue({
|
|||
radio: {
|
||||
personal: []
|
||||
},
|
||||
library: {
|
||||
songs: {
|
||||
listing: [],
|
||||
meta: {total: 0}
|
||||
}
|
||||
},
|
||||
playlists: {
|
||||
listing: [],
|
||||
details: {}
|
||||
|
|
@ -69,6 +90,7 @@ const app = new Vue({
|
|||
this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
|
||||
self.playlists.listing = res.data
|
||||
})
|
||||
document.body.removeAttribute("loading")
|
||||
},
|
||||
getSidebarItemClass(page) {
|
||||
if (this.page == page) {
|
||||
|
|
@ -77,12 +99,78 @@ const app = new Vue({
|
|||
return []
|
||||
}
|
||||
},
|
||||
async getRadioStations() {
|
||||
this.radio.personal = await this.mk.api.recentRadioStations("",
|
||||
{
|
||||
"platform": "web",
|
||||
"art[url]": "f"
|
||||
});
|
||||
async mkapi(method, library = false, term, params = {}, params2 = {}, attempts = 0) {
|
||||
if (attempts > 3) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (library) {
|
||||
return await this.mk.api.library[method](term, params, params2)
|
||||
} else {
|
||||
return await this.mk.api[method](term, params, params2)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
return await this.mkapi(method, library, term, params, params2, attempts + 1)
|
||||
}
|
||||
},
|
||||
async getLibrarySongs() {
|
||||
var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
|
||||
this.library.songs.listing = response.data
|
||||
this.library.songs.meta = response.meta
|
||||
},
|
||||
async getListenNow(attempt = 0) {
|
||||
if (attempt > 3) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await this.mk.api.personalRecommendations("",
|
||||
{
|
||||
name: "listen-now",
|
||||
with: "friendsMix,library,social",
|
||||
"art[social-profiles:url]": "c",
|
||||
"art[url]": "c,f",
|
||||
"omit[resource]": "autos",
|
||||
"relate[editorial-items]": "contents",
|
||||
extend: ["editorialCard", "editorialVideo"],
|
||||
"extend[albums]": ["artistUrl"],
|
||||
"extend[library-albums]": ["artistUrl"],
|
||||
"extend[playlists]": ["artistNames", "editorialArtwork"],
|
||||
"extend[library-playlists]": ["artistNames", "editorialArtwork"],
|
||||
"extend[social-profiles]": "topGenreNames",
|
||||
"include[albums]": "artists",
|
||||
"include[songs]": "artists",
|
||||
"include[music-videos]": "artists",
|
||||
"fields[albums]": ["artistName", "artistUrl", "artwork", "contentRating", "editorialArtwork", "editorialVideo", "name", "playParams", "releaseDate", "url"],
|
||||
"fields[artists]": ["name", "url"],
|
||||
"extend[stations]": ["airDate", "supportsAirTimeUpdates"],
|
||||
"meta[stations]": "inflectionPoints",
|
||||
types: "artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells",
|
||||
platform: "web"
|
||||
},
|
||||
{
|
||||
includeResponseMeta: !0,
|
||||
reload: !0
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
await this.getListenNow(attempt + 1)
|
||||
}
|
||||
},
|
||||
async getRadioStations(attempt = 0) {
|
||||
if (attempt > 3) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
this.radio.personal = await this.mkapi("recentRadioStations", false, "",
|
||||
{
|
||||
"platform": "web",
|
||||
"art[url]": "f"
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
this.getRadioStations(attempt + 1)
|
||||
}
|
||||
},
|
||||
unauthorize() {
|
||||
this.mk.unauthorize()
|
||||
|
|
@ -100,7 +188,7 @@ const app = new Vue({
|
|||
this.mk.api.search(this.search.term,
|
||||
{
|
||||
types: "songs,artists,albums,playlists",
|
||||
limit: 32
|
||||
limit: self.search.limit
|
||||
}).then(function (results) {
|
||||
self.search.results = results
|
||||
})
|
||||
|
|
|
|||
|
|
@ -30,6 +30,12 @@ body {
|
|||
|
||||
body {
|
||||
background: transparent;
|
||||
transition: opacity .10s var(--appleEase);
|
||||
}
|
||||
|
||||
body[loading] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -167,6 +173,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
top: 0;
|
||||
left: 0;
|
||||
padding: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1224,7 +1231,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
/* mediaitem-list-item */
|
||||
.cd-mediaitem-list-item {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 60px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
|
|
@ -1240,8 +1247,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
.cd-mediaitem-list-item .artwork {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
|
|
@ -1265,8 +1272,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
.cd-mediaitem-list-item .subtitle {
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .content-rating {
|
||||
|
|
@ -1377,6 +1385,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
|
||||
.cd-btn-seeall {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
color: var(--keyColor);
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.cd-btn-seeall:hover {
|
||||
cursor: pointer;
|
||||
background: rgb(200 200 200 / 10%)
|
||||
}
|
||||
|
||||
/* Cider */
|
||||
|
||||
/* Transitions */
|
||||
|
|
|
|||
|
|
@ -91,10 +91,6 @@ await app.mk.api.library.albums({limit: 50}).then((data)=>{
|
|||
app.mk.api.recommendations("",{extend: "editorialArtwork,artistUrl"})
|
||||
|
||||
// Library with library length
|
||||
/** This will return 100 tracks in an array, however
|
||||
* the library total length is not returned but present in the network traffic response under
|
||||
* meta.total. We need a way to get the full response from the network traffic.
|
||||
*/
|
||||
await app.mk.api.library.songs({limit: 100}).then((data)=>{
|
||||
await app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((data)=>{
|
||||
console.log(data)
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue