Merge branch 'ciderapp:main' into main
This commit is contained in:
Lucas Duarte
GitHub
commit
4b34b582f8
5 changed files with 61 additions and 17 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="play-btn" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
|
||||
<button class="menu-btn" v-if="!nomenu.includes(item.type)" @click="contextMenu"><%- include("../svg/more.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,35 +38,57 @@
|
|||
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;
|
||||
break;
|
||||
case "385": // editorial
|
||||
return ["mediaitem-brick"]
|
||||
break;
|
||||
case "music-videos":
|
||||
case "uploadedVideo":
|
||||
case "uploaded-videos":
|
||||
return "mediaitem-video";
|
||||
break;
|
||||
break;
|
||||
}
|
||||
},
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -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'">
|
||||
|
|
|
|||
|
|
@ -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"})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue