feat: typescript part 1

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

plugins/picture-in-picture/back.ts

@@ -1,28 +1,35 @@
-const path = require('node:path');
+import path from 'node:path';
 
-const { app, ipcMain } = require('electron');
+import { app, BrowserWindow, ipcMain } from 'electron';
 
-const { setOptions } = require('../../config/plugins');
-const { injectCSS } = require('../utils');
+import { setOptions as setPluginOptions } from '../../config/plugins';
+import { injectCSS } from '../utils';
+
+import config from '../../config';
 
 let isInPiP = false;
-let originalPosition;
-let originalSize;
-let originalFullScreen;
-let originalMaximized;
+let originalPosition: number[];
+let originalSize: number[];
+let originalFullScreen: boolean;
+let originalMaximized: boolean;
 
-let win;
-let options;
+let win: BrowserWindow;
+
+// Magic of TypeScript
+const PiPOptionsObj = config.get('plugins.picture-in-picture');
+type PiPOptions = typeof PiPOptionsObj;
+
+let options: Partial<PiPOptions>;
 
 const pipPosition = () => (options.savePosition && options['pip-position']) || [10, 10];
 const pipSize = () => (options.saveSize && options['pip-size']) || [450, 275];
 
-const setLocalOptions = (_options) => {
+const setLocalOptions = (_options: Partial<PiPOptions>) => {
   options = { ...options, ..._options };
-  setOptions('picture-in-picture', _options);
+  setPluginOptions('picture-in-picture', _options);
 };
 
-const togglePiP = async () => {
+const togglePiP = () => {
   isInPiP = !isInPiP;
   setLocalOptions({ isInPiP });
 
@@ -82,7 +89,7 @@ const togglePiP = async () => {
   win.setWindowButtonVisibility?.(!isInPiP);
 };
 
-const blockShortcutsInPiP = (event, input) => {
+const blockShortcutsInPiP = (event: Electron.Event, input: Electron.Input) => {
   const key = input.key.toLowerCase();
 
   if (key === 'f') {
@@ -93,14 +100,14 @@ const blockShortcutsInPiP = (event, input) => {
   }
 };
 
-module.exports = (_win, _options) => {
+export default (_win: BrowserWindow, _options: PiPOptions) => {
   options ??= _options;
   win ??= _win;
   setLocalOptions({ isInPiP });
   injectCSS(win.webContents, path.join(__dirname, 'style.css'));
-  ipcMain.on('picture-in-picture', async () => {
-    await togglePiP();
+  ipcMain.on('picture-in-picture', () => {
+    togglePiP();
   });
 };
 
-module.exports.setOptions = setLocalOptions;
+export const setOptions = setLocalOptions;

plugins/picture-in-picture/front.ts

@@ -1,6 +1,6 @@
-const { ipcRenderer } = require('electron');
-const { toKeyEvent } = require('keyboardevent-from-electron-accelerator');
-const keyEventAreEqual = require('keyboardevents-areequal');
+import { ipcRenderer } from 'electron';
+import { toKeyEvent } from 'keyboardevent-from-electron-accelerator';
+import keyEventAreEqual from 'keyboardevents-areequal';
 
 const { getSongMenu } = require('../../providers/dom-elements');
 const { ElementFromFile, templatePath } = require('../utils');

plugins/picture-in-picture/menu.ts

@@ -1,6 +1,6 @@
 const prompt = require('custom-electron-prompt');
 
-const { setOptions } = require('./back.js');
+const { setOptions } = require('./back.ts');
 
 const promptOptions = require('../../providers/prompt-options');