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

working on replacing mediaitem-sp on listen now with mediaitem-square variant

Browse source
This commit is contained in:
booploops 2022-01-05 05:39:21 -08:00
parent 9054bc50e2
commit 520c593d3f
3 changed files with 129 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/renderer/style.less
View file

@ -2703,6 +2703,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
overflow-x: overlay;
height: 210px;
}
&.hmedia-scroller-card {
height: 370px;
.mediaitem-card {
margin: 12px;
}
}
}
/* mediaitem-list-item */
@ -3255,6 +3262,64 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 128px;
}
}
&.mediaitem-card {
background: #ccc;
background: var(--spcolor);
height: 298px;
width: 230px;
max-width: 250px;
max-height: 500px;
overflow: hidden;
position: relative;
border-radius: calc(var(--mediaItemRadius) * 2);
box-shadow: var(--mediaItemShadow-ShadowSubtle);
.artwork {
width: 230px;
height: 230px;
overflow: hidden;
border-radius: 0px;
margin: 0;
.mediaitem-artwork {
border-radius: 0px;
&::after {
box-shadow: unset;
}
}
}
.title {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8em;
font-weight: 500;
}
.subtitle {
height: 100%;
justify-content: center;
align-items: center;
font-size: 0.7em;
width: 90%;
display: flex;
}
&::after {
box-shadow: var(--mediaItemShadow);
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
border-radius: inherit;
}
}
}
/* mediaitem-square */

6
src/renderer/views/components/mediaitem-scroller-horizontal-sp.ejs
View file

@ -1,8 +1,8 @@
<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 class="cd-hmedia-scroller hmedia-scroller-card">
<mediaitem-square kind="card" :item="item"
v-for="item in items"></mediaitem-square>
</div>
</template>
</script>

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

@ -1,7 +1,9 @@
<script type="text/x-template" id="mediaitem-square">
<div tabindex="0"
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
v-observe-visibility="{callback: visibilityChanged}">
v-observe-visibility="{callback: visibilityChanged}"
:style="{'--spcolor': getBgColor()}"
@click.self='app.routeView(item)'>
<template v-if="isVisible">
<div class="artwork-container">
<div class="artwork" @click='app.routeView(item)'>
@ -24,14 +26,14 @@
</div>
</div>
</div>
<div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
<div class="title item-navigate text-overflow-elipsis" v-if="item.attributes.artistNames == null" @click.self='app.routeView(item)'>
{{ item.attributes.name }}
</div>
<div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')"
v-if="item.attributes.artistName">
{{ item.attributes.artistName }}
v-if="getSubtitle() != ''">
{{ getSubtitle() }}
</div>
<div class="subtitle" v-else>&nbsp;</div>
<div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div>
</template>
</div>
</script>
@ -70,6 +72,49 @@
await this.getBadges()
},
methods: {
getBgColor() {
let color = `#${(this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : `333333`}`
let c = color.substring(1); // strip #
var rgb = parseInt(c, 16); // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff; // extract red
var g = (rgb >> 8) & 0xff; // extract green
var b = (rgb >> 0) & 0xff; // extract blue
var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
console.log(color)
console.log(luma)
if (luma > 140) {
return "#aaaaaa"
}else{
return color
}
},
getSubtitle() {
if(this.kind == 'card') {
try {
if (typeof this.item.attributes.artistNames != "undefined") {
return this.item.attributes.artistNames
} else if (typeof this.item.attributes.editorialNotes != "undefined") {
return this.item.attributes.editorialNotes.short
} else if (typeof this.item.attributes.artistName != "undefined") {
return this.item.attributes.artistName
} else {
return ''
}
}catch(e) {
return ''
}
}else {
if (typeof this.item.attributes.artistName != "undefined") {
return this.item.attributes.artistName
} else {
return ''
}
}
},
async getBadges() {
let self = this
if (this.badges[this.item.attributes.playParams.id ?? this.item.id]) {
@ -141,6 +186,9 @@
default:
return []
break;
case "card":
return ["mediaitem-card"]
break;
case "385": // editorial
return ["mediaitem-brick"]
break;
@ -332,9 +380,9 @@
},
},
beforeDestroy: function () {
this.item = null;
this.kind = null;
this.size = null;
// this.item = null;
// this.kind = null;
// this.size = null;
}
});
</script>