<script type="text/x-template" id="mediaitem-hrect">
    <template>
        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
             class="cd-mediaitem-hrect">
            <div class="artwork">
                <mediaitem-artwork
                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                        size="70"
                        :type="item.type"></mediaitem-artwork>
            </div>
            <div class="info-rect">
                <div class="title text-overflow-elipsis">
                    {{ item.attributes.name }}
                </div>
                <div class="subtitle text-overflow-elipsis">
                    {{ item.type }}
                    <template v-if="item.attributes.artistName">
                        ∙ {{ item.attributes.artistName }}
                    </template>
                </div>
            </div>
        </div>
    </template>
</script>

<script>
    Vue.component('mediaitem-hrect', {
        template: '#mediaitem-hrect',
        props: ['item'],
        data: function () {
            return {
                app: this.$root,
            }
        },
        methods: {}
    });
</script>