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

Merge pull request #5724 from grafixeyehero/Fix-RefreshIndicator

Fix Refresh Indicator in experimental layout
This commit is contained in:
Bill Thornton 2024-07-15 14:20:45 -04:00 committed by GitHub
commit 6aab016634
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 10 deletions

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>

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,17 +86,13 @@ 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 showProgressBar ? (
<div className={progressringClass}> <div className={progressringClass}>
<CircularProgressWithLabel value={Math.floor(progress)} /> <CircularProgressWithLabel value={Math.floor(progress)} />
</div> </div>
); ) : null;
}; };
export default RefreshIndicator; export default RefreshIndicator;