Merge pull request #866 from LetrixZ/master

Add Captions selector

config/defaults.js

@@ -91,6 +91,10 @@ const defaultConfig = {
 			"saveSize": false,
 			"hotkey": "P"
 		},
+		"captions-selector": {
+			enabled: false,
+			disableCaptions: false
+		},
 		"skip-silences": {
 			onlySkipBeginning: false,
 		},

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,60 @@
+const { ElementFromFile, templatePath } = require("../utils");
+const { ipcRenderer } = require("electron");
+
+function $(selector) { return document.querySelector(selector); }
+
+const captionsSettingsButton = ElementFromFile(
+    templatePath(__dirname, "captionsSettingsTemplate.html")
+);
+
+module.exports = (options) => {
+    document.addEventListener('apiLoaded', (event) => setup(event, options), { once: true, passive: true });
+}
+
+/**
+ * If captions are disabled by default,
+ * unload "captions" module when video changes.
+ */
+const videoChanged = (api, options) => {
+    if (options.disableCaptions) {
+        setTimeout(() => api.unloadModule("captions"), 100);
+    }
+}
+
+function setup(event, options) {
+    const api = event.detail;
+
+    $("video").addEventListener("srcChanged", () => videoChanged(api, options));
+
+    $(".right-controls-buttons").append(captionsSettingsButton);
+
+    captionsSettingsButton.onclick = function chooseQuality() {
+        api.loadModule("captions");
+
+        const captionTrackList = api.getOption("captions", "tracklist");
+
+        if (captionTrackList?.length) {
+            const currentCaptionTrack = api.getOption("captions", "track");
+            const currentIndex = captionTrackList.indexOf(captionTrackList.find(track => track.languageCode === currentCaptionTrack.languageCode));
+
+            const captionLabels = [
+                ...captionTrackList.map(track => track.displayName),
+                'None'
+            ];
+
+            ipcRenderer.invoke('captionsSelector', captionLabels, currentIndex).then(promise => {
+                if (promise.response === -1) return;
+
+                const newCaptions = captionTrackList[promise.response];
+                if (newCaptions) {
+                    api.loadModule("captions");
+                    api.setOption("captions", "track", { languageCode: newCaptions.languageCode });
+                } else {
+                    api.unloadModule("captions");
+                }
+
+                setTimeout(() => api.playVideo());
+            });
+        }
+    }
+}

plugins/captions-selector/menu.js

@@ -0,0 +1,12 @@
+const { setOptions } = require('../../config/plugins');
+
+module.exports = (_win, options) => [
+    {
+        label: "No captions by default",
+        type: "checkbox",
+        checked: options.disabledCaptions,
+        click: (item) => {
+            setOptions("captions-selector", { disableCaptions: item.checked });
+        },
+    }
+];

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>