Plugin: Captions Selector

plugins/captions-selector/back.js

@@ -0,0 +1,15 @@
+const { ipcMain, dialog } = require("electron");
+
+module.exports = () => {
+	ipcMain.handle('captionsSelector', async (_, captionLabels, currentIndex) => {
+         return await dialog.showMessageBox({
+            type: "question",
+            buttons: captionLabels,
+            defaultId: currentIndex,
+            title: "Choose Caption",
+            message: "Choose Caption:",
+            detail: `Current Caption: ${captionLabels[currentIndex]}`,
+            cancelId: -1
+        })
+    })
+};

plugins/captions-selector/front.js

@@ -0,0 +1,31 @@
+const { ElementFromFile, templatePath } = require("../utils");
+const { ipcRenderer } = require("electron");
+
+const captionsSettingsButton = ElementFromFile(
+    templatePath(__dirname, "captionsSettingsTemplate.html")
+);
+
+module.exports = () => {
+    document.addEventListener('apiLoaded', setup, { once: true, passive: true });
+}
+
+function setup(event) {
+    const api = event.detail;
+
+    document.querySelector('.right-controls-buttons').append(captionsSettingsButton);
+
+    captionsSettingsButton.onclick = function chooseQuality() {
+        api.pauseVideo();
+
+        const currentCaptionTrack = api.getOption("captions", "track");
+        const captionTrackList = api.getOption("captions", "tracklist");
+
+        const currentIndex = captionTrackList.indexOf(captionTrackList.find(track => track.languageCode === currentCaptionTrack.languageCode));
+
+        ipcRenderer.invoke('captionsSelector', captionTrackList.map(track => track.displayName), currentIndex).then(promise => {
+            if (promise.response === -1) return;
+            const newCaptions = captionTrackList[promise.response];
+            api.setOption("captions", "track", { languageCode: newCaptions.languageCode });
+        });
+    }
+}

plugins/captions-selector/templates/captionsSettingsTemplate.html

@@ -0,0 +1,13 @@
+<tp-yt-paper-icon-button class="player-captions-button style-scope ytmusic-player" icon="yt-icons:subtitles"
+    title="Open captions selector" aria-label="Open captions selector" role="button" tabindex="0" aria-disabled="false">
+    <tp-yt-iron-icon id="icon" class="style-scope tp-yt-paper-icon-button"><svg viewBox="0 0 24 24"
+            preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon"
+            style="pointer-events: none; display: block; width: 100%; height: 100%;">
+            <g class="style-scope yt-icon">
+                <path
+					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"
+					class="style-scope tp-yt-iron-icon"></path>
+            </g>
+        </svg>
+    </tp-yt-iron-icon>
+</tp-yt-paper-icon-button>