master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI fixes

Browse Source
This commit is contained in:
Geert Rademakes 2025-04-25 11:30:47 +02:00
parent 9116b785ea
commit 506569b038
1 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/frontend/src/pages/Configuration.tsx
View File

@ -1,4 +1,6 @@
import { Box, Heading, VStack, Text, Button, OrderedList, ListItem, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useToast } from "@chakra-ui/react"; import { Box, Heading, VStack, Text, Button, OrderedList, ListItem, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useToast, IconButton, Flex } from "@chakra-ui/react";
import { ChevronLeftIcon } from "@chakra-ui/icons";
import { useNavigate } from "react-router-dom";
import { useXmlParser } from "../hooks/useXmlParser"; import { useXmlParser } from "../hooks/useXmlParser";
import { exportToXml } from "../services/xmlService"; import { exportToXml } from "../services/xmlService";
import { StyledFileInput } from "../components/StyledFileInput"; import { StyledFileInput } from "../components/StyledFileInput";
@ -8,6 +10,7 @@ export function Configuration() {
const { songs, resetLibrary } = useXmlParser(); const { songs, resetLibrary } = useXmlParser();
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast(); const toast = useToast();
const navigate = useNavigate();
const handleExport = () => { const handleExport = () => {
const xmlContent = exportToXml(songs, []); const xmlContent = exportToXml(songs, []);
@ -45,9 +48,35 @@ export function Configuration() {
}; };
return ( return (
<Box h="100%" bg="gray.900" p={8}> <Box
h="100%"
bg="gray.900"
p={8}
overflowY="auto"
sx={{
'&::-webkit-scrollbar': {
width: '8px',
borderRadius: '8px',
backgroundColor: 'gray.900',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'gray.700',
borderRadius: '8px',
},
}}
>
<VStack spacing={8} align="stretch" maxW="2xl" mx="auto"> <VStack spacing={8} align="stretch" maxW="2xl" mx="auto">
<Heading size="lg" mb={6}>Configuration</Heading> <Flex align="center" gap={4}>
<IconButton
icon={<ChevronLeftIcon boxSize={6} />}
aria-label="Go back"
variant="ghost"
onClick={() => navigate('/')}
color="gray.300"
_hover={{ color: "white", bg: "whiteAlpha.200" }}
/>
<Heading size="lg">Configuration</Heading>
</Flex>
<Box bg="gray.800" p={6} borderRadius="lg" borderWidth="1px" borderColor="gray.700"> <Box bg="gray.800" p={6} borderRadius="lg" borderWidth="1px" borderColor="gray.700">
<Heading size="md" mb={4}>Library Management</Heading> <Heading size="md" mb={4}>Library Management</Heading>
@ -82,6 +111,20 @@ export function Configuration() {
<Text color="gray.400" mb={4}> <Text color="gray.400" mb={4}>
Export your current library back to XML format to import into Rekordbox. Export your current library back to XML format to import into Rekordbox.
</Text> </Text>
<OrderedList spacing={3} color="gray.400" mb={4}>
<ListItem>
Click the button below to export your library to XML
</ListItem>
<ListItem>
Open Rekordbox 7 and go to <Text as="span" color="gray.300" fontWeight="medium">Preferences → Advanced → rekordbox xml</Text>
</ListItem>
<ListItem>
Select your exported XML file in the <Text as="span" color="gray.300" fontWeight="medium">rekordbox xml</Text> section
</ListItem>
<ListItem>
Your imported playlists will appear in the left sidebar under <Text as="span" color="gray.300" fontWeight="medium">the sd card with < > in them icon.</></Text>
</ListItem>
</OrderedList>
<Button onClick={handleExport} width="full"> <Button onClick={handleExport} width="full">
Export XML Export XML
</Button> </Button>