feat: migration to TypeScript part 2

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

plugins/captions-selector/back.js

@@ -1,19 +0,0 @@
-const { ipcMain } = require('electron');
-const prompt = require('custom-electron-prompt');
-
-const promptOptions = require('../../providers/prompt-options');
-
-module.exports = (win) => {
-  ipcMain.handle('captionsSelector', async (_, captionLabels, currentIndex) => await prompt(
-    {
-      title: 'Choose Caption',
-      label: `Current Caption: ${captionLabels[currentIndex] || 'None'}`,
-      type: 'select',
-      value: currentIndex,
-      selectOptions: captionLabels,
-      resizable: true,
-      ...promptOptions(),
-    },
-    win,
-  ));
-};

plugins/captions-selector/back.ts

@@ -0,0 +1,19 @@
+import { BrowserWindow, ipcMain } from 'electron';
+import prompt from 'custom-electron-prompt';
+
+import promptOptions from '../../providers/prompt-options';
+
+export default (win: BrowserWindow) => {
+  ipcMain.handle('captionsSelector', async (_, captionLabels: Record<string, string>, currentIndex: string) => await prompt(
+    {
+      title: 'Choose Caption',
+      label: `Current Caption: ${captionLabels[currentIndex] || 'None'}`,
+      type: 'select',
+      value: currentIndex,
+      selectOptions: captionLabels,
+      resizable: true,
+      ...promptOptions(),
+    },
+    win,
+  ));
+};

plugins/captions-selector/config.js

@@ -1,4 +0,0 @@
-const { PluginConfig } = require('../../config/dynamic');
-
-const config = new PluginConfig('captions-selector', { enableFront: true });
-module.exports = { ...config };

plugins/captions-selector/config.ts

@@ -0,0 +1,4 @@
+import { PluginConfig } from '../../config/dynamic';
+
+const config = new PluginConfig('captions-selector', { enableFront: true });
+export default { ...config } as PluginConfig<'captions-selector'>;

plugins/captions-selector/front.ts

@@ -1,20 +1,37 @@
-const { ipcRenderer } = require('electron');
+/* eslint-disable @typescript-eslint/await-thenable */
+/* renderer */
 
-const configProvider = require('./config');
+import { ipcRenderer } from 'electron';
 
-const { ElementFromFile, templatePath } = require('../utils');
+import configProvider from './config';
 
-let config;
+import { ElementFromFile, templatePath } from '../utils';
+import { YoutubePlayer } from '../../types/youtube-player';
+import { ConfigType } from '../../config/dynamic';
 
-function $(selector) {
-  return document.querySelector(selector);
+interface LanguageOptions {
+  displayName: string;
+  id: string | null;
+  is_default: boolean;
+  is_servable: boolean;
+  is_translateable: boolean;
+  kind: string;
+  languageCode: string; // 2 length
+  languageName: string;
+  name: string | null;
+  vss_id: string;
 }
 
+let config: ConfigType<'captions-selector'>;
+
+const $ = <Element extends HTMLElement>(selector: string): Element => document.querySelector(selector)!;
+
 const captionsSettingsButton = ElementFromFile(
   templatePath(__dirname, 'captions-settings-template.html'),
 );
 
-module.exports = async () => {
+export default async () => {
+  // RENDERER
   config = await configProvider.getAll();
 
   configProvider.subscribeAll((newConfig) => {
@@ -23,12 +40,12 @@ module.exports = async () => {
   document.addEventListener('apiLoaded', (event) => setup(event.detail), { once: true, passive: true });
 };
 
-function setup(api) {
+function setup(api: YoutubePlayer) {
   $('.right-controls-buttons').append(captionsSettingsButton);
 
-  let captionTrackList = api.getOption('captions', 'tracklist');
+  let captionTrackList = api.getOption<LanguageOptions[]>('captions', 'tracklist') ?? [];
 
-  $('video').addEventListener('srcChanged', async () => {
+  $('video').addEventListener('srcChanged', () => {
     if (config.disableCaptions) {
       setTimeout(() => api.unloadModule('captions'), 100);
       captionsSettingsButton.style.display = 'none';
@@ -37,8 +54,8 @@ function setup(api) {
 
     api.loadModule('captions');
 
-    setTimeout(async () => {
-      captionTrackList = api.getOption('captions', 'tracklist');
+    setTimeout(() => {
+      captionTrackList = api.getOption('captions', 'tracklist') ?? [];
 
       if (config.autoload && config.lastCaptionsCode) {
         api.setOption('captions', 'track', {
@@ -54,9 +71,9 @@ function setup(api) {
 
   captionsSettingsButton.addEventListener('click', async () => {
     if (captionTrackList?.length) {
-      const currentCaptionTrack = api.getOption('captions', 'track');
+      const currentCaptionTrack = api.getOption<LanguageOptions>('captions', 'track')!;
       let currentIndex = currentCaptionTrack
-        ? captionTrackList.indexOf(captionTrackList.find((track) => track.languageCode === currentCaptionTrack.languageCode))
+        ? captionTrackList.indexOf(captionTrackList.find((track) => track.languageCode === currentCaptionTrack.languageCode)!)
         : null;
 
       const captionLabels = [
@@ -64,7 +81,7 @@ function setup(api) {
         'None',
       ];
 
-      currentIndex = await ipcRenderer.invoke('captionsSelector', captionLabels, currentIndex);
+      currentIndex = await ipcRenderer.invoke('captionsSelector', captionLabels, currentIndex) as number;
       if (currentIndex === null) {
         return;
       }

plugins/captions-selector/menu.ts

@@ -1,6 +1,8 @@
-const config = require('./config');
+import config from './config';
 
-module.exports = () => [
+import { MenuTemplate } from '../../menu';
+
+export default (): MenuTemplate => [
   {
     label: 'Automatically select last used caption',
     type: 'checkbox',