reverse the lyrics offset behavior to standard convention

src/i18n/locales/en.json

@@ -73,6 +73,7 @@
         "enable": "enable",
         "expand": "expand",
         "externalLinks": "external links",
+        "faster": "faster",
         "favorite": "favorite",
         "filter_one": "filter",
         "filter_other": "filters",
@@ -122,6 +123,7 @@
         "setting": "setting",
         "setting_one": "setting",
         "setting_other": "settings",
+        "slower": "slower",
         "share": "share",
         "size": "size",
         "sort": "sort",

src/renderer/features/lyrics/lyrics-actions.tsx

@@ -20,19 +20,17 @@ import { LyricsOverride } from '/@/shared/types/domain-types';
 interface LyricsActionsProps {
     index: number;
     languages: { label: string; value: string }[];
-
     onRemoveLyric: () => void;
-    onResetLyric: () => void;
     onSearchOverride: (params: LyricsOverride) => void;
     onTranslateLyric?: () => void;
     setIndex: (idx: number) => void;
+    synced?: boolean;
 }
 
 export const LyricsActions = ({
     index,
     languages,
     onRemoveLyric,
-    onResetLyric,
     onSearchOverride,
     onTranslateLyric,
     setIndex,
@@ -89,39 +87,34 @@ export const LyricsActions = ({
                     aria-label="Decrease lyric offset"
                     icon="minus"
                     onClick={() => handleLyricOffset(delayMs - 50)}
+                    tooltip={{
+                        label: t('common.slower', { postProcess: 'sentenceCase' }),
+                        openDelay: 0,
+                    }}
                     variant="subtle"
                 />
                 <Tooltip
                     label={t('setting.lyricOffset', { postProcess: 'sentenceCase' })}
-                    openDelay={500}
+                    openDelay={0}
                 >
                     <NumberInput
                         aria-label="Lyric offset"
                         onChange={handleLyricOffset}
                         styles={{ input: { textAlign: 'center' } }}
                         value={delayMs || 0}
-                        width={55}
+                        width={70}
                     />
                 </Tooltip>
                 <ActionIcon
                     aria-label="Increase lyric offset"
                     icon="plus"
                     onClick={() => handleLyricOffset(delayMs + 50)}
+                    tooltip={{
+                        label: t('common.faster', { postProcess: 'sentenceCase' }),
+                        openDelay: 0,
+                    }}
                     variant="subtle"
                 />
-                {isDesktop && sources.length ? (
-                    <Button
-                        disabled={isActionsDisabled}
-                        onClick={onResetLyric}
-                        uppercase
-                        variant="subtle"
-                    >
-                        {t('common.reset', { postProcess: 'sentenceCase' })}
-                    </Button>
-                ) : null}
-            </Group>
-
-            <div style={{ position: 'absolute', right: 0, top: 0 }}>
                 {isDesktop && sources.length ? (
                     <Button
                         disabled={isActionsDisabled}
@@ -132,7 +125,7 @@ export const LyricsActions = ({
                         {t('common.clear', { postProcess: 'sentenceCase' })}
                     </Button>
                 ) : null}
-            </div>
+            </Group>
 
             <div style={{ position: 'absolute', right: 0, top: -50 }}>
                 {isDesktop && sources.length && onTranslateLyric ? (

src/renderer/features/lyrics/lyrics.tsx

@@ -114,13 +114,13 @@ export const Lyrics = () => {
         }
     }, [override, overrideData, currentSong]);
 
-    const handleOnResetLyric = useCallback(() => {
-        setOverride(undefined);
-        queryClient.invalidateQueries({
-            exact: true,
-            queryKey: queryKeys.songs.lyrics(currentSong?._serverId, { songId: currentSong?.id }),
-        });
-    }, [currentSong?.id, currentSong?._serverId]);
+    // const handleOnResetLyric = useCallback(() => {
+    //     setOverride(undefined);
+    //     queryClient.invalidateQueries({
+    //         exact: true,
+    //         queryKey: queryKeys.songs.lyrics(currentSong?._serverId, { songId: currentSong?.id }),
+    //     });
+    // }, [currentSong?.id, currentSong?._serverId]);
 
     const handleOnRemoveLyric = useCallback(() => {
         queryClient.setQueryData(
@@ -259,7 +259,6 @@ export const Lyrics = () => {
                         index={index}
                         languages={languages}
                         onRemoveLyric={handleOnRemoveLyric}
-                        onResetLyric={handleOnResetLyric}
                         onSearchOverride={handleOnSearchOverride}
                         onTranslateLyric={
                             translationApiProvider && translationApiKey

src/renderer/features/lyrics/synchronized-lyrics.tsx

@@ -180,7 +180,7 @@ export const SynchronizedLyrics = ({
 
         if (status === PlayerStatus.PLAYING) {
             // Use the current timestamp from player events
-            setCurrentLyric(timestamp * 1000 - delayMsRef.current);
+            setCurrentLyric(timestamp * 1000 + delayMsRef.current);
 
             return () => {
                 // Cleanup: clear the timer when lyrics change or component unmounts
@@ -208,7 +208,7 @@ export const SynchronizedLyrics = ({
         delayMsRef.current = settings.delayMs;
 
         // Use the current timestamp from player events
-        setCurrentLyric(timestamp * 1000 - delayMsRef.current);
+        setCurrentLyric(timestamp * 1000 + delayMsRef.current);
     }, [setCurrentLyric, settings.delayMs, timestamp]);
 
     useEffect(() => {
@@ -226,7 +226,7 @@ export const SynchronizedLyrics = ({
             clearTimeout(lyricTimer.current);
         }
 
-        setCurrentLyric(timestamp * 1000 - delayMsRef.current);
+        setCurrentLyric(timestamp * 1000 + delayMsRef.current);
     }, [timestamp, setCurrentLyric, status]);
 
     useEffect(() => {