feat: migration to TypeScript part 3

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

plugins/in-app-menu/back.js

@@ -1,23 +0,0 @@
-const path = require('node:path');
-
-const electronLocalshortcut = require('electron-localshortcut');
-const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
-
-const { injectCSS } = require('../utils');
-
-setupTitlebar();
-
-// Tracks menu visibility
-
-module.exports = (win) => {
-  // Css for custom scrollbar + disable drag area(was causing bugs)
-  injectCSS(win.webContents, path.join(__dirname, 'style.css'));
-
-  win.once('ready-to-show', () => {
-    attachTitlebarToWindow(win);
-
-    electronLocalshortcut.register(win, '`', () => {
-      win.webContents.send('toggleMenu');
-    });
-  });
-};

plugins/in-app-menu/back.ts

@@ -0,0 +1,27 @@
+import path from 'node:path';
+
+import { register } from 'electron-localshortcut';
+// eslint-disable-next-line import/no-unresolved
+import { attachTitlebarToWindow, setupTitlebar } from 'custom-electron-titlebar/main';
+
+import { BrowserWindow } from 'electron';
+
+import { injectCSS } from '../utils';
+
+
+setupTitlebar();
+
+// Tracks menu visibility
+
+module.exports = (win: BrowserWindow) => {
+  // Css for custom scrollbar + disable drag area(was causing bugs)
+  injectCSS(win.webContents, path.join(__dirname, 'style.css'));
+
+  win.once('ready-to-show', () => {
+    attachTitlebarToWindow(win);
+
+    register(win, '`', () => {
+      win.webContents.send('toggleMenu');
+    });
+  });
+};

plugins/in-app-menu/custom-electron-titlebar.d.ts

@@ -0,0 +1,9 @@
+declare module 'custom-electron-titlebar' {
+  // eslint-disable-next-line import/no-unresolved
+  import OriginalTitlebar from 'custom-electron-titlebar/dist/titlebar';
+  // eslint-disable-next-line import/no-unresolved
+  import { Color as OriginalColor } from 'custom-electron-titlebar/dist/vs/base/common/color';
+
+  export const Color: typeof OriginalColor;
+  export const Titlebar: typeof OriginalTitlebar;
+}

plugins/in-app-menu/front.js

@@ -1,78 +0,0 @@
-const { ipcRenderer } = require('electron');
-const { Titlebar, Color } = require('custom-electron-titlebar');
-
-const config = require('../../config');
-const { isEnabled } = require('../../config/plugins');
-
-function $(selector) {
-  return document.querySelector(selector);
-}
-
-module.exports = () => {
-  const visible = () => Boolean($('.cet-menubar').firstChild);
-  const bar = new Titlebar({
-    icon: 'https://cdn-icons-png.flaticon.com/512/5358/5358672.png',
-    backgroundColor: Color.fromHex('#050505'),
-    itemBackgroundColor: Color.fromHex('#1d1d1d'),
-    svgColor: Color.WHITE,
-    menu: config.get('options.hideMenu') ? null : undefined,
-  });
-  bar.updateTitle(' ');
-  document.title = 'Youtube Music';
-
-  const toggleMenu = () => {
-    if (visible()) {
-      bar.updateMenu(null);
-    } else {
-      bar.refreshMenu();
-    }
-  };
-
-  $('.cet-window-icon').addEventListener('click', toggleMenu);
-  ipcRenderer.on('toggleMenu', toggleMenu);
-
-  ipcRenderer.on('refreshMenu', () => {
-    if (visible()) {
-      bar.refreshMenu();
-    }
-  });
-
-  if (isEnabled('picture-in-picture')) {
-    ipcRenderer.on('pip-toggle', () => {
-      bar.refreshMenu();
-    });
-  }
-
-  // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
-  document.addEventListener('apiLoaded', () => {
-    setNavbarMargin();
-    const playPageObserver = new MutationObserver(setNavbarMargin);
-    playPageObserver.observe($('ytmusic-app-layout'), { attributeFilter: ['player-page-open_', 'playerPageOpen_'] });
-    setupSearchOpenObserver();
-    setupMenuOpenObserver();
-  }, { once: true, passive: true });
-};
-
-function setupSearchOpenObserver() {
-  const searchOpenObserver = new MutationObserver((mutations) => {
-    $('#nav-bar-background').style.webkitAppRegion
-      = mutations[0].target.opened ? 'no-drag' : 'drag';
-  });
-  searchOpenObserver.observe($('ytmusic-search-box'), { attributeFilter: ['opened'] });
-}
-
-function setupMenuOpenObserver() {
-  const menuOpenObserver = new MutationObserver(() => {
-    $('#nav-bar-background').style.webkitAppRegion
-      = [...$('.cet-menubar').childNodes].some((c) => c.classList.contains('open'))
-      ? 'no-drag' : 'drag';
-  });
-  menuOpenObserver.observe($('.cet-menubar'), { subtree: true, attributeFilter: ['class'] });
-}
-
-function setNavbarMargin() {
-  $('#nav-bar-background').style.right
-    = $('ytmusic-app-layout').playerPageOpen_
-    ? '0px'
-    : '12px';
-}

