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

smart playlist components

Browse source
This commit is contained in:
vapormusic 2021-12-04 15:04:32 +07:00
parent ddecabecd7
commit b9e5372956
3 changed files with 100 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

35
resources/cider-ui-tests/index.html
View file

@ -275,8 +275,13 @@
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
<mediaitem-scroller-horizontal :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal>
</template>
<template v-else>
<mediaitem-scroller-horizontal-sp :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
</template>
</template>
</div>
</script>
@ -366,6 +371,15 @@
</template>
</script>
<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
<template>
<div class="cd-hmedia-scroller">
<mediaitem-square-sp :item="item"
v-for="item in items"></mediaitem-square-sp>
</div>
</template>
</script>
<script type="text/x-template" id="mediaitem-list-item">
<template>
<div @click="app.playMediaItemById(item.id, item.type)"
@ -423,7 +437,7 @@
class="cd-mediaitem-square">
<div class="artwork"
:class="{'round': item.type == 'artists'}"
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
</div>
@ -434,6 +448,25 @@
</template>
</script>
<script type="text/x-template" id="mediaitem-square-sp">
<template>
<div @click="app.playMediaItemById(item.id, item.type)"
class="cd-mediaitem-square-sp"
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : transparent}"
>
<div class="artwork"
:class="{'round': item.type == 'artists'}"
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div>
<div class="title text-overflow-elipsis" style = "font-weight: 600">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis" style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;" >
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short :(item.attributes.artistName ?? '') }}
</div>
</div>
</template>
</script>
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
<script src="index.js?v=1"></script>

15
resources/cider-ui-tests/index.js
View file

@ -10,12 +10,24 @@ Vue.component('mediaitem-scroller-horizontal', {
methods: {}
});
Vue.component('mediaitem-scroller-horizontal-sp', {
template: '#mediaitem-scroller-horizontal-sp',
props: ['items'],
methods: {}
});
Vue.component('mediaitem-square', {
template: '#mediaitem-square',
props: ['item'],
methods: {}
});
Vue.component('mediaitem-square-sp', {
template: '#mediaitem-square-sp',
props: ['item'],
methods: {}
});
Vue.component('mediaitem-hrect', {
template: '#mediaitem-hrect',
props: ['item'],
@ -294,7 +306,7 @@ const app = new Vue({
document.addEventListener('musickitloaded', function () {
// MusicKit global is now defined
fetch("https://beta.music.apple.com/")
fetch("https://beta.music.apple.com/", {mode: "no-cors"})
.then(response => response.text())
.then(data => {
var el = document.createElement("html");
@ -302,7 +314,6 @@ document.addEventListener('musickitloaded', function () {
var u = el.querySelector(`[name="desktop-music-app/config/environment"]`)
var amwebCFG = JSON.parse(decodeURIComponent(u.getAttribute("content")));
console.log(amwebCFG.MEDIA_API.token)
// eh fuck it lets just expose the token
MusicKit.configure({
developerToken: "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IldlYlBsYXlLaWQifQ.eyJpc3MiOiJBTVBXZWJQbGF5IiwiaWF0IjoxNjM2NTYwMjc1LCJleHAiOjE2NTIxMTIyNzV9.is4KeAN_M9FWTfuw9zMV2lgHSSdPqEV2SX-XfCuEYY4qtmjbo-NjebHCageS28z0P0erksqql9rtsoizE4hsJg",
app: {

53
resources/cider-ui-tests/style.css
View file

@ -1400,6 +1400,59 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-size: 12px;
}
/* mediaitem-square-sp */
.cd-mediaitem-square-sp {
--spcolor: var("");
width: 190px;
height: 250px;
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
font-size: 14px;
justify-content: flex-start;
align-items: center;
border-radius: 6px;
margin-left: 10px;
cursor: pointer;
background-color: var(--spcolor);
}
.cd-mediaitem-square-sp:hover {
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
}
.cd-mediaitem-square-sp .artwork {
height: 190px;
width: 190px;
background: blue;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: var(--artwork);
background-size: cover;
box-shadow: var(--mediaItemShadow);
flex: 0 0 auto;
margin: 6px;
margin-top: 0px;
}
.cd-mediaitem-square-sp .artwork:hover {
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
}
.cd-mediaitem-square-sp .artwork.round {
border-radius: var(--mediaItemRadiusRound);
}
.cd-mediaitem-square-sp .title {
width: 90%;
text-align: center;
}
.cd-mediaitem-square-sp .subtitle {
width: 100%;
text-align: center;
font-size: 12px;
}
/* mediaitem-square */
.cd-mediaitem-square {