plugin: Synced Lyrics (#2207)

* Added Plugin File

* Added Logic

* Known issue

* Finished Backend part

* Before cleanup

* Added Style
Removed log

* Fixed time and visibility issues

* Changed lyrics style

* Changed way lyrics are selected

* Fix

* Added style lyrics options

* Cleanup

* Fix lyrics styling
Changed how lyrics status are changed

* Moved code to make file more readable

* Change Tab Size

* Fixed issue with overlapping lyrics

* Removed debug console.log

* Added style adaptation for music videos

* Changed file indent

* Revered back to original pnpm file

* Removed unnecessary option

* Fix lyrics status bug
Removed leftover logs

* Started to implement fetching for genius lyrics

* feat(synced-lyrics): add `addedVersion` field

* Made changes according to feedbacks

* fix: add a delay of 300ms to the current time

- Since the transition takes 300ms, we need to add a delay of 300ms to the current time

* Removed test about genius.com scraping

* Removed 300ms delay

* chore: cleaned up the code

* Specified path and variable

* chore: always enable lyrics tab

* chore: use SolidJS to render the lyrics

* chore: remove useless signal

* chore: feature-parity with original PR (+some nice stuff)

* recreate lock file

* show json decode error

* feat(synced-lyrics): improve ui
- Change type assertion code
- Replace span to `yt-formatted-string`
- Add refetch button

* chore: make the lyric styling a solidjs effect

* feat: i18n

* chore: apply suggestion

---------

Co-authored-by: Su-Yong <simssy2205@gmail.com>
Co-authored-by: JellyBrick <shlee1503@naver.com>
Co-authored-by: Angelos Bouklis <53124886+ArjixWasTaken@users.noreply.github.com>

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

@@ -0,0 +1,53 @@
+import { createEffect, createMemo } from 'solid-js';
+
+import { currentTime } from './LyricsContainer';
+
+import { config } from '../renderer';
+import { _ytAPI } from '..';
+
+import type { LineLyrics } from '../../types';
+
+interface SyncedLineProps {
+  line: LineLyrics;
+}
+
+export const SyncedLine = ({ line }: SyncedLineProps) => {
+  const status = createMemo(() => {
+    const current = currentTime();
+
+    if (line.timeInMs >= current) return 'upcoming';
+    if (current - line.timeInMs >= line.duration) return 'previous';
+    return 'current';
+  });
+
+  let ref: HTMLDivElement;
+  createEffect(() => {
+    if (status() === 'current') {
+      ref.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  });
+
+  return (
+    <div
+      ref={ref!}
+      class={`synced-line ${status()}`}
+      onClick={() => {
+        _ytAPI?.seekTo(line.timeInMs / 1000);
+      }}
+    >
+      <yt-formatted-string
+        class="text-lyrics description ytmusic-description-shelf-renderer"
+        text={{
+          runs: [
+            {
+              text: '',
+            },
+            {
+              text: `${config()?.showTimeCodes ? `[${line.time}] ` : ''}${line.text}`,
+            },
+          ],
+        }}
+      />
+    </div>
+  );
+};