plugins/in-app-menu/front.ts

@@ -0,0 +1,96 @@
+import { ipcRenderer, Menu } from 'electron';
+// eslint-disable-next-line import/no-unresolved
+import { Color, Titlebar } from 'custom-electron-titlebar';
+
+import config from '../../config';
+import { isEnabled } from '../../config/plugins';
+
+function $(selector: string) {
+  return document.querySelector(selector);
+}
+
+module.exports = () => {
+  const visible = () => Boolean($('.cet-menubar')?.firstChild);
+  const bar = new Titlebar({
+    icon: 'https://cdn-icons-png.flaticon.com/512/5358/5358672.png',
+    backgroundColor: Color.fromHex('#050505'),
+    itemBackgroundColor: Color.fromHex('#1d1d1d') ,
+    svgColor: Color.WHITE,
+    menu: config.get('options.hideMenu') ? null as unknown as Menu : undefined,
+  });
+  bar.updateTitle(' ');
+  document.title = 'Youtube Music';
+
+  const toggleMenu = () => {
+    if (visible()) {
+      bar.updateMenu(null as unknown as Menu);
+    } else {
+      bar.refreshMenu();
+    }
+  };
+
+  $('.cet-window-icon')?.addEventListener('click', toggleMenu);
+  ipcRenderer.on('toggleMenu', toggleMenu);
+
+  ipcRenderer.on('refreshMenu', () => {
+    if (visible()) {
+      bar.refreshMenu();
+    }
+  });
+
+  if (isEnabled('picture-in-picture')) {
+    ipcRenderer.on('pip-toggle', () => {
+      bar.refreshMenu();
+    });
+  }
+
+  // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
+  document.addEventListener('apiLoaded', () => {
+    setNavbarMargin();
+    const playPageObserver = new MutationObserver(setNavbarMargin);
+    const appLayout = $('ytmusic-app-layout');
+    if (appLayout) {
+      playPageObserver.observe(appLayout, { attributeFilter: ['player-page-open_', 'playerPageOpen_'] });
+    }
+    setupSearchOpenObserver();
+    setupMenuOpenObserver();
+  }, { once: true, passive: true });
+};
+
+function setupSearchOpenObserver() {
+  const searchOpenObserver = new MutationObserver((mutations) => {
+    ($('#nav-bar-background') as HTMLElement)
+      .style
+      .setProperty(
+        '-webkit-app-region',
+        (mutations[0].target as HTMLElement & { opened: boolean }).opened ? 'no-drag' : 'drag',
+      );
+  });
+  const searchBox = $('ytmusic-search-box');
+  if (searchBox) {
+    searchOpenObserver.observe(searchBox, { attributeFilter: ['opened'] });
+  }
+}
+
+function setupMenuOpenObserver() {
+  const cetMenubar = $('.cet-menubar');
+  if (cetMenubar) {
+    const menuOpenObserver = new MutationObserver(() => {
+      ($('#nav-bar-background') as HTMLElement)
+        .style
+        .setProperty(
+          '-webkit-app-region',
+          Array.from(cetMenubar.childNodes).some((c) => (c as HTMLElement).classList.contains('open')) ? 'no-drag' : 'drag',
+        );
+    });
+    menuOpenObserver.observe(cetMenubar, { subtree: true, attributeFilter: ['class'] });
+  }
+}
+
+function setNavbarMargin() {
+  const navBarBackground = $('#nav-bar-background') as HTMLElement;
+  navBarBackground.style.right
+    = ($('ytmusic-app-layout') as HTMLElement & { playerPageOpen_: boolean }).playerPageOpen_
+    ? '0px'
+    : '12px';
+}