refactor(synced-lyrics): extract helpers for provider switching and word rendering

Author: robroid

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

@@ -35,6 +35,8 @@ export const providerIdx = createMemo(() =>
   providerNames.indexOf(lyricsStore.provider),
 );
 
+const FAST_SWITCH_MS = 2500;
+
 const shouldSwitchProvider = (providerData: ProviderState) => {
   if (providerData.state === 'error') return true;
   if (providerData.state === 'fetching') return true;
@@ -80,7 +82,7 @@ export const LyricsPicker = (props: {
     createSignal<ProviderName | null>(null);
 
   const favoriteProviderKey = (id: string) => `ytmd-sl-starred-${id}`;
-  const switchProvider = (provider: ProviderName, fastMs = 2500) => {
+  const switchProvider = (provider: ProviderName, fastMs = FAST_SWITCH_MS) => {
     requestFastScroll(fastMs);
     setLyricsStore('provider', provider);
   };
@@ -99,7 +101,13 @@ export const LyricsPicker = (props: {
       return;
     }
 
-    const parseResult = LocalStorageSchema.safeParse(JSON.parse(value));
+    let parsed: unknown = null;
+    try {
+      parsed = JSON.parse(value);
+    } catch {
+      parsed = null;
+    }
+    const parseResult = LocalStorageSchema.safeParse(parsed);
     if (parseResult.success) {
       setLyricsStore('provider', parseResult.data.provider);
       setStarredProvider(parseResult.data.provider);
@@ -147,7 +155,7 @@ export const LyricsPicker = (props: {
     if (!hasManuallySwitchedProvider()) {
       const starred = starredProvider();
       if (starred !== null) {
-        switchProvider(starred, 2500);
+        switchProvider(starred);
         return;
       }
 
@@ -161,30 +169,25 @@ export const LyricsPicker = (props: {
         force ||
         providerBias(lyricsStore.provider) < providerBias(provider)
       ) {
-        switchProvider(provider, 2500);
+        switchProvider(provider);
       }
     }
   });
 
   const next = () => {
     setHasManuallySwitchedProvider(true);
-    setLyricsStore('provider', (prevProvider) => {
-      const idx = providerNames.indexOf(prevProvider);
-      const nextProvider = providerNames[(idx + 1) % providerNames.length];
-      switchProvider(nextProvider, 2500);
-      return nextProvider;
-    });
+    const nextProvider =
+      providerNames[(providerIdx() + 1) % providerNames.length];
+    switchProvider(nextProvider);
   };
 
   const previous = () => {
     setHasManuallySwitchedProvider(true);
-    setLyricsStore('provider', (prevProvider) => {
-      const idx = providerNames.indexOf(prevProvider);
-      const prev =
-        providerNames[(idx + providerNames.length - 1) % providerNames.length];
-      switchProvider(prev, 2500);
-      return prev;
-    });
+    const prev =
+      providerNames[
+        (providerIdx() + providerNames.length - 1) % providerNames.length
+      ];
+    switchProvider(prev);
   };
 
   const chevronLeft: YtIcons = 'yt-icons:chevron_left';
@@ -322,7 +325,7 @@ export const LyricsPicker = (props: {
                 class="lyrics-picker-dot"
                 onClick={() => {
                   setHasManuallySwitchedProvider(true);
-                  switchProvider(providerNames[idx()], 2500);
+                  switchProvider(providerNames[idx()]);
                 }}
                 style={{
                   background: idx() === providerIdx() ? 'white' : 'black',

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

@@ -26,6 +26,31 @@ interface SyncedLineProps {
   isFirstEmptyLine?: boolean;
 }
 
+// small helpers
+const WORD_ANIM_DELAY_STEP = 0.05; // seconds per word index
+
+const seekToMs = (ms: number) => {
+  const precise = config()?.preciseTiming ?? false;
+  _ytAPI?.seekTo(getSeekTime(ms, precise));
+};
+
+const renderWordSpans = (input: string) => (
+  <span>
+    <For each={input.split(' ')}>
+      {(word, index) => (
+        <span
+          style={{
+            'transition-delay': `${index() * WORD_ANIM_DELAY_STEP}s`,
+            'animation-delay': `${index() * WORD_ANIM_DELAY_STEP}s`,
+          }}
+        >
+          <yt-formatted-string text={{ runs: [{ text: `${word} ` }] }} />
+        </span>
+      )}
+    </For>
+  </span>
+);
+
 const EmptyLine = (props: SyncedLineProps) => {
   const states = createMemo(() => {
     const defaultText = config()?.defaultTextString ?? '';
@@ -40,16 +65,16 @@ const EmptyLine = (props: SyncedLineProps) => {
 
     if (stepCount === 1) return 0;
 
-    let earlyCut: number;
-    if (total > 3000) {
-      earlyCut = 1000;
-    } else if (total >= 1000) {
-      const ratio = (total - 1000) / 2000;
-      const addend = ratio * 500;
-      earlyCut = 500 + addend;
-    } else {
-      earlyCut = Math.min(total * 0.8, total - 150);
-    }
+    const computeEarlyCut = (t: number) => {
+      if (t > 3000) return 1000;
+      if (t >= 1000) {
+        const ratio = (t - 1000) / 2000;
+        const addend = ratio * 500;
+        return 500 + addend;
+      }
+      return Math.min(t * 0.8, t - 150);
+    };
+    const earlyCut = computeEarlyCut(total);
 
     const effectiveTotal =
       total <= 1000
@@ -94,8 +119,7 @@ const EmptyLine = (props: SyncedLineProps) => {
     <div
       class={`synced-emptyline ${props.status} ${isFinalEmpty() ? 'final-empty' : ''} ${shouldRemovePadding() ? 'no-padding' : ''}`}
       onClick={() => {
-        const precise = config()?.preciseTiming ?? false;
-        _ytAPI?.seekTo(getSeekTime(props.line.timeInMs, precise));
+        seekToMs(props.line.timeInMs);
       }}
     >
       <div class="description ytmusic-description-shelf-renderer" dir="auto">
@@ -162,8 +186,7 @@ export const SyncedLine = (props: SyncedLineProps) => {
       <div
         class={`synced-line ${props.status}`}
         onClick={() => {
-          const precise = config()?.preciseTiming ?? false;
-          _ytAPI?.seekTo(getSeekTime(props.line.timeInMs, precise));
+          seekToMs(props.line.timeInMs);
         }}
       >
         <div class="description ytmusic-description-shelf-renderer" dir="auto">
@@ -193,53 +216,15 @@ export const SyncedLine = (props: SyncedLineProps) => {
             }}
             style={{ 'display': 'flex', 'flex-direction': 'column' }}
           >
-            <span>
-              <For each={text().split(' ')}>
-                {(word, index) => {
-                  return (
-                    <span
-                      style={{
-                        'transition-delay': `${index() * 0.05}s`,
-                        'animation-delay': `${index() * 0.05}s`,
-                      }}
-                    >
-                      <yt-formatted-string
-                        text={{
-                          runs: [{ text: `${word} ` }],
-                        }}
-                      />
-                    </span>
-                  );
-                }}
-              </For>
-            </span>
+            {renderWordSpans(text())}
 
             <Show
               when={
                 config()?.romanization &&
                 simplifyUnicode(text()) !== simplifyUnicode(romanization())
               }
             >
-              <span class="romaji">
-                <For each={romanization().split(' ')}>
-                  {(word, index) => {
-                    return (
-                      <span
-                        style={{
-                          'transition-delay': `${index() * 0.05}s`,
-                          'animation-delay': `${index() * 0.05}s`,
-                        }}
-                      >
-                        <yt-formatted-string
-                          text={{
-                            runs: [{ text: `${word} ` }],
-                          }}
-                        />
-                      </span>
-                    );
-                  }}
-                </For>
-              </span>
+              <span class="romaji">{renderWordSpans(romanization())}</span>
             </Show>
           </div>
         </div>