Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-20 15:34:17 +01:00
Code Issues Projects Releases Wiki Activity

perf(webui): throttle reloads, remove legacy reload logic

Browse source
This commit is contained in:
Gauthier Roebroeck 2021-06-29 16:13:20 +08:00
parent 11c5802255
commit e8a7eaf999
8 changed files with 94 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
komga-webui/src/services/komga-sse.service.ts
View file

@ -15,6 +15,8 @@ import {
READLIST_DELETED,
READPROGRESS_CHANGED,
READPROGRESS_DELETED,
READPROGRESS_SERIES_CHANGED,
READPROGRESS_SERIES_DELETED,
SERIES_ADDED,
SERIES_CHANGED,
SERIES_DELETED,
@ -76,6 +78,8 @@ export default class KomgaSseService {
// Read Progress
this.eventSource.addEventListener('ReadProgressChanged', (event: any) => this.emit(READPROGRESS_CHANGED, event))
this.eventSource.addEventListener('ReadProgressDeleted', (event: any) => this.emit(READPROGRESS_DELETED, event))
this.eventSource.addEventListener('ReadProgressSeriesChanged', (event: any) => this.emit(READPROGRESS_SERIES_CHANGED, event))
this.eventSource.addEventListener('ReadProgressSeriesDeleted', (event: any) => this.emit(READPROGRESS_SERIES_DELETED, event))
// Thumbnails
this.eventSource.addEventListener('ThumbnailBookAdded', (event: any) => this.emit(THUMBNAILBOOK_ADDED, event))

2
komga-webui/src/types/events.ts
View file

@ -21,6 +21,8 @@ export const READLIST_DELETED = 'readlist-deleted'
export const READPROGRESS_CHANGED = 'readprogress-changed'
export const READPROGRESS_DELETED = 'readprogress-deleted'
export const READPROGRESS_SERIES_CHANGED = 'readprogress-series-changed'
export const READPROGRESS_SERIES_DELETED = 'readprogress-series-deleted'
export const THUMBNAILBOOK_ADDED = 'thumbnailbook-added'
export const THUMBNAILSERIES_ADDED = 'thumbnailbook-added'

5
komga-webui/src/types/komga-sse.ts
View file

@ -28,6 +28,11 @@ export interface ReadProgressSseDto {
userId: string,
}
export interface ReadProgressSeriesSseDto {
seriesId: string,
userId: string,
}
export interface ThumbnailBookSseDto {
bookId: string,
seriesId: string,

49
komga-webui/src/views/BrowseCollection.vue
View file

@ -47,7 +47,7 @@
kind="series"
show-select-all
@unselect-all="selectedSeries = []"
@select-all="selectedSeries = $_.cloneDeep(series)"
@select-all="selectedSeries = series"
@mark-read="markSelectedRead"
@mark-unread="markSelectedUnread"
@add-to-collection="addToCollection"
@ -117,7 +117,14 @@
import CollectionActionsMenu from '@/components/menus/CollectionActionsMenu.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import {COLLECTION_CHANGED, COLLECTION_DELETED, SERIES_CHANGED, SERIES_DELETED} from '@/types/events'
import {
COLLECTION_CHANGED,
COLLECTION_DELETED,
READPROGRESS_SERIES_CHANGED,
READPROGRESS_SERIES_DELETED,
SERIES_CHANGED,
SERIES_DELETED,
} from '@/types/events'
import Vue from 'vue'
import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
import {LIBRARIES_ALL} from '@/types/library'
@ -132,7 +139,8 @@ import EmptyState from '@/components/EmptyState.vue'
import {SeriesDto} from "@/types/komga-series"
import {authorRoles} from "@/types/author-roles"
import {AuthorDto} from "@/types/komga-books"
import {CollectionSseDto, SeriesSseDto} from "@/types/komga-sse"
import {CollectionSseDto, ReadProgressSeriesSseDto, SeriesSseDto} from "@/types/komga-sse"
import {throttle} from 'lodash'
export default Vue.extend({
name: 'BrowseCollection',
@ -173,31 +181,21 @@ export default Vue.extend({
required: true,
},
},
watch: {
selectedSeries(val: SeriesDto[]) {
val.forEach(s => {
let index = this.series.findIndex(x => x.id === s.id)
if (index !== -1) {
this.series.splice(index, 1, s)
}
index = this.seriesCopy.findIndex(x => x.id === s.id)
if (index !== -1) {
this.seriesCopy.splice(index, 1, s)
}
})
},
},
created() {
this.$eventHub.$on(COLLECTION_CHANGED, this.collectionChanged)
this.$eventHub.$on(COLLECTION_DELETED, this.collectionDeleted)
this.$eventHub.$on(SERIES_CHANGED, this.seriesChanged)
this.$eventHub.$on(SERIES_DELETED, this.seriesChanged)
this.$eventHub.$on(READPROGRESS_SERIES_CHANGED, this.readProgressChanged)
this.$eventHub.$on(READPROGRESS_SERIES_DELETED, this.readProgressChanged)
},
beforeDestroy() {
this.$eventHub.$off(COLLECTION_CHANGED, this.collectionChanged)
this.$eventHub.$off(COLLECTION_DELETED, this.collectionDeleted)
this.$eventHub.$off(SERIES_CHANGED, this.seriesChanged)
this.$eventHub.$off(SERIES_DELETED, this.seriesChanged)
this.$eventHub.$off(READPROGRESS_SERIES_CHANGED, this.readProgressChanged)
this.$eventHub.$off(READPROGRESS_SERIES_DELETED, this.readProgressChanged)
},
async mounted() {
await this.resetParams(this.$route, this.collectionId)
@ -368,6 +366,9 @@ export default Vue.extend({
this.setWatches()
},
reloadSeries: throttle(function (this: any) {
this.loadSeries(this.collectionId)
}, 5000),
async loadSeries(collectionId: string) {
let authorsFilter = [] as AuthorDto[]
authorRoles.forEach((role: string) => {
@ -407,17 +408,13 @@ export default Vue.extend({
await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.markAsRead(s.id),
))
this.selectedSeries = await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.getOneSeries(s.id),
))
this.selectedSeries = []
},
async markSelectedUnread() {
await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.markAsUnread(s.id),
))
this.selectedSeries = await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.getOneSeries(s.id),
))
this.selectedSeries = []
},
addToCollection() {
this.$store.dispatch('dialogAddSeriesToCollection', this.selectedSeries)
@ -436,13 +433,15 @@ export default Vue.extend({
seriesIds: this.series.map(x => x.id),
} as CollectionUpdateDto
this.$komgaCollections.patchCollection(this.collectionId, update)
this.loadCollection(this.collectionId)
},
editCollection() {
this.$store.dispatch('dialogEditCollection', this.collection)
},
seriesChanged(event: SeriesSseDto) {
if (this.series.some(s => s.id === event.seriesId)) this.loadCollection(this.collectionId)
if (this.series.some(s => s.id === event.seriesId)) this.reloadSeries()
},
readProgressChanged(event: ReadProgressSeriesSseDto) {
if (this.series.some(b => b.id === event.seriesId)) this.reloadSeries()
},
},
})

45
komga-webui/src/views/BrowseLibraries.vue
View file

@ -30,7 +30,7 @@
kind="series"
show-select-all
@unselect-all="selectedSeries = []"
@select-all="selectedSeries = $_.cloneDeep(series)"
@select-all="selectedSeries = series"
@mark-read="markSelectedRead"
@mark-unread="markSelectedUnread"
@add-to-collection="addToCollection"
@ -115,7 +115,15 @@ import PageSizeSelect from '@/components/PageSizeSelect.vue'
import {parseQuerySort} from '@/functions/query-params'
import {ReadStatus, replaceCompositeReadStatus} from '@/types/enum-books'
import {SeriesStatus, SeriesStatusKeyValue} from '@/types/enum-series'
import {LIBRARY_CHANGED, LIBRARY_DELETED, SERIES_ADDED, SERIES_CHANGED, SERIES_DELETED} from '@/types/events'
import {
LIBRARY_CHANGED,
LIBRARY_DELETED,
READPROGRESS_SERIES_CHANGED,
READPROGRESS_SERIES_DELETED,
SERIES_ADDED,
SERIES_CHANGED,
SERIES_DELETED,
} from '@/types/events'
import Vue from 'vue'
import {Location} from 'vue-router'
import {LIBRARIES_ALL, LIBRARY_ROUTE} from '@/types/library'
@ -127,7 +135,8 @@ import {mergeFilterParams, sortOrFilterActive, toNameValue} from '@/functions/fi
import {SeriesDto} from "@/types/komga-series";
import {AuthorDto} from "@/types/komga-books";
import {authorRoles} from "@/types/author-roles";
import {LibrarySseDto, SeriesSseDto} from "@/types/komga-sse";
import {LibrarySseDto, ReadProgressSeriesSseDto, SeriesSseDto} from "@/types/komga-sse";
import {throttle} from "lodash";
export default Vue.extend({
name: 'BrowseLibraries',
@ -177,22 +186,14 @@ export default Vue.extend({
default: LIBRARIES_ALL,
},
},
watch: {
selectedSeries(val: SeriesDto[]) {
val.forEach(s => {
const index = this.series.findIndex(x => x.id === s.id)
if (index !== -1) {
this.series.splice(index, 1, s)
}
})
},
},
created() {
this.$eventHub.$on(SERIES_ADDED, this.seriesChanged)
this.$eventHub.$on(SERIES_CHANGED, this.seriesChanged)
this.$eventHub.$on(SERIES_DELETED, this.seriesChanged)
this.$eventHub.$on(LIBRARY_DELETED, this.libraryDeleted)
this.$eventHub.$on(LIBRARY_CHANGED, this.libraryChanged)
this.$eventHub.$on(READPROGRESS_SERIES_CHANGED, this.readProgressChanged)
this.$eventHub.$on(READPROGRESS_SERIES_DELETED, this.readProgressChanged)
},
beforeDestroy() {
this.$eventHub.$off(SERIES_ADDED, this.seriesChanged)
@ -200,6 +201,8 @@ export default Vue.extend({
this.$eventHub.$off(SERIES_DELETED, this.seriesChanged)
this.$eventHub.$off(LIBRARY_DELETED, this.libraryDeleted)
this.$eventHub.$off(LIBRARY_CHANGED, this.libraryChanged)
this.$eventHub.$off(READPROGRESS_SERIES_CHANGED, this.readProgressChanged)
this.$eventHub.$off(READPROGRESS_SERIES_DELETED, this.readProgressChanged)
},
async mounted() {
this.$store.commit('setLibraryRoute', {id: this.libraryId, route: LIBRARY_ROUTE.BROWSE})
@ -417,7 +420,7 @@ export default Vue.extend({
},
seriesChanged(event: SeriesSseDto) {
if (this.libraryId === LIBRARIES_ALL || event.libraryId === this.libraryId) {
this.loadPage(this.libraryId, this.page, this.sortActive)
this.reloadPage()
}
},
libraryChanged(event: LibrarySseDto) {
@ -425,6 +428,9 @@ export default Vue.extend({
this.loadLibrary(this.libraryId)
}
},
readProgressChanged(event: ReadProgressSeriesSseDto) {
if (this.series.some(b => b.id === event.seriesId)) this.reloadPage()
},
async loadLibrary(libraryId: string) {
this.library = this.getLibraryLazy(libraryId)
@ -444,6 +450,9 @@ export default Vue.extend({
this.$router.replace(loc).catch((_: any) => {
})
},
reloadPage: throttle(function (this: any) {
this.loadPage(this.libraryId, this.page, this.sortActive)
}, 5000),
async loadPage(libraryId: string, page: number, sort: SortActive) {
this.selectedSeries = []
@ -482,17 +491,13 @@ export default Vue.extend({
await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.markAsRead(s.id),
))
this.selectedSeries = await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.getOneSeries(s.id),
))
this.selectedSeries = []
},
async markSelectedUnread() {
await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.markAsUnread(s.id),
))
this.selectedSeries = await Promise.all(this.selectedSeries.map(s =>
this.$komgaSeries.getOneSeries(s.id),
))
this.selectedSeries = []
},
addToCollection() {
this.$store.dispatch('dialogAddSeriesToCollection', this.selectedSeries)

34
komga-webui/src/views/BrowseReadList.vue
View file

@ -40,7 +40,7 @@
kind="books"
show-select-all
@unselect-all="selectedBooks = []"
@select-all="selectedBooks = $_.cloneDeep(books)"
@select-all="selectedBooks = books"
@mark-read="markSelectedRead"
@mark-unread="markSelectedUnread"
@add-to-readlist="addToReadList"
@ -93,6 +93,7 @@ import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
import {BookDto, ReadProgressUpdateDto} from '@/types/komga-books'
import {ContextOrigin} from '@/types/context'
import {BookSseDto, ReadListSseDto, ReadProgressSseDto} from "@/types/komga-sse";
import {throttle} from "lodash";
export default Vue.extend({
name: 'BrowseReadList',
@ -117,20 +118,6 @@ export default Vue.extend({
required: true,
},
},
watch: {
selectedBooks (val: BookDto[]) {
val.forEach(s => {
let index = this.books.findIndex(x => x.id === s.id)
if (index !== -1) {
this.books.splice(index, 1, s)
}
index = this.booksCopy.findIndex(x => x.id === s.id)
if (index !== -1) {
this.booksCopy.splice(index, 1, s)
}
})
},
},
created () {
this.$eventHub.$on(READLIST_CHANGED, this.readListChanged)
this.$eventHub.$on(READLIST_DELETED, this.readListDeleted)
@ -180,11 +167,17 @@ export default Vue.extend({
async loadReadList (readListId: string) {
this.$komgaReadLists.getOneReadList(readListId)
.then(v => this.readList = v)
await this.loadBooks(readListId)
},
async loadBooks (readListId: string) {
this.books = (await this.$komgaReadLists.getBooks(readListId, { unpaged: true } as PageRequest)).content
this.books.forEach((x: BookDto) => x.context = { origin: ContextOrigin.READLIST, id: readListId })
this.booksCopy = [...this.books]
this.selectedBooks = []
},
reloadBooks: throttle(function (this: any) {
this.loadBooks(this.readListId)
}, 5000),
editSingleBook (book: BookDto) {
this.$store.dispatch('dialogUpdateBooks', book)
},
@ -195,17 +188,11 @@ export default Vue.extend({
await Promise.all(this.selectedBooks.map(b =>
this.$komgaBooks.updateReadProgress(b.id, { completed: true } as ReadProgressUpdateDto),
))
this.selectedBooks = await Promise.all(this.selectedBooks.map(b =>
this.$komgaBooks.getBook(b.id),
))
},
async markSelectedUnread () {
await Promise.all(this.selectedBooks.map(b =>
this.$komgaBooks.deleteReadProgress(b.id),
))
this.selectedBooks = await Promise.all(this.selectedBooks.map(b =>
this.$komgaBooks.getBook(b.id),
))
},
addToReadList () {
this.$store.dispatch('dialogAddBooksToReadList', this.selectedBooks)
@ -223,16 +210,15 @@ export default Vue.extend({
bookIds: this.books.map(x => x.id),
} as ReadListUpdateDto
this.$komgaReadLists.patchReadList(this.readListId, update)
this.loadReadList(this.readListId)
},
editReadList () {
this.$store.dispatch('dialogEditReadList', this.readList)
},
bookChanged (event: BookSseDto) {
if (this.books.some(b => b.id === event.bookId)) this.loadReadList(this.readListId)
if (this.books.some(b => b.id === event.bookId)) this.reloadBooks()
},
readProgressChanged(event: ReadProgressSseDto){
if (this.books.some(b => b.id === event.bookId)) this.loadReadList(this.readListId)
if (this.books.some(b => b.id === event.bookId)) this.reloadBooks()
},
},
})

2
komga-webui/src/views/Dashboard.vue
View file

@ -343,6 +343,7 @@ export default Vue.extend({
},
addToCollection() {
this.$store.dispatch('dialogAddSeriesToCollection', this.selectedSeries)
this.selectedSeries = []
},
editMultipleSeries() {
this.$store.dispatch('dialogUpdateSeries', this.selectedSeries)
@ -352,6 +353,7 @@ export default Vue.extend({
},
addToReadList() {
this.$store.dispatch('dialogAddBooksToReadList', this.selectedBooks)
this.selectedBooks = []
},
async markSelectedBooksRead() {
await Promise.all(this.selectedBooks.map(b =>

25
komga-webui/src/views/Search.vue
View file

@ -135,12 +135,22 @@ import {
READLIST_DELETED,
READPROGRESS_CHANGED,
READPROGRESS_DELETED,
READPROGRESS_SERIES_CHANGED,
READPROGRESS_SERIES_DELETED,
SERIES_CHANGED,
SERIES_DELETED,
} from '@/types/events'
import Vue from 'vue'
import {SeriesDto} from "@/types/komga-series";
import {BookSseDto, CollectionSseDto, ReadListSseDto, ReadProgressSseDto, SeriesSseDto} from "@/types/komga-sse";
import {
BookSseDto,
CollectionSseDto,
ReadListSseDto,
ReadProgressSeriesSseDto,
ReadProgressSseDto,
SeriesSseDto,
} from "@/types/komga-sse";
import {throttle} from "lodash";
export default Vue.extend({
name: 'Search',
@ -177,6 +187,8 @@ export default Vue.extend({
this.$eventHub.$on(READLIST_DELETED, this.readListChanged)
this.$eventHub.$on(READPROGRESS_CHANGED, this.readProgressChanged)
this.$eventHub.$on(READPROGRESS_DELETED, this.readProgressChanged)
this.$eventHub.$on(READPROGRESS_SERIES_CHANGED, this.readProgressSeriesChanged)
this.$eventHub.$on(READPROGRESS_SERIES_DELETED, this.readProgressSeriesChanged)
},
beforeDestroy () {
this.$eventHub.$off(LIBRARY_DELETED, this.reloadResults)
@ -190,6 +202,8 @@ export default Vue.extend({
this.$eventHub.$off(READLIST_DELETED, this.readListChanged)
this.$eventHub.$off(READPROGRESS_CHANGED, this.readProgressChanged)
this.$eventHub.$off(READPROGRESS_DELETED, this.readProgressChanged)
this.$eventHub.$off(READPROGRESS_SERIES_CHANGED, this.readProgressSeriesChanged)
this.$eventHub.$off(READPROGRESS_SERIES_DELETED, this.readProgressSeriesChanged)
},
watch: {
'$route.query.q': {
@ -231,6 +245,11 @@ export default Vue.extend({
this.reloadResults()
}
},
readProgressSeriesChanged(event: ReadProgressSeriesSseDto){
if(this.series.map(x => x.id).includes(event.seriesId)){
this.reloadResults()
}
},
collectionChanged (event: CollectionSseDto) {
if (this.collections.map(x => x.id).includes(event.collectionId)) {
this.reloadResults()
@ -297,9 +316,9 @@ export default Vue.extend({
this.$komgaBooks.deleteReadProgress(b.id),
))
},
reloadResults () {
reloadResults: throttle(function (this: any) {
this.loadResults(this.$route.query.q.toString())
},
}, 500),
async loadResults (search: string) {
this.selectedBooks = []
this.selectedSeries = []