fix(synced-lyrics): fix type error

Author: JellyBrick

src/plugins/synced-lyrics/renderer/index.ts

@@ -1,21 +1,28 @@
-/* eslint-disable prefer-const, @typescript-eslint/no-unused-vars */
-
 import { createRenderer } from '@/utils';
-import { SongInfo } from '@/providers/song-info';
-import { YoutubePlayer } from '@/types/youtube-player';
 
 import { makeLyricsRequest } from './lyrics';
 import { selectors, tabStates } from './utils';
 import { setConfig } from './renderer';
 import { setCurrentTime } from './components/LyricsContainer';
 
+import type { RendererContext } from '@/types/contexts';
+import type { YoutubePlayer } from '@/types/youtube-player';
+import type { SongInfo } from '@/providers/song-info';
+
 import type { SyncedLyricsPluginConfig } from '../types';
 
 export let _ytAPI: YoutubePlayer | null = null;
 
-export const renderer = createRenderer({
+export const renderer = createRenderer<{
+  observerCallback: MutationCallback;
+  onPlayerApiReady: (api: YoutubePlayer) => void;
+  hasAddedEvents: boolean;
+  observer?: MutationObserver;
+  videoDataChange: () => void;
+  progressCallback: (evt: Event) => void;
+}, SyncedLyricsPluginConfig>({
   onConfigChange(newConfig) {
-    setConfig(newConfig as SyncedLyricsPluginConfig);
+    setConfig(newConfig);
   },
 
   observerCallback(mutations: MutationRecord[]) {
@@ -35,23 +42,20 @@ export const renderer = createRenderer({
     }
   },
 
-  onPlayerApiReady(api) {
+  onPlayerApiReady(api: YoutubePlayer) {
     _ytAPI = api;
 
-    // @ts-expect-error type is 'unknown', so TS complains
     api.addEventListener('videodatachange', this.videoDataChange);
 
-    // @ts-expect-error type is 'unknown', so TS complains
     this.videoDataChange();
   },
 
   hasAddedEvents: false,
-  observer: null as MutationObserver | null,
+
   videoDataChange() {
     if (!this.hasAddedEvents) {
       const video = document.querySelector('video');
 
-      // @ts-expect-error type is 'unknown', so TS complains
       video?.addEventListener('timeupdate', this.progressCallback);
 
       if (video) this.hasAddedEvents = true;
@@ -61,7 +65,7 @@ export const renderer = createRenderer({
     if (!header) return;
 
     this.observer ??= new MutationObserver(
-      this.observerCallback as MutationCallback,
+      this.observerCallback,
     );
 
     // Force the lyrics tab to be enabled at all times.
@@ -80,10 +84,10 @@ export const renderer = createRenderer({
     }
   },
 
-  async start({ getConfig, ipc: { on } }) {
-    setConfig((await getConfig()) as SyncedLyricsPluginConfig);
+  async start(ctx: RendererContext<SyncedLyricsPluginConfig>) {
+    setConfig(await ctx.getConfig());
 
-    on('ytmd:update-song-info', async (info: SongInfo) => {
+    ctx.ipc.on('ytmd:update-song-info', async (info: SongInfo) => {
       await makeLyricsRequest(info);
     });
   },

src/plugins/synced-lyrics/renderer/lyrics/index.ts

@@ -1,6 +1,5 @@
-/* eslint-disable import/order */
-
 import { createEffect } from 'solid-js';
+
 import { config } from '../renderer';
 
 export { makeLyricsRequest } from './fetch';

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

@@ -1,15 +1,14 @@
-/* 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';
 
+import { SyncedLyricsPluginConfig } from '../types';
+
 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 = () => {