Merge pull request #1430 from ciderapp/enhancement/radio
Enhancement/radio
This commit is contained in:
commit
2a5494bc73
2 changed files with 124 additions and 79 deletions
|
@ -45,11 +45,7 @@ const app = new Vue({
|
||||||
browsepage: [],
|
browsepage: [],
|
||||||
listennow: [],
|
listennow: [],
|
||||||
madeforyou: [],
|
madeforyou: [],
|
||||||
radio: {
|
radio: [],
|
||||||
personal: {},
|
|
||||||
recent: {},
|
|
||||||
amlive: {},
|
|
||||||
},
|
|
||||||
mklang: "en",
|
mklang: "en",
|
||||||
webview: {
|
webview: {
|
||||||
url: "",
|
url: "",
|
||||||
|
@ -783,6 +779,9 @@ const app = new Vue({
|
||||||
this.mk.volume = -1;
|
this.mk.volume = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore mk
|
||||||
|
|
||||||
|
|
||||||
// load cached library
|
// load cached library
|
||||||
let librarySongs = await CiderCache.getCache("library-songs");
|
let librarySongs = await CiderCache.getCache("library-songs");
|
||||||
let libraryAlbums = await CiderCache.getCache("library-albums");
|
let libraryAlbums = await CiderCache.getCache("library-albums");
|
||||||
|
@ -3002,6 +3001,36 @@ const app = new Vue({
|
||||||
this.getListenNow(attempt + 1);
|
this.getListenNow(attempt + 1);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
async getRadioPage(attempt = 0) {
|
||||||
|
if (this.radio.timestamp > Date.now() - 120000) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (attempt > 3) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
app.mk.api.v3.music(`/v1/editorial/${app.mk.storefrontId}/groupings`, {
|
||||||
|
platform: "web",
|
||||||
|
name: "radio",
|
||||||
|
"omit[resource:artists]": "relationships",
|
||||||
|
"include[albums]": "artists",
|
||||||
|
"include[songs]": "artists",
|
||||||
|
"include[music-videos]": "artists",
|
||||||
|
extend: "editorialArtwork,artistUrl",
|
||||||
|
"fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes",
|
||||||
|
"art[url]": "f",
|
||||||
|
l: app.mklang,
|
||||||
|
}).then((radio) => {
|
||||||
|
app.radio = radio.data.data[0];
|
||||||
|
console.debug(app.radio);
|
||||||
|
})
|
||||||
|
|
||||||
|
this.radio.timestamp = Date.now();
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
this.getRadioPage(attempt + 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
async getBrowsePage(attempt = 0) {
|
async getBrowsePage(attempt = 0) {
|
||||||
if (this.browsepage.timestamp > Date.now() - 120000) {
|
if (this.browsepage.timestamp > Date.now() - 120000) {
|
||||||
return;
|
return;
|
||||||
|
@ -3020,7 +3049,7 @@ const app = new Vue({
|
||||||
extend: "editorialArtwork,artistUrl",
|
extend: "editorialArtwork,artistUrl",
|
||||||
"fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes",
|
"fields[artists]": "name,url,artwork,editorialArtwork,genreNames,editorialNotes",
|
||||||
"art[url]": "f",
|
"art[url]": "f",
|
||||||
l: this.mklang,
|
l: app.mklang,
|
||||||
});
|
});
|
||||||
this.browsepage = browse.data.data[0];
|
this.browsepage = browse.data.data[0];
|
||||||
this.browsepage.timestamp = Date.now();
|
this.browsepage.timestamp = Date.now();
|
||||||
|
|
|
@ -1,28 +1,73 @@
|
||||||
<script type="text/x-template" id="cider-radio">
|
<script type="text/x-template" id="cider-radio">
|
||||||
<div class="content-inner">
|
<div class="content-inner">
|
||||||
<h1 class="header-text">{{ app.getLz('term.radio') }}</h1>
|
<h1 class="header-text">{{$root.getLz("term.radio")}}</h1>
|
||||||
<div class="row">
|
<template v-if="data.relationships && data.relationships.tabs">
|
||||||
<div class="col">
|
<template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
|
||||||
<h3>{{ app.getLz('term.personalStations') }}</h3>
|
<div class="row">
|
||||||
</div>
|
<div class="col" v-if="recom.attributes.name != 'Chart Set'">
|
||||||
</div>
|
<h3>{{ recom.attributes.name ?? ""}}</h3>
|
||||||
<!-- <mediaitem-square :kind="'385'" size="600"-->
|
</div>
|
||||||
<!-- :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"-->
|
<div class="col-auto cider-flex-center">
|
||||||
<!-- :imagesize="800"-->
|
<button class="cd-btn-seeall" v-if="recom.attributes.name == 'Recently Played' && recent.length > 10"
|
||||||
<!-- v-for="item of getFlattenedCategories()">-->
|
@click="app.showCollection({ data: recent }, recom.attributes.name ?? '', 'listen_now')">
|
||||||
<mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
|
{{app.getLz('term.seeAll')}}
|
||||||
<div class="row">
|
</button>
|
||||||
<div class="col">
|
<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))">
|
||||||
<h3>{{ app.getLz('term.recentStations') }}</h3>
|
<button class="cd-btn-seeall" v-if="recom.relationships.room"
|
||||||
</div>
|
@click="app.showRoom(recom.relationships.room?.data[0].href)">
|
||||||
</div>
|
{{app.getLz('term.seeAll')}}
|
||||||
<mediaitem-square :item="station" v-for="station in radio.recent"></mediaitem-square>
|
</button>
|
||||||
<div class="row">
|
<button class="cd-btn-seeall" v-else
|
||||||
<div class="col">
|
@click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')">
|
||||||
<h3>{{ app.getLz('term.amLive') }}</h3>
|
{{app.getLz('term.seeAll')}}
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</template>
|
||||||
<mediaitem-square :item="station" v-for="station in radio.am"></mediaitem-square>
|
</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>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -33,59 +78,30 @@
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
app: this.$root,
|
app: this.$root,
|
||||||
radio: { personal: [], recent: [], am: [] }
|
recent: []
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
async mounted() {
|
mounted() {
|
||||||
this.radio.personal = await this.getPersonalStations()
|
this.$root.getRadioPage();
|
||||||
this.radio.recent = await this.getRecentStations()
|
debugger
|
||||||
this.radio.am = await this.getAmStations()
|
this.getRecentlyPlayed();
|
||||||
console.log(this.radio)
|
debugger
|
||||||
// this.getPersonalStations();
|
|
||||||
// this.getAmStations();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getPersonalStations(attempts = 0) {
|
getRecentlyPlayed: async function (next = null) {
|
||||||
if (attempts > 3) {
|
const recent = await app.mk.api.v3.music(`${next ?? "/v1/me/recent/radio-stations"}`, {
|
||||||
return []
|
"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);
|
||||||
}
|
}
|
||||||
try {
|
}
|
||||||
return (await app.mk.api.v3.music(`/v1/catalog/${app.mk.api.v3.storefrontId}/stations`, {
|
|
||||||
"filter[identity]": "personal",
|
|
||||||
})).data.data
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Failed to get personal stations: ${e}`)
|
|
||||||
await this.getPersonalStations(attempts + 1)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async getRecentStations(attempts = 0) {
|
|
||||||
if (attempts > 3) {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
return (await app.mk.api.v3.music(`/v1/me/recent/radio-stations`, {
|
|
||||||
"platform": "web",
|
|
||||||
"art[url]": "f",
|
|
||||||
l: app.mklang
|
|
||||||
})).data.data
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Failed to get recent stations: ${e}`)
|
|
||||||
await this.getRecentStations(attempts + 1)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async getAmStations(attempt = 0) {
|
|
||||||
if (attempt > 3) {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
return (await app.mk.api.v3.music(`/v1/catalog/${app.mk.api.v3.storefrontId}/stations`, {
|
|
||||||
"filter[featured]": "apple-music-live-radio",
|
|
||||||
})).data.data
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Failed to get AM stations: ${e}`)
|
|
||||||
await this.getAmStations(attempt + 1)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue