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

merged mediaitem-square and mediaitem-square-large into the same element

Browse source 
added observed visibility to mediaitem-square.
fixed artist page animated artwork not changing when navigation to another artist with animated artwork
This commit is contained in:
booploops 2021-12-20 23:48:32 -08:00
parent 3b04f2d608
commit f8491848fd
12 changed files with 283 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

203
src/renderer/style.less
View file

@ -315,7 +315,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
align-items: center; align-items: center;
&.active { &.active {
background:rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56); animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
} }
} }
@ -324,9 +324,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
0% { 0% {
transform: translateY(0px); transform: translateY(0px);
} }
50% { 50% {
transform: translateY(-6px); transform: translateY(-6px);
} }
100% { 100% {
transform: translateY(0px); transform: translateY(0px);
} }
@ -387,6 +389,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
padding: 10px; padding: 10px;
z-index: 1; z-index: 1;
} }
.body { .body {
background: #242424; background: #242424;
padding: 6px; padding: 6px;
@ -394,6 +397,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
width: 100%; width: 100%;
box-shadow: var(--mediaItemShadow-Shadow); box-shadow: var(--mediaItemShadow-Shadow);
} }
.item { .item {
background: transparent; background: transparent;
display: block; display: block;
@ -407,6 +411,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
appearance: none; appearance: none;
border-radius: 6px; border-radius: 6px;
margin: 2px 0px; margin: 2px 0px;
&:hover { &:hover {
background: var(--keyColor); background: var(--keyColor);
} }
@ -416,8 +421,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.search-hints-container { .search-hints-container {
top: 44px; top: 44px;
#cmenu.container(); #cmenu.container();
.search-hints { .search-hints {
#cmenu.body(); #cmenu.body();
.search-hint { .search-hint {
#cmenu.item(); #cmenu.item();
} }
@ -427,8 +434,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.usermenu-container { .usermenu-container {
bottom: 66px; bottom: 66px;
#cmenu.container(); #cmenu.container();
.usermenu-body { .usermenu-body {
#cmenu.body(); #cmenu.body();
.usermenu-item { .usermenu-item {
#cmenu.item(); #cmenu.item();
} }
@ -469,12 +478,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
padding: 6px; padding: 6px;
border-radius: 6px; border-radius: 6px;
box-shadow: var(--mediaItemShadow-Shadow); box-shadow: var(--mediaItemShadow-Shadow);
&.context-menu-open { &.context-menu-open {
animation-duration: .10s; animation-duration: .10s;
animation-name: contextMenuIn; animation-name: contextMenuIn;
animation-iteration-count: 1; animation-iteration-count: 1;
animation-easings: var(--appleEase); animation-easings: var(--appleEase);
} }
&.context-menu-close { &.context-menu-close {
animation-duration: .10s; animation-duration: .10s;
animation-name: contextMenuOut; animation-name: contextMenuOut;
@ -489,6 +500,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
transform: scale(0.9); transform: scale(0.9);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
@ -500,6 +512,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: scale(0.9); transform: scale(0.9);
opacity: 0; opacity: 0;
@ -793,6 +806,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
background: @bgColor; background: @bgColor;
&:hover { &:hover {
>input[type=range] { >input[type=range] {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@ -802,6 +816,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
} }
} }
>input[type=range] { >input[type=range] {
appearance: none; appearance: none;
width: 100%; width: 100%;
@ -1389,11 +1404,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin-right: 0px; margin-right: 0px;
} }
.lyric-line.active .verse{ .lyric-line.active .verse {
opacity: 0.6; opacity: 0.6;
} }
.lyric-line.active .verse.verse-active{ .lyric-line.active .verse.verse-active {
opacity: 1; opacity: 1;
} }
@ -1517,6 +1532,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0px 1px 0px rgba(185, 185, 185, 0.08); box-shadow: 0px 1px 0px rgba(185, 185, 185, 0.08);
mix-blend-mode: hard-light; mix-blend-mode: hard-light;
.nav-item { .nav-item {
appearance: none; appearance: none;
border: 0px; border: 0px;
@ -1531,18 +1547,21 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin: 2px; margin: 2px;
border-radius: 6px; border-radius: 6px;
transition: transform .10s var(--appleEase); transition: transform .10s var(--appleEase);
&:active { &:active {
background: var(--selected-click); background: var(--selected-click);
transform: scale(0.96); transform: scale(0.96);
transition: transform 0s var(--appleEase); transition: transform 0s var(--appleEase);
} }
> svg {
>svg {
width: 8px; width: 8px;
pointer-events: none; pointer-events: none;
} }
&:hover { &:hover {
background: var(--selected); background: var(--selected);
>svg { >svg {
color: rgba(200, 200, 200, 1.0); color: rgba(200, 200, 200, 1.0);
} }
@ -1705,6 +1724,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
// Collection Page // Collection Page
.collection-page { .collection-page {
padding-bottom: 128px; padding-bottom: 128px;
.top-fab { .top-fab {
height: 52px; height: 52px;
width: 52px; width: 52px;
@ -1730,6 +1750,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background: var(--keyColor); background: var(--keyColor);
} }
} }
.header-text { .header-text {
margin-bottom: 32px; margin-bottom: 32px;
} }
@ -1739,7 +1760,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.artist-page { .artist-page {
padding: 0px; padding: 0px;
top:0; top: 0;
.artist-header { .artist-header {
background: linear-gradient(45deg, var(--keyColor), #0e0e0e); background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
@ -1762,9 +1783,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
border: 0px; border: 0px;
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;
&:hover { &:hover {
background: var(--keyColor-rollover); background: var(--keyColor-rollover);
} }
&:active { &:active {
background: var(--keyColor-pressed); background: var(--keyColor-pressed);
} }
@ -1800,30 +1823,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
height: 200px; height: 200px;
margin: 32px; margin: 32px;
position: relative; position: relative;
.overlay-play { .overlay-play {
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
width:100%; width: 100%;
height:100%; height: 100%;
opacity:0; opacity: 0;
background: rgb(0 0 0 / 50%); background: rgb(0 0 0 / 50%);
transition: opacity 0.1s var(--appleEase); transition: opacity 0.1s var(--appleEase);
border-radius: 100%; border-radius: 100%;
z-index:1; z-index: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
border:0px; border: 0px;
padding:0px; padding: 0px;
&:hover { &:hover {
opacity:1; opacity: 1;
} }
&:active { &:active {
background: var(--selected-click); background: var(--selected-click);
} }
>svg { >svg {
width: 70%; width: 70%;
} }
@ -1841,16 +1868,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: none; display: none;
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
border:0px; border: 0px;
padding:0px; padding: 0px;
transform: translateY(3px); transform: translateY(3px);
&:hover { &:hover {
background: var(--keyColor-rollover); background: var(--keyColor-rollover);
} }
&:active { &:active {
background: var(--keyColor-pressed); background: var(--keyColor-pressed);
} }
} }
&.artist-animation-on { &.artist-animation-on {
width: 100%; width: 100%;
flex: unset; flex: unset;
@ -1858,6 +1888,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
color: whitesmoke; color: whitesmoke;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
.artist-play { .artist-play {
display: block; display: block;
} }
@ -1929,6 +1960,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.rounded { &.rounded {
border-radius: 100%; border-radius: 100%;
&::after { &::after {
border-radius: 100%; border-radius: 100%;
} }
@ -1970,9 +2002,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.queue-footer { .queue-footer {
width:100%; width: 100%;
padding: 12px; padding: 12px;
} }
.autoplay { .autoplay {
background: rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
appearance: none; appearance: none;
@ -1988,10 +2021,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.cd-queue-item { .cd-queue-item {
border-bottom: 1px solid rgb(200 200 200 / 10%); border-bottom: 1px solid rgb(200 200 200 / 10%);
padding: 8px; padding: 8px;
.row, .col {
padding:0px; .row,
margin:0px; .col {
padding: 0px;
margin: 0px;
} }
.artwork { .artwork {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -2008,12 +2044,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.queue-info { .queue-info {
display:flex; display: flex;
flex-direction: column; flex-direction: column;
.queue-title { .queue-title {
font-size: 14px; font-size: 14px;
} }
.queue-subtitle { .queue-subtitle {
font-size: 13px; font-size: 13px;
opacity: 0.85; opacity: 0.85;
@ -2077,9 +2114,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
padding: 0px; padding: 0px;
z-index: 5; z-index: 5;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
&:active { &:active {
background: var(--selected-click); background: var(--selected-click);
} }
@ -2152,16 +2191,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&:hover { &:hover {
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
.overlay-play { .overlay-play {
opacity: 1; opacity: 1;
} }
} }
&.mediaitem-selected { &.mediaitem-selected {
background: var(--selected); background: var(--selected);
} }
&:active { &:active {
background: var(--selected-click); background: var(--selected-click);
color: #eee; color: #eee;
@ -2264,6 +2304,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
>.cd-mediaitem-square-large-overlay { >.cd-mediaitem-square-large-overlay {
z-index: 3; z-index: 3;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
@ -2275,7 +2316,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&:hover+.cd-mediaitem-square-large-overlay { &:hover+.cd-mediaitem-square-large-overlay {
opacity: 1; opacity: 1;
} }
&:hover { &:hover {
@ -2456,8 +2497,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* mediaitem-square */ /* mediaitem-square */
.cd-mediaitem-square { .cd-mediaitem-square {
width: 200px; width: 220px;
height: 190px; height: 260px;
display: inline-flex; display: inline-flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: column; flex-direction: column;
@ -2465,40 +2506,74 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 6px; border-radius: 6px;
cursor: pointer;
}
.cd-mediaitem-square:hover { .artwork-container {
background: rgb(200 200 200 / 10%); position: relative;
}
.cd-mediaitem-square .artwork { .artwork {
height: 128px; height: 190px;
width: 128px; width: 190px;
background: blue; background: blue;
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
background: var(--artwork); background: var(--artwork);
background-size: cover; background-size: cover;
box-shadow: var(--mediaItemShadow); flex: 0 0 auto;
flex: 0 0 auto; margin: 6px;
margin: 6px; cursor: pointer;
}
.cd-mediaitem-square .artwork.round { &.round {
border-radius: var(--mediaItemRadiusRound); border-radius: var(--mediaItemRadiusRound);
} }
}
.cd-mediaitem-square .title { >.play-btn,
width: 90%; >.menu-btn {
text-align: center; display: none;
} appearance: none;
padding:0px;
border:0px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(50, 50, 50, 0.7);
cursor: pointer;
backdrop-filter: blur(32px) saturate(180%);
}
.cd-mediaitem-square .subtitle { >.play-btn {
width: 100%; position: absolute;
text-align: center; bottom: 16px;
font-size: 12px; right: 16px;
} z-index: 2;
}
>.menu-btn {
position: absolute;
bottom: 16px;
left: 16px;
z-index: 2;
}
&:hover {
>.play-btn,
>.menu-btn {
display: block;
}
}
}
.title {
width: 90%;
text-align: center;
}
.subtitle {
width: 100%;
text-align: center;
font-size: 12px;
}
}
.cd-btn-seeall { .cd-btn-seeall {
background: transparent; background: transparent;
@ -2509,6 +2584,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 16px; font-size: 16px;
border-radius: 4px; border-radius: 4px;
padding: 6px; padding: 6px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background: rgb(200 200 200 / 10%) background: rgb(200 200 200 / 10%)
@ -2672,21 +2748,21 @@ div#captions {
} }
.item-navigate:hover { .item-navigate:hover {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
.title-browse-sp{ .title-browse-sp {
width: 100%; width: 100%;
text-align: left; text-align: left;
margin-bottom: 2px; margin-bottom: 2px;
} }
.bold{ .bold {
font-weight: bold; font-weight: bold;
} }
.semibold{ .semibold {
font-weight: 500; font-weight: 500;
} }
@ -2720,6 +2796,7 @@ input[type=checkbox][switch]:checked {
&:hover { &:hover {
background: var(--keyColor-rollover); background: var(--keyColor-rollover);
} }
&:active { &:active {
background: var(--keyColor-pressed); background: var(--keyColor-pressed);
} }
@ -2761,6 +2838,6 @@ input[type=checkbox][switch]:checked:active::before {
/* End Switch Checkbox */ /* End Switch Checkbox */
.madeforyou-body{ .madeforyou-body {
margin-top: 15px; margin-top: 15px;
} }

4
src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs
View file

@ -1,8 +1,8 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-large"> <script type="text/x-template" id="mediaitem-scroller-horizontal-large">
<template> <template>
<div class="cd-hmedia-scroller"> <div class="cd-hmedia-scroller">
<mediaitem-square-large :item="item" <mediaitem-square :item="item"
v-for="item in items"></mediaitem-square-large> v-for="item in items"></mediaitem-square>
</div> </div>
</template> </template>
</script> </script>

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

@ -74,22 +74,22 @@
Vue.component('mediaitem-square-large', { Vue.component('mediaitem-square-large', {
template: '#mediaitem-square-large', template: '#mediaitem-square-large',
props: ['item'], props: ['item'],
methods: { methods: {
clickContext() { clickContext() {
var evt = document.createEvent('MouseEvent'); var evt = document.createEvent('MouseEvent');
var rect = this.$refs.main2.getBoundingClientRect(); var rect = this.$refs.main2.getBoundingClientRect();
evt.initMouseEvent( evt.initMouseEvent(
"contextmenu", "contextmenu",
true /* bubble */, true /* cancelable */, true /* bubble */, true /* cancelable */,
window, null, window, null,
0, 0, rect.x + 100, rect.y +100, /* coordinates */ 0, 0, rect.x + 100, rect.y + 100, /* coordinates */
false, false, false, false, /* modifier keys */ false, false, false, false, /* modifier keys */
0 /*left*/, null 0 /*left*/, null
); );
this.$refs.main.dispatchEvent(evt); this.$refs.main.dispatchEvent(evt);
} }
,contextMenu(event) { , contextMenu(event) {
if (!event){event = this.$refs.main} else {console.log(event)} if (!event) { event = this.$refs.main } else { console.log(event) }
let self = this let self = this
let useMenu = "normal" let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) { if (app.selectedMediaItems.length <= 1) {
@ -115,7 +115,7 @@
for (let kind in itemsToPlay) { for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind] let ids = itemsToPlay[kind]
if (ids.length > 0) { if (ids.length > 0) {
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]}) app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
} }
} }
console.log(itemsToPlay) console.log(itemsToPlay)
@ -136,7 +136,7 @@
for (let kind in itemsToPlay) { for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind] let ids = itemsToPlay[kind]
if (ids.length > 0) { if (ids.length > 0) {
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]}) app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
} }
} }
app.selectedMediaItems = [] app.selectedMediaItems = []
@ -149,7 +149,7 @@
{ {
"name": "Play Next", "name": "Play Next",
"action": function () { "action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
app.mk.queue._reindex() app.mk.queue._reindex()
app.selectedMediaItems = [] app.selectedMediaItems = []
} }
@ -157,7 +157,7 @@
{ {
"name": "Play Later", "name": "Play Later",
"action": function () { "action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
app.mk.queue._reindex() app.mk.queue._reindex()
app.selectedMediaItems = [] app.selectedMediaItems = []
} }
@ -166,6 +166,7 @@
} }
} }
CiderContextMenu.Create(event, menus[useMenu]) CiderContextMenu.Create(event, menus[useMenu])
},} },
}
}); });
</script> </script>

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

@ -1,19 +1,26 @@
<script type="text/x-template" id="mediaitem-square"> <script type="text/x-template" id="mediaitem-square">
<template> <template>
<div tabindex="0" @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)" <div tabindex="0"
class="cd-mediaitem-square"> class="cd-mediaitem-square" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
<div class="artwork"> <template v-if="isVisible">
<mediaitem-artwork <div class="artwork-container">
:url="item.attributes.artwork ? item.attributes.artwork.url : ''" <div class="artwork" @click='app.routeView(item)'>
size="300" <mediaitem-artwork
:type="item.type"></mediaitem-artwork> :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
</div> :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 : '')) : '' "
<div class="title text-overflow-elipsis"> size="300"
{{ item.attributes.name }} :type="item.type"></mediaitem-artwork>
</div> </div>
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName"> <button class="menu-btn" v-if="item.type != 'artists' && item.type != 'stations'" @click="contextMenu"><%- include("../svg/more.svg") %></button>
{{ item.attributes.artistName }} <button class="play-btn" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
</div> </div>
<div class="title item-navigate text-overflow-elipsis" @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 }}
</div>
</template>
</div> </div>
</template> </template>
</script> </script>
@ -22,6 +29,96 @@
Vue.component('mediaitem-square', { Vue.component('mediaitem-square', {
template: '#mediaitem-square', template: '#mediaitem-square',
props: ['item'], props: ['item'],
methods: {} data: function () {
return {
isVisible: false,
addedToLibrary: false,
guid: uuidv4()
}
},
methods: {
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
},
contextMenu(event) {
if (!event) { event = this.$refs.main } else { console.log(event) }
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} else {
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{
name: `Play ${app.selectedMediaItems.length} tracks next`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
}
}
console.log(itemsToPlay)
app.selectedMediaItems = []
}
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
}
}
app.selectedMediaItems = []
}
},
]
},
normal: {
items: [
{
"name": "Play Next",
"action": function () {
app.mk.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
{
"name": "Play Later",
"action": function () {
app.mk.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
]
}
}
CiderContextMenu.Create(event, menus[useMenu])
},
}
}); });
</script> </script>

2
src/renderer/views/main.ejs
View file

@ -503,8 +503,6 @@
<%- include('components/mediaitem-hrect') %> <%- include('components/mediaitem-hrect') %>
<!-- MediaItem Square --> <!-- MediaItem Square -->
<%- include('components/mediaitem-square') %> <%- include('components/mediaitem-square') %>
<!-- MediaItem Square (Large) -->
<%- include('components/mediaitem-square-large') %>
<!-- MediaItem Square SP --> <!-- MediaItem Square SP -->
<%- include('components/mediaitem-square-sp') %> <%- include('components/mediaitem-square-sp') %>
<!-- MediaItem MusicVideo --> <!-- MediaItem MusicVideo -->

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

@ -1,6 +1,6 @@
<script type="text/x-template" id="cider-artist"> <script type="text/x-template" id="cider-artist">
<div class="content-inner artist-page"> <div class="content-inner artist-page">
<div class="artist-header" :style="getArtistPalette(data)"> <div class="artist-header" :style="getArtistPalette(data)" :key="data.id">
<animatedartwork-view <animatedartwork-view
v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)" v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
:video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')"> :video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">

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

@ -4,7 +4,7 @@
<div v-if="data['data'] != 'null'" class="well"> <div v-if="data['data'] != 'null'" class="well">
<template v-for="(item, key) in data.data"> <template v-for="(item, key) in data.data">
<template v-if="item.type == 'artists'"> <template v-if="item.type == 'artists'">
<mediaitem-square-large :item="item"></mediaitem-square-large> <mediaitem-square :item="item"></mediaitem-square>
</template> </template>
<template v-else> <template v-else>
<mediaitem-list-item <mediaitem-list-item
@ -12,7 +12,7 @@
:index="key" :index="key"
:item="item"></mediaitem-list-item> :item="item"></mediaitem-list-item>
<mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview> <mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview>
<mediaitem-square-large v-else :item="item"></mediaitem-square-large> <mediaitem-square v-else :item="item"></mediaitem-square>
</template> </template>
</template> </template>
<button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button> <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>

4
src/renderer/views/pages/library-albums.ejs
View file

@ -48,8 +48,8 @@
</div> </div>
</div> </div>
</div> </div>
<mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing"> <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square-large> </mediaitem-square>
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing"> <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item> </mediaitem-list-item>
</div> </div>

4
src/renderer/views/pages/library-recentlyadded.ejs
View file

@ -41,8 +41,8 @@
</div> </div>
</div> </div>
</div> </div>
<mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing"> <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square-large> </mediaitem-square>
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing"> <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item> </mediaitem-list-item>
</div> </div>

4
src/renderer/views/pages/madeforyou.ejs
View file

@ -5,7 +5,7 @@
</div> </div>
</div> </div>
<div class="madeforyou-body"> <div class="madeforyou-body">
<mediaitem-square-large :item="item" v-for="item in madeforyou.data"> <mediaitem-square :item="item" v-for="item in madeforyou.data">
</mediaitem-square-large> </mediaitem-square>
</div> </div>
</div> </div>

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

@ -36,8 +36,8 @@
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Latest Releases', 'latest-releases')">See All</button> <button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Latest Releases', 'latest-releases')">See All</button>
</div> </div>
</div> </div>
<mediaitem-square-large :item="item" v-for="item in data.views['latest-releases'].data"> <mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
</mediaitem-square-large> </mediaitem-square>
</template> </template>
<template v-if="data.views && data.views['top-releases']"> <template v-if="data.views && data.views['top-releases']">
<div class="row"> <div class="row">
@ -48,8 +48,8 @@
<button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Top Releases', 'top-releases')">See All</button> <button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' - Top Releases', 'top-releases')">See All</button>
</div> </div>
</div> </div>
<mediaitem-square-large :item="item" v-for="item in data.views['top-releases'].data"> <mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
</mediaitem-square-large> </mediaitem-square>
</template> </template>
<template v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0"> <template v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0">
<div class="row"> <div class="row">
@ -60,8 +60,8 @@
<button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' - Playlists', 'curator')">See All</button> <button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' - Playlists', 'curator')">See All</button>
</div> </div>
</div> </div>
<mediaitem-square-large :item="item" v-for="item in data.relationships.playlists.data.limit(5)"> <mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
</mediaitem-square-large> </mediaitem-square>
</template> </template>
</div> </div>
</div> </div>

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

@ -4,7 +4,7 @@
<div class="col-sm" style="width: auto;" v-if="getTopResult()"> <div class="col-sm" style="width: auto;" v-if="getTopResult()">
<template> <template>
<h3>Top Result</h3> <h3>Top Result</h3>
<mediaitem-square-large :item="getTopResult()"></mediaitem-square-large> <mediaitem-square :item="getTopResult()"></mediaitem-square>
</template> </template>
</div> </div>
<div class="col" v-if="search.results.song"> <div class="col" v-if="search.results.song">