smart playlist components

resources/cider-ui-tests/index.html

@@ -275,7 +275,12 @@
                     <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>

resources/cider-ui-tests/index.js

@@ -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: {

resources/cider-ui-tests/style.css

@@ -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 {