mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Refactor ItemsContainer invalidate Queries

Browse source
This commit is contained in:
grafixeyehero 2024-01-31 04:36:00 +03:00
parent 42b4d08e55
commit e3b618f2fb
1 changed files with 43 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

187
src/elements/emby-itemscontainer/ItemsContainer.tsx
View file

@ -1,13 +1,11 @@
import type {
LibraryUpdateInfo,
SeriesTimerInfoDto,
TimerInfoDto,
UserItemDataDto
LibraryUpdateInfo
} from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef } from 'react';
import classNames from 'classnames';
import { Box } from '@mui/material';
import Box from '@mui/material/Box';
import Sortable from 'sortablejs';
import { useQueryClient } from '@tanstack/react-query';
import { usePlaylistsMoveItemMutation } from 'hooks/useFetchItems';
import Events, { Event } from 'utils/events';
import serverNotifications from 'scripts/serverNotifications';
@ -40,11 +38,11 @@ interface ItemsContainerProps {
isContextMenuEnabled?: boolean;
isMultiSelectEnabled?: boolean;
isDragreOrderEnabled?: boolean;
dataMonitor?: string;
eventsToMonitor?: string[];
parentId?: ParentId;
reloadItems?: () => void;
getItemsHtml?: () => string;
children?: React.ReactNode;
queryKey?: string[]
}
const ItemsContainer: FC<ItemsContainerProps> = ({
@ -52,12 +50,14 @@ const ItemsContainer: FC<ItemsContainerProps> = ({
isContextMenuEnabled,
isMultiSelectEnabled,
isDragreOrderEnabled,
dataMonitor,
eventsToMonitor = [],
parentId,
queryKey,
reloadItems,
getItemsHtml,
children
}) => {
const queryClient = useQueryClient();
const { mutateAsync: playlistsMoveItemMutation } = usePlaylistsMoveItemMutation();
const itemsContainerRef = useRef<HTMLDivElement>(null);
const multiSelectref = useRef<MultiSelect | null>(null);
@ -172,6 +172,14 @@ const ItemsContainer: FC<ItemsContainerProps> = ({
}
}, []);
const invalidateQueries = useCallback(async () => {
await queryClient.invalidateQueries({
queryKey: queryKey,
type: 'all',
refetchType: 'active'
});
}, [queryClient, queryKey]);
const notifyRefreshNeeded = useCallback(
(isInForeground: boolean) => {
if (!reloadItems) return;
@ -184,144 +192,37 @@ const ItemsContainer: FC<ItemsContainerProps> = ({
[reloadItems]
);
const getEventsToMonitor = useCallback(() => {
const monitor = dataMonitor;
if (monitor) {
return monitor.split(',');
}
return [];
}, [dataMonitor]);
const onUserDataChanged = useCallback(
(_e: Event, userData: UserItemDataDto) => {
const itemsContainer = itemsContainerRef.current as HTMLDivElement;
import('../../components/cardbuilder/cardBuilder')
.then((cardBuilder) => {
cardBuilder.onUserDataChanged(userData, itemsContainer);
})
.catch((err) => {
console.error(
'[onUserDataChanged] failed to load onUserData Changed',
err
);
});
const eventsToMonitor = getEventsToMonitor();
if (
eventsToMonitor.indexOf('markfavorite') !== -1
|| eventsToMonitor.indexOf('markplayed') !== -1
) {
notifyRefreshNeeded(false);
}
},
[getEventsToMonitor, notifyRefreshNeeded]
const onUserDataChanged = useCallback(async () => {
await invalidateQueries();
},
[invalidateQueries]
);
const onTimerCreated = useCallback(
(_e: Event, data: TimerInfoDto) => {
const itemsContainer = itemsContainerRef.current as HTMLDivElement;
const eventsToMonitor = getEventsToMonitor();
if (eventsToMonitor.indexOf('timers') !== -1) {
notifyRefreshNeeded(false);
return;
}
const programId = data.ProgramId;
// This could be null, not supported by all tv providers
const newTimerId = data.Id;
if (programId && newTimerId) {
import('../../components/cardbuilder/cardBuilder')
.then((cardBuilder) => {
cardBuilder.onTimerCreated(
programId,
newTimerId,
itemsContainer
);
})
.catch((err) => {
console.error(
'[onTimerCreated] failed to load onTimer Created',
err
);
});
}
},
[getEventsToMonitor, notifyRefreshNeeded]
const onTimerCreated = useCallback(async () => {
await invalidateQueries();
},
[invalidateQueries]
);
const onSeriesTimerCreated = useCallback(() => {
const eventsToMonitor = getEventsToMonitor();
if (eventsToMonitor.indexOf('seriestimers') !== -1) {
notifyRefreshNeeded(false);
}
}, [getEventsToMonitor, notifyRefreshNeeded]);
const onSeriesTimerCreated = useCallback(async () => {
await invalidateQueries();
}, [invalidateQueries]);
const onTimerCancelled = useCallback(
(_e: Event, data: TimerInfoDto) => {
const itemsContainer = itemsContainerRef.current as HTMLDivElement;
const eventsToMonitor = getEventsToMonitor();
if (eventsToMonitor.indexOf('timers') !== -1) {
notifyRefreshNeeded(false);
return;
}
const timerId = data.Id;
if (timerId) {
import('../../components/cardbuilder/cardBuilder')
.then((cardBuilder) => {
cardBuilder.onTimerCancelled(timerId, itemsContainer);
})
.catch((err) => {
console.error(
'[onTimerCancelled] failed to load onTimer Cancelled',
err
);
});
}
},
[getEventsToMonitor, notifyRefreshNeeded]
const onTimerCancelled = useCallback(async () => {
await invalidateQueries();
},
[invalidateQueries]
);
const onSeriesTimerCancelled = useCallback(
(_e: Event, data: SeriesTimerInfoDto) => {
const itemsContainer = itemsContainerRef.current as HTMLDivElement;
const eventsToMonitor = getEventsToMonitor();
if (eventsToMonitor.indexOf('seriestimers') !== -1) {
notifyRefreshNeeded(false);
return;
}
const cancelledTimerId = data.Id;
if (cancelledTimerId) {
import('../../components/cardbuilder/cardBuilder')
.then((cardBuilder) => {
cardBuilder.onSeriesTimerCancelled(
cancelledTimerId,
itemsContainer
);
})
.catch((err) => {
console.error(
'[onSeriesTimerCancelled] failed to load onSeriesTimer Cancelled',
err
);
});
}
},
[getEventsToMonitor, notifyRefreshNeeded]
const onSeriesTimerCancelled = useCallback(async () => {
await invalidateQueries();
},
[invalidateQueries]
);
const onLibraryChanged = useCallback(
(_e: Event, data: LibraryUpdateInfo) => {
const eventsToMonitor = getEventsToMonitor();
if (
eventsToMonitor.indexOf('seriestimers') !== -1
|| eventsToMonitor.indexOf('timers') !== -1
) {
(_e: Event, apiClient, data: LibraryUpdateInfo) => {
if (eventsToMonitor.includes('seriestimers') || eventsToMonitor.includes('timers')) {
// yes this is an assumption
return;
}
@ -348,32 +249,31 @@ const ItemsContainer: FC<ItemsContainerProps> = ({
notifyRefreshNeeded(false);
},
[getEventsToMonitor, notifyRefreshNeeded, parentId]
[eventsToMonitor, notifyRefreshNeeded, parentId]
);
const onPlaybackStopped = useCallback(
(_e: Event, stopInfo) => {
(_e: Event, apiClient, stopInfo) => {
const state = stopInfo.state;
const eventsToMonitor = getEventsToMonitor();
if (
state.NowPlayingItem
&& state.NowPlayingItem.MediaType === 'Video'
) {
if (eventsToMonitor.indexOf('videoplayback') !== -1) {
if (eventsToMonitor.includes('videoplayback')) {
notifyRefreshNeeded(true);
return;
}
} else if (
state.NowPlayingItem
&& state.NowPlayingItem.MediaType === 'Audio'
&& eventsToMonitor.indexOf('audioplayback') !== -1
&& eventsToMonitor.includes('videoplayback')
) {
notifyRefreshNeeded(true);
return;
}
},
[getEventsToMonitor, notifyRefreshNeeded]
[eventsToMonitor, notifyRefreshNeeded]
);
const setFocus = useCallback(
@ -418,10 +318,9 @@ const ItemsContainer: FC<ItemsContainerProps> = ({
if (getItemsHtml) {
itemsContainer.innerHTML = getItemsHtml();
imageLoader.lazyChildren(itemsContainer);
}
imageLoader.lazyChildren(itemsContainer);
if (hasActiveElement) {
setFocus(itemsContainer, focusId);
}