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/renderer.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable import/order */
+
+import { createSignal, Show } from 'solid-js';
+import { VideoDetails } from '@/types/video-details';
+import { SyncedLyricsPluginConfig } from '../types';
+import { LyricsContainer } from './components/LyricsContainer';
+
+export const [isVisible, setIsVisible] = createSignal<boolean>(false);
+
+// prettier-ignore
+export const [config, setConfig] = createSignal<SyncedLyricsPluginConfig | null>(null);
+// prettier-ignore
+export const [playerState, setPlayerState] = createSignal<VideoDetails | null>(null);
+
+export const LyricsRenderer = () => {
+  return (
+    <Show when={isVisible()}>
+      <LyricsContainer />
+    </Show>
+  );
+};