merged mediaitem-square and mediaitem-square-large into the same element
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
parent
3b04f2d608
commit
f8491848fd
12 changed files with 283 additions and 110 deletions
|
|
@ -1,8 +1,8 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
|
||||
<template>
|
||||
<div class="cd-hmedia-scroller">
|
||||
<mediaitem-square-large :item="item"
|
||||
v-for="item in items"></mediaitem-square-large>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -74,22 +74,22 @@
|
|||
Vue.component('mediaitem-square-large', {
|
||||
template: '#mediaitem-square-large',
|
||||
props: ['item'],
|
||||
methods: {
|
||||
clickContext() {
|
||||
var evt = document.createEvent('MouseEvent');
|
||||
methods: {
|
||||
clickContext() {
|
||||
var evt = document.createEvent('MouseEvent');
|
||||
var rect = this.$refs.main2.getBoundingClientRect();
|
||||
evt.initMouseEvent(
|
||||
"contextmenu",
|
||||
true /* bubble */, true /* cancelable */,
|
||||
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 */
|
||||
0 /*left*/, null
|
||||
);
|
||||
this.$refs.main.dispatchEvent(evt);
|
||||
}
|
||||
,contextMenu(event) {
|
||||
if (!event){event = this.$refs.main} else {console.log(event)}
|
||||
}
|
||||
, contextMenu(event) {
|
||||
if (!event) { event = this.$refs.main } else { console.log(event) }
|
||||
let self = this
|
||||
let useMenu = "normal"
|
||||
if (app.selectedMediaItems.length <= 1) {
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
for (let kind in itemsToPlay) {
|
||||
let ids = itemsToPlay[kind]
|
||||
if (ids.length > 0) {
|
||||
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
|
||||
app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
|
||||
}
|
||||
}
|
||||
console.log(itemsToPlay)
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
for (let kind in itemsToPlay) {
|
||||
let ids = itemsToPlay[kind]
|
||||
if (ids.length > 0) {
|
||||
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
|
||||
app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
|
||||
}
|
||||
}
|
||||
app.selectedMediaItems = []
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
{
|
||||
"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.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
|
||||
app.mk.queue._reindex()
|
||||
app.selectedMediaItems = []
|
||||
}
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
{
|
||||
"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.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
|
||||
app.mk.queue._reindex()
|
||||
app.selectedMediaItems = []
|
||||
}
|
||||
|
|
@ -166,6 +166,7 @@
|
|||
}
|
||||
}
|
||||
CiderContextMenu.Create(event, menus[useMenu])
|
||||
},}
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,19 +1,26 @@
|
|||
<script type="text/x-template" id="mediaitem-square">
|
||||
<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)"
|
||||
class="cd-mediaitem-square">
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="300"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
</div>
|
||||
<div tabindex="0"
|
||||
class="cd-mediaitem-square" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
|
||||
<template v-if="isVisible">
|
||||
<div class="artwork-container">
|
||||
<div class="artwork" @click='app.routeView(item)'>
|
||||
<mediaitem-artwork
|
||||
: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"
|
||||
: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>
|
||||
</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>
|
||||
</template>
|
||||
</script>
|
||||
|
|
@ -22,6 +29,96 @@
|
|||
Vue.component('mediaitem-square', {
|
||||
template: '#mediaitem-square',
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue