<script type="text/x-template" id="mediaitem-artwork">
    <div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url"
         v-observe-visibility="{callback: visibilityChanged}">
        <img :src="getMediaItemArtwork(url, size, width)"
             decoding="async" loading="lazy"
             class="mediaitem-artwork--img">
        <!-- <div v-if="video && isVisible && 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
            },
            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() {
                return false
            },
            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'
                };
            },
            visibilityChanged: function (isVisible, entry) {
                this.isVisible = isVisible
            },
            getMediaItemArtwork(url, height = 64, width) {
            if (typeof url == "undefined" || url == "") {
                return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg"
            }
            let newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900) ? "sr" : "cc"))}`;

            if (newurl.includes("900x516")) {
                newurl = newurl.replace("900x516cc", "900x516sr").replace("900x516bb", "900x516sr");
            }
            return newurl
            },
        }
    });
</script>