fix: apply fix for album-actions

src/plugins/album-actions/index.ts

@@ -7,7 +7,22 @@ import dislikeHTML from './templates/dislike.html?raw';
 import likeHTML from './templates/like.html?raw';
 import unlikeHTML from './templates/unlike.html?raw';
 
-export default createPlugin({
+export default createPlugin<
+  unknown,
+  unknown,
+  {
+    observer?: MutationObserver;
+    loadObserver?: MutationObserver;
+    changeObserver?: MutationObserver;
+    waiting: boolean;
+    onPageChange(): void;
+    waitForElem(selector: string): Promise<HTMLElement>;
+    loadFullList: (event: MouseEvent) => void;
+    applyToList(id: string, loader: HTMLElement): void;
+    start(): void;
+    stop(): void;
+  }
+>({
   name: () => t('plugins.album-actions.name'),
   description: () => t('plugins.album-actions.description'),
   restartNeeded: false,
@@ -16,32 +31,29 @@ export default createPlugin({
     enabled: false,
   },
   renderer: {
-    observer: null as MutationObserver | null,
+    waiting: false,
-    loadObserver: null as MutationObserver | null,
-    changeObserver: null as MutationObserver | null,
-    waiting: false as boolean,
     start() {
-      //Waits for pagechange
+      // Waits for pagechange
       this.onPageChange();
       this.observer = new MutationObserver(() => {
         this.onPageChange();
       });
-      this.observer.observe(document.querySelector('#browse-page'), {
+      this.observer.observe(document.querySelector('#browse-page')!, {
         attributes: false,
         childList: true,
         subtree: true,
       });
     },
-    onPageChange() {
+    async onPageChange() {
       if (this.waiting) {
         return;
       } else {
         this.waiting = true;
       }
-      this.waitForElem('#continuations').then((continuations: HTMLElement) => {
+      const continuations = await this.waitForElem('#continuations');
       this.waiting = false;
       //Gets the for buttons
-        let buttons: Array<HTMLElement> = [
+      const buttons: Array<HTMLElement> = [
         ElementFromHtml(undislikeHTML),
         ElementFromHtml(dislikeHTML),
         ElementFromHtml(likeHTML),
@@ -50,8 +62,8 @@ export default createPlugin({
       //Finds the playlist
       const playlist =
         document.querySelector('ytmusic-shelf-renderer') ??
-          document.querySelector('ytmusic-playlist-shelf-renderer');
+        document.querySelector('ytmusic-playlist-shelf-renderer')!;
-        //Adds an observer for every button so it gets updated when one is clicked
+      // Adds an observer for every button, so it gets updated when one is clicked
       this.changeObserver?.disconnect();
       this.changeObserver = new MutationObserver(() => {
         this.stop();
@@ -60,12 +72,13 @@ export default createPlugin({
       const allButtons = playlist.querySelectorAll(
         'yt-button-shape.ytmusic-like-button-renderer',
       );
-        for (const btn of allButtons)
+      for (const btn of allButtons) {
         this.changeObserver.observe(btn, {
           attributes: true,
           childList: false,
           subtree: false,
         });
+      }
       //Determine if button is needed and colors the percentage
       const listsLength = playlist.querySelectorAll(
         '#button-shape-dislike > button',
@@ -91,9 +104,9 @@ export default createPlugin({
             buttons.splice(i, 1);
             i--;
           } else {
-              buttons[i].children[0].children[0].style.setProperty(
+            (buttons[i].children[0].children[0] as HTMLElement).style.setProperty(
               '-webkit-mask-size',
-                `100% ${100 - (count / listsLength) * 100}%`,
+              `100% ${100 - ((count / listsLength) * 100)}%`,
             );
           }
           i++;
@@ -106,12 +119,12 @@ export default createPlugin({
           button.addEventListener('click', this.loadFullList);
         }
       }
-      });
     },
-    loadFullList(event) {
+    loadFullList(event: MouseEvent) {
+      if (event.currentTarget instanceof Element) {
         event.stopPropagation();
-      const id: string = event.currentTarget.id,
+        const id = event.currentTarget.id;
-        loader = document.getElementById('continuations');
+        const loader = document.getElementById('continuations')!;
         this.loadObserver = new MutationObserver(() => {
           this.applyToList(id, loader);
         });
@@ -124,11 +137,12 @@ export default createPlugin({
         loader?.style.setProperty('top', '0');
         loader?.style.setProperty('left', '50%');
         loader?.style.setProperty('position', 'absolute');
+      }
     },
     applyToList(id: string, loader: HTMLElement) {
       if (loader.children.length != 0) return;
       this.loadObserver?.disconnect();
-      let playlistButtons: NodeListOf<Element> | undefined;
+      let playlistButtons: NodeListOf<HTMLElement> | undefined;
       const playlist = document.querySelector('ytmusic-shelf-renderer')
         ? document.querySelector('ytmusic-shelf-renderer')
         : document.querySelector('ytmusic-playlist-shelf-renderer');
@@ -167,7 +181,7 @@ export default createPlugin({
     waitForElem(selector: string) {
       return new Promise((resolve) => {
         const interval = setInterval(() => {
-          const elem = document.querySelector(selector);
+          const elem = document.querySelector<HTMLElement>(selector);
           if (!elem) return;
 
           clearInterval(interval);