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:
cryptofyre 2022-05-01 12:01:19 -05:00 committed by GitHub
commit 0da1b60c4b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

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