fix: reduce unchecked type-cast

plugins/compact-sidebar/front.ts

@@ -5,6 +5,6 @@ export default () => {
     || window.getComputedStyle(compactSidebar).display === 'none';
 
   if (isCompactSidebarDisabled) {
-    (document.querySelector('#button') as HTMLButtonElement)?.click();
+    document.querySelector<HTMLButtonElement>('#button')?.click();
   }
 };

plugins/crossfade/front.ts

@@ -104,7 +104,7 @@ const syncVideoWithTransitionAudio = () => {
       video.removeEventListener('timeupdate', transitionBeforeEnd);
 
       // Go to next video - XXX: does not support "repeat 1" mode
-      (document.querySelector('.next-button') as HTMLButtonElement).click();
+      document.querySelector<HTMLButtonElement>('.next-button')?.click();
     }
   };
 

plugins/disable-autoplay/front.ts

@@ -1,13 +1,17 @@
 export default () => {
+  const timeUpdateListener = (e: Event) => {
+    if (e.target instanceof HTMLVideoElement) {
+      e.target.pause();
+    }
+  };
+
   document.addEventListener('apiLoaded', (apiEvent) => {
     apiEvent.detail.addEventListener('videodatachange', (name: string) => {
       if (name === 'dataloaded') {
         apiEvent.detail.pauseVideo();
-        (document.querySelector('video') as HTMLVideoElement)?.addEventListener('timeupdate', (e) => {
+        document.querySelector<HTMLVideoElement>('video')?.addEventListener('timeupdate', timeUpdateListener);
-          (e.target as HTMLVideoElement)?.pause();
-        });
       } else {
-        (document.querySelector('video') as HTMLVideoElement).ontimeupdate = null;
+        document.querySelector<HTMLVideoElement>('video')?.removeEventListener('timeupdate', timeUpdateListener);
       }
     });
   }, { once: true, passive: true });

plugins/downloader/front.ts

@@ -25,7 +25,7 @@ const menuObserver = new MutationObserver(() => {
     return;
   }
 
-  const menuUrl = (document.querySelector('tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint') as HTMLAnchorElement | undefined)?.href;
+  const menuUrl = document.querySelector<HTMLAnchorElement>('tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint')?.href;
   if (!menuUrl?.includes('watch?') && doneFirstLoad) {
     return;
   }

plugins/in-app-menu/front.ts

@@ -5,8 +5,11 @@ import { Color, Titlebar } from 'custom-electron-titlebar';
 import config from '../../config';
 import { isEnabled } from '../../config/plugins';
 
-function $(selector: string) {
+type ElectronCSSStyleDeclaration = CSSStyleDeclaration & { webkitAppRegion: 'drag' | 'no-drag' };
-  return document.querySelector(selector);
+type ElectronHTMLElement = HTMLElement & { style: ElectronCSSStyleDeclaration };
+
+function $<E extends Element = Element>(selector: string) {
+  return document.querySelector<E>(selector);
 }
 
 export default () => {
@@ -59,12 +62,10 @@ export default () => {
 
 function setupSearchOpenObserver() {
   const searchOpenObserver = new MutationObserver((mutations) => {
-    ($('#nav-bar-background') as HTMLElement)
+    const navBarBackground = $<ElectronHTMLElement>('#nav-bar-background');
-      .style
+    if (navBarBackground) {
-      .setProperty(
+      navBarBackground.style.webkitAppRegion = (mutations[0].target as HTMLElement & { opened: boolean }).opened ? 'no-drag' : 'drag';
-        '-webkit-app-region',
+    }
-        (mutations[0].target as HTMLElement & { opened: boolean }).opened ? 'no-drag' : 'drag',
-      );
   });
   const searchBox = $('ytmusic-search-box');
   if (searchBox) {
@@ -76,21 +77,28 @@ function setupMenuOpenObserver() {
   const cetMenubar = $('.cet-menubar');
   if (cetMenubar) {
     const menuOpenObserver = new MutationObserver(() => {
-      ($('#nav-bar-background') as HTMLElement)
+      let isOpen = false;
-        .style
+      for (const child of cetMenubar.children) {
-        .setProperty(
+        if (child.classList.contains('open')) {
-          '-webkit-app-region',
+          isOpen = true;
-          Array.from(cetMenubar.childNodes).some((c) => (c as HTMLElement).classList.contains('open')) ? 'no-drag' : 'drag',
+          break;
-        );
+        }
+      }
+      const navBarBackground = $<ElectronHTMLElement>('#nav-bar-background');
+      if (navBarBackground) {
+        navBarBackground.style.webkitAppRegion = isOpen ? 'no-drag' : 'drag';
+      }
     });
     menuOpenObserver.observe(cetMenubar, { subtree: true, attributeFilter: ['class'] });
   }
 }
 
 function setNavbarMargin() {
-  const navBarBackground = $('#nav-bar-background') as HTMLElement;
+  const navBarBackground = $<HTMLElement>('#nav-bar-background');
+  if (navBarBackground) {
     navBarBackground.style.right
-    = ($('ytmusic-app-layout') as HTMLElement & { playerPageOpen_: boolean }).playerPageOpen_
+      = $<HTMLElement & { playerPageOpen_: boolean }>('ytmusic-app-layout')?.playerPageOpen_
       ? '0px'
       : '12px';
+  }
 }

plugins/picture-in-picture/front.ts

@@ -10,8 +10,8 @@ import type { ConfigType } from '../../config/dynamic';
 
 type PiPOptions = ConfigType<'picture-in-picture'>;
 
-function $(selector: string) {
+function $<E extends Element = Element>(selector: string) {
-  return document.querySelector(selector);
+  return document.querySelector<E>(selector);
 }
 
 let useNativePiP = false;
@@ -60,10 +60,8 @@ const observer = new MutationObserver(() => {
     return;
   }
 
-  const menuUrl = ($(
+  const menuUrl = $<HTMLAnchorElement>('tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint')?.href;
-    'tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint',
+  if (!menuUrl?.includes('watch?')) {
-  ) as HTMLAnchorElement)?.href;
-  if (menuUrl && !menuUrl.includes('watch?')) {
     return;
   }
 
@@ -73,7 +71,7 @@ const observer = new MutationObserver(() => {
 const togglePictureInPicture = async () => {
   if (useNativePiP) {
     const isInPiP = document.pictureInPictureElement !== null;
-    const video = $('video') as HTMLVideoElement | null;
+    const video = $<HTMLVideoElement>('video');
     const togglePiP = () =>
       isInPiP
         ? document.exitPictureInPicture.call(document)
@@ -81,7 +79,7 @@ const togglePictureInPicture = async () => {
 
     try {
       await togglePiP();
-      ($('#icon') as HTMLButtonElement | null)?.click(); // Close the menu
+      $<HTMLButtonElement>('#icon')?.click(); // Close the menu
       return true;
     } catch {
     }
@@ -95,44 +93,47 @@ const togglePictureInPicture = async () => {
 (global as any).togglePictureInPicture = togglePictureInPicture;
 
 const listenForToggle = () => {
-  const originalExitButton = $('.exit-fullscreen-button') as HTMLButtonElement;
+  const originalExitButton = $<HTMLButtonElement>('.exit-fullscreen-button');
-  const appLayout = $('ytmusic-app-layout') as HTMLElement;
+  const appLayout = $<HTMLElement>('ytmusic-app-layout');
-  const expandMenu = $('#expanding-menu') as HTMLElement;
+  const expandMenu = $<HTMLElement>('#expanding-menu');
-  const middleControls = $('.middle-controls') as HTMLButtonElement;
+  const middleControls = $<HTMLButtonElement>('.middle-controls');
-  const playerPage = $('ytmusic-player-page') as HTMLElement & { playerPageOpen_: boolean };
+  const playerPage = $<HTMLElement & { playerPageOpen_: boolean }>('ytmusic-player-page');
-  const togglePlayerPageButton = $('.toggle-player-page-button') as HTMLButtonElement;
+  const togglePlayerPageButton = $<HTMLButtonElement>('.toggle-player-page-button');
-  const fullScreenButton = $('.fullscreen-button') as HTMLButtonElement;
+  const fullScreenButton = $<HTMLButtonElement>('.fullscreen-button');
-  const player = ($('#player') as (HTMLVideoElement & { onDoubleClick_: () => void | undefined }));
+  const player = $<HTMLVideoElement & { onDoubleClick_: (() => void) | undefined }>('#player');
   const onPlayerDblClick = player?.onDoubleClick_;
+  const mouseLeaveEventListener = () => middleControls?.click();
 
-  const titlebar = $('.cet-titlebar') as HTMLElement;
+  const titlebar = $<HTMLElement>('.cet-titlebar');
 
   ipcRenderer.on('pip-toggle', (_, isPip: boolean) => {
+    if (originalExitButton && player) {
       if (isPip) {
         replaceButton('.exit-fullscreen-button', originalExitButton)?.addEventListener('click', () => togglePictureInPicture());
         player.onDoubleClick_ = () => {
         };
 
-      expandMenu.addEventListener('mouseleave', () => middleControls.click());
+        expandMenu?.addEventListener('mouseleave', mouseLeaveEventListener);
-      if (!playerPage.playerPageOpen_) {
+        if (!playerPage?.playerPageOpen_) {
-        togglePlayerPageButton.click();
+          togglePlayerPageButton?.click();
         }
 
-      fullScreenButton.click();
+        fullScreenButton?.click();
-      appLayout.classList.add('pip');
+        appLayout?.classList.add('pip');
         if (titlebar) {
           titlebar.style.display = 'none';
         }
       } else {
         $('.exit-fullscreen-button')?.replaceWith(originalExitButton);
         player.onDoubleClick_ = onPlayerDblClick;
-      expandMenu.onmouseleave = null;
+        expandMenu?.removeEventListener('mouseleave', mouseLeaveEventListener);
         originalExitButton.click();
-      appLayout.classList.remove('pip');
+        appLayout?.classList.remove('pip');
         if (titlebar) {
           titlebar.style.display = 'flex';
         }
       }
+    }
   });
 };
 
@@ -145,7 +146,7 @@ function observeMenu(options: PiPOptions) {
 
       cloneButton('.player-minimize-button')?.addEventListener('click', async () => {
         await togglePictureInPicture();
-        setTimeout(() => ($('#player') as HTMLButtonElement | undefined)?.click());
+        setTimeout(() => $<HTMLButtonElement>('#player')?.click());
       });
 
       // Allows easily closing the menu by programmatically clicking outside of it
@@ -169,7 +170,7 @@ export default (options: PiPOptions) => {
     window.addEventListener('keydown', (event) => {
       if (
         keyEventAreEqual(event, hotkeyEvent)
-        && !($('ytmusic-search-box') as (HTMLElement & { opened: boolean }) | undefined)?.opened
+        && !$<HTMLElement & { opened: boolean }>('ytmusic-search-box')?.opened
       ) {
         togglePictureInPicture();
       }

plugins/playback-speed/front.ts

@@ -3,8 +3,8 @@ import { ElementFromFile, templatePath } from '../utils';
 import { singleton } from '../../providers/decorators';
 
 
-function $(selector: string) {
+function $<E extends Element = Element>(selector: string) {
-  return document.querySelector(selector);
+  return document.querySelector<E>(selector);
 }
 
 const slider = ElementFromFile(templatePath(__dirname, 'slider.html'));
@@ -17,7 +17,10 @@ const MAX_PLAYBACK_SPEED = 16;
 let playbackSpeed = 1;
 
 const updatePlayBackSpeed = () => {
-  ($('video') as HTMLVideoElement).playbackRate = playbackSpeed;
+  const videoElement = $<HTMLVideoElement>('video');
+  if (videoElement) {
+    videoElement.playbackRate = playbackSpeed;
+  }
 
   const playbackSpeedElement = $('#playback-speed-value');
   if (playbackSpeedElement) {
@@ -65,9 +68,11 @@ const observePopupContainer = () => {
 };
 
 const observeVideo = () => {
-  const video = $('video') as HTMLVideoElement;
+  const video = $<HTMLVideoElement>('video');
+  if (video) {
     video.addEventListener('ratechange', forcePlaybackRate);
     video.addEventListener('srcChanged', forcePlaybackRate);
+  }
 };
 
 const setupWheelListener = () => {
@@ -85,15 +90,20 @@ const setupWheelListener = () => {
 
     updatePlayBackSpeed();
     // Update slider position
-    ($('#playback-speed-slider') as HTMLElement & { value: number }).value = playbackSpeed;
+    const playbackSpeedSilder = $<HTMLElement & { value: number }>('#playback-speed-slider');
+    if (playbackSpeedSilder) {
+      playbackSpeedSilder.value = playbackSpeed;
+    }
   });
 };
 
 function forcePlaybackRate(e: Event) {
-  const videoElement = (e.target as HTMLVideoElement);
+  if (e.target instanceof HTMLVideoElement) {
+    const videoElement = e.target;
     if (videoElement.playbackRate !== playbackSpeed) {
       videoElement.playbackRate = playbackSpeed;
     }
+  }
 }
 
 export default () => {

plugins/precise-volume/front.ts

@@ -7,8 +7,8 @@ import { YoutubePlayer } from '../../types/youtube-player';
 
 import type { ConfigType } from '../../config/dynamic';
 
-function $(selector: string) {
+function $<E extends Element = Element>(selector: string) {
-  return document.querySelector(selector);
+  return document.querySelector<E>(selector);
 }
 
 let api: YoutubePlayer;
@@ -30,7 +30,7 @@ const writeOptions = debounce(() => {
 }, 1000);
 
 export const moveVolumeHud = debounce((showVideo: boolean) => {
-  const volumeHud = $('#volumeHud') as HTMLElement | undefined;
+  const volumeHud = $<HTMLElement>('#volumeHud');
   if (!volumeHud) {
     return;
   }
@@ -103,7 +103,7 @@ function injectVolumeHud(noVid: boolean) {
 }
 
 function showVolumeHud(volume: number) {
-  const volumeHud = $('#volumeHud') as HTMLElement | undefined;
+  const volumeHud = $<HTMLElement>('#volumeHud');
   if (!volumeHud) {
     return;
   }
@@ -116,7 +116,7 @@ function showVolumeHud(volume: number) {
 
 /** Add onwheel event to video player */
 function setupVideoPlayerOnwheel() {
-  const panel = $('#main-panel') as HTMLElement | undefined;
+  const panel = $<HTMLElement>('#main-panel');
   if (!panel) return;
 
   panel.addEventListener('wheel', (event) => {
@@ -133,7 +133,7 @@ function saveVolume(volume: number) {
 
 /** Add onwheel event to play bar and also track if play bar is hovered */
 function setupPlaybar() {
-  const playerbar = $('ytmusic-player-bar') as HTMLElement | undefined;
+  const playerbar = $<HTMLElement>('ytmusic-player-bar');
   if (!playerbar) return;
 
   playerbar.addEventListener('wheel', (event) => {
@@ -158,8 +158,9 @@ function setupPlaybar() {
 function setupSliderObserver() {
   const sliderObserver = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
+      if (mutation.target instanceof HTMLInputElement) {
         // This checks that volume-slider was manually set
-      const target = mutation.target as HTMLInputElement;
+        const target = mutation.target;
         const targetValueNumeric = Number(target.value);
         if (mutation.oldValue !== target.value
           && (typeof options.savedVolume !== 'number' || Math.abs(options.savedVolume - targetValueNumeric) > 4)) {
@@ -168,6 +169,7 @@ function setupSliderObserver() {
           saveVolume(targetValueNumeric);
         }
       }
+    }
   });
 
   const slider = $('#volume-slider');
@@ -209,15 +211,15 @@ function updateVolumeSlider() {
   const savedVolume = options.savedVolume ?? 0;
   // Slider value automatically rounds to multiples of 5
   for (const slider of ['#volume-slider', '#expand-volume-slider']) {
-    ($(slider) as HTMLInputElement).value
+    const silderElement = $<HTMLInputElement>(slider);
-      = String(savedVolume > 0 && savedVolume < 5
+    if (silderElement) {
-      ? 5
+      silderElement.value = String(savedVolume > 0 && savedVolume < 5 ? 5 : savedVolume);
-      : savedVolume);
+    }
   }
 }
 
 function showVolumeSlider() {
-  const slider = $('#volume-slider') as HTMLElement | null;
+  const slider = $<HTMLElement>('#volume-slider');
   if (!slider) return;
 
   // This class display the volume slider if not in minimized mode
@@ -236,14 +238,17 @@ const tooltipTargets = [
 
 function setTooltip(volume: number) {
   for (const target of tooltipTargets) {
-    ($(target) as HTMLElement).title = `${volume}%`;
+    const tooltipTargetElement = $<HTMLElement>(target);
+    if (tooltipTargetElement) {
+      tooltipTargetElement.title = `${volume}%`;
+    }
   }
 }
 
 function setupLocalArrowShortcuts() {
   if (options.arrowsShortcut) {
     window.addEventListener('keydown', (event) => {
-      if (($('ytmusic-search-box') as (HTMLElement & { opened: boolean }) | null)?.opened) {
+      if ($<HTMLElement & { opened: boolean }>('ytmusic-search-box')?.opened) {
         return;
       }
 

plugins/sponsorblock/front.ts

@@ -11,11 +11,12 @@ export default () => {
   });
 
   document.addEventListener('apiLoaded', () => {
-    const video = document.querySelector('video') as HTMLVideoElement | undefined;
+    const video = document.querySelector<HTMLVideoElement>('video');
     if (!video) return;
 
     video.addEventListener('timeupdate', (e) => {
-      const target = e.target as HTMLVideoElement;
+      if (e.target instanceof HTMLVideoElement) {
+        const target = e.target;
 
         for (const segment of currentSegments) {
           if (
@@ -28,6 +29,7 @@ export default () => {
             }
           }
         }
+      }
     });
     // Reset segments on song end
     video.addEventListener('emptied', () => currentSegments = []);

plugins/video-toggle/front.ts

@@ -10,13 +10,13 @@ import type { ConfigType } from '../../config/dynamic';
 
 const moveVolumeHud = isEnabled('precise-volume') ? preciseVolumeMoveVolumeHud : () => {};
 
-function $(selector: string): HTMLElement | null {
+function $<E extends Element = Element>(selector: string): E | null {
-  return document.querySelector(selector);
+  return document.querySelector<E>(selector);
 }
 
 let options: ConfigType<'video-toggle'>;
-let player: HTMLElement & { videoMode_: boolean };
+let player: HTMLElement & { videoMode_: boolean } | null;
-let video: HTMLVideoElement;
+let video: HTMLVideoElement | null;
 let api: YoutubePlayer;
 
 const switchButtonDiv = ElementFromFile(
@@ -51,18 +51,23 @@ export default (_options: ConfigType<'video-toggle'>) => {
 
 function setup(e: CustomEvent<YoutubePlayer>) {
   api = e.detail;
-  player = $('ytmusic-player') as typeof player;
+  player = $<(HTMLElement & { videoMode_: boolean; })>('ytmusic-player');
-  video = $('video') as HTMLVideoElement;
+  video = $<HTMLVideoElement>('video');
 
-  ($('#player') as HTMLVideoElement).prepend(switchButtonDiv);
+  $<HTMLVideoElement>('#player')?.prepend(switchButtonDiv);
 
   if (options.hideVideo) {
-    ($('.video-switch-button-checkbox') as HTMLInputElement).checked = false;
+    const checkbox = $<HTMLInputElement>('.video-switch-button-checkbox');
+    if (checkbox) {
+      checkbox.checked = false;
+    }
     changeDisplay(false);
     forcePlaybackMode();
     // Fix black video
+    if (video) {
       video.style.height = 'auto';
     }
+  }
 
   //Prevents bubbling to the player which causes it to stop or resume
   switchButtonDiv.addEventListener('click', (e) => {
@@ -77,7 +82,7 @@ function setup(e: CustomEvent<YoutubePlayer>) {
     setOptions('video-toggle', options);
   });
 
-  video.addEventListener('srcChanged', videoStarted);
+  video?.addEventListener('srcChanged', videoStarted);
 
   observeThumbnail();
 
@@ -100,17 +105,19 @@ function setup(e: CustomEvent<YoutubePlayer>) {
 }
 
 function changeDisplay(showVideo: boolean) {
+  if (player) {
     player.style.margin = showVideo ? '' : 'auto 0px';
     player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
 
-  $('#song-video.ytmusic-player')!.style.display = showVideo ? 'block' : 'none';
+    $<HTMLElement>('#song-video.ytmusic-player')!.style.display = showVideo ? 'block' : 'none';
-  $('#song-image')!.style.display = showVideo ? 'none' : 'block';
+    $<HTMLElement>('#song-image')!.style.display = showVideo ? 'none' : 'block';
 
-  if (showVideo && !video.style.top) {
+    if (showVideo && video && !video.style.top) {
       video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
     }
 
     moveVolumeHud(showVideo);
+  }
 }
 
 function videoStarted() {
@@ -120,12 +127,16 @@ function videoStarted() {
     // Hide toggle button
     switchButtonDiv.style.display = 'none';
   } else {
+    const songImage = $<HTMLImageElement>('#song-image img');
+    if (!songImage) {
+      return;
+    }
     // Switch to high-res thumbnail
-    forceThumbnail($('#song-image img') as HTMLImageElement);
+    forceThumbnail(songImage);
     // Show toggle button
     switchButtonDiv.style.display = 'initial';
     // Change display to video mode if video exist & video is hidden & option.hideVideo = false
-    if (!options.hideVideo && $('#song-video.ytmusic-player')?.style.display === 'none') {
+    if (!options.hideVideo && $<HTMLElement>('#song-video.ytmusic-player')?.style.display === 'none') {
       changeDisplay(true);
     } else {
       moveVolumeHud(!options.hideVideo);
@@ -136,32 +147,38 @@ function videoStarted() {
 // On load, after a delay, the page overrides the playback-mode to 'OMV_PREFERRED' which causes weird aspect ratio in the image container
 // this function fix the problem by overriding that override :)
 function forcePlaybackMode() {
+  if (player) {
     const playbackModeObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-      const target = mutation.target as HTMLElement;
+        if (mutation.target instanceof HTMLElement) {
+          const target = mutation.target;
           if (target.getAttribute('playback-mode') !== 'ATV_PREFERRED') {
             playbackModeObserver.disconnect();
             target.setAttribute('playback-mode', 'ATV_PREFERRED');
           }
         }
+      }
     });
     playbackModeObserver.observe(player, { attributeFilter: ['playback-mode'] });
+  }
 }
 
 function observeThumbnail() {
   const playbackModeObserver = new MutationObserver((mutations) => {
-    if (!player.videoMode_) {
+    if (!player?.videoMode_) {
       return;
     }
 
     for (const mutation of mutations) {
-      const target = mutation.target as HTMLImageElement;
+      if (mutation.target instanceof HTMLImageElement) {
+        const target = mutation.target;
         if (!target.src.startsWith('data:')) {
           continue;
         }
 
         forceThumbnail(target);
       }
+    }
   });
   playbackModeObserver.observe($('#song-image img')!, { attributeFilter: ['src'] });
 }

plugins/visualizer/front.ts

@@ -26,21 +26,30 @@ export default (options: ConfigType<'visualizer'>) => {
   document.addEventListener(
     'audioCanPlay',
     (e) => {
-      const video = document.querySelector('video') as (HTMLVideoElement & { captureStream(): MediaStream; });
+      const video = document.querySelector<HTMLVideoElement & { captureStream(): MediaStream; }>('video');
-      const visualizerContainer = document.querySelector('#player') as HTMLElement;
+      if (!video) {
+        return;
+      }
 
-      let canvas = document.querySelector('#visualizer') as HTMLCanvasElement;
+      const visualizerContainer = document.querySelector<HTMLElement>('#player');
+      if (!visualizerContainer) {
+        return;
+      }
+
+      let canvas = document.querySelector<HTMLCanvasElement>('#visualizer');
       if (!canvas) {
         canvas = document.createElement('canvas');
         canvas.id = 'visualizer';
         canvas.style.position = 'absolute';
         canvas.style.background = 'black';
-        visualizerContainer.append(canvas);
+        visualizerContainer?.append(canvas);
       }
 
       const resizeCanvas = () => {
+        if (canvas) {
           canvas.width = visualizerContainer.clientWidth;
           canvas.height = visualizerContainer.clientHeight;
+        }
       };
 
       resizeCanvas();

preload.ts

@@ -150,7 +150,7 @@ function onApiLoaded() {
   // Navigate to "Starting page"
   const startingPage: string = config.get('options.startingPage');
   if (startingPage && startingPages[startingPage]) {
-    ($('ytmusic-app') as YouTubeMusicAppElement)?.navigate_(startingPages[startingPage]);
+    $<YouTubeMusicAppElement>('ytmusic-app')?.navigate_(startingPages[startingPage]);
   }
 
   // Remove upgrade button

providers/prompt-custom-titlebar.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
 import { Titlebar, Color } from 'custom-electron-titlebar';
 
 export default () => {
@@ -7,8 +8,10 @@ export default () => {
     maximizable: false,
     menu: undefined,
   });
-  const mainStyle = (document.querySelector('#container') as HTMLElement)!.style;
+  const mainStyle = document.querySelector<HTMLElement>('#container')?.style;
+  if (mainStyle) {
     mainStyle.width = '100%';
     mainStyle.position = 'fixed';
     mainStyle.border = 'unset';
+  }
 };

providers/song-info-front.ts

@@ -9,8 +9,8 @@ import { GetState } from '../types/datahost-get-state';
 let songInfo: SongInfo = {} as SongInfo;
 export const getSongInfo = () => songInfo;
 
-const $ = <E extends HTMLElement>(s: string): E => document.querySelector(s) as E;
+const $ = <E extends Element = Element>(s: string): E | null => document.querySelector<E>(s);
-const $$ = <E extends HTMLElement>(s: string): E[] => Array.from(document.querySelectorAll(s));
+const $$ = <E extends Element = Element>(s: string): NodeListOf<E> => document.querySelectorAll<E>(s);
 
 ipcRenderer.on('update-song-info', async (_, extractedSongInfo: string) => {
   songInfo = JSON.parse(extractedSongInfo) as SongInfo;
@@ -21,35 +21,54 @@ ipcRenderer.on('update-song-info', async (_, extractedSongInfo: string) => {
 const srcChangedEvent = new CustomEvent('srcChanged');
 
 export const setupSeekedListener = singleton(() => {
-  $('video')?.addEventListener('seeked', (v) => ipcRenderer.send('seeked', (v.target as HTMLVideoElement).currentTime));
+  $('video')?.addEventListener('seeked', (v) => {
+    if (v.target instanceof HTMLVideoElement) {
+      ipcRenderer.send('seeked', v.target.currentTime);
+    }
+  });
 });
 
 export const setupTimeChangedListener = singleton(() => {
   const progressObserver = new MutationObserver((mutations) => {
-    const target = mutations[0].target as HTMLInputElement;
+    for (const mutation of mutations) {
+      const target = mutation.target as Node & { value: string };
       ipcRenderer.send('timeChanged', target.value);
       songInfo.elapsedSeconds = Number(target.value);
+    }
   });
-  progressObserver.observe($('#progress-bar'), { attributeFilter: ['value'] });
+  const progressBar = $('#progress-bar');
+  if (progressBar) {
+    progressObserver.observe(progressBar, { attributeFilter: ['value'] });
+  }
 });
 
 export const setupRepeatChangedListener = singleton(() => {
   const repeatObserver = new MutationObserver((mutations) => {
 
-    // provided by YouTube music
+    // provided by YouTube Music
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    ipcRenderer.send(
-    ipcRenderer.send('repeatChanged', ((mutations[0].target as any).__dataHost.getState() as GetState).queue.repeatMode);
+      'repeatChanged',
+      (mutations[0].target as Node & {
+        __dataHost: {
+          getState: () => GetState;
+        }
+      }).__dataHost.getState().queue.repeatMode,
+    );
   });
   repeatObserver.observe($('#right-controls .repeat')!, { attributeFilter: ['title'] });
 
   // Emit the initial value as well; as it's persistent between launches.
-  // provided by YouTube music
+  // provided by YouTube Music
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unnecessary-type-assertion
+  ipcRenderer.send(
-  ipcRenderer.send('repeatChanged', (($('ytmusic-player-bar') as any).getState() as GetState).queue.repeatMode);
+    'repeatChanged',
+    $<HTMLElement & {
+      GetState: () => GetState;
+    }>('ytmusic-player-bar')?.GetState().queue.repeatMode,
+  );
 });
 
 export const setupVolumeChangedListener = singleton((api: YoutubePlayer) => {
-  $('video').addEventListener('volumechange', () => {
+  $('video')?.addEventListener('volumechange', () => {
     ipcRenderer.send('volumeChanged', api.getVolume());
   });
   // Emit the initial value as well; as it's persistent between launches.
@@ -75,10 +94,10 @@ export default () => {
     });
 
     const playPausedHandler = (e: Event, status: string) => {
-      if (Math.round((e.target as HTMLVideoElement).currentTime) > 0) {
+      if (e.target instanceof HTMLVideoElement && Math.round(e.target.currentTime) > 0) {
         ipcRenderer.send('playPaused', {
           isPaused: status === 'pause',
-          elapsedSeconds: Math.floor((e.target as HTMLVideoElement).currentTime),
+          elapsedSeconds: Math.floor(e.target.currentTime),
         });
       }
     };
@@ -94,10 +113,10 @@ export default () => {
         return;
       }
       const video = $<HTMLVideoElement>('video');
-      video.dispatchEvent(srcChangedEvent);
+      video?.dispatchEvent(srcChangedEvent);
 
       for (const status of ['playing', 'pause'] as const) { // for fix issue that pause event not fired
-        video.addEventListener(status, playPausedHandlers[status]);
+        video?.addEventListener(status, playPausedHandlers[status]);
       }
       setTimeout(sendSongInfo, 200);
     });
@@ -110,12 +129,12 @@ export default () => {
     function sendSongInfo() {
       const data = apiEvent.detail.getPlayerResponse();
 
-      data.videoDetails.album = $$<HTMLAnchorElement>(
+      for (const e of $$<HTMLAnchorElement>('.byline.ytmusic-player-bar > .yt-simple-endpoint')) {
-        '.byline.ytmusic-player-bar > .yt-simple-endpoint',
+        if (e.href?.includes('browse/FEmusic_library_privately_owned_release') || e.href?.includes('browse/MPREb')) {
-      ).find((e) =>
+          data.videoDetails.album = e.textContent;
-        e.href?.includes('browse/FEmusic_library_privately_owned_release')
+          break;
-        || e.href?.includes('browse/MPREb'),
+        }
-      )?.textContent;
+      }
 
       data.videoDetails.elapsedSeconds = 0;
       data.videoDetails.isPaused = false;

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["dom", "es2022"],
+    "lib": ["dom", "dom.iterable", "es2022"],
     "module": "CommonJS",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,