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

Added basis for library-songs, made search a component, changed search layout, added new app.mkapi

Browse source 
Added basis for library-songs, made search a component, changed search layout, added new app.mkapi
This commit is contained in:
booploops 2021-12-03 16:00:20 -08:00
parent 9e8f972e93
commit a5885cf31b
5 changed files with 224 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

6
resources/cider-ui-tests/ameframework.css
View file

@ -218,9 +218,9 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
--bs-gutter-y: 0; --bs-gutter-y: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y)); /*margin-top: calc(-1 * var(--bs-gutter-y));*/
margin-right: calc(-0.5 * var(--bs-gutter-x)); /*margin-right: calc(-0.5 * var(--bs-gutter-x));*/
margin-left: calc(-0.5 * var(--bs-gutter-x)); /*margin-left: calc(-0.5 * var(--bs-gutter-x));*/
} }
.row > * { .row > * {

127
resources/cider-ui-tests/index.html
View file

@ -22,7 +22,7 @@
<link rel="manifest" href="./manifest.json?v=2"> <link rel="manifest" href="./manifest.json?v=2">
</head> </head>
<body oncontextmenu="return false;"> <body oncontextmenu="return false;" loading="1">
<div id="app"> <div id="app">
<div id="app-main"> <div id="app-main">
<div class="app-chrome"> <div class="app-chrome">
@ -219,30 +219,24 @@
<!-- Search --> <!-- Search -->
<transition name="wpfade"> <transition name="wpfade">
<template v-if="page == 'search'"> <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"> <div class="content-inner">
<h1 class="header-text">{{ search.term }}</h1> <h1 class="header-text">Songs</h1>
<template v-if="search.results['meta']"> <div class="search-input-container" style="width:100%;margin: 16px 0px;">
<template v-if="search.results.songs"> <div class="search-input--icon"></div>
<h3>Artists</h3> <input type="search"
<mediaitem-square :item="item" style="width:100%;"
v-for="item in search.results.artists.data"></mediaitem-square> spellcheck="false"
</template> placeholder="Search..."
<template v-if="search.results.songs"> class="search-input">
<h3>Songs</h3> </div>
<mediaitem-list-item :item="item" <mediaitem-list-item :item="item"
v-for="item in search.results.songs.data"></mediaitem-list-item> v-for="item in library.songs.listing"></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>
</div> </div>
</template> </template>
</transition> </transition>
@ -255,6 +249,76 @@
<div class="bg-artwork"></div> <div class="bg-artwork"></div>
</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"> <script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item" <button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" :class="$parent.getSidebarItemClass(page)"
@ -264,11 +328,11 @@
<script type="text/x-template" id="mediaitem-list-item"> <script type="text/x-template" id="mediaitem-list-item">
<template> <template>
<div @click="$parent.playMediaItemById(item.id, item.type)" <div @click="app.playMediaItemById(item.id, item.type)"
class="cd-mediaitem-list-item"> class="cd-mediaitem-list-item">
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :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>
<div class="info-rect"> <div class="info-rect">
<div class="title text-overflow-elipsis"> <div class="title text-overflow-elipsis">
@ -277,6 +341,9 @@
<div class="subtitle text-overflow-elipsis"> <div class="subtitle text-overflow-elipsis">
<template v-if="item.attributes.artistName"> <template v-if="item.attributes.artistName">
{{ item.attributes.artistName }} {{ item.attributes.artistName }}
<template v-if="item.attributes.albumName">
- {{ item.attributes.albumName }}
</template>
</template> </template>
</div> </div>
</div> </div>
@ -289,11 +356,11 @@
<script type="text/x-template" id="mediaitem-hrect"> <script type="text/x-template" id="mediaitem-hrect">
<template> <template>
<div @click="$parent.playMediaItemById(item.id, item.type)" <div @click="app.playMediaItemById(item.id, item.type)"
class="cd-mediaitem-hrect"> class="cd-mediaitem-hrect">
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :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>
<div class="info-rect"> <div class="info-rect">
<div class="title text-overflow-elipsis"> <div class="title text-overflow-elipsis">
@ -312,11 +379,11 @@
<script type="text/x-template" id="mediaitem-square"> <script type="text/x-template" id="mediaitem-square">
<template> <template>
<div @click="$parent.playMediaItemById(item.id, item.type)" <div @click="app.playMediaItemById(item.id, item.type)"
class="cd-mediaitem-square"> class="cd-mediaitem-square">
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :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"> <div class="title text-overflow-elipsis">
{{ item.attributes.name }} {{ item.attributes.name }}
</div> </div>

104
resources/cider-ui-tests/index.js
View file

@ -22,6 +22,20 @@ Vue.component('mediaitem-list-item', {
methods: {} 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 = { const MusicKitTools = {
getHeader() { getHeader() {
return new Headers({ return new Headers({
@ -41,7 +55,8 @@ const app = new Vue({
quickPlayQuery: "", quickPlayQuery: "",
search: { search: {
term: "", term: "",
results: {} results: {},
limit: 10
}, },
playerLCD: { playerLCD: {
playbackDuration: 0 playbackDuration: 0
@ -49,6 +64,12 @@ const app = new Vue({
radio: { radio: {
personal: [] personal: []
}, },
library: {
songs: {
listing: [],
meta: {total: 0}
}
},
playlists: { playlists: {
listing: [], listing: [],
details: {} details: {}
@ -69,6 +90,7 @@ const app = new Vue({
this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => { this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
self.playlists.listing = res.data self.playlists.listing = res.data
}) })
document.body.removeAttribute("loading")
}, },
getSidebarItemClass(page) { getSidebarItemClass(page) {
if (this.page == page) { if (this.page == page) {
@ -77,12 +99,78 @@ const app = new Vue({
return [] return []
} }
}, },
async getRadioStations() { async mkapi(method, library = false, term, params = {}, params2 = {}, attempts = 0) {
this.radio.personal = await this.mk.api.recentRadioStations("", if (attempts > 3) {
{ return
"platform": "web", }
"art[url]": "f" 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() { unauthorize() {
this.mk.unauthorize() this.mk.unauthorize()
@ -100,7 +188,7 @@ const app = new Vue({
this.mk.api.search(this.search.term, this.mk.api.search(this.search.term,
{ {
types: "songs,artists,albums,playlists", types: "songs,artists,albums,playlists",
limit: 32 limit: self.search.limit
}).then(function (results) { }).then(function (results) {
self.search.results = results self.search.results = results
}) })

31
resources/cider-ui-tests/style.css
View file

@ -30,6 +30,12 @@ body {
body { body {
background: transparent; 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; top: 0;
left: 0; left: 0;
padding: 32px; padding: 32px;
width: 100%;
} }
@ -1224,7 +1231,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
/* mediaitem-list-item */ /* mediaitem-list-item */
.cd-mediaitem-list-item { .cd-mediaitem-list-item {
width: 100%; width: 100%;
height: 80px; height: 60px;
display: inline-flex; display: inline-flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: row; flex-direction: row;
@ -1240,8 +1247,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
.cd-mediaitem-list-item .artwork { .cd-mediaitem-list-item .artwork {
height: 55px; height: 34px;
width: 55px; width: 34px;
background: blue; background: blue;
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
background: var(--artwork); background: var(--artwork);
@ -1265,8 +1272,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
.cd-mediaitem-list-item .subtitle { .cd-mediaitem-list-item .subtitle {
width: 100%; width: 90%;
font-size: 12px; font-size: 12px;
opacity: 0.7;
} }
.cd-mediaitem-list-item .content-rating { .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 */ /* Cider */
/* Transitions */ /* Transitions */

6
resources/cider-ui-tests/todo.js
View file

@ -91,10 +91,6 @@ await app.mk.api.library.albums({limit: 50}).then((data)=>{
app.mk.api.recommendations("",{extend: "editorialArtwork,artistUrl"}) app.mk.api.recommendations("",{extend: "editorialArtwork,artistUrl"})
// Library with library length // Library with library length
/** This will return 100 tracks in an array, however await app.mk.api.library.songs("", {limit: 100}, {includeResponseMeta: !0}).then((data)=>{
* 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)=>{
console.log(data) console.log(data)
}) })