From fe298d3232e9f0450e140d3ebdaa0fa6283fe937 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Wed, 18 Oct 2023 17:47:55 +0000
Subject: [PATCH] Reset Carousel position on data refresh (#303)
* Reset Carousel position on data refresh
* add refresh for all carousels
---
.../components/grid-carousel/index.tsx | 15 ++++-
.../features/home/routes/home-route.tsx | 67 +++++++++++--------
2 files changed, 54 insertions(+), 28 deletions(-)
diff --git a/src/renderer/components/grid-carousel/index.tsx b/src/renderer/components/grid-carousel/index.tsx
index f111acf7a..2f31aae54 100644
--- a/src/renderer/components/grid-carousel/index.tsx
+++ b/src/renderer/components/grid-carousel/index.tsx
@@ -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 throttle from 'lodash/throttle';
import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
@@ -109,6 +118,10 @@ export const SwiperGridCarousel = ({
const playButtonBehavior = usePlayButtonBehavior();
const handlePlayQueueAdd = usePlayQueueAdd();
+ useEffect(() => {
+ swiperRef.current?.slideTo(0, 0);
+ }, [data]);
+
const [pagination, setPagination] = useState({
hasNextPage: (data?.length || 0) > Math.round(3),
hasPreviousPage: false,
diff --git a/src/renderer/features/home/routes/home-route.tsx b/src/renderer/features/home/routes/home-route.tsx
index c84616915..e49f7554a 100644
--- a/src/renderer/features/home/routes/home-route.tsx
+++ b/src/renderer/features/home/routes/home-route.tsx
@@ -103,32 +103,9 @@ const HomeRoute = () => {
const carousels = [
{
data: random?.data?.items,
- title: (
-
-
- Explore from your library
-
-
-
- queryClient.invalidateQueries({
- exact: false,
- queryKey: queryKeys.albums.list(server?.id, {
- limit: itemsPerPage,
- sortBy: AlbumListSort.RANDOM,
- sortOrder: SortOrder.ASC,
- startIndex: 0,
- }),
- })
- }
- >
-
-
-
- ),
+ sortBy: AlbumListSort.RANDOM,
+ sortOrder: SortOrder.ASC,
+ title: 'Explore from your library',
uniqueId: 'random',
},
{
@@ -136,6 +113,8 @@ const HomeRoute = () => {
pagination: {
itemsPerPage,
},
+ sortBy: AlbumListSort.RECENTLY_PLAYED,
+ sortOrder: SortOrder.DESC,
title: 'Recently played',
uniqueId: 'recentlyPlayed',
},
@@ -144,6 +123,8 @@ const HomeRoute = () => {
pagination: {
itemsPerPage,
},
+ sortBy: AlbumListSort.RECENTLY_ADDED,
+ sortOrder: SortOrder.DESC,
title: 'Newly added releases',
uniqueId: 'recentlyAdded',
},
@@ -152,6 +133,8 @@ const HomeRoute = () => {
pagination: {
itemsPerPage,
},
+ sortBy: AlbumListSort.PLAY_COUNT,
+ sortOrder: SortOrder.DESC,
title: 'Most played',
uniqueId: 'mostPlayed',
},
@@ -220,7 +203,37 @@ const HomeRoute = () => {
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
}}
- title={{ label: carousel.title }}
+ title={{
+ label: (
+
+
+ {carousel.title}
+
+
+
+ queryClient.invalidateQueries({
+ exact: false,
+ queryKey: queryKeys.albums.list(
+ server?.id,
+ {
+ limit: itemsPerPage,
+ sortBy: carousel.sortBy,
+ sortOrder: carousel.sortOrder,
+ startIndex: 0,
+ },
+ ),
+ })
+ }
+ >
+
+
+
+ ),
+ }}
uniqueId={carousel.uniqueId}
/>
))}