<script type="text/x-template" id="queue-item">
    <template>
        <div v-observe-visibility="{callback: visibilityChanged}"
             @contextmenu="contextMenu"
             class="cd-mediaitem-list-item">
            <template v-if="isVisible">
                <div class="artwork">
                    <mediaitem-artwork
                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                            size="34"
                            :type="item.type"></mediaitem-artwork>
                </div>
                <div class="info-rect" :style="{'padding-left': '16px'}">
                    <div class="title text-overflow-elipsis">
                        {{ item.attributes.name }}
                    </div>
                    <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
                        <template v-if="item.attributes.artistName" >
                            <div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
                                {{ item.attributes.artistName }}
                            </div>
                            <template v-if="item.attributes.albumName">&nbsp;—&nbsp;</template>
                            <template v-if="item.attributes.albumName">
                                <div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
                                {{ item.attributes.albumName }}
                                </div>
                            </template>
                        </template>
                    </div>
                </div>
                <div class="duration">
                    {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
                </div>
            </template>
        </div>
    </template>
</script>

<script>
    Vue.component('queue-item', {
        template: '#queue-item',
        props: ['item'],
        data: function () {
            return {}
        },
        methods: {
            contextMenu(event) {
                let self = this
                CiderContextMenu.Create(event, {
                    items: [{
                        "name": $root.getLz('action.removeFromQueue'),
                        "action": function () {
                            
                        }
                    }]
                });
            },
            msToMinSec(ms) {
                var minutes = Math.floor(ms / 60000);
                var seconds = ((ms % 60000) / 1000).toFixed(0);
                return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
            },
        }
    });
</script>