107 lines
6.2 KiB
Text
107 lines
6.2 KiB
Text
<script type="text/x-template" id="cider-radio">
|
|
<div class="content-inner">
|
|
<h1 class="header-text">{{$root.getLz("term.radio")}}</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 cider-flex-center">
|
|
<button class="cd-btn-seeall" v-if="recom.attributes.name == 'Recently Played' && recent.length > 10"
|
|
@click="app.showCollection({ data: recent }, recom.attributes.name ?? '', 'listen_now')">
|
|
{{app.getLz('term.seeAll')}}
|
|
</button>
|
|
<template 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" v-if="recom.relationships.room"
|
|
@click="app.showRoom(recom.relationships.room?.data[0].href)">
|
|
{{app.getLz('term.seeAll')}}
|
|
</button>
|
|
<button class="cd-btn-seeall" v-else
|
|
@click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')">
|
|
{{app.getLz('term.seeAll')}}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="recom.attributes.name == 'Recently Played'">
|
|
<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="recent.limit(10)"></mediaitem-scroller-horizontal-mvview>
|
|
</div>
|
|
<template v-else-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="(['327']).includes(recom.attributes.editorialElementKind)">
|
|
<div class="mediaitem-list-item__grid">
|
|
<listitem-horizontal :items="recom.relationships.contents.data.limit(20)">
|
|
</listitem-horizontal>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('cider-radio', {
|
|
template: "#cider-radio",
|
|
props: ["data"],
|
|
data: function() {
|
|
return {
|
|
app: this.$root,
|
|
recent: []
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$root.getRadioPage();
|
|
debugger
|
|
this.getRecentlyPlayed();
|
|
debugger
|
|
},
|
|
methods: {
|
|
getRecentlyPlayed: async function (next = null) {
|
|
const recent = await app.mk.api.v3.music(`${next ?? "/v1/me/recent/radio-stations"}`, {
|
|
"platform": "web",
|
|
"art[url]": "f",
|
|
l: app.mklang
|
|
})
|
|
|
|
console.debug(recent.data.data)
|
|
this.recent = this.recent.concat(recent.data.data);
|
|
|
|
if (recent.data.next) {
|
|
this.getRecentlyPlayed(recent.data.next);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|