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

Fix Refresh Indicator

Browse source
This commit is contained in:
grafixeyehero 2024-06-22 19:04:49 +03:00
parent 72f5d1c73b
commit 4562f34995
2 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/cardbuilder/Card/CardImageContainer.tsx
View file

@ -54,8 +54,7 @@ const CardImageContainer: FC<CardImageContainerProps> = ({
indicator.getPlayedIndicator()} indicator.getPlayedIndicator()}
{(item.Type === BaseItemKind.CollectionFolder {(item.Type === BaseItemKind.CollectionFolder
|| item.CollectionType) || item.CollectionType) && (
&& item.RefreshProgress && (
<RefreshIndicator item={item} /> <RefreshIndicator item={item} />
)} )}
</Box> </Box>

21
src/elements/emby-itemrefreshindicator/RefreshIndicator.tsx
View file

@ -49,11 +49,20 @@ interface RefreshIndicatorProps {
} }
const RefreshIndicator: FC<RefreshIndicatorProps> = ({ item, className }) => { const RefreshIndicator: FC<RefreshIndicatorProps> = ({ item, className }) => {
const [showProgressBar, setShowProgressBar] = useState(!!item.RefreshProgress);
const [progress, setProgress] = useState(item.RefreshProgress || 0); const [progress, setProgress] = useState(item.RefreshProgress || 0);
const onRefreshProgress = useCallback((_e: Event, _apiClient: ApiClient, info: { ItemId: string | null | undefined; Progress: string; }) => { const onRefreshProgress = useCallback((_e: Event, _apiClient: ApiClient, info: { ItemId: string | null | undefined; Progress: string; }) => {
if (info.ItemId === item?.Id) { if (info.ItemId === item?.Id) {
setProgress(parseFloat(info.Progress)); const pct = parseFloat(info.Progress);
if (pct && pct < 100) {
setShowProgressBar(true);
} else {
setShowProgressBar(false);
}
setProgress(pct);
} }
}, [item?.Id]); }, [item?.Id]);
@ -77,16 +86,16 @@ const RefreshIndicator: FC<RefreshIndicatorProps> = ({ item, className }) => {
}; };
}, [bindEvents, item.Id, unbindEvents]); }, [bindEvents, item.Id, unbindEvents]);
const progressringClass = classNames( const progressringClass = classNames('progressring', className);
'progressring',
className,
{ 'hide': !progress || progress >= 100 }
);
return ( return (
<div>
{showProgressBar && (
<div className={progressringClass}> <div className={progressringClass}>
<CircularProgressWithLabel value={Math.floor(progress)} /> <CircularProgressWithLabel value={Math.floor(progress)} />
</div> </div>
)}
</div>
); );
}; };