Export lyrics (#1383)

* add export button to the lyrics actions * add export button to the lyrics search modal --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>
2026-05-16 21:50:35 +02:00 · 2025-12-24 05:27:47 +00:00
parent 936ba73fe4
commit 04fbf5d3d2
5 changed files with 259 additions and 81 deletions
@@ -0,0 +1,128 @@
+import { closeAllModals, openModal } from '@mantine/modals';
+import formatDuration from 'format-duration';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import i18n from '/@/i18n/i18n';
+import { Button } from '/@/shared/components/button/button';
+import { Checkbox } from '/@/shared/components/checkbox/checkbox';
+import { Code } from '/@/shared/components/code/code';
+import { Divider } from '/@/shared/components/divider/divider';
+import { Group } from '/@/shared/components/group/group';
+import { NumberInput } from '/@/shared/components/number-input/number-input';
+import { Stack } from '/@/shared/components/stack/stack';
+import { useForm } from '/@/shared/hooks/use-form';
+import { FullLyricsMetadata } from '/@/shared/types/domain-types';
+
+interface LyricsExportFormProps {
+    lyrics: FullLyricsMetadata;
+    offsetMs: number;
+    synced: boolean;
+}
+
+export const LyricsExportForm = ({ lyrics, offsetMs, synced }: LyricsExportFormProps) => {
+    const { t } = useTranslation();
+
+    const form = useForm({
+        initialValues: {
+            offsetMs,
+            synced,
+        },
+    });
+
+    const displayedLyrics = useMemo(() => {
+        if (form.values.synced && Array.isArray(lyrics.lyrics)) {
+            const contents = lyrics.lyrics
+                .map(
+                    (lyric) =>
+                        `[${formatDuration(lyric[0], { leading: true, ms: true })}]${lyric[1]}`,
+                )
+                .join('\n');
+
+            return `[ar:${lyrics.artist}]
+[ti:${lyrics.name}]
+[offset:${form.values.offsetMs + (lyrics.offsetMs ?? 0)}]
+${contents}
+`;
+        } else {
+            if (Array.isArray(lyrics.lyrics)) {
+                return lyrics.lyrics.map((lyric) => lyric[1]).join('\n') + '\n';
+            }
+            return lyrics.lyrics;
+        }
+    }, [
+        form.values.offsetMs,
+        form.values.synced,
+        lyrics.artist,
+        lyrics.lyrics,
+        lyrics.name,
+        lyrics.offsetMs,
+    ]);
+
+    const exportLyrics = useCallback(() => {
+        const extension = form.values.synced ? '.lrc' : '.txt';
+        const lyricFile = new File([displayedLyrics], lyrics.name + extension, {
+            type: 'text/plain',
+        });
+
+        const lyricsFileLink = document.createElement('a');
+        const lyricsFileUrl = URL.createObjectURL(lyricFile);
+        lyricsFileLink.href = lyricsFileUrl;
+        lyricsFileLink.download = lyricFile.name;
+        lyricsFileLink.click();
+
+        URL.revokeObjectURL(lyricsFileUrl);
+
+        closeAllModals();
+    }, [displayedLyrics, form.values.synced, lyrics.name]);
+
+    return (
+        <Stack h="100%" w="100%">
+            {synced && (
+                <form>
+                    <Group grow>
+                        <Checkbox
+                            data-autofocus
+                            label={t('form.lyricsExport.input', {
+                                context: 'synced',
+                                postProcess: 'titleCase',
+                            })}
+                            {...form.getInputProps('synced', { type: 'checkbox' })}
+                        />
+                        <NumberInput
+                            data-autofocus
+                            label={t('form.lyricsExport.input', {
+                                context: 'offset',
+                                postProcess: 'titleCase',
+                            })}
+                            {...form.getInputProps('offsetMs')}
+                        />
+                    </Group>
+                </form>
+            )}
+            <Code block>{displayedLyrics}</Code>
+            <Divider />
+            <Group justify="flex-end">
+                <Button onClick={() => closeAllModals()} variant="default">
+                    {t('common.close', { postProcess: 'titleCase' })}
+                </Button>
+                <Button onClick={exportLyrics} variant="filled">
+                    {t('form.lyricsExport.export', { postProcess: 'titleCase' })}
+                </Button>
+            </Group>
+        </Stack>
+    );
+};
+
+export const openLyricsExportModal = ({ lyrics, offsetMs, synced }: LyricsExportFormProps) => {
+    openModal({
+        children: <LyricsExportForm lyrics={lyrics} offsetMs={offsetMs} synced={synced} />,
+        size: 'xl',
+        styles: {
+            body: {
+                height: '600px',
+            },
+        },
+        title: i18n.t('form.lyricSearch.title', { postProcess: 'titleCase' }) as string,
+    });
+};
@@ -9,6 +9,7 @@ import styles from './lyrics-search-form.module.css';

 import i18n from '/@/i18n/i18n';
 import { lyricsQueries } from '/@/renderer/features/lyrics/api/lyrics-api';
+import { openLyricsExportModal } from '/@/renderer/features/lyrics/components/lyrics-export-form';
 import {
    SynchronizedLyrics,
    SynchronizedLyricsProps,
@@ -30,6 +31,7 @@ import { Text } from '/@/shared/components/text/text';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
 import { useForm } from '/@/shared/hooks/use-form';
 import {
+    FullLyricsMetadata,
    InternetProviderLyricSearchResponse,
    LyricSource,
    LyricsOverride,
@@ -144,6 +146,21 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
        }
    };

+    const handleExport = () => {
+        if (selectedResult && previewData) {
+            const lyricsMetadata: FullLyricsMetadata = {
+                artist: selectedResult.artist,
+                lyrics: previewData,
+                name: selectedResult.name,
+                offsetMs: 0,
+                remote: true,
+                source: selectedResult.source,
+            };
+            const synced = Array.isArray(previewData);
+            openLyricsExportModal({ lyrics: lyricsMetadata, offsetMs: 0, synced });
+        }
+    };
+
    return (
        <Stack h="100%" w="100%">
            <form>
@@ -237,6 +254,13 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
                <Button onClick={() => closeAllModals()} variant="default">
                    {t('common.cancel', { postProcess: 'titleCase' })}
                </Button>
+                <Button
+                    disabled={!selectedResult || !previewData}
+                    onClick={handleExport}
+                    variant="default"
+                >
+                    {t('form.lyricsExport.export', { postProcess: 'titleCase' })}
+                </Button>
                <Button disabled={!selectedResult} onClick={handleApply} variant="filled">
                    {t('common.confirm', { postProcess: 'titleCase' })}
                </Button>