feat: migration to TypeScript FINAL

Co-authored-by: Su-Yong <simssy2205@gmail.com>

plugins/video-toggle/back.js

@@ -1,11 +0,0 @@
-const path = require('node:path');
-
-const { injectCSS } = require('../utils');
-
-module.exports = (win, options) => {
-  if (options.forceHide) {
-    injectCSS(win.webContents, path.join(__dirname, 'force-hide.css'));
-  } else if (!options.mode || options.mode === 'custom') {
-    injectCSS(win.webContents, path.join(__dirname, 'button-switcher.css'));
-  }
-};

plugins/video-toggle/back.ts

@@ -0,0 +1,14 @@
+import path from 'node:path';
+
+import { BrowserWindow } from 'electron';
+
+import { injectCSS } from '../utils';
+import type { ConfigType } from '../../config/dynamic';
+
+export default (win: BrowserWindow, options: ConfigType<'video-toggle'>) => {
+  if (options.forceHide) {
+    injectCSS(win.webContents, path.join(__dirname, 'force-hide.css'));
+  } else if (!options.mode || options.mode === 'custom') {
+    injectCSS(win.webContents, path.join(__dirname, 'button-switcher.css'));
+  }
+};

plugins/video-toggle/front.ts

@@ -1,37 +1,41 @@
-const { ElementFromFile, templatePath } = require('../utils');
-const { setOptions, isEnabled } = require('../../config/plugins');
+import { ElementFromFile, templatePath } from '../utils';
+import { setOptions, isEnabled } from '../../config/plugins';
 
-const moveVolumeHud = isEnabled('precise-volume') ? require('../precise-volume/front').moveVolumeHud : () => {
-};
+import { moveVolumeHud as preciseVolumeMoveVolumeHud } from '../precise-volume/front';
+import type { ConfigType } from '../../config/dynamic';
+import { YoutubePlayer } from '../../types/youtube-player';
+import { ThumbnailElement } from '../../types/get-player-response';
 
