87 | >(({ className, ...props }, ref) => (
88 | [role=checkbox]]:translate-y-[2px]',
92 | className,
93 | )}
94 | {...props}
95 | />
96 | ));
97 | TableCell.displayName = 'TableCell';
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 |
8 |
9 |
12 |
13 |
Why Choose Legato?
14 |
15 |
16 | Open and manage your Ableton sets directly through Legato's
17 | intuitive interface
18 |
19 |
20 | Search, categorize, tag, and take notes on your projects with
21 | powerful filtering
22 |
23 |
24 | Play your exported audio directly through Legato's built-in player
25 |
26 |
27 | Completely free with no hidden costs or limitations
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
How It Works
36 |
37 |
38 |
1
39 |
Import Your Projects
40 |
41 | Connect Legato to your Ableton projects folder and let it index
42 | your work
43 |
44 |
45 |
46 |
2
47 |
Organize & Tag
48 |
49 | Add tags, notes, and categories to keep your projects organized
50 |
51 |
52 |
53 |
3
54 |
Find & Open
55 |
56 | Quickly find and open your projects with powerful search and
57 | filtering
58 |
59 |
60 |
61 |
63 |
64 |
65 |
66 |
67 | Frequently Asked Questions
68 |
69 |
70 |
71 |
Is Legato really free?
72 |
73 | Yes! Legato is completely free to use with no hidden costs or
74 | limitations.
75 |
76 |
77 |
78 |
79 | Does it work with all versions of Ableton?
80 |
81 |
82 | Yes! Legato works with all Ableton versions, supporting
83 | Lite/Intro, Standard and Suite versions.
84 |
85 |
86 |
87 |
How do I get started?
88 |
89 | Simply download Legato, point it to your Ableton projects folder,
90 | and start organizing!
91 |
92 |
93 |
94 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/docs/src/content/docs/scanning-projects.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Scanning projects
3 | ---
4 | import { FileTree } from '@astrojs/starlight/components';
5 | import { Steps } from '@astrojs/starlight/components';
6 |
7 | In summary, [**Fast scan**](#fast-scan) is quicker but less thorough, while [**Full scan**](#full-scan) is slower but more comprehensive. The choice between the two would depend on whether speed or accuracy is more important in your specific use case.
8 |
9 | ## Fast Scan
10 |
11 | This function scans the project directory and processes only the projects that are not already saved in the database. If a project is already saved, it simply skips it. This makes the scan faster, but it won't pick up any changes to existing projects.
12 |
13 |
14 | 1. Scans the directory for Ableton projects.
15 | 2. If a project is found in the directory but not in the database, it is processed and added to the database.
16 | 3. If a project is already in the database, it is skipped. This means that any changes to the project since the last scan will not be detected.
17 |
18 |
19 | This scan is faster because it only processes new projects. However, it may not accurately reflect the current state of all projects if existing projects have been modified.
20 |
21 |
22 | ## Full scan
23 |
24 | This function also scans the project directory, but it processes all projects, whether they are already saved in the database or not. If a project is already saved, it updates the existing database entry. If a project is not found in the scan but exists in the database, it is removed from the database. This scan is more thorough and will pick up any changes to existing projects, but it is also slower.
25 |
26 |
27 | 1. Scans the directory for Ableton projects.
28 | 2. If a project is found in the directory and in the database, it is updated in the database. This means that any changes to the project since the last scan will be detected.
29 | 3. If a project is found in the directory but not in the database, it is processed and added to the database.
30 | 4. If a project is in the database but not found in the directory, it is removed from the database. This means that if a project has been deleted since the last scan, it will be removed from the database.
31 |
32 |
33 | This scan is slower because it processes all projects, whether they are new, existing, or deleted. However, it accurately reflects the current state of all projects.
34 |
35 | ## Automatic Background Scanning
36 |
37 | Legato can automatically scan for new projects in the background on a schedule, allowing you to keep your project library up-to-date without manual intervention.
38 |
39 | Background scanning runs a [Fast Scan](#fast-scan) in the background, which means it will only process new projects without updating existing ones or removing deleted projects.
40 |
41 | The background scan schedule is configurable using a cron string in the settings. You can use a cron string generator like [crontab.guru](https://crontab.guru/) to create a cron string that suits your needs.
42 |
43 | ## Example file structure
44 |
45 | Legato only loads projects from subdirectories of the root directory. It does not load projects from subdirectories of subdirectories. For example, it will not load automatic backup projects because those are in a subdirectory of the project directory.
46 |
47 |
48 | - my-projects (root directory)
49 | - project1_Project
50 | - Ableton_Project_Info/
51 | - Backup
52 | - project1_[2024-03-01_195216].als not added to Legato
53 | - project1_[2024-03-01_195647].als not added to Legato
54 | - ...
55 | - Samples/
56 | - Icon
57 | - **project1.als** added to Legato
58 | - project2_Project
59 | - Ableton_Project_Info/
60 | - Backup
61 | - project2_[2024-03-01_195216].als not added to Legato
62 | - project2_[2024-03-01_195647].als not added to Legato
63 | - ...
64 | - Samples/
65 | - Icon
66 | - **project2.als** added to Legato
67 | - **project2 Copy.als** added to Legato
68 |
69 |
--------------------------------------------------------------------------------
/src/renderer/components/datatable/data-table-pagination.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ChevronLeftIcon,
3 | ChevronRightIcon,
4 | ChevronsLeftIcon,
5 | ChevronsRightIcon,
6 | } from 'lucide-react';
7 | import { Table } from '@tanstack/react-table';
8 |
9 | import { Button } from '@/components/ui/button';
10 | import {
11 | Select,
12 | SelectContent,
13 | SelectItem,
14 | SelectTrigger,
15 | SelectValue,
16 | } from '@/components/ui/select';
17 |
18 | import { useDispatch } from 'react-redux';
19 | import { updateSettings } from '@/store/Slices/settingsSlice';
20 |
21 | interface DataTablePaginationProps {
22 | table: Table;
23 | }
24 |
25 | // eslint-disable-next-line import/prefer-default-export
26 | export function DataTablePagination({
27 | table,
28 | }: DataTablePaginationProps) {
29 | const dispatch = useDispatch();
30 | return (
31 |
32 |
33 | {table.getFilteredSelectedRowModel().rows.length} of{' '}
34 | {table.getFilteredRowModel().rows.length} row(s) selected.
35 |
36 |
37 |
38 |
Rows per page
39 |
{
42 | table.setPageSize(Number(value));
43 | dispatch(updateSettings({ pageSize: Number(value) }));
44 | }}
45 | >
46 |
47 |
49 |
50 | {[10, 20, 30, 40, 50].map((pageSize) => (
51 |
52 | {pageSize}
53 |
54 | ))}
55 |
56 |
57 |
58 |
59 | Page {table.getState().pagination.pageIndex + 1} of{' '}
60 | {table.getPageCount() || 1}
61 |
62 |
63 | table.setPageIndex(0)}
67 | disabled={!table.getCanPreviousPage()}
68 | >
69 | Go to first page
70 |
72 | table.previousPage()}
76 | disabled={!table.getCanPreviousPage()}
77 | >
78 | Go to previous page
79 |
81 | table.nextPage()}
85 | disabled={!table.getCanNextPage()}
86 | >
87 | Go to next page
88 |
90 | table.setPageIndex(table.getPageCount() - 1)}
94 | disabled={!table.getCanNextPage()}
95 | >
96 | Go to last page
97 |
99 |
100 |
101 |
,
17 | React.ComponentPropsWithoutRef
18 | >(({ className, ...props }, ref) => (
19 | ,
32 | React.ComponentPropsWithoutRef
33 | >(({ className, children, ...props }, ref) => (
34 |
35 |
44 | {children}
45 |
46 | Close
48 |
49 |
50 |
51 | ));
52 | DialogContent.displayName = DialogPrimitive.Content.displayName;
53 |
54 | function DialogHeader({
55 | className,
56 | ...props
57 | }: React.HTMLAttributes) {
58 | return (
59 |
66 | );
67 | }
68 | DialogHeader.displayName = 'DialogHeader';
69 |
70 | function DialogFooter({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) {
74 | return (
75 |
82 | );
83 | }
84 | DialogFooter.displayName = 'DialogFooter';
85 |
86 | const DialogTitle = React.forwardRef<
87 | React.ElementRef,
88 | React.ComponentPropsWithoutRef
89 | >(({ className, ...props }, ref) => (
90 | ,
103 | React.ComponentPropsWithoutRef
104 | >(({ className, ...props }, ref) => (
105 |
28 | Table of Contents
29 |
30 |
31 | About The Project
32 |
33 |
34 | Getting Started
35 |
39 |
40 | Contributing License
43 |
44 |
45 |
46 |
47 |
48 | ## About The Project
49 | 
50 |
51 | Welcome to Legato, your ultimate manager for Ableton projects!
52 |
53 | Legato simplifies project organization and enhances your workflow, allowing you to focus more on your music creation process and less on file management.
54 |
55 | (back to top )
56 |
57 |
58 |
59 | ## Getting Started
60 |
61 | ### Installation
62 |
63 | Before you can start using Legato, you'll need to install it on your system. Follow these steps:
64 |
65 | 1. **Download Legato:** Visit the [GitHub releases page](https://github.com/pruizlezcano/legato/releases/latest) and download the appropriate version of Legato for your operating system.
66 |
67 | 2. **Install Legato:** Once the download is complete, follow the installation instructions provided in the installation wizard.
68 |
69 | 3. **Launch Legato:** After installation, launch Legato from your applications folder or desktop shortcut.
70 |
71 | > [!NOTE]
72 | > During the installation you may found some security issues. This ocurs because the installer is not signed by a certificate.
73 | > When you download a file from the internet, **macOS** automatically adds a `quarantine` attribute to it. This attribute is used to trigger certain security measures, such as warning you when you try to open the file, or preventing the file from being opened at all.
74 | > You can remove the `quarantine` attribute by running this command in the Terminal app.
75 | > ```shell
76 | > xattr -d com.apple.quarantine /Applications/Legato.app
77 | >```
78 | >In **Windows** you can ignore the alert and open Legato normaly.
79 |
80 | (back to top )
81 |
82 |
83 |
84 | ### Adding Ableton Projects
85 |
86 | Legato seamlessly integrates with your Ableton projects, providing a centralized platform for managing them. In order to connect Legato to your Ableton projects, follow these steps:
87 |
88 | 1. In Legato, open the settings page.
89 | 2. Modify your projects path.
90 | 3. Click on the scan button to start adding your Ableton projects to Legato.
91 |
92 | Learn more about the scanning modes [here](https://pruizlezcano.github.io/legato/scanning-projects).
93 |
94 |
95 |
96 | ## Contributing
97 |
98 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
99 |
100 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
101 | Don't forget to give the project a star! Thanks again!
102 |
103 | 1. Fork the Project
104 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
105 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
106 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
107 | 5. Open a Pull Request
108 |
109 | (back to top )
110 |
111 |
112 |
113 |
114 | ## License
115 |
116 | Distributed under the GPL-3.0 License. See `LICENSE` for more information.
117 |
118 | (back to top )
119 |
--------------------------------------------------------------------------------
/src/renderer/components/ui/audio-player.tsx:
--------------------------------------------------------------------------------
1 | import { useGlobalAudioPlayer } from 'react-use-audio-player';
2 | import { useEffect, useRef, useState } from 'react';
3 | import { Card, CardContent } from '@/components/ui/card';
4 | import {
5 | Tooltip,
6 | TooltipContent,
7 | TooltipProvider,
8 | TooltipTrigger,
9 | } from '@/components/ui/tooltip';
10 | import { PlayCircleIcon, PauseCircleIcon, XIcon } from 'lucide-react';
11 | import { useSelector, useDispatch } from 'react-redux';
12 | import {
13 | selectAppState,
14 | setShowAudioPlayer,
15 | } from '@/store/Slices/appStateSlice';
16 | import { Slider } from './slider';
17 |
18 | function useAudioTime() {
19 | const frameRef = useRef();
20 | const [pos, setPos] = useState(0);
21 | const { getPosition } = useGlobalAudioPlayer();
22 |
23 | useEffect(() => {
24 | const animate = () => {
25 | setPos(getPosition());
26 | frameRef.current = requestAnimationFrame(animate);
27 | };
28 |
29 | frameRef.current = window.requestAnimationFrame(animate);
30 |
31 | return () => {
32 | if (frameRef.current) {
33 | cancelAnimationFrame(frameRef.current);
34 | }
35 | };
36 | }, [getPosition]);
37 |
38 | return pos;
39 | }
40 |
41 | function posToString(pos: number) {
42 | const minutes = Math.floor(pos / 60);
43 | const seconds = Math.floor(pos % 60);
44 | return `${minutes}:${seconds.toString().padStart(2, '0')}`;
45 | }
46 |
47 | // eslint-disable-next-line import/prefer-default-export
48 | export function AudioPlayer() {
49 | const { playing, togglePlayPause, duration, seek, stop } =
50 | useGlobalAudioPlayer();
51 | const pos = useAudioTime();
52 | const [sliderPos, setSliderPos] = useState(pos);
53 | const [showTitle, setShowTitle] = useState(false);
54 | const dispatch = useDispatch();
55 | const appState = useSelector(selectAppState);
56 |
57 | const handleSliderChange = ([newValue]: number[]) => {
58 | seek(newValue);
59 | setSliderPos(newValue);
60 | };
61 |
62 | useEffect(() => {
63 | setSliderPos(pos);
64 | }, [pos]);
65 |
66 | return (
67 | <>
68 |
72 |
73 | setShowTitle(true)}
76 | onMouseLeave={() => setShowTitle(false)}
77 | >
78 |
83 | now playing:
84 | {appState.nowPlaying || 'No track playing'}
85 |
86 |
87 |
88 | {playing ? (
89 |
94 |
{posToString(pos)}
95 |
102 |
{posToString(duration)}
103 |
104 |
105 |
106 | {
109 | stop();
110 | dispatch(setShowAudioPlayer(false));
111 | }}
112 | aria-label="Close"
113 | >
114 |
116 |
117 |
118 | Close
119 |
120 |
121 |
122 |
124 |
125 |
127 |
128 | );
129 | }
130 |
--------------------------------------------------------------------------------
/src/renderer/components/TableSkeleton.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-unstable-nested-components */
2 | import {
3 | Table,
4 | TableBody,
5 | TableCell,
6 | TableHead,
7 | TableHeader,
8 | TableRow,
9 | } from '@/components/ui/table';
10 | import {
11 | useReactTable,
12 | getCoreRowModel,
13 | flexRender,
14 | createColumnHelper,
15 | } from '@tanstack/react-table';
16 | import { Skeleton } from '@/components/ui/skeleton';
17 |
18 | function SkeletonCell({ width }: { width: string }) {
19 | return (
20 |
21 |
23 | );
24 | }
25 |
26 | function PaginationSkeleton() {
27 | return (
28 |
29 |
30 |
32 |
33 |
35 |
91 |
92 |
93 | {table.getHeaderGroups().map((headerGroup) => (
94 |
95 | {headerGroup.headers.map((header) => (
96 |
100 | {header.isPlaceholder ? null : (
101 |
102 | {flexRender(
103 | header.column.columnDef.header,
104 | header.getContext(),
105 | )}
106 |
107 | )}
108 |
109 | ))}
110 |
111 | ))}
112 |
113 |
114 | {table.getRowModel().rows?.length ? (
115 | table.getRowModel().rows.map((row) => (
116 |
117 | {row.getVisibleCells().map((cell) => (
118 |
119 | {flexRender(
120 | cell.column.columnDef.cell,
121 | cell.getContext(),
122 | )}
123 |
124 | ))}
125 |
126 | ))
127 | ) : (
128 |
129 |
133 | No results.
134 |
135 |
136 | )}
137 |
138 |
139 |
,
18 | React.ComponentPropsWithoutRef
19 | >(({ className, ...props }, ref) => (
20 | ,
52 | VariantProps {}
53 |
54 | const SheetContent = React.forwardRef<
55 | React.ElementRef,
56 | SheetContentProps
57 | >(({ side = 'right', className, children, ...props }, ref) => (
58 |
59 |
65 | {children}
66 |
67 | Close
69 |
70 |
71 |
72 | ));
73 | SheetContent.displayName = SheetPrimitive.Content.displayName;
74 |
75 | function SheetHeader({
76 | className,
77 | ...props
78 | }: React.HTMLAttributes) {
79 | return (
80 |
87 | );
88 | }
89 | SheetHeader.displayName = 'SheetHeader';
90 |
91 | function SheetFooter({
92 | className,
93 | ...props
94 | }: React.HTMLAttributes) {
95 | return (
96 |
103 | );
104 | }
105 | SheetFooter.displayName = 'SheetFooter';
106 |
107 | const SheetTitle = React.forwardRef<
108 | React.ElementRef,
109 | React.ComponentPropsWithoutRef
110 | >(({ className, ...props }, ref) => (
111 | ,
121 | React.ComponentPropsWithoutRef
122 | >(({ className, ...props }, ref) => (
123 | ,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
29 |
30 |
31 | {children}
32 |
33 |
34 |
35 | );
36 | }
37 |
38 | const CommandInput = React.forwardRef<
39 | React.ElementRef,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 |
43 |
53 | ));
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName;
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, ...props }, ref) => (
61 | ,
72 | React.ComponentPropsWithoutRef
73 | >((props, ref) => (
74 | ,
85 | React.ComponentPropsWithoutRef
86 | >(({ className, ...props }, ref) => (
87 | ,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 | ,
113 | React.ComponentPropsWithoutRef
114 | >(({ className, ...props }, ref) => (
115 | ) {
131 | return (
132 | (null);
36 | const editInputRef = useRef(null);
37 |
38 | useEffect(() => {
39 | if (inputVisible) {
40 | inputRef.current?.focus();
41 | }
42 | }, [inputVisible]);
43 |
44 | useEffect(() => {
45 | editInputRef.current?.focus();
46 | }, [editInputValue]);
47 |
48 | const saveTags = useCallback(
49 | (newTags: string[]) => {
50 | setTags(newTags);
51 | onChange(newTags);
52 | },
53 | [setTags, onChange],
54 | );
55 |
56 | const handleClose = (removedTag: string) => {
57 | const newTags = tags.filter((tag) => tag !== removedTag);
58 | saveTags(newTags);
59 | };
60 |
61 | const showInput = () => {
62 | setInputVisible(true);
63 | };
64 |
65 | const handleInputChange = (e: React.ChangeEvent) => {
66 | setInputValue(e.target.value);
67 | };
68 |
69 | const handleInputConfirm = useCallback(() => {
70 | if (inputValue && !tags.includes(inputValue)) {
71 | saveTags([...tags, inputValue]);
72 | }
73 | setInputVisible(false);
74 | setInputValue('');
75 | }, [inputValue, tags, saveTags]);
76 |
77 | const handleEditInputChange = (e: React.ChangeEvent) => {
78 | setEditInputValue(e.target.value);
79 | };
80 |
81 | const handleEditInputConfirm = useCallback(() => {
82 | const newTags = [...tags];
83 | newTags[editInputIndex] = editInputValue;
84 |
85 | saveTags(newTags);
86 | setEditInputIndex(-1);
87 | setEditInputValue('');
88 | }, [editInputIndex, editInputValue, tags, saveTags]);
89 |
90 | useEffect(() => {
91 | const down = (e: KeyboardEvent) => {
92 | if (e.key === 'Enter') {
93 | e.preventDefault();
94 | e.stopPropagation();
95 | if (inputValue) handleInputConfirm();
96 | else if (editInputValue) handleEditInputConfirm();
97 | }
98 | };
99 |
100 | document.addEventListener('keydown', down);
101 | return () => document.removeEventListener('keydown', down);
102 | }, [handleInputConfirm, handleEditInputConfirm, inputValue, editInputValue]);
103 |
104 | return (
105 |
106 | {tags.map((tag, index) => {
107 | if (editInputIndex === index) {
108 | return (
109 |
117 | );
118 | }
119 | const isLongTag = tag.length > 20;
120 | const tagElem = (
121 |
126 | {
128 | setEditInputIndex(index);
129 | setEditInputValue(tag);
130 | e.preventDefault();
131 | }}
132 | className="truncate max-w-[102px]"
133 | >
134 | {tag}
135 |
136 | handleClose(tag)}>
137 |
139 |
140 | );
141 | return isLongTag ? (
142 |
143 |
144 |
145 | {tagElem}
146 |
147 |
148 | {tag}
149 |
150 |
151 |
152 | ) : (
153 | tagElem
154 | );
155 | })}
156 | {inputVisible ? (
157 |
165 | ) : maxTags && tags.length >= maxTags ? null : (
166 |
171 |
174 | )}
175 |
,
20 | React.ComponentPropsWithoutRef
21 | >(({ className, children, ...props }, ref) => (
22 | span]:line-clamp-1',
26 | className,
27 | )}
28 | {...props}
29 | >
30 | {children}
31 |
32 |
34 |
35 | ));
36 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
37 |
38 | const SelectScrollUpButton = React.forwardRef<
39 | React.ElementRef,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 |
50 |
52 | ));
53 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
54 |
55 | const SelectScrollDownButton = React.forwardRef<
56 | React.ElementRef,
57 | React.ComponentPropsWithoutRef
58 | >(({ className, ...props }, ref) => (
59 |
67 |
69 | ));
70 | SelectScrollDownButton.displayName =
71 | SelectPrimitive.ScrollDownButton.displayName;
72 |
73 | const SelectContent = React.forwardRef<
74 | React.ElementRef,
75 | React.ComponentPropsWithoutRef
76 | >(({ className, children, position = 'popper', ...props }, ref) => (
77 |
78 |
89 |
97 | {children}
98 |
99 |
101 |
102 | ));
103 | SelectContent.displayName = SelectPrimitive.Content.displayName;
104 |
105 | const SelectLabel = React.forwardRef<
106 | React.ElementRef,
107 | React.ComponentPropsWithoutRef
108 | >(({ className, ...props }, ref) => (
109 | ,
119 | React.ComponentPropsWithoutRef
120 | >(({ className, children, ...props }, ref) => (
121 |
129 |
130 |
131 |
133 |
134 | {children}
135 |
136 | ));
137 | SelectItem.displayName = SelectPrimitive.Item.displayName;
138 |
139 | const SelectSeparator = React.forwardRef<
140 | React.ElementRef,
141 | React.ComponentPropsWithoutRef
142 | >(({ className, ...props }, ref) => (
143 | 
8 |