Limits the display of very large queue items to 50 at a time

This commit is contained in:
umbreon22 2022-04-29 18:22:47 -07:00
parent df4c4d679b
commit 4ff7258a81

View file

@ -13,12 +13,11 @@
</div>
<div class="queue-body" v-if="page == 'queue'">
<draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
<template v-for="(queueItem, position) in queueItems">
<div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
<template v-for="(queueItem, position) in displayQueueItems">
<div class="cd-queue-item"
:class="{selected: selectedItems.includes(position)}"
@click="select($event, position)"
@dblclick="playQueueItem(position)" v-else :key="position"
@dblclick="playQueueItem(position)" :key="position"
@contextmenu="selected = position;queueContext($event, queueItem.item, position)">
<div class="row">
<div class="col-auto flex-center">
@ -61,6 +60,13 @@
app: this.$root
}
},
computed: {
displayQueueItems() {
const displayLimit = 50;
const lastDisplayPosition = Math.min(displayLimit + this.queuePosition, this.queueItems.length);
return this.queueItems.slice(this.queuePosition, lastDisplayPosition);
}
},
mounted() {
this.updateQueue()
},