okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
umbreon22 2022-04-29 18:22:47 -07:00
parent df4c4d679b
commit 4ff7258a81
1 changed files with 9 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/views/components/queue.ejs
View file

@ -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()
}, },