-function $(selector) {
+const moveVolumeHud = isEnabled('precise-volume') ? preciseVolumeMoveVolumeHud : () => {};
+
+function $(selector: string): HTMLElement | null {
   return document.querySelector(selector);
 }
 
-let options;
-let player;
-let video;
-let api;
+let options: ConfigType<'video-toggle'>;
+let player: HTMLElement & { videoMode_: boolean };
+let video: HTMLVideoElement;
+let api: YoutubePlayer;
 
 const switchButtonDiv = ElementFromFile(
   templatePath(__dirname, 'button_template.html'),
 );
 
-module.exports = (_options) => {
+export default (_options: ConfigType<'video-toggle'>) => {
   if (_options.forceHide) {
     return;
   }
 
   switch (_options.mode) {
     case 'native': {
-      $('ytmusic-player-page').setAttribute('has-av-switcher');
-      $('ytmusic-player').setAttribute('has-av-switcher');
+      $('ytmusic-player-page')?.setAttribute('has-av-switcher', '');
+      $('ytmusic-player')?.setAttribute('has-av-switcher', '');
       return;
     }
 
     case 'disabled': {
-      $('ytmusic-player-page').removeAttribute('has-av-switcher');
-      $('ytmusic-player').removeAttribute('has-av-switcher');
+      $('ytmusic-player-page')?.removeAttribute('has-av-switcher');
+      $('ytmusic-player')?.removeAttribute('has-av-switcher');
       return;
     }
 
@@ -43,15 +47,15 @@ module.exports = (_options) => {
   }
 };
 
-function setup(e) {
+function setup(e: CustomEvent<YoutubePlayer>) {
   api = e.detail;
-  player = $('ytmusic-player');
-  video = $('video');
+  player = $('ytmusic-player') as typeof player;
+  video = $('video') as HTMLVideoElement;
 
-  $('#main-panel').append(switchButtonDiv);
+  ($('#main-panel') as HTMLVideoElement).append(switchButtonDiv);
 
   if (options.hideVideo) {
-    $('.video-switch-button-checkbox').checked = false;
+    ($('.video-switch-button-checkbox') as HTMLInputElement).checked = false;
     changeDisplay(false);
     forcePlaybackMode();
     // Fix black video
@@ -60,8 +64,9 @@ function setup(e) {
 
   // Button checked = show video
   switchButtonDiv.addEventListener('change', (e) => {
-    options.hideVideo = !e.target.checked;
-    changeDisplay(e.target.checked);
+    const target = e.target as HTMLInputElement;
+    options.hideVideo = target.checked;
+    changeDisplay(target.checked);
     setOptions('video-toggle', options);
   });
 
@@ -87,12 +92,12 @@ function setup(e) {
   }
 }
 
-function changeDisplay(showVideo) {
+function changeDisplay(showVideo: boolean) {
   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';
+  $('#song-video.ytmusic-player')!.style.display = showVideo ? 'block' : 'none';
+  $('#song-image')!.style.display = showVideo ? 'none' : 'block';
 
   if (showVideo && !video.style.top) {
     video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
@@ -108,12 +113,12 @@ function videoStarted() {
     // Hide toggle button
     switchButtonDiv.style.display = 'none';
   } else {
-    // Switch to high res thumbnail
-    forceThumbnail($('#song-image img'));
+    // Switch to high-res thumbnail
+    forceThumbnail($('#song-image img') as HTMLImageElement);
     // 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 && $('#song-video.ytmusic-player')?.style.display === 'none') {
       changeDisplay(true);
     } else {
       moveVolumeHud(!options.hideVideo);
@@ -126,9 +131,10 @@ function videoStarted() {
 function forcePlaybackMode() {
   const playbackModeObserver = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
-      if (mutation.target.getAttribute('playback-mode') !== 'ATV_PREFERRED') {
+      const target = mutation.target as HTMLElement;
+      if (target.getAttribute('playback-mode') !== 'ATV_PREFERRED') {
         playbackModeObserver.disconnect();
-        mutation.target.setAttribute('playback-mode', 'ATV_PREFERRED');
+        target.setAttribute('playback-mode', 'ATV_PREFERRED');
       }
     }
   });
@@ -142,19 +148,21 @@ function observeThumbnail() {
     }
 
     for (const mutation of mutations) {
-      if (!mutation.target.src.startsWith('data:')) {
+      const target = mutation.target as HTMLImageElement;
+      if (!target.src.startsWith('data:')) {
         continue;
       }
 
-      forceThumbnail(mutation.target);
+      forceThumbnail(target);
     }
   });
-  playbackModeObserver.observe($('#song-image img'), { attributeFilter: ['src'] });
+  playbackModeObserver.observe($('#song-image img')!, { attributeFilter: ['src'] });
 }
 
-function forceThumbnail(img) {
-  const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails;
+function forceThumbnail(img: HTMLImageElement) {
+  const thumbnails: ThumbnailElement[] = ($('#movie_player') as unknown as YoutubePlayer).getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails ?? [];
   if (thumbnails && thumbnails.length > 0) {
-    img.src = thumbnails.at(-1).url.split('?')[0];
+    const thumbnail = thumbnails.at(-1)?.url.split('?')[0];
+    if (typeof thumbnail === 'string') img.src = thumbnail;
   }
 }

plugins/video-toggle/menu.ts

@@ -1,6 +1,10 @@
-const { setMenuOptions } = require('../../config/plugins');
+import { BrowserWindow } from 'electron';
 
-module.exports = (win, options) => [
+import { setMenuOptions } from '../../config/plugins';
+import type { ConfigType } from '../../config/dynamic';
+import { MenuTemplate } from '../../menu';
+
+export default (win: BrowserWindow, options: ConfigType<'video-toggle'>): MenuTemplate => [
   {
     label: 'Mode',
     submenu: [