152 lines
3.9 KiB
Text
152 lines
3.9 KiB
Text
<script type="text/x-template" id="mediaitem-artwork">
|
|
<div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu"
|
|
:class="[{'rounded': (type == 'artists')}, classes]" :key="url">
|
|
<img :src="imgSrc"
|
|
ref="image"
|
|
decoding="async"
|
|
loading="lazy"
|
|
:style="imgStyle"
|
|
@load="imgLoaded()"
|
|
class="mediaitem-artwork--img">
|
|
<div v-if="video && getVideoPriority()" class="animatedartwork-view-box">
|
|
<animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('mediaitem-artwork', {
|
|
template: '#mediaitem-artwork',
|
|
props: {
|
|
size: {
|
|
type: [String, Number],
|
|
default: '120'
|
|
},
|
|
width: {
|
|
type: [String, Number],
|
|
required: false
|
|
},
|
|
bgcolor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
url: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
video: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
videoPriority: {
|
|
type: Boolean,
|
|
required: false
|
|
},
|
|
shadow: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
upscaling: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data: function() {
|
|
return {
|
|
app: this.$root,
|
|
isVisible: false,
|
|
style: {
|
|
"box-shadow": ""
|
|
},
|
|
awStyle: {
|
|
background: this.bgcolor
|
|
},
|
|
imgStyle: {
|
|
opacity: 0,
|
|
transition: "opacity .25s linear"
|
|
},
|
|
classes: [],
|
|
imgSrc: ""
|
|
}
|
|
},
|
|
computed: {
|
|
windowRelativeScale: function() {
|
|
return app.$store.state.windowRelativeScale;
|
|
}
|
|
},
|
|
watch: {
|
|
windowRelativeScale: function(newValue, oldValue) {
|
|
this.swapImage(newValue)
|
|
},
|
|
url: function(newValue, oldValue) {
|
|
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getClasses()
|
|
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
|
|
},
|
|
methods: {
|
|
swapImage(newValue) {
|
|
if (!this.upscaling || window.devicePixelRatio !== 1) return
|
|
if (newValue > 1.5) {
|
|
this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
|
|
}
|
|
},
|
|
imgLoaded() {
|
|
this.imgStyle.opacity = 1
|
|
this.swapImage(app.$store.state.windowRelativeScale)
|
|
// this.awStyle.background = ""
|
|
},
|
|
contextMenu(event) {
|
|
let self = this
|
|
app.showMenuPanel({
|
|
items: {
|
|
"save": {
|
|
name: app.getLz('action.openArtworkInBrowser'),
|
|
action: () => {
|
|
window.open(app.getMediaItemArtwork(self.url, 1024, 1024))
|
|
}
|
|
}
|
|
}
|
|
}, event)
|
|
},
|
|
getVideoPriority() {
|
|
if (app.cfg.visual.animated_artwork == "always") {
|
|
return true;
|
|
} else if (this.videoPriority && app.cfg.visual.animated_artwork == "limited") {
|
|
return true
|
|
} else if (app.cfg.visual.animated_artwork == "disabled") {
|
|
return false
|
|
}
|
|
return this.videoPriority
|
|
},
|
|
getClasses() {
|
|
switch (this.shadow) {
|
|
case "none":
|
|
this.classes.push("no-shadow")
|
|
break;
|
|
case "large":
|
|
this.classes.push("shadow")
|
|
break;
|
|
case "subtle":
|
|
this.classes.push("subtle-shadow")
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return this.classes;
|
|
},
|
|
getArtworkStyle() {
|
|
return {
|
|
width: this.size + 'px',
|
|
height: this.size + 'px'
|
|
};
|
|
}
|
|
}
|
|
});
|
|
</script>
|