QOL: Move source code under the src directory. (#1318)

src/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,
+  ));
+};

src/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;

src/plugins/captions-selector/front.ts

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/await-thenable */
+/* renderer */
+
+import { ipcRenderer } from 'electron';
+
+import configProvider from './config';
+
+import CaptionsSettingsButtonHTML from './templates/captions-settings-template.html';
+
+import { ElementFromHtml } from '../utils';
+import { YoutubePlayer } from '../../types/youtube-player';
+
+import type { ConfigType } from '../../config/dynamic';
+
+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 = ElementFromHtml(CaptionsSettingsButtonHTML);
+
+export default async () => {
+  // RENDERER
+  config = await configProvider.getAll();
+
+  configProvider.subscribeAll((newConfig) => {
+    config = newConfig;
+  });
+  document.addEventListener('apiLoaded', (event) => setup(event.detail), { once: true, passive: true });
+};
+
+function setup(api: YoutubePlayer) {
+  $('.right-controls-buttons').append(captionsSettingsButton);
+
+  let captionTrackList = api.getOption<LanguageOptions[]>('captions', 'tracklist') ?? [];
+
+  $('video').addEventListener('srcChanged', () => {
+    if (config.disableCaptions) {
+      setTimeout(() => api.unloadModule('captions'), 100);
+      captionsSettingsButton.style.display = 'none';
+      return;
+    }
+
+    api.loadModule('captions');
+
+    setTimeout(() => {
+      captionTrackList = api.getOption('captions', 'tracklist') ?? [];
+
+      if (config.autoload && config.lastCaptionsCode) {
+        api.setOption('captions', 'track', {
+          languageCode: config.lastCaptionsCode,
+        });
+      }
+
+      captionsSettingsButton.style.display = captionTrackList?.length
+        ? 'inline-block'
+        : 'none';
+    }, 250);
+  });
+
+  captionsSettingsButton.addEventListener('click', async () => {
+    if (captionTrackList?.length) {
+      const currentCaptionTrack = api.getOption<LanguageOptions>('captions', 'track')!;
+      let currentIndex = currentCaptionTrack
+        ? captionTrackList.indexOf(captionTrackList.find((track) => track.languageCode === currentCaptionTrack.languageCode)!)
+        : null;
+
+      const captionLabels = [
+        ...captionTrackList.map((track) => track.displayName),
+        'None',
+      ];
+
+      currentIndex = await ipcRenderer.invoke('captionsSelector', captionLabels, currentIndex) as number;
+      if (currentIndex === null) {
+        return;
+      }
+
+      const newCaptions = captionTrackList[currentIndex];
+      configProvider.set('lastCaptionsCode', newCaptions?.languageCode);
+      if (newCaptions) {
+        api.setOption('captions', 'track', { languageCode: newCaptions.languageCode });
+      } else {
+        api.setOption('captions', 'track', {});
+      }
+
+      setTimeout(() => api.playVideo());
+    }
+  });
+}

src/plugins/captions-selector/menu.ts

@@ -0,0 +1,22 @@
+import config from './config';
+
+import { MenuTemplate } from '../../menu';
+
+export default (): MenuTemplate => [
+  {
+    label: 'Automatically select last used caption',
+    type: 'checkbox',
+    checked: config.get('autoload'),
+    click(item) {
+      config.set('autoload', item.checked);
+    },
+  },
+  {
+    label: 'No captions by default',
+    type: 'checkbox',
+    checked: config.get('disableCaptions'),
+    click(item) {
+      config.set('disableCaptions', item.checked);
+    },
+  },
+];

src/plugins/captions-selector/templates/captions-settings-template.html

@@ -0,0 +1,17 @@
+<tp-yt-paper-icon-button aria-disabled="false" aria-label="Open captions selector"
+                         class="player-captions-button style-scope ytmusic-player" icon="yt-icons:subtitles"
+                         role="button" tabindex="0"
+                         title="Open captions selector">
+  <tp-yt-iron-icon class="style-scope tp-yt-paper-icon-button" id="icon">
+    <svg class="style-scope yt-icon"
+         focusable="false" preserveAspectRatio="xMidYMid meet"
+         style="pointer-events: none; display: block; width: 100%; height: 100%;"
+         viewBox="0 0 24 24">
+      <g class="style-scope yt-icon">
+        <path
+          class="style-scope tp-yt-iron-icon"
+          d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-9 6H8v4h3v2H8c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2h3v2zm7 0h-3v4h3v2h-3c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2h3v2z"></path>
+      </g>
+    </svg>
+  </tp-yt-iron-icon>
+</tp-yt-paper-icon-button>