Merge branch 'ciderapp:main' into main

src/renderer/style.less

@@ -2547,7 +2547,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
     >.play-btn,
     >.menu-btn {
-      display: none;
+      opacity: 0;
       appearance: none;
       padding:0px;
       border:0px;
@@ -2557,6 +2557,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       background: rgba(50, 50, 50, 0.7);
       cursor: pointer;
       backdrop-filter: blur(32px) saturate(180%);
+      transition: opacity 0.1s var(--appleEase);
     }
 
     >.play-btn {
@@ -2576,7 +2577,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     &:hover {
       >.play-btn,
       >.menu-btn {
-        display: block;
+        opacity: 1;
       }
     }
   }
@@ -2601,6 +2602,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       width: 212px;
     }
   }
+
+  &.mediaitem-brick {
+    height: 200px;
+    width: 240px;
+    .artwork {
+      height: 123px;
+      width: 220px;
+    }
+  }
 }
 
 .cd-btn-seeall {

src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs

@@ -6,7 +6,7 @@
                    :badge="item.attributes"                     v-for="item in items"></mediaitem-mvview-sp>
             </template>
             <template v-else>
-                <mediaitem-square :kind="kind" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
+                <mediaitem-square :kind="kind" size="600" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
                 v-for="item in items"></mediaitem-square>
             </template>                            
         </div>

src/renderer/views/components/mediaitem-square.ejs

@@ -6,14 +6,14 @@
                     <div class="artwork-container">
                         <div class="artwork" @click='app.routeView(item)'>
                             <mediaitem-artwork
-                                    :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                                    :url="getArtworkUrl()"
                                     :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
-                                    size="300"
+                                    :size="size"
                                     shadow="subtle"
                                     :type="item.type"></mediaitem-artwork>
                         </div>
-                        <button class="menu-btn" v-if="item.type != 'artists' && item.type != 'stations'" @click="contextMenu"><%- include("../svg/more.svg") %></button>
+                        <button class="menu-btn" v-if="!nomenu.includes(item.type)" @click="contextMenu"><%- include("../svg/more.svg") %></button>
-                        <button class="play-btn" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
+                        <button class="play-btn" v-if="!noplay.includes(item.type)" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
                     </div>
                     <div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
                         {{ item.attributes.name }}
@@ -38,26 +38,45 @@
             kind: {
                 type: String,
                 default: ''
+            },
+            size: {
+                type: String,
+                default: '300'
             }
         },
         data: function () {
             return {
                 isVisible: false,
                 addedToLibrary: false,
-                guid: uuidv4()
+                guid: uuidv4(),
+                noplay: ["apple-curators"],
+                nomenu: ["artists", "stations", "apple-curators"]
             }
         },
         methods: {
+            getArtworkUrl() {
+                let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
+                switch (this.kind) {
+                    case "385":
+                        artwork = this.item.attributes.editorialArtwork.subscriptionHero.url
+                        break;
+                }
+                return artwork
+            },
             getClasses() {
                 let type = this.item.type
-                if(this.kind != "") {
+                if (this.kind != "") {
                     type = this.kind
                 }
-                switch(type) {
+                switch (type) {
                     default:
                         return []
                         break;
+                    case "385": // editorial
+                        return ["mediaitem-brick"]
+                        break;
                     case "music-videos":
+                    case "uploadedVideo":
                     case "uploaded-videos":
                         return "mediaitem-video";
                         break;
@@ -67,6 +86,9 @@
                 this.isVisible = isVisible
             },
             contextMenu(event) {
+                if(this.nomenu.includes(this.item.type)) {
+                    return
+                }
                 if (!event) { event = this.$refs.main } else { console.log(event) }
                 let self = this
                 let useMenu = "normal"

src/renderer/views/pages/browse.ejs

@@ -13,11 +13,11 @@
             </div>
             <template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
                 <template v-if="index === 0">
-                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
+                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0" :kind="recom.attributes.editorialElementKind"
                             :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                 </template>
                 <template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
-                    <mediaitem-scroller-horizontal-mvview :imagesize="800" kind="music-videos"
+                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
                             :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                 </template>
                 <template v-else-if="recom.attributes.name == 'Chart Set'">

src/renderer/views/pages/collection-list.ejs

@@ -8,10 +8,10 @@
                 </template>
                 <template v-else>
                     <mediaitem-list-item
-                            v-if="item.attributes.playParams.kind == 'song'"
+                            v-if="getKind(item) == 'song'"
                             :index="key"
                             :item="item"></mediaitem-list-item>
-                    <mediaitem-square v-else :item="item" :type="item.attributes.playParams.kind"></mediaitem-square>
+                    <mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
                 </template>
             </template>
             <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>
@@ -45,10 +45,22 @@
             return {
                 triggerEnabled: true,
                 canSeeTrigger: false,
-                showFab: false
+                showFab: false,
+                commonKind: "song"
             }
         },
         methods: {
+            getKind(item) {
+                if(typeof item.kind != "undefined") {
+                    this.commonKind = item.kind;
+                    return item.kind
+                }
+                if(typeof item.attributes.playParams != "undefined") {
+                    this.commonKind = item.attributes.playParams.kind
+                    return item.attributes.playParams.kind
+                }
+                return this.commonKind
+            },
             scrollToTop() {
                 let target = document.querySelector(".header-text")
                 target.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})