feat(synced-lyrics): add new "spacer" (#3742)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

src/plugins/synced-lyrics/menu.ts

@@ -93,47 +93,23 @@ export const menu = async (
       toolTip: t('plugins.synced-lyrics.menu.default-text-string.tooltip'),
       type: 'submenu',
       submenu: [
-        {
-          label: '♪',
-          type: 'radio',
-          checked: config.defaultTextString === '♪',
-          click() {
-            ctx.setConfig({
-              defaultTextString: '♪',
-            });
-          },
+        { label: '♪', value: '♪' },
+        { label: '" "', value: ' ' },
+        { label: '...', value: ['.', '..', '...'] },
+        { label: '•••', value: ['•', '••', '•••'] },
+        { label: '———', value: '———' },
+      ].map(({ label, value }) => ({
+        label,
+        type: 'radio',
+        checked:
+          typeof value === 'string'
+            ? config.defaultTextString === value
+            : JSON.stringify(config.defaultTextString) ===
+              JSON.stringify(value),
+        click() {
+          ctx.setConfig({ defaultTextString: value });
         },
-        {
-          label: '" "',
-          type: 'radio',
-          checked: config.defaultTextString === ' ',
-          click() {
-            ctx.setConfig({
-              defaultTextString: ' ',
-            });
-          },
-        },
-        {
-          label: '...',
-          type: 'radio',
-          checked: config.defaultTextString === '...',
-          click() {
-            ctx.setConfig({
-              defaultTextString: '...',
-            });
-          },
-        },
-        {
-          label: '———',
-          type: 'radio',
-          checked: config.defaultTextString === '———',
-          click() {
-            ctx.setConfig({
-              defaultTextString: '———',
-            });
-          },
-        },
-      ],
+      })),
     },
     {
       label: t('plugins.synced-lyrics.menu.romanization.label'),

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

@@ -1,10 +1,10 @@
-import { createEffect, createMemo, For, Show, createSignal } from 'solid-js';
+import { createEffect, For, Show, createSignal, createMemo } from 'solid-js';
 
 import { type VirtualizerHandle } from 'virtua/solid';
 
 import { type LineLyrics } from '@/plugins/synced-lyrics/types';
 
-import { config } from '../renderer';
+import { config, currentTime } from '../renderer';
 import { _ytAPI } from '..';
 
 import { canonicalize, romanize, simplifyUnicode } from '../utils';
@@ -17,37 +17,84 @@ interface SyncedLineProps {
   status: 'upcoming' | 'current' | 'previous';
 }
 
-export const SyncedLine = (props: SyncedLineProps) => {
-  const text = createMemo(() => {
-    if (!props.line.text.trim()) {
-      return config()?.defaultTextString ?? '';
-    }
-
-    return props.line.text;
+const EmptyLine = (props: SyncedLineProps) => {
+  const states = createMemo(() => {
+    const defaultText = config()?.defaultTextString ?? '';
+    return Array.isArray(defaultText) ? defaultText : [defaultText];
   });
 
-  const [romanization, setRomanization] = createSignal('');
+  const index = createMemo(() => {
+    const progress = currentTime() - props.line.timeInMs;
+    const total = props.line.duration;
 
+    const percentage = Math.min(1, progress / total);
+    return Math.max(0, Math.floor((states().length - 1) * percentage));
+  });
+
+  return (
+    <div
+      class={`synced-line ${props.status}`}
+      onClick={() => {
+        _ytAPI?.seekTo((props.line.timeInMs + 10) / 1000);
+      }}
+    >
+      <div class="description ytmusic-description-shelf-renderer" dir="auto">
+        <yt-formatted-string
+          text={{
+            runs: [
+              {
+                text: config()?.showTimeCodes ? `[${props.line.time}] ` : '',
+              },
+            ],
+          }}
+        />
+
+        <div class="text-lyrics">
+          <span>
+            <span>
+              <Show
+                fallback={
+                  <yt-formatted-string
+                    text={{ runs: [{ text: states()[0] }] }}
+                  />
+                }
+                when={states().length > 1}
+              >
+                <yt-formatted-string
+                  text={{
+                    runs: [
+                      {
+                        text: states().at(
+                          props.status === 'current' ? index() : -1,
+                        )!,
+                      },
+                    ],
+                  }}
+                />
+              </Show>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SyncedLine = (props: SyncedLineProps) => {
+  const text = createMemo(() => props.line.text.trim());
+
+  const [romanization, setRomanization] = createSignal('');
   createEffect(() => {
+    const input = canonicalize(text());
     if (!config()?.romanization) return;
 
-    const input = canonicalize(text());
     romanize(input).then((result) => {
       setRomanization(canonicalize(result));
     });
   });
 
   return (
-    <Show
-      fallback={
-        <yt-formatted-string
-          text={{
-            runs: [{ text: '' }],
-          }}
-        />
-      }
-      when={text()}
-    >
+    <Show fallback={<EmptyLine {...props} />} when={text()}>
       <div
         class={`synced-line ${props.status}`}
         onClick={() => {

src/plugins/synced-lyrics/types.ts

@@ -4,7 +4,7 @@ export type SyncedLyricsPluginConfig = {
   enabled: boolean;
   preciseTiming: boolean;
   showTimeCodes: boolean;
-  defaultTextString: string;
+  defaultTextString: string | string[];
   showLyricsEvenIfInexact: boolean;
   lineEffect: LineEffect;
   romanization: boolean;