<script type="text/x-template" id="animatedartwork-view">
    <div class="animated" v-bind:vid="app.hashCode(video).toString()" v-if="video">
        <video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video>
    </div>
</script>

<script>
    Vue.component('animatedartwork-view', {
        template: '#animatedartwork-view',
        data: function () {
            return {
                app: this.$root,
                hls: null,
            }
        },
        props: {
            video: {
                type: String,
                required: true
            },
            priority: {
                type: Boolean,
                default: false
            }
        },
        async mounted() {
            if (!this.priority && app.cfg.visual.animated_artwork == "limited") {
                return
            } else if (app.cfg.visual.animated_artwork == "disabled") {
                return
            }
            if (this.video) {
                this.$nextTick(function () {
                    var config = {
                        backBufferLength: 0,
                        enableWebVTT: false,
                        enableCEA708Captions: false,
                        emeEnabled: false,
                        abrEwmaDefaultEstimate: 10000,
                        testBandwidth: false,
                    };
                    if (this.hls) {
                        this.hls.detachMedia();
                    } else {

                        this.hls = new CiderHls(config);
                    }
                    // bind them together
                    if (this.$refs.video) {
                        let d = "WIDEVINE_SOFTWARE"
                        let h = {
                            initDataTypes: ["cenc", "keyids"],
                            distinctiveIdentifier: "optional",
                            persistentState: "required"
                        }
                        let p = {
                            platformInfo: {requiresCDMAttachOnStart: !0, maxSecurityLevel: d, keySystemConfig: h},
                            appData: {serviceName: "Apple Music"}
                        }
                        
                        this.hls.attachMedia(this.$refs.video);
                        this.hls.loadSource(this.video);
                        let u = this.hls;
                        var quality = app.cfg.visual.animated_artwork_qualityLevel;
                        setTimeout(() => {                       
                        let levelsnum = u.levels.map((level)=>{return level.width})
                        if (levelsnum.length > 0) {
                        let qualities = []
                        let qualities2 = []
                        for (let i = 0; i < levelsnum.length; i++) {
                            if (qualities2.indexOf(levelsnum[i]) == -1) {
                                qualities.push({level: i, quality: levelsnum[i]})
                                qualities2.push(levelsnum[i])
                            }
                        }
                        let actualnum = Math.floor(qualities[qualities.length -1 ].level * (quality / 4))
                        if (quality != 0 ){
                            quality = qualities[Math.min(actualnum,qualities.length -1 )].level
                        }
                        if (quality == 4 ){
                            quality = qualities[qualities.length - 1].level
                        }
                        }
                        try{
                        this.hls.loadLevel = parseInt( quality || 1);} catch(e){}},200)
                    }
                })
            }
        },
        async beforeDestroy() {
            if (this.hls) {
                await this.hls.destroy();
                this.hls = null
            }
        }
    });
</script>