home page is now available in non dev environments
This commit is contained in:
booploops
parent
1ad7012e32
commit
7a19de11f7
6 changed files with 219 additions and 33 deletions
|
|
@ -206,6 +206,7 @@ const app = new Vue({
|
|||
id: ""
|
||||
},
|
||||
mxmtoken: "",
|
||||
mkIsReady: false,
|
||||
playerReady: false,
|
||||
lyricon: false,
|
||||
currentTrackID: '',
|
||||
|
|
@ -247,7 +248,7 @@ const app = new Vue({
|
|||
},
|
||||
prevButtonBackIndicator: false,
|
||||
currentSongInfo: {},
|
||||
page: "browse",
|
||||
page: "",
|
||||
pageHistory: [],
|
||||
songstest: false,
|
||||
hangtimer: null,
|
||||
|
|
@ -280,6 +281,12 @@ const app = new Vue({
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
addFavorite(id, type) {
|
||||
this.cfg.home.favoriteItems.push({
|
||||
id: id,
|
||||
type: type
|
||||
});
|
||||
},
|
||||
modularUITest(val = false) {
|
||||
if (val) {
|
||||
document.querySelector("#app-main").classList.add("modular-fs")
|
||||
|
|
@ -344,7 +351,9 @@ const app = new Vue({
|
|||
let self = this
|
||||
clearTimeout(this.hangtimer)
|
||||
this.mk = MusicKit.getInstance()
|
||||
this.mk.authorize()
|
||||
this.mk.authorize().then(()=>{
|
||||
self.mkIsReady = true
|
||||
})
|
||||
this.$forceUpdate()
|
||||
if (this.isDev) {
|
||||
this.mk.privateEnabled = true
|
||||
|
|
@ -493,6 +502,8 @@ const app = new Vue({
|
|||
document.body.removeAttribute("loading")
|
||||
if (window.location.hash != "") {
|
||||
this.appRoute(window.location.hash)
|
||||
}else{
|
||||
this.page = "home"
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
|
|
@ -568,6 +579,12 @@ const app = new Vue({
|
|||
action: () => {
|
||||
this.deletePlaylist(playlist_id)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Add to favorites",
|
||||
action: () => {
|
||||
this.addFavorite(playlist_id, "library-playlists")
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1544,6 +1544,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
top: 0;
|
||||
padding-top: var(--navbarHeight);
|
||||
|
||||
.artist-feed-card {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 10%;
|
||||
z-index: 1;
|
||||
background: black;
|
||||
width: 80%;
|
||||
height: 96%;
|
||||
overflow: scroll;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.col.madeforyou-col {
|
||||
width: 420px;
|
||||
min-width: 0px;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@
|
|||
size: {
|
||||
type: String,
|
||||
default: '300'
|
||||
}
|
||||
},
|
||||
'contextExt': {type: Object, required: false},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
|
@ -62,7 +63,12 @@
|
|||
},
|
||||
async isInLibrary() {
|
||||
if (this.item.type && !this.item.type.includes("library")) {
|
||||
var params = {"fields[playlists]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "extend": this.revisedRandId()}
|
||||
var params = {
|
||||
"fields[playlists]": "inLibrary",
|
||||
"fields[albums]": "inLibrary",
|
||||
"relate": "library",
|
||||
"extend": this.revisedRandId()
|
||||
}
|
||||
var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
|
||||
this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
|
||||
} else {
|
||||
|
|
@ -70,7 +76,13 @@
|
|||
}
|
||||
},
|
||||
async removeFromLibrary(id) {
|
||||
var params = {"fields[playlists]": "inLibrary","fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "extend": this.revisedRandId()}
|
||||
var params = {
|
||||
"fields[playlists]": "inLibrary",
|
||||
"fields[songs]": "inLibrary",
|
||||
"fields[albums]": "inLibrary",
|
||||
"relate": "library",
|
||||
"extend": this.revisedRandId()
|
||||
}
|
||||
var id = this.item.id ?? this.item.attributes.playParams.id
|
||||
var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
|
||||
if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
|
||||
|
|
@ -213,14 +225,32 @@
|
|||
"action": async function () {
|
||||
let item_id = self.item.attributes.playParams.id ?? self.item.id;
|
||||
let data_type = self.item.attributes.playParams.kind ?? self.item.type;
|
||||
if (self.addedToLibrary != true) { console.log("add"); app.addToLibrary(item_id); self.addedToLibrary = true}
|
||||
else { console.log("remove"); await self.removeFromLibrary(item_id); self.addedToLibrary = false};
|
||||
if (self.addedToLibrary != true) {
|
||||
console.log("add");
|
||||
app.addToLibrary(item_id);
|
||||
self.addedToLibrary = true
|
||||
} else {
|
||||
console.log("remove");
|
||||
await self.removeFromLibrary(item_id);
|
||||
self.addedToLibrary = false
|
||||
}
|
||||
;
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) { menus.normal.items.splice(2, 1);}
|
||||
if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) {
|
||||
menus.normal.items.splice(2, 1);
|
||||
}
|
||||
if (this.contextExt) {
|
||||
if (this.contextExt.normal) {
|
||||
menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
|
||||
}
|
||||
if (this.contextExt.multiple) {
|
||||
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
|
||||
}
|
||||
}
|
||||
CiderContextMenu.Create(event, menus[useMenu])
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@
|
|||
<div class="app-sidebar-header-text">
|
||||
Apple Music
|
||||
</div>
|
||||
<sidebar-library-item v-if="isDev" name="Home" page="home"></sidebar-library-item>
|
||||
<sidebar-library-item name="Home" page="home"></sidebar-library-item>
|
||||
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
|
||||
<sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
|
||||
<sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
|
||||
|
|
@ -302,6 +302,12 @@
|
|||
<cider-home></cider-home>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Home -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'artist-feed'">
|
||||
<cider-artist-feed></cider-artist-feed>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Playlist / Album page-->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page.includes('playlist_')">
|
||||
|
|
@ -512,6 +518,9 @@
|
|||
<!-- Home -->
|
||||
<%- include('pages/home') %>
|
||||
|
||||
<!-- Artist Feed -->
|
||||
<%- include('pages/artist-feed') %>
|
||||
|
||||
<!-- Playlists / Albums -->
|
||||
<%- include('pages/cider-playlist') %>
|
||||
|
||||
|
|
|
|||
62
src/renderer/views/pages/artist-feed.ejs
Normal file
62
src/renderer/views/pages/artist-feed.ejs
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<script type="text/x-template" id="cider-artist-feed">
|
||||
<div class="content-inner">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row nopadding">
|
||||
<div class="col nopadding">
|
||||
<h3>Your Artists Feed</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well" style="margin-top:0px;">
|
||||
<template v-if="artistFeed.length > 0">
|
||||
<mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="hint-text">No new activity from followed artists</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('cider-artist-feed', {
|
||||
template: '#cider-artist-feed',
|
||||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
followedArtists: this.$root.cfg.home.followedArtists,
|
||||
artistFeed: [],
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let self = this
|
||||
await this.getArtistFeed()
|
||||
},
|
||||
methods: {
|
||||
async getArtistFeed() {
|
||||
let artists = this.followedArtists
|
||||
let self = this
|
||||
this.app.mk.api.artists(artists, {
|
||||
"views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
|
||||
"extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
|
||||
"extend[playlists]": "trackCount",
|
||||
"include[songs]": "albums",
|
||||
"fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount",
|
||||
"limit[artists:top-songs]": 20,
|
||||
"art[url]": "f"
|
||||
}, {includeResponseMeta: !0}).then(artistData => {
|
||||
artistData.data.forEach(item => {
|
||||
if (item.views["latest-release"].data.length != 0) {
|
||||
self.artistFeed.push(item.views["latest-release"].data[0])
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<script type="text/x-template" id="cider-home">
|
||||
<div class="content-inner home-page">
|
||||
<div class="bg-image"></div>
|
||||
<div>
|
||||
<div v-if="page == 'main'">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Home</h3>
|
||||
<div class="well profile-well">
|
||||
<div class="user-icon">
|
||||
<mediaitem-artwork shadow="none" :url="profile.attributes.artwork.url" size="300"></mediaitem-artwork>
|
||||
<mediaitem-artwork shadow="none" :url="profile.attributes.artwork.url"
|
||||
size="300"></mediaitem-artwork>
|
||||
</div>
|
||||
<h3 class="name">{{ profile.attributes.name }}</h3>
|
||||
<h4 class="handle">@{{ profile.attributes.handle }}</h4>
|
||||
|
|
@ -20,12 +20,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" v-if="app.isDev">
|
||||
<div class="col">
|
||||
<h3>Your Favorites</h3>
|
||||
<div class="well">
|
||||
<div class="hint-text">Items you have added to your favorites will appear here.</div>
|
||||
<!-- <mediaitem-scroller-horizontal kind="small" :items="friendsListeningTo" :item="item"></mediaitem-scroller-horizontal> -->
|
||||
<div class="hint-text" v-if="favorites.length == 0">Items you have added to your favorites will
|
||||
appear here.
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal kind="small" :items="favorites"
|
||||
:item="item"></mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,8 +40,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>Your Artist Feed</h3>
|
||||
<div class="well">
|
||||
<div class="row nopadding">
|
||||
<div class="col nopadding">
|
||||
<h3>Your Artists Feed</h3>
|
||||
</div>
|
||||
<div class="col-auto nopadding flex-center">
|
||||
<button class="cd-btn-seeall" @click="app.appRoute('artist-feed')">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well" style="margin-top:0px;">
|
||||
<template v-if="artistFeed.length > 0">
|
||||
<mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
|
||||
</template>
|
||||
|
|
@ -52,7 +62,8 @@
|
|||
<div class="col">
|
||||
<h3>Friends Listening To</h3>
|
||||
<div class="well">
|
||||
<mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
|
||||
<mediaitem-square kind="small" v-for="item in friendsListeningTo"
|
||||
:item="item"></mediaitem-square>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,24 +78,71 @@
|
|||
return {
|
||||
app: this.$root,
|
||||
followedArtists: this.$root.cfg.home.followedArtists,
|
||||
favoriteItems: this.$root.cfg.home.favoriteItems,
|
||||
madeForYou: [],
|
||||
recentlyPlayed: [],
|
||||
friendsListeningTo: [],
|
||||
replayPlaylists: [],
|
||||
favorites: [],
|
||||
profile: {},
|
||||
modify: 0,
|
||||
artistFeed: []
|
||||
artistFeed: [],
|
||||
showingArtistFeed: false,
|
||||
page: "main",
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let self = this
|
||||
this.getListenNowData()
|
||||
await this.getArtistFeed()
|
||||
await this.getFavorites()
|
||||
},
|
||||
methods: {
|
||||
removeFavoriteContext() {
|
||||
let self = this
|
||||
return {
|
||||
name: "Remove from Favorites",
|
||||
action: function (item) {
|
||||
let index = self.favoriteItems.findIndex(x => x.id == item.id)
|
||||
if (index > -1) {
|
||||
self.favoriteItems.splice(index, 1)
|
||||
self.app.cfg.home.favoriteItems = self.favoriteItems
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async getFavorites() {
|
||||
let self = this
|
||||
let libraryPlaylists = []
|
||||
let playlists = []
|
||||
for (let item of this.favoriteItems) {
|
||||
if (item.type == "library-playlists") {
|
||||
libraryPlaylists.push(item.id)
|
||||
} else if (item.type == "playlists") {
|
||||
playlists.push(item.id)
|
||||
}
|
||||
}
|
||||
console.warn(playlists)
|
||||
console.warn(libraryPlaylists)
|
||||
if (playlists.length != 0) {
|
||||
this.app.mk.api.playlists(playlists).then(playlistsData => {
|
||||
self.favorites.push(...playlistsData)
|
||||
console.info(playlistsData)
|
||||
})
|
||||
}
|
||||
if (libraryPlaylists.length != 0) {
|
||||
this.app.mk.api.library.playlists(libraryPlaylists).then(playlistsData => {
|
||||
self.favorites.push(...playlistsData)
|
||||
console.info(playlistsData)
|
||||
})
|
||||
}
|
||||
console.warn(this.favoriteItems)
|
||||
|
||||
console.warn(self.favorites)
|
||||
},
|
||||
async getArtistFeed() {
|
||||
let artists = this.followedArtists
|
||||
let self = this
|
||||
console.warn("get artist feed")
|
||||
this.app.mk.api.artists(artists, {
|
||||
"views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
|
||||
"extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
|
||||
|
|
@ -93,14 +151,12 @@
|
|||
"fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount",
|
||||
"limit[artists:top-songs]": 20,
|
||||
"art[url]": "f"
|
||||
}, { includeResponseMeta: !0 }).then(artistData => {
|
||||
}, {includeResponseMeta: !0}).then(artistData => {
|
||||
artistData.data.forEach(item => {
|
||||
if(item.views["latest-release"].data.length != 0) {
|
||||
if (item.views["latest-release"].data.length != 0) {
|
||||
self.artistFeed.push(item.views["latest-release"].data[0])
|
||||
}
|
||||
})
|
||||
console.warn("got artist feed")
|
||||
console.log(self.artistFeed)
|
||||
})
|
||||
|
||||
},
|
||||
|
|
@ -139,16 +195,17 @@
|
|||
}
|
||||
).then((data) => {
|
||||
console.log(data.data[1])
|
||||
try{
|
||||
try {
|
||||
self.madeForYou = data.data.filter(section => {
|
||||
if (section.meta.metrics.moduleType == "6") {
|
||||
return section
|
||||
}
|
||||
;
|
||||
})[0].relationships.contents.data
|
||||
} catch (err) {
|
||||
}
|
||||
catch(err){}
|
||||
try{
|
||||
|
||||
try {
|
||||
self.recentlyPlayed = data.data[1].relationships.contents.data
|
||||
self.friendsListeningTo = data.data.filter(section => {
|
||||
if (section.meta.metrics.moduleType == "11") {
|
||||
|
|
@ -156,13 +213,12 @@
|
|||
}
|
||||
;
|
||||
})[0].relationships.contents.data
|
||||
}catch(err){}
|
||||
} catch (err) {
|
||||
}
|
||||
});
|
||||
|
||||
app.mk.api.v3.music("/v1/me/social/profile/").then((response) => {
|
||||
self.profile = response.data.data[0]
|
||||
console.log("!!!")
|
||||
console.log(response.data.data[0])
|
||||
})
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue