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

working on adding social people and playlists in search, testing home page in dev mode

Browse source
This commit is contained in:
booploops 2021-12-28 04:35:44 -08:00
parent df6ba93242
commit 3c17e15b08
8 changed files with 293 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/renderer/index.js
View file

@ -114,6 +114,7 @@ const app = new Vue({
hints: [],
showHints: false,
results: {},
resultsSocial: {},
limit: 10
},
playerLCD: {
@ -2167,6 +2168,15 @@ const app = new Vue({
}).then(function (results) {
self.search.results = results
})
await this.mk.api.socialSearch(this.search.term, {
types: ["playlists", "social-profiles"],
limit: 25,
with: ["serverBubbles", "lyricSnippet"],
"art[url]": "f",
"art[social-profiles:url]": "c"
}, { includeResponseMeta: !0 }).then(function (results) {
self.search.resultsSocial = results
})
},
isInLibrary(playParams) {
let self = this

108
src/renderer/style.less
View file

@ -1539,10 +1539,30 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 100%;
}
.home-page {
background: linear-gradient(0deg, black, #4c2c31);
top: 0;
padding-top: var(--navbarHeight);
.user-icon {
border-radius: 100%;
width: 128px;
height: 128px;
overflow: hidden;
box-shadow: var(--mediaItemShadow-Shadow);
}
.well.profile-well {
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Cider */
.modal-fullscreen {
display:flex;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
@ -1552,11 +1572,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 9999;
.modal-window {
background: #333;
border-radius: 10px;
box-shadow: var(--mediaItemShadow-Shadow);
display:flex;
display: flex;
flex-flow: column;
max-height: 500px;
max-width: 360px;
@ -1578,18 +1599,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.modal-header {
width:100%;
width: 100%;
padding: 6px;
}
.modal-content {
width:100%;
height:100%;
width: 100%;
height: 100%;
overflow: hidden;
overflow-y: overlay;
}
.modal-footer {
}
.modal-footer {}
}
}
@ -1603,11 +1624,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.modal-header {
padding: 16px;
position:relative;
position: relative;
.modal-title {
text-align: center;
}
.close-btn {
width: 50px;
height: 100%;
@ -1659,9 +1681,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin-right: 6px;
}
.name {
}
.name {}
&:hover {
background: var(--selected);
@ -2180,6 +2200,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 100%;
object-fit: cover;
image-rendering: -webkit-optimize-contrast;
pointer-events: none;
}
&.no-shadow {
box-shadow: none;
&::after {
display: none;
}
}
&.subtle-shadow {
box-shadow: var(--mediaItemShadow-ShadowSubtle);
}
&.shadow {
box-shadow: var(--mediaItemShadow-Shadow);
}
}
@ -2729,8 +2763,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
>.menu-btn {
opacity: 0;
appearance: none;
padding:0px;
border:0px;
padding: 0px;
border: 0px;
width: 30px;
height: 30px;
border-radius: 50%;
@ -2755,6 +2789,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&:hover {
>.play-btn,
>.menu-btn {
opacity: 1;
@ -2777,6 +2812,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.mediaitem-video {
height: 200px;
width: 240px;
.artwork {
height: 120px;
width: 212px;
@ -2786,16 +2822,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.mediaitem-brick {
height: 200px;
width: 240px;
.artwork {
height: 123px;
width: 220px;
}
}
&.mediaitem-small {
width: 140px;
height: 180px;
.artwork {
height: 128px;
width: 128px;
}
}
}
/* mediaitem-square */
.albums-square-containeru > * > .cd-mediaitem-square {
--frame: max(220px, 15vw );
.albums-square-containeru>*>.cd-mediaitem-square {
--frame: max(220px, 15vw);
width: var(--frame);
height: calc(var(--frame) * 13 / 11);
display: inline-flex;
@ -2829,9 +2876,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
>.menu-btn {
opacity: 0;
appearance: none;
padding:0px;
border:0px;
width: calc(var(--frame) / 220 * 30);
padding: 0px;
border: 0px;
width: calc(var(--frame) / 220 * 30);
height: calc(var(--frame) / 220 * 30);
border-radius: 50%;
background: rgba(50, 50, 50, 0.7);
@ -2843,7 +2890,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
>.play-btn {
position: absolute;
bottom: calc(var(--frame) / 220 * 14);
left: calc(var(--frame) / 220 * 14);
left: calc(var(--frame) / 220 * 14);
z-index: 2;
}
@ -2855,6 +2902,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&:hover {
>.play-btn,
>.menu-btn {
opacity: 1;
@ -2875,10 +2923,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&.mediaitem-video {
height:calc(var(--frame) / 220 * 200);
height: calc(var(--frame) / 220 * 200);
width: calc(var(--frame) / 220 * 240);
.artwork {
height:calc(var(--frame) / 220 * 120);
height: calc(var(--frame) / 220 * 120);
width: calc(var(--frame) / 220 * 212);
}
}
@ -2886,9 +2935,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.mediaitem-brick {
height: calc(var(--frame) / 220 * 200);
width: calc(var(--frame) / 220 * 240);
.artwork {
height: calc(var(--frame) / 220 * 123);
width: calc(var(--frame) );
width: calc(var(--frame));
}
}
}
@ -2952,16 +3002,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
// Modular
.modular-fs {
.app-drawer {
width:100%;
right:0px;
top:0px;
height:100%;
width: 100%;
right: 0px;
top: 0px;
height: 100%;
border-radius: 0px;
box-shadow: unset;
background: black;
.lyric-body {
justify-content: center;
align-items:center;
align-items: center;
.lyric-line {
pointer-events: none;
@ -2982,6 +3033,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
}
}
// Modular
/* Transitions */
@ -3280,7 +3332,7 @@ body.no-gpu {
background: rgb(0 0 0);
}
.addtoplaylist-panel {
.addtoplaylist-panel {
.modal-window {
background: rgb(18 18 18);
backdrop-filter: unset;

21
src/renderer/views/components/mediaitem-artwork.ejs
View file

@ -1,5 +1,5 @@
<script type="text/x-template" id="mediaitem-artwork">
<div class="mediaitem-artwork" :class="{'rounded': (type == 'artists')}" :key="url" :style="getStyle()"
<div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size, width)"
decoding="async" loading="lazy"
@ -40,7 +40,7 @@
},
shadow: {
type: String,
default: 'none'
default: ''
}
},
data: function () {
@ -49,9 +49,13 @@
isVisible: false,
style: {
"box-shadow": ""
}
},
classes: []
}
},
mounted() {
this.getClasses()
},
methods: {
getVideoPriority() {
if(app.cfg.visual.animated_artwork == "always") {
@ -63,18 +67,21 @@
}
return this.videoPriority
},
getStyle() {
getClasses() {
switch (this.shadow) {
case "none":
this.classes.push("no-shadow")
break;
case "large":
this.style["box-shadow"] = "var(--mediaItemShadow-Shadow)"
this.classes.push("shadow")
break;
case "subtle":
this.style["box-shadow"] = "var(--mediaItemShadow-ShadowSubtle)"
this.classes.push("subtle-shadow")
break;
default:
break;
}
return this.style;
return this.classes;
},
getArtworkStyle() {
return {

3
src/renderer/views/components/mediaitem-square.ejs
View file

@ -107,6 +107,9 @@
case "385": // editorial
return ["mediaitem-brick"]
break;
case "small":
return ["mediaitem-small"]
break;
case "music-videos":
case "uploadedVideo":
case "uploaded-videos":

10
src/renderer/views/main.ejs
View file

@ -168,6 +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="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>
@ -295,6 +296,12 @@
:title="collectionList.title"></cider-collection-list>
</template>
</transition>
<!-- Home -->
<transition name="wpfade">
<template v-if="page == 'home'">
<cider-home></cider-home>
</template>
</transition>
<!-- Playlist / Album page-->
<transition name="wpfade">
<template v-if="page.includes('playlist_')">
@ -502,6 +509,9 @@
<!-- Listen Now -->
<%- include('pages/listen_now') %>
<!-- Home -->
<%- include('pages/home') %>
<!-- Playlists / Albums -->
<%- include('pages/cider-playlist') %>

11
src/renderer/views/pages/collection-list.ejs
View file

@ -46,7 +46,8 @@
triggerEnabled: true,
canSeeTrigger: false,
showFab: false,
commonKind: "song"
commonKind: "song",
api: this.$root.mk.api
}
},
methods: {
@ -72,12 +73,18 @@
case "artists":
if (this.data.next && this.triggerEnabled) {
this.triggerEnabled = false;
this.data.next().then(data => {
let nextFn = (data => {
console.log(data);
this.data.next = data.next;
this.data.data = this.data.data.concat(data.data);
this.triggerEnabled = true;
});
if(typeof this.data.next == "function") {
this.data.next().then(data => next);
}else{
this.api.v3.music(this.data.next).then(data => nextFn);
}
}else{
console.log("No next page");
this.triggerEnabled = false;

124
src/renderer/views/pages/home.ejs Normal file
View file

@ -0,0 +1,124 @@
<script type="text/x-template" id="cider-home">
<div class="content-inner home-page">
<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>
</div>
<h3>{{ profile.attributes.name }}</h3>
<h4>@{{ profile.attributes.handle }}</h4>
<button class="md-btn">Share</button>
</div>
</div>
<div class="col">
<h3>Recently Played</h3>
<div class="well">
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
</div>
</div>
</div>
<div class="row">
<div class="col">
<h3>Made For You</h3>
<div class="well">
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
</div>
</div>
<div class="col">
<h3>Your Artist Feed</h3>
<div class="well">
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
</div>
</div>
</div>
<div class="row">
<div class="col">
<h3>Friends Listening To</h3>
<div class="well">
<mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
</div>
</div>
</div>
</div>
</script>
<script>
Vue.component('cider-home', {
template: '#cider-home',
data: function () {
return {
app: this.$root,
madeForYou: [],
recentlyPlayed: [],
friendsListeningTo: [],
profile: {},
modify: 0
}
},
async mounted() {
let self = this
this.getListenNowData()
},
methods: {
getRecentlyPlayed() {
},
async getListenNowData() {
let self = this
this.app.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", "editorialVideo"],
"extend[playlists]": ["artistNames", "editorialArtwork", "editorialVideo"],
"extend[library-playlists]": ["artistNames", "editorialArtwork", "editorialVideo"],
"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
}
).then((data) => {
console.log(data.data[1])
self.recentlyPlayed = data.data[1].relationships.contents.data
self.friendsListeningTo = data.data.filter(section => {
if (section.meta.metrics.moduleType == "11") {
return section
}
;
})[0].relationships.contents.data
self.madeForYou = data.data.filter(section => {
if (section.meta.metrics.moduleType == "6") {
return section
}
;
})[0].relationships.contents.data
});
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])
})
}
}
});
</script>

51
src/renderer/views/pages/search.ejs
View file

@ -12,37 +12,70 @@
<div class="col">
<h3>Songs</h3>
</div>
<div class="col-auto flex-center" @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))" v-if="search.results.song.data.length >= 6">
<div class="col-auto flex-center"
@click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
v-if="search.results.song.data.length >= 6">
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<div>
<mediaitem-list-item :item="item" :index="index"
v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
</div>
</div>
</div>
<template v-if="search.results['meta']">
<template
v-for="section in search.results.meta.results.order" v-if="section != 'song' && section != 'top'">
v-for="section in search.results.meta.results.order" v-if="section != 'song' && section != 'top'">
<div class="row">
<div class="col">
<h3>{{ app.friendlyTypes(section) }}</h3>
</div>
<div class="col-auto flex-center" v-if="search.results[section].data.length >= 10">
<button class="cd-btn-seeall" @click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See All</button>
<button class="cd-btn-seeall"
@click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See
All
</button>
</div>
</div>
<template v-if="!app.friendlyTypes(section).includes('Video')">
<mediaitem-scroller-horizontal-large
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
<mediaitem-scroller-horizontal-large
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-else>
<mediaitem-scroller-horizontal-mvview
<mediaitem-scroller-horizontal-mvview
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
</template>
</template>
</template>
<template v-if="search.resultsSocial.playlist">
<div class="row">
<div class="col">
<h3>Shared Playlists</h3>
</div>
<div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.data.length >= 10">
<button class="cd-btn-seeall"
@click="app.showCollection(search.resultsSocial.playlist.data, 'Shared Playlists', 'default')">See All
</button>
</div>
</div>
<mediaitem-scroller-horizontal-large
:items="search.resultsSocial.playlist.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-if="search.resultsSocial.profile">
<div class="row">
<div class="col">
<h3>People</h3>
</div>
<div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.data.length >= 10">
<button class="cd-btn-seeall"
@click="app.showCollection(search.resultsSocial.profile.data, 'People', 'default')">See All
</button>
</div>
</div>
<mediaitem-scroller-horizontal-large
:items="search.resultsSocial.profile.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
</div>
</script>
@ -51,7 +84,7 @@
Vue.component('cider-search', {
template: "#cider-search",
props: ['search'],
data: function() {
data: function () {
return {
app: this.$root
}