fix(synced-lyrics): fix lyric load

fix #2295

Author: JellyBrick

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

@@ -1,4 +1,5 @@
 import { createRenderer } from '@/utils';
+import { waitForElement } from '@/utils/wait-for-element';
 
 import { makeLyricsRequest } from './lyrics';
 import { selectors, tabStates } from './utils';
@@ -15,10 +16,9 @@ export let _ytAPI: YoutubePlayer | null = null;
 
 export const renderer = createRenderer<{
   observerCallback: MutationCallback;
-  onPlayerApiReady: (api: YoutubePlayer) => void;
   hasAddedEvents: boolean;
   observer?: MutationObserver;
-  videoDataChange: () => void;
+  videoDataChange: () => Promise<void>;
   progressCallback: (evt: Event) => void;
 }, SyncedLyricsPluginConfig>({
   onConfigChange(newConfig) {
@@ -42,17 +42,17 @@ export const renderer = createRenderer<{
     }
   },
 
-  onPlayerApiReady(api: YoutubePlayer) {
+  async onPlayerApiReady(api: YoutubePlayer) {
     _ytAPI = api;
 
     api.addEventListener('videodatachange', this.videoDataChange);
 
-    this.videoDataChange();
+    await this.videoDataChange();
   },
 
   hasAddedEvents: false,
 
-  videoDataChange() {
+  async videoDataChange() {
     if (!this.hasAddedEvents) {
       const video = document.querySelector('video');
 
@@ -61,15 +61,14 @@ export const renderer = createRenderer<{
       if (video) this.hasAddedEvents = true;
     }
 
-    const header = document.querySelector<HTMLElement>(selectors.head);
-    if (!header) return;
-
     this.observer ??= new MutationObserver(
       this.observerCallback,
     );
 
     // Force the lyrics tab to be enabled at all times.
     this.observer.disconnect();
+
+    const header = await waitForElement<HTMLElement>(selectors.head);
     this.observer.observe(header, { attributes: true });
     header.removeAttribute('disabled');
   },

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

@@ -1,5 +1,7 @@
 import { render } from 'solid-js/web';
 
+import { waitForElement } from '@/utils/wait-for-element';
+
 import { LyricsRenderer, setIsVisible, setPlayerState } from './renderer';
 
 import type { VideoDetails } from '@/types/video-details';
@@ -13,18 +15,17 @@ export const selectors = {
 };
 
 export const tabStates = {
-  true: (data?: VideoDetails) => {
+  true: async (data?: VideoDetails) => {
     setIsVisible(true);
     setPlayerState(data ?? null);
 
-    const tabRenderer = document.querySelector<HTMLElement>(
-      selectors.body.tabRenderer,
-    );
-    if (!tabRenderer) return;
-
     let container = document.querySelector('#synced-lyrics-container');
     if (container) return;
 
+    const tabRenderer = await waitForElement<HTMLElement>(
+      selectors.body.tabRenderer,
+    );
+
     container = Object.assign(document.createElement('div'), {
       id: 'synced-lyrics-container',
     });

src/types/player-api-events.ts

@@ -241,7 +241,8 @@ export interface FlagEndpoint {
   flagAction: string;
 }
 
-export type VideoDataChangeValue = {
+// see song-info-front.ts
+export type VideoDataChangeValue = Record<string, unknown> & {
   videoId: string;
   title: string;
   author: string;