62 lines
No EOL
1.9 KiB
Text
62 lines
No EOL
1.9 KiB
Text
<script type="text/x-template" id="mediaitem-artwork">
|
|
<template v-if="type == 'artists'">
|
|
<div class="mediaitem-artwork rounded" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}">
|
|
<img :src="app.getMediaItemArtwork(url, size)"
|
|
class="mediaitem-artwork--img">
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="mediaitem-artwork" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}"
|
|
v-observe-visibility="{callback: visibilityChanged}">
|
|
<img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
|
|
class="mediaitem-artwork--img">
|
|
<div v-if="video && isVisible" class="animatedartwork-view-box">
|
|
<animatedartwork-view :video="video"></animatedartwork-view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('mediaitem-artwork', {
|
|
template: '#mediaitem-artwork',
|
|
props: {
|
|
size: {
|
|
type: String,
|
|
default: '120'
|
|
},
|
|
url: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
video: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
shadow: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
isVisible: false
|
|
}
|
|
},
|
|
methods: {
|
|
getArtworkStyle() {
|
|
return {
|
|
width: this.size + 'px',
|
|
height: this.size + 'px'
|
|
};
|
|
},
|
|
visibilityChanged: function (isVisible, entry) {
|
|
this.isVisible = isVisible
|
|
}
|
|
}
|
|
});
|
|
</script> |