feat(synced-lyrics): lyrics offset

src/i18n/resources/en.json

@@ -752,6 +752,14 @@
           },
           "tooltip": "Choose the effect to apply to the current line"
         },
+        "offset": {
+          "label": "Lyrics offset",
+          "tooltip": "Set the offset for the lyrics (useful when using bluetooth speakers)",
+          "prompt": {
+            "title": "Lyrics offset",
+            "label": "Set the lyrics offset in ms"
+          }
+        },
         "precise-timing": {
           "label": "Make the lyrics perfectly synced",
           "tooltip": "Calculate to the milisecond the display of the next line (can have a small impact on performance)"

src/plugins/synced-lyrics/index.ts

@@ -16,6 +16,7 @@ export default createPlugin({
   config: {
     enabled: false,
     preciseTiming: true,
+    lyricsOffset: 0,
     showLyricsEvenIfInexact: true,
     showTimeCodes: false,
     defaultTextString: '♪',

src/plugins/synced-lyrics/menu.ts

@@ -1,4 +1,7 @@
+import prompt from 'custom-electron-prompt';
+
 import { t } from '@/i18n';
+import promptOptions from '@/providers/prompt-options';
 
 import type { MenuItemConstructorOptions } from 'electron';
 import type { MenuContext } from '@/types/contexts';
@@ -10,6 +13,30 @@ export const menu = async (
   const config = await ctx.getConfig();
 
   return [
+    {
+      label: t('plugins.synced-lyrics.menu.offset.label'),
+      toolTip: t('plugins.synced-lyrics.menu.offset.tooltip'),
+      type: 'normal',
+      async click() {
+        const config = await ctx.getConfig();
+        const newOffset = await prompt(
+          {
+            title: t('plugins.synced-lyrics.menu.offset.prompt.title'),
+            label: t('plugins.synced-lyrics.menu.offset.prompt.label'),
+            value: config.lyricsOffset || 0,
+            type: 'counter',
+            counterOptions: { multiFire: true },
+            width: 380,
+            ...promptOptions(),
+          },
+          ctx.window,
+        );
+
+        ctx.setConfig({
+          lyricsOffset: newOffset ?? config.lyricsOffset,
+        });
+      },
+    },
     {
       label: t('plugins.synced-lyrics.menu.precise-timing.label'),
       toolTip: t('plugins.synced-lyrics.menu.precise-timing.tooltip'),

src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx

@@ -24,7 +24,7 @@ interface SyncedLineProps {
 
 export const SyncedLine = (props: SyncedLineProps) => {
   const status = createMemo(() => {
-    const current = currentTime();
+    const current = Math.max(0, currentTime() - (config()?.lyricsOffset ?? 0));
 
     if (props.line.timeInMs >= current) return 'upcoming';
     if (current - props.line.timeInMs >= props.line.duration) return 'previous';

src/plugins/synced-lyrics/types.ts

@@ -4,6 +4,7 @@ export type SyncedLyricsPluginConfig = {
   enabled: boolean;
   preciseTiming: boolean;
   showTimeCodes: boolean;
+  lyricsOffset: number;
   defaultTextString: string;
   showLyricsEvenIfInexact: boolean;
   lineEffect: LineEffect;