Add Invidious Listen (audio only) option

This commit adds an option which allows using the Invidious 'Audio Only' mode (called 'Listen' on the Invidious interface), with support for both URL redirect and cookie persistence.

Useful for folks that want to save bandwidth across multiple Invidious instances without manually setting cookies for every instance!

src/_locales/en/messages.json

@@ -91,6 +91,10 @@
     "message": "Invidious dark mode always on",
     "description": "Label for 'Invidious dark mode always on' option (options)."
   },
+  "invidiousListenMode": {
+    "message": "Invidious listen (audio only) by default",
+    "description": "Label for 'Invidious listen (audio only) by default' option (options)."
+  },
   "persistInvidiousPrefs": {
     "message": "Persist Invidious preferences (as cookie)",
     "description": "Label for 'Persist Invidious preferences (as cookie)' option (options)."

src/assets/javascripts/persist-invidious-prefs.js

@@ -17,13 +17,14 @@ function getCookie() {
 }
 
 browser.storage.sync.get(
-  ["alwaysProxy", "videoQuality", "invidiousDarkMode", "persistInvidiousPrefs"],
+  ["alwaysProxy", "videoQuality", "invidiousDarkMode", "invidiousListenMode", "persistInvidiousPrefs"],
   (result) => {
     if (result.persistInvidiousPrefs) {
       const prefs = getCookie();
       prefs.local = result.alwaysProxy;
       prefs.quality = result.videoQuality;
       prefs.dark_mode = result.invidiousDarkMode;
+      prefs.listen = result.invidiousListenMode;
       document.cookie = `PREFS=${encodeURIComponent(JSON.stringify(prefs))}`;
     }
   }

src/pages/background/background.js

@@ -58,6 +58,7 @@ let alwaysProxy;
 let onlyEmbeddedVideo;
 let videoQuality;
 let invidiousDarkMode;
+let invidiousListenMode;
 let invidiousVolume;
 let invidiousPlayerStyle;
 let invidiousSubtitles;
@@ -92,6 +93,7 @@ browser.storage.sync.get(
     "onlyEmbeddedVideo",
     "videoQuality",
     "invidiousDarkMode",
+    "invidiousListenMode",
     "invidiousVolume",
     "invidiousPlayerStyle",
     "invidiousSubtitles",
@@ -124,6 +126,7 @@ browser.storage.sync.get(
     onlyEmbeddedVideo = result.onlyEmbeddedVideo;
     videoQuality = result.videoQuality;
     invidiousDarkMode = result.invidiousDarkMode;
+    invidiousListenMode = result.invidiousListenMode;
     exceptions = result.exceptions
       ? result.exceptions.map((e) => {
           return new RegExp(e);
@@ -208,6 +211,9 @@ browser.storage.onChanged.addListener((changes) => {
   if ("invidiousDarkMode" in changes) {
     invidiousDarkMode = changes.invidiousDarkMode.newValue;
   }
+  if ("invidiousListenMode" in changes) {
+    invidiousListenMode = changes.invidiousListenMode.newValue;
+  }
   if ("invidiousVolume" in changes) {
     invidiousVolume = changes.invidiousVolume.newValue;
   }
@@ -286,6 +292,9 @@ function redirectYouTube(url, initiator, type) {
   if (invidiousDarkMode) {
     url.searchParams.append("dark_mode", invidiousDarkMode);
   }
+  if (invidiousListenMode) {
+    url.searchParams.append("listen", invidiousListenMode);
+  }
   if (invidiousVolume) {
     url.searchParams.append("volume", invidiousVolume);
   }

src/pages/options/options.html

@@ -420,6 +420,29 @@
             </tbody>
           </table>
         </section>
+        <section class="settings-block">
+          <table class="option" aria-label="Invidious listen (audio only) by default">
+            <tbody>
+              <tr>
+                <td>
+                  <h1 data-localise="__MSG_invidiousListenMode__">
+                    Invidious listen (audio only) by default
+                  </h1>
+                </td>
+                <td>
+                  <input
+                    aria-hidden="true"
+                    id="invidious-listen-mode"
+                    type="checkbox"
+                    checked
+                  />&nbsp;
+                  <label for="invidious-listen-mode" class="checkbox-label">
+                  </label>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
         <section class="settings-block">
           <h1 data-localise="__MSG_invidiousVolume__">
             Invidious Volume

src/pages/options/options.js

@@ -58,6 +58,7 @@ let onlyEmbeddedVideo = document.getElementById("only-embed");
 let videoQuality = document.getElementById("video-quality");
 let removeTwitterSW = document.getElementById("remove-twitter-sw");
 let invidiousDarkMode = document.getElementById("invidious-dark-mode");
+let invidiousListenMode = document.getElementById("invidious-listen-mode");
 let persistInvidiousPrefs = document.getElementById("persist-invidious-prefs");
 let invidiousVolume = document.getElementById("invidious-volume");
 let invidiousPlayerStyle = document.getElementById("invidious-player-style");
@@ -119,6 +120,7 @@ browser.storage.sync.get(
     "videoQuality",
     "removeTwitterSW",
     "invidiousDarkMode",
+    "invidiousListenMode",
     "persistInvidiousPrefs",
     "invidiousVolume",
     "invidiousPlayerStyle",
@@ -156,6 +158,7 @@ browser.storage.sync.get(
     videoQuality.value = result.videoQuality || "";
     removeTwitterSW.checked = !result.removeTwitterSW;
     invidiousDarkMode.checked = result.invidiousDarkMode;
+    invidiousListenMode.checked = result.invidiousListenMode;
     persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
     exceptions = result.exceptions || [];
     exceptions.forEach(prependExceptionsItem);
@@ -403,6 +406,10 @@ invidiousDarkMode.addEventListener("change", (event) => {
   browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
 });
 
+invidiousListenMode.addEventListener("change", (event) => {
+  browser.storage.sync.set({ invidiousListenMode: event.target.checked });
+});
+
 persistInvidiousPrefs.addEventListener("change", (event) => {
   browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
 });