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

Implemented vue-observe-visibility

Browse source
This commit is contained in:
booploops 2021-12-07 18:12:35 -08:00
parent 557081482e
commit 1d30107c59
6 changed files with 72 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

15
resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
View file

@ -6,10 +6,11 @@
</div>
</template>
<template v-else>
<div class="mediaitem-artwork">
<img :src="app.getMediaItemArtwork(url, size)"
<div class="mediaitem-artwork"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
class="mediaitem-artwork--img">
<div v-if="video" class="animatedartwork-view-box">
<div v-if="video && isVisible" class="animatedartwork-view-box">
<animatedartwork-view :video="video"></animatedartwork-view>
</div>
</div>
@ -20,12 +21,20 @@
Vue.component('mediaitem-artwork', {
template: '#mediaitem-artwork',
props: ['size', 'url', 'type', 'video'],
data: function () {
return {
isVisible: false
}
},
methods: {
getArtworkStyle() {
return {
width: this.size + 'px',
height: this.size + 'px'
};
},
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
}
}
});

81
resources/cider-ui-tests/views/components/mediaitem-list-item.ejs
View file

@ -1,44 +1,48 @@
<script type="text/x-template" id="mediaitem-list-item">
<template>
<div @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-list-item">
<div class="isLibrary" v-if="showLibraryStatus == true">
<button v-if="!app.isInLibrary(item.attributes.playParams)">🖤</button>
<button v-else>❤️</button>
</div>
<div class="artwork" v-if="showArtwork == true">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="34"
:type="item.type"></mediaitem-artwork>
</div>
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}">
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
<div
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
v-observe-visibility="{callback: visibilityChanged}"
class="cd-mediaitem-list-item">
<template v-if="isVisible">
<div class="isLibrary" v-if="showLibraryStatus == true">
<button v-if="!app.isInLibrary(item.attributes.playParams)">🖤</button>
<button v-else>❤️</button>
</div>
<div class="subtitle text-overflow-elipsis">
<template v-if="item.attributes.artistName">
{{ item.attributes.artistName }}
<template v-if="item.attributes.albumName">
- {{ item.attributes.albumName }}
<div class="artwork" v-if="showArtwork == true">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="34"
:type="item.type"></mediaitem-artwork>
</div>
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}">
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis">
<template v-if="item.attributes.artistName">
{{ item.attributes.artistName }}
<template v-if="item.attributes.albumName">
- {{ item.attributes.albumName }}
</template>
</template>
</template>
</div>
</div>
</div>
<div class="content-rating" v-if="item.attributes.contentRating">
{{ item.attributes.contentRating }}
</div>
<template v-if="showMetaData == true">
<div class="metainfo">
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString() : "" }}
<div class="content-rating" v-if="item.attributes.contentRating">
{{ item.attributes.contentRating }}
</div>
<div class="metainfo">
{{ item.attributes.genreNames[0] ?? "" }}
<template v-if="showMetaData == true">
<div class="metainfo">
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString() : "" }}
</div>
<div class="metainfo">
{{ item.attributes.genreNames[0] ?? "" }}
</div>
</template>
<div class="duration">
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
</div>
</template>
<div class="duration">
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
</div>
</div>
</template>
</script>
@ -46,12 +50,21 @@
<script>
Vue.component('mediaitem-list-item', {
template: '#mediaitem-list-item',
data: function () {
return {
isVisible: false
}
},
props: {
'item': {type: Object, required: true},
'show-artwork': {type: Boolean, default: true},
'show-library-status': {type: Boolean, default: true},
'show-meta-data': {type: Boolean, default: false}
},
methods: {}
methods: {
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
}
}
});
</script>