refactor(synced-lyrics): unify provider switching, add utilities, and clean rendering logic

Author: robroid

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

@@ -79,14 +79,20 @@ export const LyricsPicker = (props: {
   const [starredProvider, setStarredProvider] =
     createSignal<ProviderName | null>(null);
 
+  const favoriteProviderKey = (id: string) => `ytmd-sl-starred-${id}`;
+  const switchProvider = (provider: ProviderName, fastMs = 2500) => {
+    requestFastScroll(fastMs);
+    setLyricsStore('provider', provider);
+  };
+
   createEffect(() => {
     const id = videoId();
     if (id === null) {
       setStarredProvider(null);
       return;
     }
 
-    const key = `ytmd-sl-starred-${id}`;
+    const key = favoriteProviderKey(id);
     const value = localStorage.getItem(key);
     if (!value) {
       setStarredProvider(null);
@@ -106,7 +112,7 @@ export const LyricsPicker = (props: {
     const id = videoId();
     if (id === null) return;
 
-    const key = `ytmd-sl-starred-${id}`;
+    const key = favoriteProviderKey(id);
 
     setStarredProvider((starredProvider) => {
       if (lyricsStore.provider === starredProvider) {
@@ -141,8 +147,7 @@ export const LyricsPicker = (props: {
     if (!hasManuallySwitchedProvider()) {
       const starred = starredProvider();
       if (starred !== null) {
-        requestFastScroll(2500);
-        setLyricsStore('provider', starred);
+        switchProvider(starred, 2500);
         return;
       }
 
@@ -156,29 +161,29 @@ export const LyricsPicker = (props: {
         force ||
         providerBias(lyricsStore.provider) < providerBias(provider)
       ) {
-        requestFastScroll(2500);
-        setLyricsStore('provider', provider);
+        switchProvider(provider, 2500);
       }
     }
   });
 
   const next = () => {
     setHasManuallySwitchedProvider(true);
-    requestFastScroll(2500);
     setLyricsStore('provider', (prevProvider) => {
       const idx = providerNames.indexOf(prevProvider);
-      return providerNames[(idx + 1) % providerNames.length];
+      const nextProvider = providerNames[(idx + 1) % providerNames.length];
+      switchProvider(nextProvider, 2500);
+      return nextProvider;
     });
   };
 
   const previous = () => {
     setHasManuallySwitchedProvider(true);
-    requestFastScroll(2500);
     setLyricsStore('provider', (prevProvider) => {
       const idx = providerNames.indexOf(prevProvider);
-      return providerNames[
-        (idx + providerNames.length - 1) % providerNames.length
-      ];
+      const prev =
+        providerNames[(idx + providerNames.length - 1) % providerNames.length];
+      switchProvider(prev, 2500);
+      return prev;
     });
   };
 
@@ -317,8 +322,7 @@ export const LyricsPicker = (props: {
                 class="lyrics-picker-dot"
                 onClick={() => {
                   setHasManuallySwitchedProvider(true);
-                  requestFastScroll(2500);
-                  setLyricsStore('provider', providerNames[idx()]);
+                  switchProvider(providerNames[idx()], 2500);
                 }}
                 style={{
                   background: idx() === providerIdx() ? 'white' : 'black',

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

@@ -7,7 +7,14 @@ import { type LineLyrics } from '@/plugins/synced-lyrics/types';
 import { config, currentTime } from '../renderer';
 import { _ytAPI } from '..';
 
-import { canonicalize, romanize, simplifyUnicode, getSeekTime } from '../utils';
+import {
+  canonicalize,
+  romanize,
+  simplifyUnicode,
+  getSeekTime,
+  isBlank,
+  timeCodeText,
+} from '../utils';
 
 interface SyncedLineProps {
   scroller: VirtualizerHandle;
@@ -19,26 +26,6 @@ interface SyncedLineProps {
   isFirstEmptyLine?: boolean;
 }
 
-function formatTime(timeInMs: number, preciseTiming: boolean): string {
-  if (!preciseTiming) {
-    const totalSeconds = Math.round(timeInMs / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-
-    return `${minutes.toString().padStart(2, '0')}:${seconds
-      .toString()
-      .padStart(2, '0')}`;
-  }
-
-  const minutes = Math.floor(timeInMs / 60000);
-  const seconds = Math.floor((timeInMs % 60000) / 1000);
-  const ms = Math.floor((timeInMs % 1000) / 10);
-
-  return `${minutes.toString().padStart(2, '0')}:${seconds
-    .toString()
-    .padStart(2, '0')}.${ms.toString().padStart(2, '0')}`;
-}
-
 const EmptyLine = (props: SyncedLineProps) => {
   const states = createMemo(() => {
     const defaultText = config()?.defaultTextString ?? '';
@@ -82,7 +69,7 @@ const EmptyLine = (props: SyncedLineProps) => {
   });
 
   const shouldRenderPlaceholder = createMemo(() => {
-    const isEmpty = !props.line.text?.trim();
+    const isEmpty = isBlank(props.line.text);
     const showEmptySymbols = config()?.showEmptyLineSymbols ?? false;
 
     return isEmpty
@@ -92,7 +79,7 @@ const EmptyLine = (props: SyncedLineProps) => {
 
   const isHighlighted = createMemo(() => props.status === 'current');
   const isFinalEmpty = createMemo(() => {
-    return props.isFinalLine && !props.line.text?.trim();
+    return props.isFinalLine && isBlank(props.line.text);
   });
 
   const shouldRemovePadding = createMemo(() => {
@@ -116,18 +103,17 @@ const EmptyLine = (props: SyncedLineProps) => {
           text={{
             runs: [
               {
-                text: config()?.showTimeCodes
-                  ? `[${formatTime(
-                      props.line.timeInMs,
-                      config()?.preciseTiming ?? false,
-                    )}] `
-                  : '',
+                text: timeCodeText(
+                  props.line.timeInMs,
+                  config()?.preciseTiming ?? false,
+                  config()?.showTimeCodes ?? false,
+                ),
               },
             ],
           }}
         />
         <div class="text-lyrics">
-          {props.isFinalLine && !props.line.text?.trim() ? (
+          {props.isFinalLine && isBlank(props.line.text) ? (
             <span>
               <span class={`fade ${isHighlighted() ? 'show' : ''}`}>
                 <yt-formatted-string text={{ runs: [{ text: '' }] }} />
@@ -185,9 +171,11 @@ export const SyncedLine = (props: SyncedLineProps) => {
             text={{
               runs: [
                 {
-                  text: config()?.showTimeCodes
-                    ? `[${formatTime(props.line.timeInMs, config()?.preciseTiming ?? false)}] `
-                    : '',
+                  text: timeCodeText(
+                    props.line.timeInMs,
+                    config()?.preciseTiming ?? false,
+                    config()?.showTimeCodes ?? false,
+                  ),
                 },
               ],
             }}

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

@@ -11,7 +11,13 @@ import { type VirtualizerHandle, VList } from 'virtua/solid';
 
 import { LyricsPicker } from './components/LyricsPicker';
 
-import { selectors, getSeekTime, SFont } from './utils';
+import {
+  selectors,
+  getSeekTime,
+  SFont,
+  normalizePlainLyrics,
+  isBlank,
+} from './utils';
 
 import {
   ErrorDisplay,
@@ -306,7 +312,7 @@ export const LyricsRenderer = () => {
 
       if (data?.lines) {
         const lines = data.lines;
-        const firstEmpty = lines.findIndex((l) => !l.text?.trim());
+        const firstEmpty = lines.findIndex((l) => isBlank(l.text));
         setFirstEmptyIndex(firstEmpty === -1 ? null : firstEmpty);
 
         return lines.map((line) => ({
@@ -316,17 +322,7 @@ export const LyricsRenderer = () => {
       }
 
       if (data?.lyrics) {
-        const rawLines = data.lyrics.split('\n');
-
-        // preserve a single trailing empty line if provided by the provider
-        const hasTrailingEmpty =
-          rawLines.length > 0 && rawLines[rawLines.length - 1].trim() === '';
-
-        const lines = rawLines.filter((line, idx) => {
-          if (line.trim()) return true;
-          // keep only the final empty line (for padding) if it exists
-          return hasTrailingEmpty && idx === rawLines.length - 1;
-        });
+        const lines = normalizePlainLyrics(data.lyrics);
 
         return lines.map((line) => ({
           kind: 'PlainLine' as const,

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

@@ -91,6 +91,11 @@ export const simplifyUnicode = (text?: string) =>
         .trim()
     : text;
 
+export const isBlank = (text?: string) => {
+  const simplified = simplifyUnicode(text);
+  return simplified === undefined || simplified === '';
+};
+
 // Japanese Shinjitai
 const shinjitai = [
   20055, 20081, 20120, 20124, 20175, 26469, 20341, 20206, 20253, 20605, 20385,
@@ -218,6 +223,50 @@ export const romanize = async (line: string) => {
 export const getSeekTime = (timeInMs: number, precise: boolean) =>
   precise ? timeInMs / 1000 : Math.round(timeInMs / 1000);
 
+// Format a time value in ms into mm:ss or mm:ss.xx depending on preciseTiming
+export function formatTime(timeInMs: number, preciseTiming: boolean): string {
+  if (!preciseTiming) {
+    const totalSeconds = Math.round(timeInMs / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+
+    return `${minutes.toString().padStart(2, '0')}:${seconds
+      .toString()
+      .padStart(2, '0')}`;
+  }
+
+  const minutes = Math.floor(timeInMs / 60000);
+  const seconds = Math.floor((timeInMs % 60000) / 1000);
+  const ms = Math.floor((timeInMs % 1000) / 10);
+
+  return `${minutes.toString().padStart(2, '0')}:${seconds
+    .toString()
+    .padStart(2, '0')}.${ms.toString().padStart(2, '0')}`;
+}
+
+// Returns the time code prefix text to embed in yt-formatted-string runs
+export const timeCodeText = (
+  timeInMs: number,
+  preciseTiming: boolean,
+  show: boolean,
+) => (show ? `[${formatTime(timeInMs, preciseTiming)}] ` : '');
+
+// Normalizes plain-lyrics text into displayable lines, removing empty lines
+// while preserving a single trailing empty line if the original text ends with one.
+export const normalizePlainLyrics = (raw: string): string[] => {
+  const rawLines = raw.split('\n');
+  const hasTrailingEmpty =
+    rawLines.length > 0 && isBlank(rawLines[rawLines.length - 1]);
+
+  const lines = rawLines.filter((line, idx) => {
+    if (!isBlank(line)) return true;
+    // keep only the final empty line (for padding) if it exists
+    return hasTrailingEmpty && idx === rawLines.length - 1;
+  });
+
+  return lines;
+};
+
 export const SFont = () => {
   if (document.getElementById('satoshi-font-link')) return;
   const link = document.createElement('link');