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

added AM favorite artists

Browse source 
- matched new mediaitem radius for medium sized items
- testing out v3 musickit
This commit is contained in:
booploops 2022-06-07 22:31:46 -07:00
parent 80fa4d1eed
commit fb86bfa789
5 changed files with 989 additions and 919 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/i18n/en_US.json
View file

@ -213,6 +213,8 @@
"podcast.episodes": "Episodes",
"podcast.playEpisode": "Play Episode",
"podcast.website": "Podcast Website",
"action.favorite": "Favorite",
"action.removeFavorite": "Remove Favorite",
"action.hideLibrary": "Hide Library",
"action.showLibrary": "Show Library",
"action.cut": "Cut",

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

@ -413,7 +413,6 @@
.artwork {
height: 42px;
width: 42px;
border-radius : var(--mediaItemRadius);
object-fit: cover;
object-position: center;
flex: 0 0 auto;
@ -423,7 +422,11 @@
outline: none;
position: relative;
overflow: hidden;
border-radius: var(--mediaItemRadiusSmall);
.mediaitem-artwork {
border-radius: var(--mediaItemRadiusSmall);
}
.overlay-play {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
@ -1474,7 +1477,6 @@ input[type=checkbox][switch]:checked:active::before {
/* End Switch Checkbox */
.header-text {
margin: 0px;
}
@ -1599,7 +1601,10 @@ input[type=checkbox][switch]:checked:active::before {
&:before {
content: "";
display: block;
top:0;left:0;right:0;bottom:0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--selected);
border-radius: inherit;
position: absolute;
@ -1636,7 +1641,10 @@ input[type=checkbox][switch]:checked:active::before {
&:before {
content: "";
display: block;
top:0;left:0;right:0;bottom:0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--selected);
border-radius: inherit;
position: absolute;
@ -1654,9 +1662,11 @@ input[type=checkbox][switch]:checked:active::before {
}
}
}
.playback-button--small.active {
background-color: rgb(200 200 200 / 25%);
}
.playback-button:hover,
.playback-button--small:hover {
// background-color: var(--selected);
@ -1713,6 +1723,7 @@ input[type=checkbox][switch]:checked:active::before {
color: var(--textColor);
display: grid;
place-items: center;
span {
position: absolute;
}

4
src/renderer/style.less
View file

@ -20,7 +20,9 @@
--mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
--mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
--ciderShadow-Generic: var(--mediaItemShadow), 0 8px 40px rgb(0 0 0 / 0.55);
--mediaItemRadius: 6px;
--mediaItemRadius: 8px;
--mediaItemRadiusSmall: 6px;
--mediaItemRadiusMedium: 8px;
--mediaItemRadiusRound: 100%;
--panelRadius: 10px;
--contentInnerPadding: 16px;

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

@ -105,7 +105,7 @@
<% } %>
<script async src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
<script async src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js"></script>
<script src="index.js?v=1"></script>
<script type="text/x-template" id="am-musiccovershelf">

77
src/renderer/views/pages/artist.ejs
View file

@ -1,5 +1,6 @@
<script type="text/x-template" id="cider-artist">
<div class="content-inner artist-page" :class="[data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) ? 'animated' : '']">
<div class="content-inner artist-page"
:class="[data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) ? 'animated' : '']">
<div class="artist-header" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
<animatedartwork-view
:priority="true"
@ -9,7 +10,8 @@
<div class="header-content" style="pointer-events: all;">
<div class="row">
<div class="col-sm" style="width: auto;">
<div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
<div class="artist-image"
v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
<mediaitem-artwork
shadow="large"
:url="data.attributes.artwork ? data.attributes.artwork.url : ''"
@ -30,15 +32,22 @@
<h1>{{ data.attributes.name }}</h1>
</div>
</div>
<button class="more-btn-round" @click="artistMenu" style="pointer-events: all;" :aria-label="app.getLz('term.more')">
<button class="more-btn-round favorite" @click="artistMenu" style="pointer-events: all;"
:aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
<button class="more-btn-round menu" @click="artistMenu" style="pointer-events: all;"
:aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
<div class="artworkContainer" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
<div class="artworkContainer"
v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
<artwork-material :url="data.attributes.artwork.url" size="190" images="1"></artwork-material>
</div>
</div>
<div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
<div class="floating-header"
:style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
<div class="row">
<div class="col-auto flex-center">
<button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
@ -49,7 +58,7 @@
<h3>{{ data.attributes.name }}</h3>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" @click="artistMenu" :aria-label="app.getLz('term.more')">
<button class="more-btn-round menu" @click="artistMenu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -70,8 +79,12 @@
<div class="col" style="padding:0;">
<h3>{{app.getLz('term.topSongs')}}</h3>
</div>
<div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 20" style="padding:0;">
<button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
<div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 20"
style="padding:0;">
<button class="cd-btn-seeall"
@click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">
{{app.getLz('term.seeAll')}}
</button>
</div>
</div>
<div class="row">
@ -96,7 +109,10 @@
</h3>
</div>
<div class="col-auto flex-center" v-if="data.views[view].data.length >= 10">
<button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - ' + data.views[view].attributes.title, view)">{{app.getLz('term.seeAll')}}</button>
<button class="cd-btn-seeall"
@click="app.showArtistView(data.id, data.attributes.name + ' - ' + data.views[view].attributes.title, view)">
{{app.getLz('term.seeAll')}}
</button>
</div>
</div>
<template v-if="!((data.views[view].attributes.title ?
@ -112,7 +128,8 @@
</template>
<div class="row">
<div class="col" v-if="data.attributes.artistBio">
<h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName": data.attributes.name}) }}</h3>
<h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName":
data.attributes.name}) }}</h3>
<p v-html="data.attributes.artistBio"></p>
</div>
<div class="col">
@ -150,7 +167,7 @@
isHeaderVisible(visible) {
this.headerVisible = visible
},
artistMenu (event) {
async artistMenu(event) {
let self = this
let followAction = "follow"
let followActions = {
@ -172,9 +189,46 @@
}
}
}
let favoriteActions = {
favorite: {
icon: "./assets/star.svg",
name: app.getLz('action.favorite'),
action: () => {
app.mk.api.v3.music(`/v1/me/favorites`, {
"art[url]": "f",
"ids[artists]": app.artistPage.data.id,
"l": app.mklang,
"platform": "web"
}, {
fetchOptions: {
method: "POST"
}
})
}
},
removeFavorite: {
icon: "./assets/star.svg",
name: app.getLz('action.removeFavorite'),
action: () => {
app.mk.api.v3.music(`/v1/me/favorites`, {
"art[url]": "f",
"ids[artists]": app.artistPage.data.id,
"l": app.mklang,
"platform": "web"
}, {
fetchOptions: {
method: "DELETE"
}
})
}
}
}
if (this.app.cfg.home.followedArtists.includes(self.data.id)) {
followAction = "unfollow"
}
const inFavorites = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${app.artistPage.data.id}`, {
"fields[artists]": "inFavorites"
})).data.data[0].attributes?.inFavorites
app.showMenuPanel({
items: [
{
@ -186,6 +240,7 @@
})
}
},
favoriteActions[inFavorites ? "removeFavorite" : "favorite"],
followActions[followAction],
{
icon: "./assets/feather/share.svg",