danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: update the history item in UI automaticly whenever a item_update received via sockets

Browse source
This commit is contained in:
arabcoders 2026-06-17 22:44:37 +03:00
parent 13424d1bcf
commit 72f2373c42
2 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/app/composables/useAppSocket.ts
View file

@ -1,5 +1,6 @@
import { proxyRefs, readonly, ref } from 'vue';
import { useYtpConfig } from '~/composables/useYtpConfig';
import { useHistoryState } from '~/composables/useHistoryState';
import { useQueueState } from '~/composables/useQueueState';
import type { StoreItem } from '~/types/store';
import type {
@ -17,6 +18,7 @@ type KnownEvent = keyof WSEP;
const getRuntimeConfig = () => useRuntimeConfig();
const getConfig = () => useYtpConfig();
const getHistoryState = () => useHistoryState();
const getQueueState = () => useQueueState();
const getToast = () => useNotification();
let queueReloadTimer: ReturnType<typeof setTimeout> | null = null;
@ -359,11 +361,15 @@ on('item_deleted', (data: WSEP['item_deleted']) => {
on('item_updated', (data: WSEP['item_updated']) => {
const queueState = getQueueState();
if (!queueState.isLoaded()) {
return;
if (queueState.isLoaded()) {
queueState.update(data.data._id, data.data);
}
queueState.update(data.data._id, data.data);
const historyState = getHistoryState();
if (historyState.isLoaded.value) {
historyState.update(data.data._id, data.data);
}
});
on('item_progress', (data: WSEP['item_progress']) => {

7
ui/app/composables/useHistoryState.ts
View file

@ -201,6 +201,12 @@ const reset = (): void => {
lastError.value = null;
};
const update = (id: string, data: StoreItem): void => {
const index = items.value.findIndex((item) => item._id === id);
if (index === -1) return;
items.value = [...items.value.slice(0, index), data, ...items.value.slice(index + 1)];
};
const upsert = (item: StoreItem): void => {
const existingIndex = items.value.findIndex((existing) => existing._id === item._id);
@ -252,6 +258,7 @@ export const useHistoryState = () => {
remove,
rename,
reset,
update,
upsert,
moveHandler,
};