<script type="text/x-template" id="mediaitem-artwork">
    <div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
        <img :src="app.getMediaItemArtwork(url, size, width)"
             decoding="async"
             :style="{background: bgcolor}"
             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: ''
            }
        },
        data: function () {
            return {
                app:this.$root,
                isVisible: false,
                style: {
                    "box-shadow": ""
                },
                classes: []
            }
        },
        mounted() {
            this.getClasses()
        },
        methods: {
            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>