Limits the display of very large queue items to 50 at a time
This commit is contained in:
parent
df4c4d679b
commit
4ff7258a81
1 changed files with 9 additions and 3 deletions
|
@ -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()
|
||||
},
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue