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

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">
<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>

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

@ -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>

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

@ -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>

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

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

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

@ -1,6 +1,6 @@
<script type="text/x-template" id="cider-artist">
<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
v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
: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">
<template v-for="(item, key) in data.data">
<template v-if="item.type == 'artists'">
<mediaitem-square-large :item="item"></mediaitem-square-large>
<mediaitem-square :item="item"></mediaitem-square>
</template>
<template v-else>
<mediaitem-list-item
@ -12,7 +12,7 @@
:index="key"
:item="item"></mediaitem-list-item>
<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>
<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>
<mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square-large>
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</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>
</div>

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

@ -41,8 +41,8 @@
</div>
</div>
</div>
<mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square-large>
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</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>
</div>

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

@ -5,7 +5,7 @@
</div>
</div>
<div class="madeforyou-body">
<mediaitem-square-large :item="item" v-for="item in madeforyou.data">
</mediaitem-square-large>
<mediaitem-square :item="item" v-for="item in madeforyou.data">
</mediaitem-square>
</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>
</div>
</div>
<mediaitem-square-large :item="item" v-for="item in data.views['latest-releases'].data">
</mediaitem-square-large>
<mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
</mediaitem-square>
</template>
<template v-if="data.views && data.views['top-releases']">
<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>
</div>
</div>
<mediaitem-square-large :item="item" v-for="item in data.views['top-releases'].data">
</mediaitem-square-large>
<mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
</mediaitem-square>
</template>
<template v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0">
<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>
</div>
</div>
<mediaitem-square-large :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
</mediaitem-square-large>
<mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
</mediaitem-square>
</template>
</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()">
<template>
<h3>Top Result</h3>
<mediaitem-square-large :item="getTopResult()"></mediaitem-square-large>
<mediaitem-square :item="getTopResult()"></mediaitem-square>
</template>
</div>
<div class="col" v-if="search.results.song">