Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 06:27:09 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Reset Carousel position on data refresh (#303)

Browse Source 
* Reset Carousel position on data refresh

* add refresh for all carousels
This commit is contained in:
Kendall Garner 2023-10-18 17:47:55 +00:00 committed by GitHub
parent 03e582f301
commit fe298d3232
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/components/grid-carousel/index.tsx
View File

@ -1,4 +1,13 @@
import { isValidElement, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react'; import {
isValidElement,
memo,
ReactNode,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { Group, Stack } from '@mantine/core'; import { Group, Stack } from '@mantine/core';
import throttle from 'lodash/throttle'; import throttle from 'lodash/throttle';
import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri'; import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
@ -109,6 +118,10 @@ export const SwiperGridCarousel = ({
const playButtonBehavior = usePlayButtonBehavior(); const playButtonBehavior = usePlayButtonBehavior();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
useEffect(() => {
swiperRef.current?.slideTo(0, 0);
}, [data]);
const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
hasNextPage: (data?.length || 0) > Math.round(3), hasNextPage: (data?.length || 0) > Math.round(3),
hasPreviousPage: false, hasPreviousPage: false,

63
src/renderer/features/home/routes/home-route.tsx
View File

@ -103,32 +103,9 @@ const HomeRoute = () => {
const carousels = [ const carousels = [
{ {
data: random?.data?.items, data: random?.data?.items,
title: (
<Group>
<TextTitle
order={2}
weight={700}
>
Explore from your library
</TextTitle>
<ActionIcon
onClick={() =>
queryClient.invalidateQueries({
exact: false,
queryKey: queryKeys.albums.list(server?.id, {
limit: itemsPerPage,
sortBy: AlbumListSort.RANDOM, sortBy: AlbumListSort.RANDOM,
sortOrder: SortOrder.ASC, sortOrder: SortOrder.ASC,
startIndex: 0, title: 'Explore from your library',
}),
})
}
>
<RiRefreshLine />
</ActionIcon>
</Group>
),
uniqueId: 'random', uniqueId: 'random',
}, },
{ {
@ -136,6 +113,8 @@ const HomeRoute = () => {
pagination: { pagination: {
itemsPerPage, itemsPerPage,
}, },
sortBy: AlbumListSort.RECENTLY_PLAYED,
sortOrder: SortOrder.DESC,
title: 'Recently played', title: 'Recently played',
uniqueId: 'recentlyPlayed', uniqueId: 'recentlyPlayed',
}, },
@ -144,6 +123,8 @@ const HomeRoute = () => {
pagination: { pagination: {
itemsPerPage, itemsPerPage,
}, },
sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
title: 'Newly added releases', title: 'Newly added releases',
uniqueId: 'recentlyAdded', uniqueId: 'recentlyAdded',
}, },
@ -152,6 +133,8 @@ const HomeRoute = () => {
pagination: { pagination: {
itemsPerPage, itemsPerPage,
}, },
sortBy: AlbumListSort.PLAY_COUNT,
sortOrder: SortOrder.DESC,
title: 'Most played', title: 'Most played',
uniqueId: 'mostPlayed', uniqueId: 'mostPlayed',
}, },
@ -220,7 +203,37 @@ const HomeRoute = () => {
route: AppRoute.LIBRARY_ALBUMS_DETAIL, route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
}} }}
title={{ label: carousel.title }} title={{
label: (
<Group>
<TextTitle
order={2}
weight={700}
>
{carousel.title}
</TextTitle>
<ActionIcon
onClick={() =>
queryClient.invalidateQueries({
exact: false,
queryKey: queryKeys.albums.list(
server?.id,
{
limit: itemsPerPage,
sortBy: carousel.sortBy,
sortOrder: carousel.sortOrder,
startIndex: 0,
},
),
})
}
>
<RiRefreshLine />
</ActionIcon>
</Group>
),
}}
uniqueId={carousel.uniqueId} uniqueId={carousel.uniqueId}
/> />
))} ))}