fix: reduce unchecked type-cast

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 {
-  return document.querySelector(selector);
+function $<E extends Element = Element>(selector: string): E | null {
+  return document.querySelector<E>(selector);
 }
 
 let options: ConfigType<'video-toggle'>;
-let player: HTMLElement & { videoMode_: boolean };
-let video: HTMLVideoElement;
+let player: HTMLElement & { videoMode_: boolean } | null;
+let video: HTMLVideoElement | null;
 let api: YoutubePlayer;
 
 const switchButtonDiv = ElementFromFile(
@@ -51,17 +51,22 @@ export default (_options: ConfigType<'video-toggle'>) => {
 
 function setup(e: CustomEvent<YoutubePlayer>) {
   api = e.detail;
-  player = $('ytmusic-player') as typeof player;
-  video = $('video') as HTMLVideoElement;
+  player = $<(HTMLElement & { videoMode_: boolean; })>('ytmusic-player');
+  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
-    video.style.height = 'auto';
+    if (video) {
+      video.style.height = 'auto';
+    }
   }
 
   //Prevents bubbling to the player which causes it to stop or resume
@@ -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) {
-  player.style.margin = showVideo ? '' : 'auto 0px';
-  player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
+  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';
-  $('#song-image')!.style.display = showVideo ? 'none' : 'block';
+    $<HTMLElement>('#song-video.ytmusic-player')!.style.display = showVideo ? 'block' : 'none';
+    $<HTMLElement>('#song-image')!.style.display = showVideo ? 'none' : 'block';
 
-  if (showVideo && !video.style.top) {
-    video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
+    if (showVideo && video && !video.style.top) {
+      video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
+    }
+
+    moveVolumeHud(showVideo);
   }
-
-  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,31 +147,37 @@ 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() {
-  const playbackModeObserver = new MutationObserver((mutations) => {
-    for (const mutation of mutations) {
-      const target = mutation.target as HTMLElement;
-      if (target.getAttribute('playback-mode') !== 'ATV_PREFERRED') {
-        playbackModeObserver.disconnect();
-        target.setAttribute('playback-mode', 'ATV_PREFERRED');
+  if (player) {
+    const playbackModeObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        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'] });
+    });
+    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 (!target.src.startsWith('data:')) {
-        continue;
-      }
+      if (mutation.target instanceof HTMLImageElement) {
+        const target = mutation.target;
+        if (!target.src.startsWith('data:')) {
+          continue;
+        }
 
-      forceThumbnail(target);
+        forceThumbnail(target);
+      }
     }
   });
   playbackModeObserver.observe($('#song-image img')!, { attributeFilter: ['src'] });