feat(synced-lyrics): lyrics offset

src/i18n/resources/en.json

@@ -792,6 +792,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)"
@@ -810,6 +818,11 @@
         }
       },
       "name": "Synced Lyrics",
+      "advanced-options": {
+        "offset": {
+          "title": "Lyrics Offset (ms):"
+        }
+      },
       "refetch-btn": {
         "fetching": "Fetching...",
         "normal": "Refetch lyrics"

src/plugins/synced-lyrics/index.ts

@@ -17,6 +17,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,33 @@ 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: 'input',
+            inputAttrs: {
+              type: 'number',
+              style: 'text-align: center; width: unset;' as unknown as CSSStyleDeclaration,
+            },
+            width: 380,
+            ...promptOptions(),
+          },
+          ctx.window,
+        );
+
+        ctx.setConfig({
+          lyricsOffset: Number(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/LyricsPicker.tsx

@@ -22,7 +22,7 @@ import {
 
 import { _ytAPI } from '../index';
 
-import type { YtIcons } from '@/types/icons';
+import type { Icons, YtIcons } from '@/types/icons';
 
 export const providerIdx = createMemo(() =>
   providerNames.indexOf(lyricsStore.provider),
@@ -53,11 +53,13 @@ const pickBestProvider = () => {
   return providers[0];
 };
 
-const [hasManuallySwitchedProvider, setHasManuallySwitchedProvider] =
-  createSignal(false);
+export const [pickerAdvancedOpen, setPickerAdvancedOpen] = createSignal(false);
 
 // prettier-ignore
-export const LyricsPicker = (props: { setStickRef: Setter<HTMLElement | null> }) => {
+const [hasManuallySwitchedProvider, setHasManuallySwitchedProvider] = createSignal(false);
+
+// prettier-ignore
+export const LyricsPicker = () => {
   createEffect(() => {
     // fallback to the next source, if the current one has an error
     if (!hasManuallySwitchedProvider()
@@ -105,9 +107,10 @@ export const LyricsPicker = (props: { setStickRef: Setter<HTMLElement | null> })
   const successIcon: YtIcons = 'yt-icons:check-circle';
   const errorIcon: YtIcons = 'yt-icons:error';
   const notFoundIcon: YtIcons = 'yt-icons:warning';
+  const toggleAdvancedIcon: Icons = 'icons:more-vert';
 
   return (
-    <div class="lyrics-picker" ref={props.setStickRef}>
+    <div class="lyrics-picker">
       <div class="lyrics-picker-left">
         <tp-yt-paper-icon-button icon={chevronLeft} onClick={previous} />
       </div>
@@ -173,6 +176,10 @@ export const LyricsPicker = (props: { setStickRef: Setter<HTMLElement | null> })
                   class="description ytmusic-description-shelf-renderer"
                   text={{ runs: [{ text: provider() }] }}
                 />
+                <tp-yt-paper-icon-button
+                  icon={toggleAdvancedIcon}
+                  onClick={() => setPickerAdvancedOpen(prev => !prev)}
+                />
               </div>
             )}
           </Index>

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

@@ -0,0 +1,59 @@
+import { t } from '@/i18n';
+import { createSignal } from 'solid-js';
+
+export const [lyricsOffset, setLyricsOffset] = createSignal(0);
+
+export const LyricsPickerAdvanced = () => {
+  const [typing, setTyping] = createSignal(false)
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        'flex-direction': 'row',
+        'align-items': 'center',
+        'justify-content': 'center',
+      }}
+    >
+      <yt-formatted-string
+        class="description ytmusic-description-shelf-renderer"
+        text={{ runs: [{ text: t('plugins.synced-lyrics.advanced-options.offset.title') }] }}
+      />
+      <div style={{ display: 'flex', 'flex-direction': 'row' }}>
+        <input
+          class="lrcpkradv-offset"
+          type="number"
+          step={50}
+          value={lyricsOffset()}
+          onFocus={() => setTyping(true)}
+          onBlur={(e) => {
+            let value = e.target.valueAsNumber;
+            if (isNaN(value)) value = 0;
+
+            setLyricsOffset(value);
+            setTyping(false)
+          }}
+          onInput={() => setTyping(true)}
+        />
+        <span>
+          <button
+            class="lrcpkradv-offset-btn"
+            disabled={typing()}
+            onclick={() => setLyricsOffset((old) => old - 50)}
+          >
+            -
+          </button>
+          /
+          <button
+            class="lrcpkradv-offset-btn"
+            disabled={typing()}
+            onclick={() => setLyricsOffset((old) => old + 50)}
+          >
+            +
+          </button>
+        </span>
+      </div>
+    </div>
+  );
+};

src/plugins/synced-lyrics/renderer/index.ts

@@ -2,19 +2,24 @@ import { createRenderer } from '@/utils';
 import { waitForElement } from '@/utils/wait-for-element';
 
 import { selectors, tabStates } from './utils';
-import { setConfig, setCurrentTime } from './renderer';
+import { config, setConfig, setCurrentTime } from './renderer';
 
 import { fetchLyrics } from '../providers';
 
 import type { RendererContext } from '@/types/contexts';
 import type { YoutubePlayer } from '@/types/youtube-player';
 import type { SongInfo } from '@/providers/song-info';
 import type { SyncedLyricsPluginConfig } from '../types';
+import { createEffect } from 'solid-js';
+import {
+  lyricsOffset,
+  setLyricsOffset,
+} from './components/LyricsPickerAdvanced';
 
 export let _ytAPI: YoutubePlayer | null = null;
 export let netFetch: (
   url: string,
-  init?: RequestInit
+  init?: RequestInit,
 ) => Promise<[number, string, Record<string, string>]>;
 
 export const renderer = createRenderer<
@@ -28,6 +33,7 @@ export const renderer = createRenderer<
 >({
   onConfigChange(newConfig) {
     setConfig(newConfig);
+    setLyricsOffset(newConfig.lyricsOffset);
   },
 
   observerCallback(mutations: MutationRecord[]) {
@@ -56,7 +62,7 @@ export const renderer = createRenderer<
     if (!this.updateTimestampInterval) {
       this.updateTimestampInterval = setInterval(
         () => setCurrentTime((_ytAPI?.getCurrentTime() ?? 0) * 1000),
-        100
+        100,
       );
     }
 
@@ -80,6 +86,23 @@ export const renderer = createRenderer<
 
     setConfig(await ctx.getConfig());
 
+    let hasInit = false;
+    createEffect(() => {
+      const offset = lyricsOffset();
+      if (offset !== 0) return;
+
+      if (hasInit) return;
+      hasInit = true;
+
+      setLyricsOffset(config()?.lyricsOffset ?? 0);
+    });
+
+    createEffect(() => {
+      if (!hasInit) return;
+      const offset = lyricsOffset();
+      ctx.setConfig({ lyricsOffset: offset });
+    });
+
     ctx.ipc.on('ytmd:update-song-info', (info: SongInfo) => {
       fetchLyrics(info);
     });

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

@@ -8,7 +8,7 @@ import {
 } from 'solid-js';
 import { type VirtualizerHandle, VList } from 'virtua/solid';
 
-import { LyricsPicker } from './components/LyricsPicker';
+import { LyricsPicker, pickerAdvancedOpen } from './components/LyricsPicker';
 
 import { selectors } from './utils';
 
@@ -23,6 +23,7 @@ import {
 import { currentLyrics } from '../providers';
 
 import type { LineLyrics, SyncedLyricsPluginConfig } from '../types';
+import { LyricsPickerAdvanced } from './components/LyricsPickerAdvanced';
 
 export const [isVisible, setIsVisible] = createSignal<boolean>(false);
 export const [config, setConfig] =
@@ -155,21 +156,43 @@ export const LyricsRenderer = () => {
       mouseCoord = (e as MouseEvent).clientY;
     }
 
+    const ref = stickyRef()!;
+    const [
+      [realPicker, pickerHeight],
+      [_, divHeight],
+      [realAdvanced, advancedHeight],
+    ] = Array.from(ref.children).map((c) => {
+      const style = getComputedStyle(c);
+      return [
+        parseFloat(style.height) -
+          (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)),
+        c.clientHeight,
+      ];
+    });
+
+    const contentHeight = pickerAdvancedOpen()
+      ? pickerHeight + advancedHeight
+      : pickerHeight;
+    ref.style.height = `${
+      pickerAdvancedOpen() ? realPicker + divHeight + realAdvanced : realPicker
+    }px`;
+
     const { top } = tab.getBoundingClientRect();
     const { clientHeight: height } = stickyRef()!;
     const scrollOffset = scroller()?.scrollOffset ?? -1;
 
     const isInView = scrollOffset <= height;
-    const isMouseOver = mouseCoord - top - 5 <= height;
+    const isMouseOver = mouseCoord - top - 5 <= contentHeight;
 
     const showPicker = isInView || isMouseOver;
+    console.log({ relative: mouseCoord - top - 5, showPicker });
 
     if (showPicker) {
       // picker visible
-      stickyRef()!.style.setProperty('--lyrics-picker-top', '0');
+      ref.style.setProperty('--lyrics-picker-top', '0');
     } else {
       // picker hidden
-      stickyRef()!.style.setProperty('--lyrics-picker-top', `-${height}px`);
+      ref.style.setProperty('--lyrics-picker-top', `-${contentHeight}px`);
     }
   };
 
@@ -228,11 +251,11 @@ export const LyricsRenderer = () => {
     });
   });
 
-  const [statuses, setStatuses] = createSignal<
-    ('previous' | 'current' | 'upcoming')[]
-  >([]);
+  // prettier-ignore
+  const [statuses, setStatuses] = createSignal<('previous' | 'current' | 'upcoming')[]>([]);
+
   createEffect(() => {
-    const time = currentTime();
+    const time = Math.max(0, currentTime() + (config()?.lyricsOffset ?? 0));
     const data = currentLyrics()?.data;
 
     if (!data || !data.lines) return setStatuses([]);
@@ -290,7 +313,23 @@ export const LyricsRenderer = () => {
           if (typeof props === 'undefined') return null;
           switch (props.kind) {
             case 'LyricsPicker':
-              return <LyricsPicker setStickRef={setStickRef} />;
+              return (
+                <div class="lyrics-picker-container" ref={setStickRef}>
+                  <LyricsPicker />
+                  <div
+                    id="divider"
+                    class="style-scope ytmusic-guide-section-renderer"
+                    style={{ width: '100%', margin: '0' }}
+                  ></div>
+                  <div
+                    class={`lyrics-picker-advanced ${
+                      pickerAdvancedOpen() ? 'open' : ''
+                    }`}
+                  >
+                    <LyricsPickerAdvanced />
+                  </div>
+                </div>
+              );
             case 'Error':
               return <ErrorDisplay {...props} />;
             case 'LoadingKaomoji':