mirror of
https://github.com/antebudimir/feishin.git
synced 2026-03-02 12:17:25 +00:00
restructure files onto electron-vite boilerplate
This commit is contained in:
parent
91ce2cd8a1
commit
1cf587bc8f
457 changed files with 9927 additions and 11705 deletions
|
|
@ -1,6 +1,8 @@
|
|||
import type { ReactNode, Ref } from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
import styles from './animated-page.module.scss';
|
||||
|
||||
interface AnimatedPageProps {
|
||||
|
|
@ -17,9 +19,9 @@ export const AnimatedPage = forwardRef(
|
|||
({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
|
||||
return (
|
||||
<motion.main
|
||||
ref={ref}
|
||||
// animate="animate"
|
||||
className={styles.animatedPage}
|
||||
ref={ref}
|
||||
// exit="exit"
|
||||
// initial="initial"
|
||||
// transition={{ duration: 0.3, ease: 'easeIn' }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { PaperProps } from '@mantine/core';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Paper } from '/@/renderer/components';
|
||||
|
||||
const StyledFilterBar = styled(Paper)`
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ import { Center } from '@mantine/core';
|
|||
import clsx from 'clsx';
|
||||
import { memo } from 'react';
|
||||
import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri';
|
||||
import styles from './item-image-placeholder.module.scss';
|
||||
|
||||
import styles from './item-image-placeholder.module.css';
|
||||
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
|
||||
interface ItemImagePlaceholderProps {
|
||||
|
|
@ -13,10 +15,10 @@ const Image = memo(function Image(props: ItemImagePlaceholderProps) {
|
|||
switch (props.itemType) {
|
||||
case LibraryItem.ALBUM:
|
||||
return <RiAlbumFill />;
|
||||
case LibraryItem.ARTIST:
|
||||
return <RiUserVoiceFill />;
|
||||
case LibraryItem.ALBUM_ARTIST:
|
||||
return <RiUserVoiceFill />;
|
||||
case LibraryItem.ARTIST:
|
||||
return <RiUserVoiceFill />;
|
||||
case LibraryItem.PLAYLIST:
|
||||
return <RiPlayListFill />;
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
interface JsonPreviewProps {
|
||||
value: string | Record<string, any>;
|
||||
value: Record<string, any> | string;
|
||||
}
|
||||
|
||||
export const JsonPreview = ({ value }: JsonPreviewProps) => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { ReactNode } from 'react';
|
||||
import { Box } from '@mantine/core';
|
||||
import { ReactNode } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Paper, PaperProps, SpinnerIcon, TextTitle } from '/@/renderer/components';
|
||||
import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/play-button';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface LibraryHeaderBarProps {
|
||||
children: ReactNode;
|
||||
|
|
@ -47,8 +48,8 @@ const PlayButton = ({ onClick }: PlayButtonProps) => {
|
|||
<Box>
|
||||
<PlayBtn
|
||||
h="45px"
|
||||
w="45px"
|
||||
onClick={onClick}
|
||||
w="45px"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
|
||||
import { Center, Group } from '@mantine/core';
|
||||
import { closeAllModals, openModal } from '@mantine/modals';
|
||||
import { AutoTextSize } from 'auto-text-size';
|
||||
import clsx from 'clsx';
|
||||
import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styles from './library-header.module.scss';
|
||||
|
||||
import styles from './library-header.module.css';
|
||||
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
import { Text } from '/@/renderer/components';
|
||||
import { ItemImagePlaceholder } from '/@/renderer/features/shared/components/item-image-placeholder';
|
||||
|
|
@ -15,8 +17,8 @@ interface LibraryHeaderProps {
|
|||
background: string;
|
||||
blur?: number;
|
||||
children?: ReactNode;
|
||||
imagePlaceholderUrl?: string | null;
|
||||
imageUrl?: string | null;
|
||||
imagePlaceholderUrl?: null | string;
|
||||
imageUrl?: null | string;
|
||||
item: { route: string; type: LibraryItem };
|
||||
title: string;
|
||||
}
|
||||
|
|
@ -24,13 +26,13 @@ interface LibraryHeaderProps {
|
|||
export const LibraryHeader = forwardRef(
|
||||
(
|
||||
{
|
||||
imageUrl,
|
||||
imagePlaceholderUrl,
|
||||
background,
|
||||
blur,
|
||||
title,
|
||||
item,
|
||||
children,
|
||||
imagePlaceholderUrl,
|
||||
imageUrl,
|
||||
item,
|
||||
title,
|
||||
}: LibraryHeaderProps,
|
||||
ref: Ref<HTMLDivElement>,
|
||||
) => {
|
||||
|
|
@ -46,10 +48,10 @@ export const LibraryHeader = forwardRef(
|
|||
switch (item.type) {
|
||||
case LibraryItem.ALBUM:
|
||||
return t('entity.album', { count: 1 });
|
||||
case LibraryItem.ARTIST:
|
||||
return t('entity.artist', { count: 1 });
|
||||
case LibraryItem.ALBUM_ARTIST:
|
||||
return t('entity.albumArtist', { count: 1 });
|
||||
case LibraryItem.ARTIST:
|
||||
return t('entity.artist', { count: 1 });
|
||||
case LibraryItem.PLAYLIST:
|
||||
return t('entity.playlist', { count: 1 });
|
||||
case LibraryItem.SONG:
|
||||
|
|
@ -66,12 +68,12 @@ export const LibraryHeader = forwardRef(
|
|||
openModal({
|
||||
children: (
|
||||
<Center
|
||||
onClick={() => closeAllModals()}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
height: 'calc(100vh - 80px)',
|
||||
width: '100%',
|
||||
}}
|
||||
onClick={() => closeAllModals()}
|
||||
>
|
||||
<img
|
||||
alt="cover"
|
||||
|
|
@ -90,8 +92,8 @@ export const LibraryHeader = forwardRef(
|
|||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={styles.libraryHeader}
|
||||
ref={ref}
|
||||
>
|
||||
<div
|
||||
className={styles.background}
|
||||
|
|
@ -104,22 +106,22 @@ export const LibraryHeader = forwardRef(
|
|||
/>
|
||||
<div
|
||||
className={styles.imageSection}
|
||||
onClick={() => openImage()}
|
||||
onKeyDown={(event) =>
|
||||
[' ', 'Enter', 'Spacebar'].includes(event.key) && openImage()
|
||||
}
|
||||
role="button"
|
||||
style={{ cursor: 'pointer' }}
|
||||
tabIndex={0}
|
||||
onClick={() => openImage()}
|
||||
onKeyDown={(event) =>
|
||||
['Spacebar', ' ', 'Enter'].includes(event.key) && openImage()
|
||||
}
|
||||
>
|
||||
{imageUrl && !isImageError ? (
|
||||
<img
|
||||
alt="cover"
|
||||
className={styles.image}
|
||||
onError={onImageError}
|
||||
placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
|
||||
src={imageUrl}
|
||||
style={{ height: '' }}
|
||||
onError={onImageError}
|
||||
/>
|
||||
) : (
|
||||
<ItemImagePlaceholder itemType={item.type} />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { ButtonProps } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiSortAsc, RiSortDesc } from 'react-icons/ri';
|
||||
|
||||
import { SortOrder } from '/@/renderer/api/types';
|
||||
import { Button, Tooltip } from '/@/renderer/components';
|
||||
|
||||
|
|
@ -10,7 +11,7 @@ interface OrderToggleButtonProps {
|
|||
sortOrder: SortOrder;
|
||||
}
|
||||
|
||||
export const OrderToggleButton = ({ sortOrder, onToggle, buttonProps }: OrderToggleButtonProps) => {
|
||||
export const OrderToggleButton = ({ buttonProps, onToggle, sortOrder }: OrderToggleButtonProps) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Tooltip
|
||||
|
|
@ -23,9 +24,9 @@ export const OrderToggleButton = ({ sortOrder, onToggle, buttonProps }: OrderTog
|
|||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
onClick={onToggle}
|
||||
size="md"
|
||||
variant="subtle"
|
||||
onClick={onToggle}
|
||||
{...buttonProps}
|
||||
>
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import styled from 'styled-components';
|
|||
|
||||
export const ResizeHandle = styled.div<{
|
||||
$isResizing: boolean;
|
||||
$placement: 'top' | 'left' | 'bottom' | 'right';
|
||||
$placement: 'bottom' | 'left' | 'right' | 'top';
|
||||
}>`
|
||||
position: absolute;
|
||||
top: ${(props) => props.$placement === 'top' && 0};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { MutableRefObject, useCallback } from 'react';
|
||||
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
|
||||
import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
|
||||
|
|
@ -6,8 +7,8 @@ import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-
|
|||
import { ServerListItem } from '/@/renderer/types';
|
||||
|
||||
interface HandleFavoriteProps {
|
||||
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
|
||||
server: ServerListItem | null;
|
||||
gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
|
||||
server: null | ServerListItem;
|
||||
}
|
||||
|
||||
export const useHandleFavorite = ({ gridRef, server }: HandleFavoriteProps) => {
|
||||
|
|
@ -16,7 +17,7 @@ export const useHandleFavorite = ({ gridRef, server }: HandleFavoriteProps) => {
|
|||
|
||||
const handleFavorite = useCallback(
|
||||
async (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => {
|
||||
const { id, itemType, isFavorite } = options;
|
||||
const { id, isFavorite, itemType } = options;
|
||||
try {
|
||||
if (isFavorite) {
|
||||
await deleteFavoriteMutation.mutateAsync({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import isElectron from 'is-electron';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import {
|
||||
|
|
@ -11,10 +13,9 @@ import {
|
|||
} from '/@/renderer/api/types';
|
||||
import { MutationHookArgs } from '/@/renderer/lib/react-query';
|
||||
import { getServerById, useSetAlbumListItemDataById, useSetQueueFavorite } from '/@/renderer/store';
|
||||
import isElectron from 'is-electron';
|
||||
import { useFavoriteEvent } from '/@/renderer/store/event.store';
|
||||
|
||||
const remote = isElectron() ? window.electron.remote : null;
|
||||
const remote = isElectron() ? window.api.remote : null;
|
||||
|
||||
export const useCreateFavorite = (args: MutationHookArgs) => {
|
||||
const { options } = args || {};
|
||||
|
|
@ -26,7 +27,7 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
|
|||
return useMutation<
|
||||
FavoriteResponse,
|
||||
AxiosError,
|
||||
Omit<FavoriteArgs, 'server' | 'apiClientProps'>,
|
||||
Omit<FavoriteArgs, 'apiClientProps' | 'server'>,
|
||||
null
|
||||
>({
|
||||
mutationFn: (args) => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import isElectron from 'is-electron';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import {
|
||||
|
|
@ -11,10 +13,9 @@ import {
|
|||
} from '/@/renderer/api/types';
|
||||
import { MutationHookArgs } from '/@/renderer/lib/react-query';
|
||||
import { getServerById, useSetAlbumListItemDataById, useSetQueueFavorite } from '/@/renderer/store';
|
||||
import isElectron from 'is-electron';
|
||||
import { useFavoriteEvent } from '/@/renderer/store/event.store';
|
||||
|
||||
const remote = isElectron() ? window.electron.remote : null;
|
||||
const remote = isElectron() ? window.api.remote : null;
|
||||
|
||||
export const useDeleteFavorite = (args: MutationHookArgs) => {
|
||||
const { options } = args || {};
|
||||
|
|
@ -26,7 +27,7 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
|
|||
return useMutation<
|
||||
FavoriteResponse,
|
||||
AxiosError,
|
||||
Omit<FavoriteArgs, 'server' | 'apiClientProps'>,
|
||||
Omit<FavoriteArgs, 'apiClientProps' | 'server'>,
|
||||
null
|
||||
>({
|
||||
mutationFn: (args) => {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import isElectron from 'is-electron';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import {
|
||||
Album,
|
||||
AlbumArtist,
|
||||
AlbumArtistDetailResponse,
|
||||
AlbumDetailResponse,
|
||||
AnyLibraryItems,
|
||||
LibraryItem,
|
||||
SetRatingArgs,
|
||||
RatingResponse,
|
||||
AlbumDetailResponse,
|
||||
AlbumArtistDetailResponse,
|
||||
SetRatingArgs,
|
||||
} from '/@/renderer/api/types';
|
||||
import { MutationHookArgs } from '/@/renderer/lib/react-query';
|
||||
import { getServerById, useSetAlbumListItemDataById, useSetQueueRating } from '/@/renderer/store';
|
||||
import isElectron from 'is-electron';
|
||||
import { useRatingEvent } from '/@/renderer/store/event.store';
|
||||
|
||||
const remote = isElectron() ? window.electron.remote : null;
|
||||
const remote = isElectron() ? window.api.remote : null;
|
||||
|
||||
export const useSetRating = (args: MutationHookArgs) => {
|
||||
const { options } = args || {};
|
||||
|
|
@ -29,8 +30,8 @@ export const useSetRating = (args: MutationHookArgs) => {
|
|||
return useMutation<
|
||||
RatingResponse,
|
||||
AxiosError,
|
||||
Omit<SetRatingArgs, 'server' | 'apiClientProps'>,
|
||||
{ previous: { items: AnyLibraryItems } | undefined }
|
||||
Omit<SetRatingArgs, 'apiClientProps' | 'server'>,
|
||||
{ previous: undefined | { items: AnyLibraryItems } }
|
||||
>({
|
||||
mutationFn: (args) => {
|
||||
const server = getServerById(args.serverId);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { MusicFolderListQuery } from '../../../api/types';
|
||||
import { QueryHookArgs } from '../../../lib/react-query';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { getServerById } from '/@/renderer/store';
|
||||
import { MusicFolderListQuery } from '../../../api/types';
|
||||
import { QueryHookArgs } from '../../../lib/react-query';
|
||||
|
||||
export const useMusicFolders = (args: QueryHookArgs<MusicFolderListQuery>) => {
|
||||
const { options, serverId } = args || {};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue