Optimize stream and packet loading

This commit is contained in:
Sergey Shkurov 2023-04-30 01:49:34 +02:00
parent 07607d9464
commit 23503a5ac7
2 changed files with 35 additions and 6 deletions

View File

@ -130,6 +130,8 @@ export default {
methods: {
infiniteLoadingHandler($state) {
const ourStreams = this.streams;
const pageSize = this.$store.state.pageSize;
let startsFrom;
if (ourStreams?.length && ourStreams[ourStreams.length - 1]) {
startsFrom = ourStreams[ourStreams.length - 1].id;
@ -139,18 +141,31 @@ export default {
this.$http.post(`/stream/${this.$route?.params?.servicePort || 'all'}`, {
startingFrom: startsFrom,
pageSize: this.$store.state.pageSize,
pageSize: pageSize,
pattern: this.$route.query.pattern ? {id: this.$route.query.pattern,} : null,
favorites: this.$store.state.displayFavoritesOnly,
}).then(r => {
const data = r.data;
if (data?.length === 0) return $state.complete();
if (data?.length === 0) {
console.log('Finished loading streams (empty page)');
return $state.complete();
}
if (data[0]?.id === this.streams[0]?.id) {
console.log('Finished loading streams (overlap detected)');
return $state.complete();
}
this.streams.push(...data);
return $state.loaded();
if (data.length < pageSize) {
// this was the last page
console.log('Finished loading streams (last page was not full)');
$state.complete();
} else {
console.log('Loaded another page of streams');
$state.loaded()
}
}).catch(e => {
this.$bvToast.toast(`Failed to load portion of streams: ${e}`, {
title: 'Error',

View File

@ -33,6 +33,7 @@
if (!this.$route.params.streamId) return $state.complete();
const packets = this.packets;
const pageSize = this.$store.state.pageSize;
let startsFrom;
if (packets && packets.length && packets[packets.length - 1]) {
startsFrom = packets[packets.length - 1].id;
@ -42,14 +43,27 @@
this.$http.post(`packet/${this.$route.params.streamId}`, {
startingFrom: startsFrom,
pageSize: this.$store.state.pageSize,
pageSize: pageSize,
}).then(response => {
const data = response.data;
if (data.length === 0) return $state.complete();
if (data.length === 0) {
console.log('Finished loading packets (empty page)');
return $state.complete();
}
if (data[0] && this.packets[0] && data[0].id === this.packets[0].id) {
console.log('Finished loading packets (overlap detected)');
return $state.complete();
}
this.packets.push(...data);
if (data.length < pageSize) {
// this was the last page
console.log('Finished loading packets (last page was not full)');
$state.complete();
} else {
this.packets.push(...data);
console.log('Loaded another page of packets');
$state.loaded();
}
}).catch(e => {