youtube-music/plugins/captions-selector/front.js

const { ipcRenderer } = require('electron');

const configProvider = require('./config');

const { ElementFromFile, templatePath } = require('../utils');

let config;

function $(selector) {
  return document.querySelector(selector);
}

const captionsSettingsButton = ElementFromFile(
  templatePath(__dirname, 'captions-settings-template.html'),
);

module.exports = async () => {
  config = await configProvider.getAll();

  configProvider.subscribeAll((newConfig) => {
    config = newConfig;
  });
  document.addEventListener('apiLoaded', (event) => setup(event.detail), { once: true, passive: true });
};

function setup(api) {
  $('.right-controls-buttons').append(captionsSettingsButton);

  let captionTrackList = api.getOption('captions', 'tracklist');

  $('video').addEventListener('srcChanged', async () => {
    if (config.disableCaptions) {
      setTimeout(() => api.unloadModule('captions'), 100);
      captionsSettingsButton.style.display = 'none';
      return;
    }

    api.loadModule('captions');

    setTimeout(async () => {
      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('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);
      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());
    }
  });
}