pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redo queue handler as hook

Browse source
This commit is contained in:
jeffvli 2022-12-20 04:11:06 -08:00
parent 3dd9e620a8
commit c858479d57
12 changed files with 247 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/renderer/components/card/album-card.tsx
View file

@ -6,9 +6,9 @@ import { Link } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img';
import styled from 'styled-components';
import { Text } from '/@/renderer/components/text';
import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
import type { LibraryItem, CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
import { Skeleton } from '/@/renderer/components/skeleton';
import CardControls from '/@/renderer/components/card/card-controls';
import { CardControls } from '/@/renderer/components/card/card-controls';
const CardWrapper = styled.div<{
link?: boolean;
@ -108,11 +108,18 @@ interface BaseGridCardProps {
route: CardRoute;
};
data: any;
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
loading?: boolean;
size: number;
}
export const AlbumCard = ({ loading, size, data, controls }: BaseGridCardProps) => {
export const AlbumCard = ({
loading,
size,
handlePlayQueueAdd,
data,
controls,
}: BaseGridCardProps) => {
const navigate = useNavigate();
const { itemType, cardRows, route } = controls;
@ -164,6 +171,7 @@ export const AlbumCard = ({ loading, size, data, controls }: BaseGridCardProps)
)}
<ControlsContainer>
<CardControls
handlePlayQueueAdd={handlePlayQueueAdd}
itemData={data}
itemType={itemType}
/>
@ -286,7 +294,7 @@ export const AlbumCard = ({ loading, size, data, controls }: BaseGridCardProps)
<ImageSection />
</Skeleton>
<DetailSection style={{ width: '100%' }}>
{cardRows.map((row: CardRow, index: number) => (
{cardRows.map((_row: CardRow, index: number) => (
<Skeleton
visible
height={15}

18
src/renderer/components/card/card-controls.tsx
View file

@ -6,7 +6,7 @@ import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/r
import styled from 'styled-components';
import { _Button } from '/@/renderer/components/button';
import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
import type { LibraryItem } from '/@/renderer/types';
import type { LibraryItem, PlayQueueAddOptions } from '/@/renderer/types';
import { Play } from '/@/renderer/types';
import { useSettingsStore } from '/@/renderer/store/settings.store';
@ -113,21 +113,27 @@ const PLAY_TYPES = [
},
];
export const CardControls = ({ itemData, itemType }: { itemData: any; itemType: LibraryItem }) => {
export const CardControls = ({
itemData,
itemType,
handlePlayQueueAdd,
}: {
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemData: any;
itemType: LibraryItem;
}) => {
const playButtonBehavior = useSettingsStore((state) => state.player.playButtonBehavior);
const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
e.preventDefault();
e.stopPropagation();
import('/@/renderer/features/player/utils/handle-playqueue-add').then((fn) => {
fn.handlePlayQueueAdd({
handlePlayQueueAdd({
byItemType: {
id: itemData.id,
type: itemType,
},
play: playType || playButtonBehavior,
});
});
};
return (
@ -192,5 +198,3 @@ export const CardControls = ({ itemData, itemType }: { itemData: any; itemType:
</GridCardControlsContainer>
);
};
export default CardControls;

187
src/renderer/components/grid-carousel/index.tsx
View file

@ -3,11 +3,13 @@ import { Group, Stack } from '@mantine/core';
import type { Variants } from 'framer-motion';
import { AnimatePresence, motion } from 'framer-motion';
import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
import { AlbumCard, Button } from '/@/renderer/components';
import { Button } from '/@/renderer/components/button';
import { AppRoute } from '/@/renderer/router/routes';
import type { CardRow } from '/@/renderer/types';
import { LibraryItem, Play } from '/@/renderer/types';
import styled from 'styled-components';
import { AlbumCard } from '/@/renderer/components/card';
import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
interface GridCarouselProps {
cardRows: CardRow[];
@ -27,6 +29,99 @@ interface GridCarouselProps {
const GridCarouselContext = createContext<any>(null);
const GridContainer = styled(motion.div)<{ height: number; itemsPerPage: number }>`
display: grid;
grid-auto-rows: 0;
grid-gap: 18px;
grid-template-rows: 1fr;
grid-template-columns: repeat(${(props) => props.itemsPerPage || 4}, minmax(0, 1fr));
height: ${(props) => props.height}px;
overflow: hidden;
`;
const Wrapper = styled.div`
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
`;
const variants: Variants = {
animate: (custom: { direction: number; loading: boolean }) => {
return {
opacity: custom.loading ? 0.5 : 1,
scale: custom.loading ? 0.95 : 1,
transition: {
opacity: { duration: 0.2 },
x: { damping: 30, stiffness: 300, type: 'spring' },
},
x: 0,
};
},
exit: (custom: { direction: number; loading: boolean }) => {
return {
opacity: 0,
transition: {
opacity: { duration: 0.2 },
x: { damping: 30, stiffness: 300, type: 'spring' },
},
x: custom.direction > 0 ? -1000 : 1000,
};
},
initial: (custom: { direction: number; loading: boolean }) => {
return {
opacity: 0,
x: custom.direction > 0 ? 1000 : -1000,
};
},
};
const Carousel = ({ data, cardRows }: any) => {
const { loading, pagination, gridHeight, imageSize, direction, uniqueId } =
useContext(GridCarouselContext);
const handlePlayQueueAdd = useHandlePlayQueueAdd();
return (
<Wrapper>
<AnimatePresence
custom={{ direction, loading }}
initial={false}
mode="popLayout"
>
<GridContainer
key={`carousel-${uniqueId}-${data[0].id}`}
animate="animate"
custom={{ direction, loading }}
exit="exit"
height={gridHeight}
initial="initial"
itemsPerPage={pagination.itemsPerPage}
variants={variants}
>
{data?.map((item: any, index: number) => (
<AlbumCard
key={`card-${uniqueId}-${index}`}
controls={{
cardRows,
itemType: LibraryItem.ALBUM,
playButtonBehavior: Play.NOW,
route: {
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
},
}}
data={item}
handlePlayQueueAdd={handlePlayQueueAdd}
size={imageSize}
/>
))}
</GridContainer>
</AnimatePresence>
</Wrapper>
);
};
export const GridCarousel = ({
data,
loading,
@ -75,96 +170,6 @@ export const GridCarousel = ({
);
};
const variants: Variants = {
animate: (custom: { direction: number; loading: boolean }) => {
return {
opacity: custom.loading ? 0.5 : 1,
scale: custom.loading ? 0.95 : 1,
transition: {
opacity: { duration: 0.2 },
x: { damping: 30, stiffness: 300, type: 'spring' },
},
x: 0,
};
},
exit: (custom: { direction: number; loading: boolean }) => {
return {
opacity: 0,
transition: {
opacity: { duration: 0.2 },
x: { damping: 30, stiffness: 300, type: 'spring' },
},
x: custom.direction > 0 ? -1000 : 1000,
};
},
initial: (custom: { direction: number; loading: boolean }) => {
return {
opacity: 0,
x: custom.direction > 0 ? 1000 : -1000,
};
},
};
const GridContainer = styled(motion.div)<{ height: number; itemsPerPage: number }>`
display: grid;
grid-auto-rows: 0;
grid-gap: 18px;
grid-template-rows: 1fr;
grid-template-columns: repeat(${(props) => props.itemsPerPage || 4}, minmax(0, 1fr));
height: ${(props) => props.height}px;
overflow: hidden;
`;
const Wrapper = styled.div`
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
`;
const Carousel = ({ data, cardRows }: any) => {
const { loading, pagination, gridHeight, imageSize, direction, uniqueId } =
useContext(GridCarouselContext);
return (
<Wrapper>
<AnimatePresence
custom={{ direction, loading }}
initial={false}
mode="popLayout"
>
<GridContainer
key={`carousel-${uniqueId}-${data[0].id}`}
animate="animate"
custom={{ direction, loading }}
exit="exit"
height={gridHeight}
initial="initial"
itemsPerPage={pagination.itemsPerPage}
variants={variants}
>
{data?.map((item: any, index: number) => (
<AlbumCard
key={`card-${uniqueId}-${index}`}
controls={{
cardRows,
itemType: LibraryItem.ALBUM,
playButtonBehavior: Play.NOW,
route: {
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
},
}}
data={item}
size={imageSize}
/>
))}
</GridContainer>
</AnimatePresence>
</Wrapper>
);
};
interface TitleProps {
children?: React.ReactNode;
}

8
src/renderer/components/virtual-grid/grid-card/default-card.tsx
View file

@ -7,9 +7,9 @@ import { SimpleImg } from 'react-simple-img';
import type { ListChildComponentProps } from 'react-window';
import styled from 'styled-components';
import { Text } from '/@/renderer/components/text';
import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
import GridCardControls from './grid-card-controls';
import type { LibraryItem, CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
import { Skeleton } from '/@/renderer/components/skeleton';
import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
const CardWrapper = styled.div<{
itemGap: number;
@ -114,6 +114,7 @@ interface BaseGridCardProps {
columnIndex: number;
controls: {
cardRows: CardRow[];
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemType: LibraryItem;
playButtonBehavior: Play;
route: CardRoute;
@ -137,7 +138,7 @@ export const DefaultCard = ({
const navigate = useNavigate();
const { index } = listChildProps;
const { itemGap, itemHeight, itemWidth } = sizes;
const { itemType, cardRows, route } = controls;
const { itemType, cardRows, route, handlePlayQueueAdd } = controls;
const cardSize = itemWidth - 24;
@ -191,6 +192,7 @@ export const DefaultCard = ({
)}
<ControlsContainer>
<GridCardControls
handlePlayQueueAdd={handlePlayQueueAdd}
itemData={data}
itemType={itemType}
/>

13
src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
View file

@ -6,7 +6,7 @@ import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/r
import styled from 'styled-components';
import { _Button } from '/@/renderer/components/button';
import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
import type { LibraryItem } from '/@/renderer/types';
import type { LibraryItem, PlayQueueAddOptions } from '/@/renderer/types';
import { Play } from '/@/renderer/types';
import { useSettingsStore } from '/@/renderer/store/settings.store';
@ -116,24 +116,25 @@ const PLAY_TYPES = [
export const GridCardControls = ({
itemData,
itemType,
handlePlayQueueAdd,
}: {
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemData: any;
itemType: LibraryItem;
}) => {
const playButtonBehavior = useSettingsStore((state) => state.player.playButtonBehavior);
const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
const handlePlay = async (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
e.preventDefault();
e.stopPropagation();
import('/@/renderer/features/player/utils/handle-playqueue-add').then((fn) => {
fn.handlePlayQueueAdd({
handlePlayQueueAdd?.({
byItemType: {
id: itemData.id,
type: itemType,
},
play: playType || playButtonBehavior,
});
});
};
return (
@ -200,5 +201,3 @@ export const GridCardControls = ({
</GridCardControlsContainer>
);
};
export default GridCardControls;

3
src/renderer/components/virtual-grid/grid-card/index.tsx
View file

@ -17,9 +17,11 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
itemData,
itemType,
playButtonBehavior,
handlePlayQueueAdd,
route,
display,
} = data as GridCardData;
const cards = [];
const startIndex = index * columnCount;
const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
@ -33,6 +35,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
columnIndex={i}
controls={{
cardRows,
handlePlayQueueAdd,
itemType,
playButtonBehavior,
route,

6
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
View file

@ -8,8 +8,8 @@ import type { ListChildComponentProps } from 'react-window';
import styled from 'styled-components';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
import GridCardControls from './grid-card-controls';
import type { LibraryItem, CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
const CardWrapper = styled.div<{
itemGap: number;
@ -117,6 +117,7 @@ interface BaseGridCardProps {
columnIndex: number;
controls: {
cardRows: CardRow[];
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemType: LibraryItem;
playButtonBehavior: Play;
route: CardRoute;
@ -184,6 +185,7 @@ export const PosterCard = ({
)}
<ControlsContainer>
<GridCardControls
handlePlayQueueAdd={controls.handlePlayQueueAdd}
itemData={data}
itemType={controls.itemType}
/>

13
src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx
View file

@ -5,7 +5,13 @@ import type { FixedSizeListProps } from 'react-window';
import { FixedSizeList } from 'react-window';
import styled from 'styled-components';
import { GridCard } from '/@/renderer/components/virtual-grid/grid-card';
import type { CardRow, LibraryItem, CardDisplayType, CardRoute } from '/@/renderer/types';
import type {
CardRow,
LibraryItem,
CardDisplayType,
CardRoute,
PlayQueueAddOptions,
} from '/@/renderer/types';
const createItemData = memoize(
(
@ -19,10 +25,12 @@ const createItemData = memoize(
itemType,
itemWidth,
route,
handlePlayQueueAdd,
) => ({
cardRows,
columnCount,
display,
handlePlayQueueAdd,
itemCount,
itemData,
itemGap,
@ -47,6 +55,7 @@ export const VirtualGridWrapper = ({
columnCount,
rowCount,
initialScrollOffset,
handlePlayQueueAdd,
itemData,
route,
onScroll,
@ -55,6 +64,7 @@ export const VirtualGridWrapper = ({
cardRows: CardRow[];
columnCount: number;
display: CardDisplayType;
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemData: any[];
itemGap: number;
itemHeight: number;
@ -75,6 +85,7 @@ export const VirtualGridWrapper = ({
itemType,
itemWidth,
route,
handlePlayQueueAdd,
);
const memoizedOnScroll = createScrollHandler(onScroll);

7
src/renderer/components/virtual-grid/virtual-infinite-grid.tsx
View file

@ -3,18 +3,19 @@ import debounce from 'lodash/debounce';
import type { FixedSizeListProps } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
import type { CardRoute, CardRow, LibraryItem } from '/@/renderer/types';
import type { CardRoute, CardRow, LibraryItem, PlayQueueAddOptions } from '/@/renderer/types';
import { CardDisplayType } from '/@/renderer/types';
interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSize'> {
cardRows: CardRow[];
display?: CardDisplayType;
fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemGap: number;
itemSize: number;
itemType: LibraryItem;
minimumBatchSize?: number;
refresh?: any; // Pass in any value to refresh the grid when changed
refresh?: any;
route?: CardRoute;
}
@ -35,6 +36,7 @@ export const VirtualInfiniteGrid = ({
route,
onScroll,
display,
handlePlayQueueAdd,
minimumBatchSize,
fetchFn,
initialScrollOffset,
@ -123,6 +125,7 @@ export const VirtualInfiniteGrid = ({
cardRows={cardRows}
columnCount={columnCount}
display={display || CardDisplayType.CARD}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={initialScrollOffset}
itemCount={itemCount || 0}

4
src/renderer/features/albums/routes/album-list-route.tsx
View file

@ -17,6 +17,7 @@ import { controller } from '/@/renderer/api/controller';
import { AnimatedPage } from '/@/renderer/features/shared';
import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
import { api } from '/@/renderer/api';
import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
const AlbumListRoute = () => {
const queryClient = useQueryClient();
@ -24,6 +25,7 @@ const AlbumListRoute = () => {
const { setPage } = useAppStoreActions();
const page = useAlbumRouteStore();
const filters = page.list.filter;
const handlePlayQueueAdd = useHandlePlayQueueAdd();
const albumListQuery = useAlbumList({
limit: 1,
@ -101,6 +103,7 @@ const AlbumListRoute = () => {
]}
display={page.list?.display || CardDisplayType.CARD}
fetchFn={fetch}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={page.list?.gridScrollOffset || 0}
itemCount={albumListQuery?.data?.totalRecordCount || 0}
@ -108,7 +111,6 @@ const AlbumListRoute = () => {
itemSize={150 + page.list?.size}
itemType={LibraryItem.ALBUM}
minimumBatchSize={40}
// refresh={advancedFilters}
route={{
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],

80
src/renderer/features/player/hooks/use-handle-playqueue-add.ts Normal file
View file

@ -0,0 +1,80 @@
import { useQueryClient } from '@tanstack/react-query';
import { api } from '/@/renderer/api/index';
import { jfNormalize } from '/@/renderer/api/jellyfin.api';
import { JFSong } from '/@/renderer/api/jellyfin.types';
import { ndNormalize } from '/@/renderer/api/navidrome.api';
import { NDSong } from '/@/renderer/api/navidrome.types';
import { queryKeys } from '/@/renderer/api/query-keys';
import { useAuthStore, usePlayerStore } from '/@/renderer/store';
import { useSettingsStore } from '/@/renderer/store/settings.store';
import { PlayQueueAddOptions, LibraryItem, Play, PlaybackType } from '/@/renderer/types';
import { toast } from '/@/renderer/components/toast';
const mpvPlayer = window.electron.mpvPlayer;
export const useHandlePlayQueueAdd = () => {
const queryClient = useQueryClient();
const playerType = useSettingsStore.getState().player.type;
const deviceId = useAuthStore.getState().deviceId;
const server = useAuthStore.getState().currentServer;
const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => {
if (!server) return toast.error({ message: 'No server selected', type: 'error' });
if (options.byItemType) {
let songs = null;
if (options.byItemType.type === LibraryItem.ALBUM) {
const albumDetail = await queryClient.fetchQuery(
queryKeys.albums.detail(server?.id, { id: options.byItemType.id }),
async ({ signal }) =>
api.controller.getAlbumDetail({
query: { id: options.byItemType!.id },
server,
signal,
}),
);
if (!albumDetail) return null;
switch (server?.type) {
case 'jellyfin':
songs = albumDetail.songs?.map((song) =>
jfNormalize.song(song as JFSong, server, deviceId),
);
break;
case 'navidrome':
songs = albumDetail.songs?.map((song) =>
ndNormalize.song(song as NDSong, server, deviceId),
);
break;
case 'subsonic':
break;
}
}
if (!songs) return toast.warn({ message: 'No songs found' });
const playerData = usePlayerStore.getState().actions.addToQueue(songs, options.play);
if (options.play === Play.NEXT || options.play === Play.LAST) {
if (playerType === PlaybackType.LOCAL) {
mpvPlayer.setQueueNext(playerData);
}
}
if (options.play === Play.NOW) {
if (playerType === PlaybackType.LOCAL) {
mpvPlayer.setQueue(playerData);
mpvPlayer.play();
}
usePlayerStore.getState().actions.play();
}
}
return null;
};
return handlePlayQueueAdd;
};

71
src/renderer/features/player/utils/handle-playqueue-add.ts
View file

@ -1,71 +0,0 @@
import { controller } from '/@/renderer/api/controller';
import { jfNormalize } from '/@/renderer/api/jellyfin.api';
import { JFSong } from '/@/renderer/api/jellyfin.types';
import { ndNormalize } from '/@/renderer/api/navidrome.api';
import { NDSong } from '/@/renderer/api/navidrome.types';
import { queryKeys } from '/@/renderer/api/query-keys';
import { toast } from '/@/renderer/components';
import { queryClient } from '/@/renderer/lib/react-query';
import { useAuthStore, usePlayerStore } from '/@/renderer/store';
import { useSettingsStore } from '/@/renderer/store/settings.store';
import { PlayQueueAddOptions, LibraryItem, Play, PlaybackType } from '/@/renderer/types';
const mpvPlayer = window.electron.mpvPlayer;
export const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => {
const playerType = useSettingsStore.getState().player.type;
const deviceId = useAuthStore.getState().deviceId;
const server = useAuthStore.getState().currentServer;
if (!server) return toast.error({ message: 'No server selected' });
if (options.byItemType) {
let songs = null;
if (options.byItemType.type === LibraryItem.ALBUM) {
const albumDetail = await queryClient.fetchQuery(
queryKeys.albums.detail(server?.id, { id: options.byItemType.id }),
async ({ signal }) =>
controller.getAlbumDetail({ query: { id: options.byItemType!.id }, server, signal }),
);
if (!albumDetail) return null;
switch (server?.type) {
case 'jellyfin':
songs = albumDetail.songs?.map((song) =>
jfNormalize.song(song as JFSong, server, deviceId),
);
break;
case 'navidrome':
songs = albumDetail.songs?.map((song) =>
ndNormalize.song(song as NDSong, server, deviceId),
);
break;
case 'subsonic':
break;
}
}
if (!songs) return null;
const playerData = usePlayerStore.getState().actions.addToQueue(songs, options.play);
if (options.play === Play.NEXT || options.play === Play.LAST) {
if (playerType === PlaybackType.LOCAL) {
mpvPlayer.setQueueNext(playerData);
}
}
if (options.play === Play.NOW) {
if (playerType === PlaybackType.LOCAL) {
mpvPlayer.setQueue(playerData);
mpvPlayer.play();
}
usePlayerStore.getState().actions.play();
}
}
return null;
};