Merge pull request #959 from umbreon22/limit-large-queue-display
Limits the display of very large queue items to 50 at a time
This commit is contained in:
commit
0da1b60c4b
1 changed files with 9 additions and 3 deletions
|
@ -13,12 +13,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="queue-body" v-if="page == 'queue'">
|
<div class="queue-body" v-if="page == 'queue'">
|
||||||
<draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
|
<draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
|
||||||
<template v-for="(queueItem, position) in queueItems">
|
<template v-for="(queueItem, position) in displayQueueItems">
|
||||||
<div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
|
|
||||||
<div class="cd-queue-item"
|
<div class="cd-queue-item"
|
||||||
:class="{selected: selectedItems.includes(position)}"
|
:class="{selected: selectedItems.includes(position)}"
|
||||||
@click="select($event, 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)">
|
@contextmenu="selected = position;queueContext($event, queueItem.item, position)">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto flex-center">
|
<div class="col-auto flex-center">
|
||||||
|
@ -61,6 +60,13 @@
|
||||||
app: this.$root
|
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() {
|
mounted() {
|
||||||
this.updateQueue()
|
this.updateQueue()
|
||||||
},
|
},
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue