feat: typescript part 1

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

providers/app-controls.js

@@ -1,35 +0,0 @@
-const path = require('node:path');
-
-const { app, BrowserWindow, ipcMain, ipcRenderer } = require('electron');
-
-const config = require('../config');
-
-module.exports.restart = () => {
-  process.type === 'browser' ? restart() : ipcRenderer.send('restart');
-};
-
-module.exports.setupAppControls = () => {
-  ipcMain.on('restart', restart);
-  ipcMain.handle('getDownloadsFolder', () => app.getPath('downloads'));
-  ipcMain.on('reload', () => BrowserWindow.getFocusedWindow().webContents.loadURL(config.get('url')));
-  ipcMain.handle('getPath', (_, ...args) => path.join(...args));
-};
-
-function restart() {
-  app.relaunch({ execPath: process.env.PORTABLE_EXECUTABLE_FILE });
-  // ExecPath will be undefined if not running portable app, resulting in default behavior
-  app.quit();
-}
-
-function sendToFront(channel, ...args) {
-  for (const win of BrowserWindow.getAllWindows()) {
-    win.webContents.send(channel, ...args);
-  }
-}
-
-module.exports.sendToFront
-  = process.type === 'browser'
-  ? sendToFront
-  : () => {
-    console.error('sendToFront called from renderer');
-  };

providers/app-controls.ts

@@ -0,0 +1,35 @@
+import path from 'node:path';
+
+import { app, BrowserWindow, ipcMain, ipcRenderer } from 'electron';
+
+import config from '../config';
+
+export const restart = () => {
+  process.type === 'browser' ? restartInternal() : ipcRenderer.send('restart');
+};
+
+export const setupAppControls = () => {
+  ipcMain.on('restart', restart);
+  ipcMain.handle('getDownloadsFolder', () => app.getPath('downloads'));
+  ipcMain.on('reload', () => BrowserWindow.getFocusedWindow()?.webContents.loadURL(config.get('url')));
+  ipcMain.handle('getPath', (_, ...args: string[]) => path.join(...args));
+};
+
+function restartInternal() {
+  app.relaunch({ execPath: process.env.PORTABLE_EXECUTABLE_FILE });
+  // ExecPath will be undefined if not running portable app, resulting in default behavior
+  app.quit();
+}
+
+function sendToFrontInternal(channel: string, ...args: unknown[]) {
+  for (const win of BrowserWindow.getAllWindows()) {
+    win.webContents.send(channel, ...args);
+  }
+}
+
+export const sendToFront
+  = process.type === 'browser'
+  ? sendToFrontInternal
+  : () => {
+    console.error('sendToFront called from renderer');
+  };

providers/decorators.ts

