diff --git a/src/components/library/FolderList.tsx b/src/components/library/FolderList.tsx new file mode 100644 index 0000000..c8d5a1c --- /dev/null +++ b/src/components/library/FolderList.tsx @@ -0,0 +1,159 @@ +import React, { useState } from 'react'; +import settings from 'electron-settings'; +import { useQuery } from 'react-query'; +import { ButtonToolbar, Icon } from 'rsuite'; +import { getIndexes, getMusicDirectory } from '../../api/api'; +import PageLoader from '../loader/PageLoader'; +import ListViewType from '../viewtypes/ListViewType'; +import { useAppDispatch } from '../../redux/hooks'; +import { + clearSelected, + setRangeSelected, + toggleRangeSelected, + toggleSelected, +} from '../../redux/multiSelectSlice'; +import GenericPage from '../layout/GenericPage'; +import GenericPageHeader from '../layout/GenericPageHeader'; +import { StyledButton, StyledInputPicker } from '../shared/styled'; +import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice'; +import { setStatus } from '../../redux/playerSlice'; +import useSearchQuery from '../../hooks/useSearchQuery'; + +const FolderList = () => { + const dispatch = useAppDispatch(); + const [folderId, setFolderId] = useState(''); + const { isLoading, isError, data, error }: any = useQuery(['folders'], () => getIndexes(), { + refetchOnReconnect: false, + refetchOnWindowFocus: false, + }); + const { data: folderData }: any = useQuery( + ['folder', folderId], + () => getMusicDirectory({ id: folderId }), + { + enabled: folderId !== '', + refetchOnReconnect: false, + refetchOnWindowFocus: false, + } + ); + const [searchQuery, setSearchQuery] = useState(''); + const filteredData = useSearchQuery(searchQuery, folderData?.child, [ + 'title', + 'artist', + 'album', + 'year', + 'genre', + 'path', + ]); + + let timeout: any = null; + const handleRowClick = (e: any, rowData: any) => { + if (timeout === null) { + timeout = window.setTimeout(() => { + timeout = null; + + if (e.ctrlKey) { + dispatch(toggleSelected(rowData)); + } else if (e.shiftKey) { + dispatch(setRangeSelected(rowData)); + dispatch(toggleRangeSelected(folderData.child)); + } + }, 100); + } + }; + + const handleRowDoubleClick = (rowData: any) => { + window.clearTimeout(timeout); + timeout = null; + + dispatch(clearSelected()); + if (rowData.isDir) { + setFolderId(rowData.id); + } else { + dispatch( + setPlayQueueByRowClick({ + entries: folderData?.child?.filter((entry: any) => entry.isDir === false), + currentIndex: rowData.index, + currentSongId: rowData.id, + uniqueSongId: rowData.uniqueId, + }) + ); + dispatch(setStatus('PLAYING')); + dispatch(fixPlayer2Index()); + } + }; + + return ( + <> + {isLoading && } + {isError &&
Error: {error}
} + {!isLoading && data && ( + setSearchQuery(e)} + clearSearchQuery={() => setSearchQuery('')} + showTitleTooltip + subtitle={ + <> + + setFolderId(e)} + /> + + { + if (folderData?.parent) { + setFolderId(folderData?.parent); + } + }} + > + + Go up + + + + } + /> + } + > + + + )} + + ); +}; + +export default FolderList;