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

changes to mediaitem elements

Browse source
This commit is contained in:
booploops 2021-12-21 17:26:06 -08:00
parent 773b397bbc
commit 287f8a490b
8 changed files with 78 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/renderer/style.less
View file

@ -2,8 +2,10 @@
:root {
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--mediaItemShadow-Shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
--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;
--mediaItemRadiusRound: 100%;
--contentInnerPadding: 16px;
@ -243,7 +245,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
z-index: 9;
height: 94%;
backdrop-filter: blur(40px) saturate(180%);
box-shadow: var(--mediaItemShadow-Shadow);
box-shadow: var(--ciderShadow-Generic);
}
.search-input-container {
@ -395,7 +397,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
padding: 6px;
border-radius: 6px;
width: 100%;
box-shadow: var(--mediaItemShadow-Shadow);
box-shadow: var(--ciderShadow-Generic);
}
.item {
@ -477,7 +479,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background: #242424;
padding: 6px;
border-radius: 6px;
box-shadow: var(--mediaItemShadow-Shadow);
box-shadow: var(--ciderShadow-Generic);
&.context-menu-open {
animation-duration: .10s;
@ -1752,7 +1754,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background: rgb(60 60 60);
border: 0px;
appearance: none;
box-shadow: var(--mediaItemShadow-Shadow);
box-shadow: var(--ciderShadow-Generic);
>svg {
height: 50%;
@ -1791,7 +1793,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.artist-more {
border-radius: 100%;
background: var(--keyColor);
box-shadow: var(--mediaItemShadow-Shadow);
box-shadow: var(--ciderShadow-Generic);
width: 36px;
height: 36px;
position: absolute;
@ -2593,8 +2595,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.mediaitem-video {
height: 200px;
width: 240px;
.artwork {
height: 106px;
height: 120px;
width: 212px;
}
}
}

26
src/renderer/views/components/mediaitem-artwork.ejs
View file

@ -1,12 +1,12 @@
<script type="text/x-template" id="mediaitem-artwork">
<template v-if="type == 'artists'">
<div class="mediaitem-artwork rounded" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}">
<div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
<img :src="app.getMediaItemArtwork(url, size)"
class="mediaitem-artwork--img">
</div>
</template>
<template v-else>
<div class="mediaitem-artwork" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}"
<div class="mediaitem-artwork" :key="url" :style="getStyle()"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
class="mediaitem-artwork--img">
@ -38,16 +38,32 @@
required: false
},
shadow: {
type: Boolean,
default: false
type: String,
default: 'none'
}
},
data: function () {
return {
isVisible: false
isVisible: false,
style: {
"box-shadow": ""
}
}
},
methods: {
getStyle() {
switch(this.shadow) {
case "large":
this.style["box-shadow"] = "var(--mediaItemShadow-Shadow)"
break;
case "subtle":
this.style["box-shadow"] = "var(--mediaItemShadow-ShadowSubtle)"
break;
default:
break;
}
return this.style;
},
getArtworkStyle() {
return {
width: this.size + 'px',

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

@ -6,8 +6,8 @@
:badge="item.attributes" v-for="item in items"></mediaitem-mvview-sp>
</template>
<template v-else>
<mediaitem-mvview :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-mvview>
<mediaitem-square :kind="kind" :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>
</template>
@ -17,7 +17,25 @@
<script>
Vue.component('mediaitem-scroller-horizontal-mvview', {
template: '#mediaitem-scroller-horizontal-mvview',
props: ['items',"imagesize","browsesp"],
props: {
items: {
type: Array,
required: true
},
imagesize: {
type: String,
required: true
},
browsesp: {
type: Boolean,
required: true
},
kind: {
type: String,
required: false,
default: ""
}
},
methods: {}
});
</script>

19
src/renderer/views/components/mediaitem-square.ejs
View file

@ -9,6 +9,7 @@
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
: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"
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>
@ -29,7 +30,16 @@
<script>
Vue.component('mediaitem-square', {
template: '#mediaitem-square',
props: ['item'],
props: {
item: {
type: Object,
required: true
},
kind: {
type: String,
default: ''
}
},
data: function () {
return {
isVisible: false,
@ -39,10 +49,15 @@
},
methods: {
getClasses() {
switch(this.item.type) {
let type = this.item.type
if(this.kind != "") {
type = this.kind
}
switch(type) {
default:
return []
break;
case "music-videos":
case "uploaded-videos":
return "mediaitem-video";
break;

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

@ -9,8 +9,7 @@
<div class="col-sm" style="width: auto;">
<div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
<mediaitem-artwork
:shadow="true"
shadow="large"
:url="data.attributes.artwork ? data.attributes.artwork.url : ''"
size="220" type="artists"></mediaitem-artwork>
<button class="overlay-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{

6
src/renderer/views/pages/browse.ejs
View file

@ -12,10 +12,14 @@
</div>
</div>
<template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
<template v-if="(['385']).includes(recom.attributes.editorialElementKind) || index === 0">
<template v-if="index === 0">
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
: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"
: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'">
<!-- ignored -->
</template>

3
src/renderer/views/pages/collection-list.ejs
View file

@ -11,8 +11,7 @@
v-if="item.attributes.playParams.kind == 'song'"
:index="key"
:item="item"></mediaitem-list-item>
<mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview>
<mediaitem-square v-else :item="item"></mediaitem-square>
<mediaitem-square v-else :item="item" :type="item.attributes.playParams.kind"></mediaitem-square>
</template>
</template>
<button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>

2
src/renderer/views/pages/recordLabel.ejs
View file

@ -5,7 +5,7 @@
<div class="col-sm" style="width: auto;">
<div class="artist-image">
<mediaitem-artwork
:shadow="true"
shadow="large"
:url="data.attributes.artwork ? data.attributes.artwork.url : ''"
size="220" type="artists"></mediaitem-artwork>
</div>