@@ -1,52 +1,28 @@
-module.exports = {
-  singleton,
-  debounce,
-  cache,
-  throttle,
-  memoize,
-  retry,
-};
-
-/**
- * @template T
- * @param {T} fn
- * @returns {T}
- */
-function singleton(fn) {
+export function singleton<T extends (...params: never[]) => unknown>(fn: T): T {
   let called = false;
-  return (...args) => {
+
+  return ((...args) => {
     if (called) {
       return;
     }
 
     called = true;
     return fn(...args);
-  };
+  }) as T;
 }
 
-/**
- * @template T
- * @param {T} fn
- * @param {number} delay
- * @returns {T}
- */
-function debounce(fn, delay) {
-  let timeout;
-  return (...args) => {
+export function debounce<T extends (...params: never[]) => unknown>(fn: T, delay: number): T {
+  let timeout: NodeJS.Timeout;
+  return ((...args) => {
     clearTimeout(timeout);
     timeout = setTimeout(() => fn(...args), delay);
-  };
+  }) as T;
 }
 
-/**
- * @template T
- * @param {T} fn
- * @returns {T}
- */
-function cache(fn) {
-  let lastArgs;
-  let lastResult;
-  return (...args) => {
+export function cache<T extends (...params: P) => R, P extends never[], R>(fn: T): T {
+  let lastArgs: P;
+  let lastResult: R;
+  return ((...args: P) => {
     if (
       args.length !== lastArgs?.length
       || args.some((arg, i) => arg !== lastArgs[i])
@@ -56,22 +32,16 @@ function cache(fn) {
     }
 
     return lastResult;
-  };
+  }) as T;
 }
 
 /*
   The following are currently unused, but potentially useful in the future
 */
 
-/**
- * @template T
- * @param {T} fn
- * @param {number} delay
- * @returns {T}
- */
-function throttle(fn, delay) {
-  let timeout;
-  return (...args) => {
+export function throttle<T extends (...params: unknown[]) => unknown>(fn: T, delay: number): T {
+  let timeout: NodeJS.Timeout | undefined;
+  return ((...args) => {
     if (timeout) {
       return;
     }
@@ -80,33 +50,24 @@ function throttle(fn, delay) {
       timeout = undefined;
       fn(...args);
     }, delay);
-  };
+  }) as T;
 }
 
-/**
- * @template T
- * @param {T} fn
- * @returns {T}
- */
-function memoize(fn) {
+function memoize<T extends (...params: unknown[]) => unknown>(fn: T): T {
   const cache = new Map();
-  return (...args) => {
+
+  return ((...args) => {
     const key = JSON.stringify(args);
     if (!cache.has(key)) {
       cache.set(key, fn(...args));
     }
 
-    return cache.get(key);
-  };
+    return cache.get(key) as unknown;
+  }) as T;
 }
 
-/**
- * @template T
- * @param {T} fn
- * @returns {T}
- */
-function retry(fn, { retries = 3, delay = 1000 } = {}) {
-  return (...args) => {
+function retry<T extends (...params: unknown[]) => unknown>(fn: T, { retries = 3, delay = 1000 } = {}): T {
+  return ((...args) => {
     try {
       return fn(...args);
     } catch (error) {
@@ -117,5 +78,14 @@ function retry(fn, { retries = 3, delay = 1000 } = {}) {
         throw error;
       }
     }
-  };
+  }) as T;
 }
+
+export default {
+  singleton,
+  debounce,
+  cache,
+  throttle,
+  memoize,
+  retry,
+};

providers/dom-elements.ts

@@ -1,4 +1,4 @@
-const getSongMenu = () =>
+export const getSongMenu = () =>
   document.querySelector('ytmusic-menu-popup-renderer tp-yt-paper-listbox');
 
-module.exports = { getSongMenu };
+export default { getSongMenu };

providers/extracted-data.ts

@@ -1,4 +1,4 @@
-const startingPages = {
+export const startingPages: Record<string, string> = {
   'Default': '',
   'Home': 'FEmusic_home',
   'Explore': 'FEmusic_explore',
@@ -18,6 +18,6 @@ const startingPages = {
   'Uploaded Artists': 'FEmusic_library_privately_owned_artists',
 };
 
-module.exports = {
+export default {
   startingPages,
 };

providers/prompt-custom-titlebar.ts

@@ -1,13 +1,13 @@
-const { Titlebar, Color } = require('custom-electron-titlebar');
+import { Titlebar, Color } from 'custom-electron-titlebar';
 
-module.exports = () => {
+export default () => {
   new Titlebar({
     backgroundColor: Color.fromHex('#050505'),
     minimizable: false,
     maximizable: false,
-    menu: null,
+    menu: undefined,
   });
-  const mainStyle = document.querySelector('#container').style;
+  const mainStyle = (document.querySelector('#container') as HTMLElement)!.style;
   mainStyle.width = '100%';
   mainStyle.position = 'fixed';
   mainStyle.border = 'unset';

providers/prompt-options.ts

@@ -1,8 +1,8 @@
-const path = require('node:path');
+import path from 'node:path';
 
-const is = require('electron-is');
+import is from 'electron-is';
 
-const { isEnabled } = require('../config/plugins');
+import { isEnabled } from '../config/plugins';
 
 const iconPath = path.join(__dirname, '..', 'assets', 'youtube-music-tray.png');
 const customTitlebarPath = path.join(__dirname, 'prompt-custom-titlebar.js');
@@ -17,4 +17,4 @@ const promptOptions = !is.macOS() && isEnabled('in-app-menu') ? {
   icon: iconPath,
 };
 
-module.exports = () => promptOptions;
+export default () => promptOptions;

providers/protocol-handler.js

@@ -1,45 +0,0 @@
-const path = require('node:path');
-
-const { app } = require('electron');
-
-const getSongControls = require('./song-controls');
-
-const APP_PROTOCOL = 'youtubemusic';
-
-let protocolHandler;
-
-function setupProtocolHandler(win) {
-  if (process.defaultApp && process.argv.length >= 2) {
-    app.setAsDefaultProtocolClient(
-      APP_PROTOCOL,
-      process.execPath,
-      [path.resolve(process.argv[1])],
-    );
-  } else {
-    app.setAsDefaultProtocolClient(APP_PROTOCOL);
-  }
-
-  const songControls = getSongControls(win);
-
-  protocolHandler = (cmd) => {
-    if (Object.keys(songControls).includes(cmd)) {
-      songControls[cmd]();
-    }
-  };
-}
-
-function handleProtocol(cmd) {
-  protocolHandler(cmd);
-}
-
-function changeProtocolHandler(f) {
-  protocolHandler = f;
-}
-
-module.exports = {
-  APP_PROTOCOL,
-  setupProtocolHandler,
-  handleProtocol,
-  changeProtocolHandler,
-};
-

providers/protocol-handler.ts

@@ -0,0 +1,45 @@
+import path from 'node:path';
+
+import { app, BrowserWindow } from 'electron';
+
+import getSongControls from './song-controls';
+
+export const APP_PROTOCOL = 'youtubemusic';
+
+let protocolHandler: ((cmd: string) => void) | undefined;
+
+export function setupProtocolHandler(win: BrowserWindow) {
+  if (process.defaultApp && process.argv.length >= 2) {
+    app.setAsDefaultProtocolClient(
+      APP_PROTOCOL,
+      process.execPath,
+      [path.resolve(process.argv[1])],
+    );
+  } else {
+    app.setAsDefaultProtocolClient(APP_PROTOCOL);
+  }
+
+  const songControls = getSongControls(win);
+
+  protocolHandler = ((cmd: keyof typeof songControls) => {
+    if (Object.keys(songControls).includes(cmd)) {
+      songControls[cmd]();
+    }
+  }) as (cmd: string) => void;
+}
+
+export function handleProtocol(cmd: string) {
+  protocolHandler?.(cmd);
+}
+
+export function changeProtocolHandler(f: (cmd: string) => void) {
+  protocolHandler = f;
+}
+
+export default {
+  APP_PROTOCOL,
+  setupProtocolHandler,
+  handleProtocol,
+  changeProtocolHandler,
+};
+

providers/song-controls-front.js

@@ -1,8 +0,0 @@
-const { ipcRenderer } = require('electron');
-
-module.exports.setupSongControls = () => {
-  document.addEventListener('apiLoaded', (e) => {
-    ipcRenderer.on('seekTo', (_, t) => e.detail.seekTo(t));
-    ipcRenderer.on('seekBy', (_, t) => e.detail.seekBy(t));
-  }, { once: true, passive: true });
-};

providers/song-controls-front.ts

@@ -0,0 +1,8 @@
+import { ipcRenderer } from 'electron';
+
+export const setupSongControls = () => {
+  document.addEventListener('apiLoaded', (event) => {
+    ipcRenderer.on('seekTo', (_, t: number) => event.detail.seekTo(t));
+    ipcRenderer.on('seekBy', (_, t: number) => event.detail.seekBy(t));
+  }, { once: true, passive: true });
+};

providers/song-controls.ts

@@ -1,13 +1,16 @@
 // This is used for to control the songs
-const pressKey = (window, key, modifiers = []) => {
+import { BrowserWindow } from 'electron';
+
+type Modifiers = (Electron.MouseInputEvent | Electron.MouseWheelInputEvent | Electron.KeyboardInputEvent)['modifiers'];
+export const pressKey = (window: BrowserWindow, key: string, modifiers: Modifiers = []) => {
   window.webContents.sendInputEvent({
-    type: 'keydown',
+    type: 'keyDown',
     modifiers,
     keyCode: key,
   });
 };
 
-module.exports = (win) => {
+export default (win: BrowserWindow) => {
   const commands = {
     // Playback
     previous: () => pressKey(win, 'k'),

providers/song-info-front.js

@@ -1,120 +0,0 @@
-const { ipcRenderer } = require('electron');
-
-const { getImage } = require('./song-info');
-
-const { singleton } = require('../providers/decorators');
-
-global.songInfo = {};
-
-const $ = (s) => document.querySelector(s);
-const $$ = (s) => [...document.querySelectorAll(s)];
-
-ipcRenderer.on('update-song-info', async (_, extractedSongInfo) => {
-  global.songInfo = JSON.parse(extractedSongInfo);
-  global.songInfo.image = await getImage(global.songInfo.imageSrc);
-});
-
-// Used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/th-ch/youtube-music/issues/473)
-const srcChangedEvent = new CustomEvent('srcChanged');
-
-const setupSeekedListener = singleton(() => {
-  $('video')?.addEventListener('seeked', (v) => ipcRenderer.send('seeked', v.target.currentTime));
-});
-module.exports.setupSeekedListener = setupSeekedListener;
-
-const setupTimeChangedListener = singleton(() => {
-  const progressObserver = new MutationObserver((mutations) => {
-    ipcRenderer.send('timeChanged', mutations[0].target.value);
-    global.songInfo.elapsedSeconds = mutations[0].target.value;
-  });
-  progressObserver.observe($('#progress-bar'), { attributeFilter: ['value'] });
-});
-module.exports.setupTimeChangedListener = setupTimeChangedListener;
-
-const setupRepeatChangedListener = singleton(() => {
-  const repeatObserver = new MutationObserver((mutations) => {
-    ipcRenderer.send('repeatChanged', mutations[0].target.__dataHost.getState().queue.repeatMode);
-  });
-  repeatObserver.observe($('#right-controls .repeat'), { attributeFilter: ['title'] });
-
-  // Emit the initial value as well; as it's persistent between launches.
-  ipcRenderer.send('repeatChanged', $('ytmusic-player-bar').getState().queue.repeatMode);
-});
-module.exports.setupRepeatChangedListener = setupRepeatChangedListener;
-
-const setupVolumeChangedListener = singleton((api) => {
-  $('video').addEventListener('volumechange', () => {
-    ipcRenderer.send('volumeChanged', api.getVolume());
-  });
-  // Emit the initial value as well; as it's persistent between launches.
-  ipcRenderer.send('volumeChanged', api.getVolume());
-});
-module.exports.setupVolumeChangedListener = setupVolumeChangedListener;
-
-module.exports = () => {
-  document.addEventListener('apiLoaded', (apiEvent) => {
-    ipcRenderer.on('setupTimeChangedListener', async () => {
-      setupTimeChangedListener();
-    });
-
-    ipcRenderer.on('setupRepeatChangedListener', async () => {
-      setupRepeatChangedListener();
-    });
-
-    ipcRenderer.on('setupVolumeChangedListener', async () => {
-      setupVolumeChangedListener(apiEvent.detail);
-    });
-
-    ipcRenderer.on('setupSeekedListener', async () => {
-      setupSeekedListener();
-    });
-
-    const playPausedHandler = (e, status) => {
-      if (Math.round(e.target.currentTime) > 0) {
-        ipcRenderer.send('playPaused', {
-          isPaused: status === 'pause',
-          elapsedSeconds: Math.floor(e.target.currentTime),
-        });
-      }
-    };
-
-    const playPausedHandlers = {
-      playing: (e) => playPausedHandler(e, 'playing'),
-      pause: (e) => playPausedHandler(e, 'pause'),
-    };
-
-    // Name = "dataloaded" and abit later "dataupdated"
-    apiEvent.detail.addEventListener('videodatachange', (name) => {
-      if (name !== 'dataloaded') {
-        return;
-      }
-      const video = $('video');
-
-      video.dispatchEvent(srcChangedEvent);
-      for (const status of ['playing', 'pause']) { // for fix issue that pause event not fired
-        video.addEventListener(status, playPausedHandlers[status]);
-      }
-      setTimeout(sendSongInfo, 200);
-    });
-
-    const video = $('video');
-    for (const status of ['playing', 'pause']) {
-      video.addEventListener(status, playPausedHandlers[status]);
-    }
-
-    function sendSongInfo() {
-      const data = apiEvent.detail.getPlayerResponse();
-
-      data.videoDetails.album = $$(
-        '.byline.ytmusic-player-bar > .yt-simple-endpoint',
-      ).find((e) =>
-        e.href?.includes('browse/FEmusic_library_privately_owned_release')
-        || e.href?.includes('browse/MPREb'),
-      )?.textContent;
-
-      data.videoDetails.elapsedSeconds = 0;
-      data.videoDetails.isPaused = false;
-      ipcRenderer.send('video-src-changed', JSON.stringify(data));
-    }
-  }, { once: true, passive: true });
-};

providers/song-info-front.ts

@@ -0,0 +1,124 @@
+import { ipcRenderer } from 'electron';
+
+import { singleton } from './decorators';
+import { getImage, SongInfo } from './song-info';
+
+import { YoutubePlayer } from '../types/youtube-player';
+import { GetState } from '../types/datahost-get-state';
+
+let songInfo: SongInfo = {} as SongInfo;
+
+const $ = <E extends HTMLElement>(s: string): E => document.querySelector(s) as E;
+const $$ = <E extends HTMLElement>(s: string): E[] => [...document.querySelectorAll(s)!] as E[];
+
+ipcRenderer.on('update-song-info', async (_, extractedSongInfo: string) => {
+  songInfo = JSON.parse(extractedSongInfo) as SongInfo;
+  if (songInfo.imageSrc) songInfo.image = await getImage(songInfo.imageSrc);
+});
+
+// Used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/th-ch/youtube-music/issues/473)
+const srcChangedEvent = new CustomEvent('srcChanged');
+
+export const setupSeekedListener = singleton(() => {
+  $('video')?.addEventListener('seeked', (v) => ipcRenderer.send('seeked', (v.target as HTMLVideoElement).currentTime));
+});
+
+export const setupTimeChangedListener = singleton(() => {
+  const progressObserver = new MutationObserver((mutations) => {
+    const target = mutations[0].target as HTMLInputElement;
+    ipcRenderer.send('timeChanged', target.value);
+    songInfo.elapsedSeconds = Number(target.value);
+  });
+  progressObserver.observe($('#progress-bar'), { attributeFilter: ['value'] });
+});
+
+export const setupRepeatChangedListener = singleton(() => {
+  const repeatObserver = new MutationObserver((mutations) => {
+
+    // 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('repeatChanged', ((mutations[0].target as any).__dataHost.getState() as 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
+  // 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('repeatChanged', (($('ytmusic-player-bar') as any).getState() as GetState).queue.repeatMode);
+});
+
+export const setupVolumeChangedListener = singleton((api: YoutubePlayer) => {
+  $('video').addEventListener('volumechange', () => {
+    ipcRenderer.send('volumeChanged', api.getVolume());
+  });
+  // Emit the initial value as well; as it's persistent between launches.
+  ipcRenderer.send('volumeChanged', api.getVolume());
+});
+
+export default () => {
+  document.addEventListener('apiLoaded', (apiEvent) => {
+    ipcRenderer.on('setupTimeChangedListener', () => {
+      setupTimeChangedListener();
+    });
+
+    ipcRenderer.on('setupRepeatChangedListener', () => {
+      setupRepeatChangedListener();
+    });
+
+    ipcRenderer.on('setupVolumeChangedListener', () => {
+      setupVolumeChangedListener(apiEvent.detail);
+    });
+
+    ipcRenderer.on('setupSeekedListener', () => {
+      setupSeekedListener();
+    });
+
+    const playPausedHandler = (e: Event, status: string) => {
+      if (Math.round((e.target as HTMLVideoElement).currentTime) > 0) {
+        ipcRenderer.send('playPaused', {
+          isPaused: status === 'pause',
+          elapsedSeconds: Math.floor((e.target as HTMLVideoElement).currentTime),
+        });
+      }
+    };
+
+    const playPausedHandlers = {
+      playing: (e: Event) => playPausedHandler(e, 'playing'),
+      pause: (e: Event) => playPausedHandler(e, 'pause'),
+    };
+
+    // Name = "dataloaded" and abit later "dataupdated"
+    apiEvent.detail.addEventListener('videodatachange', (name: string) => {
+      if (name !== 'dataloaded') {
+        return;
+      }
+      const video = $<HTMLVideoElement>('video');
+      video.dispatchEvent(srcChangedEvent);
+
+      for (const status of ['playing', 'pause'] as const) { // for fix issue that pause event not fired
+        video.addEventListener(status, playPausedHandlers[status]);
+      }
+      setTimeout(sendSongInfo, 200);
+    });
+
+    const video = $('video')!;
+    for (const status of ['playing', 'pause'] as const) {
+      video.addEventListener(status, playPausedHandlers[status]);
+    }
+
+    function sendSongInfo() {
+      const data = apiEvent.detail.getPlayerResponse();
+
+      data.videoDetails.album = $$<HTMLAnchorElement>(
+        '.byline.ytmusic-player-bar > .yt-simple-endpoint',
+      ).find((e) =>
+        e.href?.includes('browse/FEmusic_library_privately_owned_release')
+        || e.href?.includes('browse/MPREb'),
+      )?.textContent;
+
+      data.videoDetails.elapsedSeconds = 0;
+      data.videoDetails.isPaused = false;
+      ipcRenderer.send('video-src-changed', JSON.stringify(data));
+    }
+  }, { once: true, passive: true });
+};

providers/song-info.ts

@@ -1,13 +1,28 @@
-const { ipcMain, nativeImage, net } = require('electron');
+import { BrowserWindow, ipcMain, nativeImage, net } from 'electron';
 
-const config = require('../config');
-const { cache } = require('../providers/decorators');
+import { cache } from './decorators';
+
+import config from '../config';
+import { GetPlayerResponse } from '../types/get-player-response';
+
+export interface SongInfo {
+  title: string;
+  artist: string;
+  views: number;
+  uploadDate: string;
+  imageSrc?: string | null;
+  image?: Electron.NativeImage | null;
+  isPaused?: boolean;
+  songDuration: number;
+  elapsedSeconds: number;
+  url: string;
+  album?: string | null;
+  videoId: string;
+  playlistId: string;
+}
 
 // Fill songInfo with empty values
-/**
- * @typedef {songInfo} SongInfo
- */
-const songInfo = {
+export const songInfo: SongInfo = {
   title: '',
   artist: '',
   views: 0,
@@ -24,11 +39,9 @@ const songInfo = {
 };
 
 // Grab the native image using the src
-const getImage = cache(
-  /**
-   * @returns {Promise<Electron.NativeImage>}
-   */
-  async (src) => {
+export const getImage = cache(
+  async (src: string): Promise<Electron.NativeImage> => {
+
     const result = await net.fetch(src);
     const buffer = await result.arrayBuffer();
     const output = nativeImage.createFromBuffer(Buffer.from(buffer));
@@ -40,8 +53,8 @@ const getImage = cache(
   },
 );
 
-const handleData = async (responseText, win) => {
-  const data = JSON.parse(responseText);
+const handleData = async (responseText: string, win: Electron.BrowserWindow) => {
+  const data = JSON.parse(responseText) as GetPlayerResponse;
   if (!data) {
     return;
   }
@@ -50,7 +63,7 @@ const handleData = async (responseText, win) => {
   if (microformat) {
     songInfo.uploadDate = microformat.uploadDate;
     songInfo.url = microformat.urlCanonical?.split('&')[0];
-    songInfo.playlistId = new URL(microformat.urlCanonical).searchParams.get('list');
+    songInfo.playlistId = new URL(microformat.urlCanonical).searchParams.get('list') ?? '';
     // Used for options.resumeOnStart
     config.set('url', microformat.urlCanonical);
   }
@@ -59,8 +72,8 @@ const handleData = async (responseText, win) => {
   if (videoDetails) {
     songInfo.title = cleanupName(videoDetails.title);
     songInfo.artist = cleanupName(videoDetails.author);
-    songInfo.views = videoDetails.viewCount;
-    songInfo.songDuration = videoDetails.lengthSeconds;
+    songInfo.views = Number(videoDetails.viewCount);
+    songInfo.songDuration = Number(videoDetails.lengthSeconds);
     songInfo.elapsedSeconds = videoDetails.elapsedSeconds;
     songInfo.isPaused = videoDetails.isPaused;
     songInfo.videoId = videoDetails.videoId;
@@ -68,33 +81,26 @@ const handleData = async (responseText, win) => {
 
     const thumbnails = videoDetails.thumbnail?.thumbnails;
     songInfo.imageSrc = thumbnails.at(-1)?.url.split('?')[0];
-    songInfo.image = await getImage(songInfo.imageSrc);
+    if (songInfo.imageSrc) songInfo.image = await getImage(songInfo.imageSrc);
 
     win.webContents.send('update-song-info', JSON.stringify(songInfo));
   }
 };
 
 // This variable will be filled with the callbacks once they register
-const callbacks = [];
+type SongInfoCallback = (songInfo: SongInfo, event: string) => void;
+const callbacks: SongInfoCallback[] = [];
 
 // This function will allow plugins to register callback that will be triggered when data changes
-/**
- * @callback songInfoCallback
- * @param {songInfo} songInfo
- * @returns {void}
- */
-/**
- * @param {songInfoCallback} callback
- */
-const registerCallback = (callback) => {
+const registerCallback = (callback: SongInfoCallback) => {
   callbacks.push(callback);
 };
 
 let handlingData = false;
 
-const registerProvider = (win) => {
+const registerProvider = (win: BrowserWindow) => {
   // This will be called when the song-info-front finds a new request with song data
-  ipcMain.on('video-src-changed', async (_, responseText) => {
+  ipcMain.on('video-src-changed', async (_, responseText: string) => {
     handlingData = true;
     await handleData(responseText, win);
     handlingData = false;
@@ -102,7 +108,7 @@ const registerProvider = (win) => {
       c(songInfo, 'video-src-changed');
     }
   });
-  ipcMain.on('playPaused', (_, { isPaused, elapsedSeconds }) => {
+  ipcMain.on('playPaused', (_, { isPaused, elapsedSeconds }: { isPaused: boolean, elapsedSeconds: number }) => {
     songInfo.isPaused = isPaused;
     songInfo.elapsedSeconds = elapsedSeconds;
     if (handlingData) {
@@ -122,7 +128,7 @@ const suffixesToRemove = [
   ' (clip officiel)',
 ];
 
-function cleanupName(name) {
+export function cleanupName(name: string): string {
   if (!name) {
     return name;
   }
@@ -138,7 +144,5 @@ function cleanupName(name) {
   return name;
 }
 
-module.exports = registerCallback;
-module.exports.setupSongInfo = registerProvider;
-module.exports.getImage = getImage;
-module.exports.cleanupName = cleanupName;
+export default registerCallback;
+export const setupSongInfo = registerProvider;