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

support for groupings

Browse source
This commit is contained in:
booploops 2022-05-25 06:03:28 -07:00
parent d4df4751e9
commit d83793d538
6 changed files with 177 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/main/base/browserwindow.ts
View file

@ -56,6 +56,7 @@ export class BrowserWindow {
"pages/library-albums",
"pages/library-artists",
"pages/browse",
"pages/groupings",
"pages/settings",
"pages/installed-themes",
"pages/listen_now",
@ -188,6 +189,11 @@ export class BrowserWindow {
component: `<cider-browse :data="browsepage"></cider-browse>`,
condition: `page == 'browse'`,
onEnter: ``
},{
page: "groupings",
component: `<cider-groupings :data="browsepage"></cider-groupings>`,
condition: `page == 'groupings'`,
onEnter: ``
}, {
page: "listen_now",
component: `<cider-listen-now :data="listennow"></cider-listen-now>`,

35
src/renderer/less/elements.less
View file

@ -2048,4 +2048,39 @@ input[type=checkbox][switch]:checked:active::before {
z-index : 0;
pointer-events: none;
}
}
.grouping-container {
display: flex;
flex-flow: wrap;
gap: 16px;
.grouping-btn {
padding: 16px;
appearance: none;
border: 0px;
border-radius: 10px;
background: var(--color1);
color: var(--keyColor);
width: 100%;
text-align: left;
font-family: inherit;
cursor: pointer;
flex: 1 0 21%;
position: relative;
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-family: "codicon";
display: flex;
align-items: center;
width: 28px;
font-weight: bold;
font-size: 1.2em;
pointer-events: none;
}
}
}

5
src/renderer/main/events.js
View file

@ -4,7 +4,10 @@ const Events = {
// add event listener for when window.location.hash changes
window.addEventListener("hashchange", function () {
app.appRoute(window.location.hash)
app.page = "blank"
setTimeout(()=>{
app.appRoute(window.location.hash)
}, 100)
});
window.addEventListener("mouseup", (e) => {

4
src/renderer/main/vueapp.js
View file

@ -484,6 +484,10 @@ const app = new Vue({
}, 100)
})
},
goToGrouping(url = "https://music.apple.com/WebObjects/MZStore.woa/wa/viewGrouping?cc=us&id=34") {
const id = url.split("id=")[1];
window.location.hash = `#groupings/${id}`
},
navigateForward() {
history.forward()
},

95
src/renderer/views/pages/browse.ejs
View file

@ -1,49 +1,58 @@
<script type="text/x-template" id="cider-browse">
<div class="content-inner">
<h1 class="header-text">{{$root.getLz("term.browse")}}</h1>
<template v-if="data.relationships && data.relationships.tabs">
<template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
<div class="row">
<div class="col" v-if="recom.attributes.name != 'Chart Set'">
<h3>{{ recom.attributes.name ?? ""}}</h3>
<div class="content-inner">
<h1 class="header-text">{{$root.getLz("term.browse")}}</h1>
<template v-if="data.relationships && data.relationships.tabs">
<template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
<div class="row">
<div class="col" v-if="recom.attributes.name != 'Chart Set'">
<h3>{{ recom.attributes.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="index != 0 && recom.relationships && ((recom.relationships.children && recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
<button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<template v-if="(recom.relationships != null && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data)))">
<template v-if="index === 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)">
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)" :kind="recom.attributes.editorialElementKind"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
<mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="recom.attributes.name == 'Chart Set'">
<!-- ignored -->
</template>
<template v-else>
<mediaitem-scroller-horizontal-large
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
</template>
<template v-else>
<template v-if="recom.attributes.links && recom.attributes.editorialElementKind.includes('391')">
<div class="grouping-container">
<button class="grouping-btn" @click="$root.goToGrouping(link.url)" v-for="link in recom.attributes.links">{{ link.label }}</button>
</div>
<div class="col-auto flex-center" v-if="index != 0 && recom.relationships && ((recom.relationships.children && recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
<button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<template v-if="recom.relationships != null && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
<template v-if="index === 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)">
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)" :kind="recom.attributes.editorialElementKind"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
<mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="recom.attributes.name == 'Chart Set'">
<!-- ignored -->
</template>
<template v-else>
<mediaitem-scroller-horizontal-large
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
</template>
</template>
</template>
</div>
</template>
</template>
</template>
</div>
</script>
<script>
Vue.component('cider-browse', {
template: "#cider-browse",
props: ["data"],
data: function () {
return {
app: this.$root
}
},
mounted() {
this.$root.getBrowsePage();
}
})
</script>
Vue.component("cider-browse", {
template: "#cider-browse",
props: ["data"],
data: function () {
return {
app: this.$root,
};
},
mounted() {
this.$root.getBrowsePage();
},
methods: {
}
});
</script>

76
src/renderer/views/pages/groupings.ejs Normal file
View file

@ -0,0 +1,76 @@
<script type="text/x-template" id="cider-groupings">
<div class="content-inner">
<template v-if="data != null">
<h1 class="header-text">{{data.attributes?.name}}</h1>
<template v-if="data.relationships && data.relationships.tabs">
<template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
<div class="row">
<div class="col" v-if="recom.attributes.name != 'Chart Set'">
<h3>{{ recom.attributes.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="index != 0 && recom.relationships && ((recom.relationships.children && recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
<button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')" >{{app.getLz('term.seeAll')}}</button>
</div>
</div>
<template v-if="(recom.relationships != null && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data)))">
<template v-if="index === 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)">
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0|| (data.relationships.tabs.data[0].relationships.children.data[0].relationships == null && index === 1)" :kind="recom.attributes.editorialElementKind"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
<mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="recom.attributes.name == 'Chart Set'">
<!-- ignored -->
</template>
<template v-else>
<mediaitem-scroller-horizontal-large
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
</template>
<template v-else>
<template v-if="recom.attributes.links && recom.attributes.editorialElementKind.includes('391')">
<div class="grouping-container">
<button class="grouping-btn" @click="$root.goToGrouping(link.url)" v-for="link in recom.attributes.links">{{ link.label }}</button>
</div>
</template>
</template>
</template>
</template>
</template>
</div>
</script>
<script>
Vue.component("cider-groupings", {
template: "#cider-groupings",
data: function () {
return {
data: null,
app: this.$root,
query: "",
};
},
async mounted() {
const queryDefaults = `?platform=web&l=en-us&extend=editorialArtwork%2CartistUrl&omit%5Bresource%3Aartists%5D=relationships&include[groupings]=curator&include[albums]=artists&include[songs]=artists&include[music-videos]=artists&fields%5Bartists%5D=name%2Curl%2Cartwork%2CeditorialArtwork%2CgenreNames%2CeditorialNotes`
const hash = window.location.hash;
// get everything after the first / character but keep everything afterwards
const query = hash.substring(hash.indexOf("/") + 1);
this.query = query;
if(!this.query.includes("?")) {
this.query += queryDefaults;
}
console.debug(query);
const result = await this.$root.mk.api.v3.music(
`/v1/editorial/${this.$root.mk.storefrontId}/groupings/${this.query}`
);
this.data = result.data.data[0];
console.log(this.data);
//this.$root.getBrowsePage();
},
});
</script>