Added more invidious settings #142 #147

src/assets/javascripts/helpers/youtube/options.js

@@ -66,6 +66,21 @@ export const getInvidiousVrMode = () => invidiousVrMode;
 export let invidiousSavePlayerPos;
 export const getInvidiousSavePlayerPos = () => invidiousSavePlayerPos;
 
+export let invidiousRegion;
+export const getInvidiousRegion = () => invidiousRegion;
+
+export let invidiousDarkMode;
+export const getInvidiousDarkMode = () => invidiousDarkMode;
+
+export let invidiousThinMode;
+export const getInvidiousThinMode = () => invidiousThinMode;
+
+export let invidiousDefaultHome;
+export const getInvidiousDefaultHome = () => invidiousDefaultHome;
+
+export let invidiousFeedMenuList;
+export const getInvidiousFeedMenuList = () => invidiousFeedMenuList;
+
 export let pipedBufferGoal;
 export const getPipedBufferGoal = () => pipedBufferGoal;
 
@@ -105,7 +120,6 @@ export const getPipedWatchHistory = () => pipedWatchHistory;
 export let pipedMaterialSkipToLastPoint;
 export const getPipedMaterialSkipToLastPoint = () => pipedMaterialSkipToLastPoint;
 
-
 export async function initOptions() {
     return new Promise(
         resolve => {
@@ -131,6 +145,11 @@ export async function initOptions() {
                     "invidiousExtendDesc",
                     "invidiousVrMode",
                     "invidiousSavePlayerPos",
+                    "invidiousRegion",
+                    "invidiousDarkMode",
+                    "invidiousThinMode",
+                    "invidiousDefaultHome",
+                    "invidiousFeedMenuList",
 
                     "pipedBufferGoal",
                     "pipedComments",
@@ -169,6 +188,12 @@ export async function initOptions() {
                     invidiousVrMode = r.invidiousVrMode ?? true;
                     invidiousSavePlayerPos = r.invidiousSavePlayerPos ?? false;
 
+                    invidiousRegion = r.invidiousRegion ?? 'US';
+                    invidiousDarkMode = r.invidiousDarkMode ?? '';
+                    invidiousThinMode = r.invidiousThinMode ?? false;
+                    invidiousDefaultHome = r.invidiousDefaultHome ?? 'Popular';
+                    invidiousFeedMenuList = r.invidiousFeedMenuList ?? ['Popular', 'Trending'];
+
                     pipedBufferGoal = r.pipedBufferGoal ?? 300;
                     pipedComments = r.pipedComments ?? true;
                     pipedDisableLBRY = r.pipedDisableLBRY ?? false;

src/assets/javascripts/helpers/youtube/youtube.js

@@ -20,6 +20,11 @@ import {
   invidiousExtendDesc, getInvidiousExtendDesc,
   invidiousVrMode, getInvidiousVrMode,
   invidiousSavePlayerPos, getInvidiousSavePlayerPos,
+  invidiousRegion, getInvidiousRegion,
+  invidiousDarkMode, getInvidiousDarkMode,
+  invidiousThinMode, getInvidiousThinMode,
+  invidiousDefaultHome, getInvidiousDefaultHome,
+  invidiousFeedMenuList, getInvidiousFeedMenuList,
   getPipedBufferGoal,
   getPipedComments,
   getPipedDisableLBRY,
@@ -502,7 +507,6 @@ function initInvidiousCookies() {
           }
 
           prefs.local = invidiousAlwaysProxy;
-          prefs.dark_mode = theme;
           prefs.video_loop = invidiousVideoLoop;
           prefs.continue_autoplay = invidiousContinueAutoplay;
           prefs.continue = invidiousContinue;
@@ -511,15 +515,8 @@ function initInvidiousCookies() {
           prefs.quality = invidiousQuality;
           prefs.quality_dash = invidiousQualityDash;
 
-          prefs.comments = [];
+          prefs.comments = invidiousComments;
-          prefs.comments[0] = invidiousComments[0];
+          prefs.captions = invidiousCaptions;
-          prefs.comments[1] = invidiousComments[1];
-
-
-          prefs.captions = [];
-          prefs.captions[0] = invidiousCaptions[0];
-          prefs.captions[1] = invidiousCaptions[1];
-          prefs.captions[2] = invidiousCaptions[2];
 
           prefs.related_videos = invidiousRelatedVideos;
           prefs.annotations = invidiousAnnotations
@@ -531,6 +528,12 @@ function initInvidiousCookies() {
           prefs.player_style = invidiousPlayerStyle;
           prefs.autoplay = youtubeAutoplay;
 
+          prefs.region = invidiousRegion;
+          prefs.dark_mode = invidiousDarkMode;
+          prefs.thin_mode = invidiousThinMode;
+          prefs.default_home = invidiousDefaultHome;
+          prefs.feed_menu = invidiousFeedMenuList;
+
           browser.cookies.set({
             url: instanceUrl,
             name: "PREFS",
@@ -645,6 +648,11 @@ export default {
   getInvidiousQuality,
   getInvidiousPlayerStyle,
   getInvidiousVideoLoop,
+  getInvidiousRegion,
+  getInvidiousDarkMode,
+  getInvidiousThinMode,
+  getInvidiousDefaultHome,
+  getInvidiousFeedMenuList,
 
   getDisable,
   setDisable,

src/pages/options/youtube/invidious.js

@@ -1,98 +1,122 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let invidiousElement = document.getElementById('invidious');
+let invidious = document.getElementById('invidious');
-let invidiousAlwaysProxyElement = invidiousElement.getElementsByClassName("local")[0];
+let alwaysProxy = invidious.getElementsByClassName("local")[0];
-let invidiousPlayerStyleElement = invidiousElement.getElementsByClassName("player_style")[0];
+let playerStyle = invidious.getElementsByClassName("player_style")[0];
-let invidiousQualityElement = invidiousElement.getElementsByClassName("quality")[0];
+let quality = invidious.getElementsByClassName("quality")[0];
-let invidiousVideoLoopElement = invidiousElement.getElementsByClassName("video_loop")[0];
+let videoLoop = invidious.getElementsByClassName("video_loop")[0];
-let invidiousContinueAutoplayElement = invidiousElement.getElementsByClassName("continue_autoplay")[0];
+let continueAutoplay = invidious.getElementsByClassName("continue_autoplay")[0];
-let invidiousContinueElement = invidiousElement.getElementsByClassName("continue")[0];
+let invidiousContinue = invidious.getElementsByClassName("continue")[0];
-let youtubeListenElement = invidiousElement.getElementsByClassName("listen")[0];
+let youtubeListen = invidious.getElementsByClassName("listen")[0];
-let invidiousSpeedElement = invidiousElement.getElementsByClassName("speed")[0];
+let speed = invidious.getElementsByClassName("speed")[0];
-let invidiousQualityDashElement = invidiousElement.getElementsByClassName("quality_dash")[0];
+let qualityDash = invidious.getElementsByClassName("quality_dash")[0];
-let invidiousRelatedVideoElement = invidiousElement.getElementsByClassName("related_videos")[0];
+let relatedVideo = invidious.getElementsByClassName("related_videos")[0];
-let invidiousAnnotationsElement = invidiousElement.getElementsByClassName("annotations")[0];
+let annotations = invidious.getElementsByClassName("annotations")[0];
-let invidiousExtendDescElement = invidiousElement.getElementsByClassName("extend_desc")[0];
+let extendDesc = invidious.getElementsByClassName("extend_desc")[0];
-let invidiousVrModeElement = invidiousElement.getElementsByClassName("vr_mode")[0];
+let vrMode = invidious.getElementsByClassName("vr_mode")[0];
-let invidiousSavePlayerPosElement = invidiousElement.getElementsByClassName("save_player_pos")[0];
+let savePlayerPos = invidious.getElementsByClassName("save_player_pos")[0];
-let invidiousComments0Element = invidiousElement.getElementsByClassName("comments[0]")[0];
+let comments0 = invidious.getElementsByClassName("comments[0]")[0];
-let invidiousComments1Element = invidiousElement.getElementsByClassName("comments[1]")[0];
+let comments1 = invidious.getElementsByClassName("comments[1]")[0];
-let invidiousCaptions0Element = invidiousElement.getElementsByClassName("captions[0]")[0];
+let captions0 = invidious.getElementsByClassName("captions[0]")[0];
-let invidiousCaptions1Element = invidiousElement.getElementsByClassName("captions[1]")[0];
+let captions1 = invidious.getElementsByClassName("captions[1]")[0];
-let invidiousCaptions2Element = invidiousElement.getElementsByClassName("captions[2]")[0];
+let captions2 = invidious.getElementsByClassName("captions[2]")[0];
-let autoplayElement = invidiousElement.getElementsByClassName("youtubeAutoplay")[0];
+let autoplay = invidious.getElementsByClassName("youtubeAutoplay")[0];
-let volumeElement = invidiousElement.getElementsByClassName("volume")[0];
+let volume = invidious.getElementsByClassName("volume")[0];
-let volumeValueElement = invidiousElement.getElementsByClassName("volume-value")[0];
+let volumeValue = invidious.getElementsByClassName("volume-value")[0];
+let region = invidious.getElementsByClassName("region")[0];
+let darkMode = invidious.getElementsByClassName("dark_mode")[0];
+let thin_mode = invidious.getElementsByClassName("thin_mode")[0];
+let default_home = invidious.getElementsByClassName("default_home")[0];
+let feed_menu0 = invidious.getElementsByClassName("feed_menu[0]")[0];
+let feed_menu1 = invidious.getElementsByClassName("feed_menu[1]")[0];
 
-volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
+volume.addEventListener("input", () => volumeValue.textContent = `${volume.value}%`);
 
-invidiousElement.addEventListener("change", async _ => {
+invidious.addEventListener("change", async _ => {
     console.log('changed invidious settings');
     let commentsList = youtubeHelper.getInvidiousComments();
-    commentsList[0] = invidiousComments0Element.value;
+    commentsList[0] = comments0.value;
-    commentsList[1] = invidiousComments1Element.value;
+    commentsList[1] = comments1.value;
 
     let captionsList = youtubeHelper.getInvidiousCaptions();
-    captionsList[0] = invidiousCaptions0Element.value;
+    captionsList[0] = captions0.value;
-    captionsList[1] = invidiousCaptions1Element.value;
+    captionsList[1] = captions1.value;
-    captionsList[2] = invidiousCaptions2Element.value;
+    captionsList[2] = captions2.value;
+
+    let feedMenuList = youtubeHelper.getInvidiousFeedMenuList();
+    feedMenuList[0] = feed_menu0.value;
+    feedMenuList[1] = feed_menu1.value;
 
     await youtubeHelper.setYoutubeSettings({
-        invidiousAlwaysProxy: invidiousAlwaysProxyElement.checked,
+        invidiousAlwaysProxy: alwaysProxy.checked,
-        youtubeAutoplay: autoplayElement.checked,
+        youtubeAutoplay: autoplay.checked,
-        invidiousPlayerStyle: invidiousPlayerStyleElement.value,
+        invidiousPlayerStyle: playerStyle.value,
-        invidiousQuality: invidiousQualityElement.value,
+        invidiousQuality: quality.value,
-        invidiousVideoLoop: invidiousVideoLoopElement.checked,
+        invidiousVideoLoop: videoLoop.checked,
-        invidiousContinueAutoplay: invidiousContinueAutoplayElement.checked,
+        invidiousContinueAutoplay: continueAutoplay.checked,
-        invidiousContinue: invidiousContinueElement.checked,
+        invidiousContinue: invidiousContinue.checked,
-        youtubeListen: youtubeListenElement.checked,
+        youtubeListen: youtubeListen.checked,
-        invidiousSpeed: invidiousSpeedElement.value,
+        invidiousSpeed: speed.value,
-        invidiousQualityDash: invidiousQualityDashElement.value,
+        invidiousQualityDash: qualityDash.value,
-        youtubeVolume: volumeElement.value,
+        youtubeVolume: volume.value,
         invidiousComments: commentsList,
         invidiousCaptions: captionsList,
-        invidiousRelatedVideos: invidiousRelatedVideoElement.checked,
+        invidiousRelatedVideos: relatedVideo.checked,
-        invidiousAnnotations: invidiousAnnotationsElement.checked,
+        invidiousAnnotations: annotations.checked,
-        invidiousExtendDesc: invidiousExtendDescElement.checked,
+        invidiousExtendDesc: extendDesc.checked,
-        invidiousVrMode: invidiousVrModeElement.checked,
+        invidiousVrMode: vrMode.checked,
-        invidiousSavePlayerPos: invidiousSavePlayerPosElement.checked
+        invidiousSavePlayerPos: savePlayerPos.checked,
+
+        invidiousRegion: region.value,
+        invidiousDarkMode: darkMode.value,
+        invidiousThinMode: thin_mode.checked,
+        invidiousDefaultHome: default_home.value,
+        invidiousFeedMenuList: feedMenuList,
     });
     init();
 });
 
 function init() {
     youtubeHelper.init().then(() => {
-        invidiousVideoLoopElement.checked = youtubeHelper.getInvidiousVideoLoop();
+        videoLoop.checked = youtubeHelper.getInvidiousVideoLoop();
 
-        autoplayElement.checked = youtubeHelper.getAutoplay();
+        autoplay.checked = youtubeHelper.getAutoplay();
 
-        invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
+        playerStyle.value = youtubeHelper.getInvidiousPlayerStyle();
 
-        invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay();
+        continueAutoplay.checked = youtubeHelper.getInvidiousContinueAutoplay();
-        invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue();
+        invidiousContinue.checked = youtubeHelper.getInvidiousContinue();
-        invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
+        alwaysProxy.checked = youtubeHelper.getInvidiousAlwaysProxy();
-        youtubeListenElement.checked = youtubeHelper.getYoutubeListen();
+        youtubeListen.checked = youtubeHelper.getYoutubeListen();
 
-        invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
+        speed.value = youtubeHelper.getInvidiousSpeed();
-        invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
+        quality.value = youtubeHelper.getInvidiousQuality();
-        invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
+        qualityDash.value = youtubeHelper.getInvidiousQualityDash();
 
-        volumeElement.value = youtubeHelper.getVolume();
+        volume.value = youtubeHelper.getVolume();
-        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+        volumeValue.textContent = `${youtubeHelper.getVolume()}%`;
 
-        invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
+        comments0.value = youtubeHelper.getInvidiousComments()[0];
-        invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
+        comments1.value = youtubeHelper.getInvidiousComments()[1];
 
-        invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
+        captions0.value = youtubeHelper.getInvidiousCaptions()[0];
-        invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
+        captions1.value = youtubeHelper.getInvidiousCaptions()[1];
-        invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
+        captions2.value = youtubeHelper.getInvidiousCaptions()[2];
 
-        invidiousRelatedVideoElement.checked = youtubeHelper.getInvidiousRelatedVideos();
+        relatedVideo.checked = youtubeHelper.getInvidiousRelatedVideos();
-        invidiousAnnotationsElement.checked = youtubeHelper.getInvidiousAnnotations();
+        annotations.checked = youtubeHelper.getInvidiousAnnotations();
-        invidiousExtendDescElement.checked = youtubeHelper.getInvidiousExtendDesc();
+        extendDesc.checked = youtubeHelper.getInvidiousExtendDesc();
-        invidiousVrModeElement.checked = youtubeHelper.getInvidiousVrMode();
+        vrMode.checked = youtubeHelper.getInvidiousVrMode();
-        invidiousSavePlayerPosElement.checked = youtubeHelper.getInvidiousSavePlayerPos();
+        savePlayerPos.checked = youtubeHelper.getInvidiousSavePlayerPos();
+
+        region.value = youtubeHelper.getInvidiousRegion();
+        darkMode.value = youtubeHelper.getInvidiousDarkMode();
+        thin_mode.checked = youtubeHelper.getInvidiousThinMode();
+        default_home.value = youtubeHelper.getInvidiousDefaultHome();
+
+        feed_menu0.value = youtubeHelper.getInvidiousFeedMenuList()[0];
+        feed_menu1.value = youtubeHelper.getInvidiousFeedMenuList()[1];
 
         commonHelper.processDefaultCustomInstances(
             'invidious',

src/pages/options/youtube/youtube.html

@@ -204,7 +204,7 @@
         </div>
 
         <div class="some-block option-block">
-          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
+          <h4 data-localise="__MSG_autoplayVid__">Autoplay</h4>
           <input class="youtubeAutoplay" type="checkbox" />
         </div>
 
@@ -721,6 +721,119 @@
           <input class="save_player_pos" type="checkbox" />
         </div>
 
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_region__">Select country</h4>
+          <select class="region">
+            <option value="AE">AE</option>
+            <option value="AR">AR</option>
+            <option value="AT">AT</option>
+            <option value="AU">AU</option>
+            <option value="AZ">AZ</option>
+            <option value="BA">BA</option>
+            <option value="BD">BD</option>
+            <option value="BE">BE</option>
+            <option value="BG">BG</option>
+            <option value="BH">BH</option>
+            <option value="BO">BO</option>
+            <option value="BR">BR</option>
+            <option value="BY">BY</option>
+            <option value="CA">CA</option>
+            <option value="CH">CH</option>
+            <option value="CL">CL</option>
+            <option value="CO">CO</option>
+            <option value="CR">CR</option>
+            <option value="CY">CY</option>
+            <option value="CZ">CZ</option>
+            <option value="DE">DE</option>
+            <option value="DK">DK</option>
+            <option value="DO">DO</option>
+            <option value="DZ">DZ</option>
+            <option value="EC">EC</option>
+            <option value="EE">EE</option>
+            <option value="EG">EG</option>
+            <option value="ES">ES</option>
+            <option value="FI">FI</option>
+            <option value="FR">FR</option>
+            <option value="GB">GB</option>
+            <option value="GE">GE</option>
+            <option value="GH">GH</option>
+            <option value="GR">GR</option>
+            <option value="GT">GT</option>
+            <option value="HK">HK</option>
+            <option value="HN">HN</option>
+            <option value="HR">HR</option>
+            <option value="HU">HU</option>
+            <option value="ID">ID</option>
+            <option value="IE">IE</option>
+            <option value="IL">IL</option>
+            <option value="IN">IN</option>
+            <option value="IQ">IQ</option>
+            <option value="IS">IS</option>
+            <option value="IT">IT</option>
+            <option value="JM">JM</option>
+            <option value="JO">JO</option>
+            <option value="JP">JP</option>
+            <option value="KE">KE</option>
+            <option value="KR">KR</option>
+            <option value="KW">KW</option>
+            <option value="KZ">KZ</option>
+            <option value="LB">LB</option>
+            <option value="LI">LI</option>
+            <option value="LK">LK</option>
+            <option value="LT">LT</option>
+            <option value="LU">LU</option>
+            <option value="LV">LV</option>
+            <option value="LY">LY</option>
+            <option value="MA">MA</option>
+            <option value="ME">ME</option>
+            <option value="MK">MK</option>
+            <option value="MT">MT</option>
+            <option value="MX">MX</option>
+            <option value="MY">MY</option>
+            <option value="NG">NG</option>
+            <option value="NI">NI</option>
+            <option value="NL">NL</option>
+            <option value="NO">NO</option>
+            <option value="NP">NP</option>
+            <option value="NZ">NZ</option>
+            <option value="OM">OM</option>
+            <option value="PA">PA</option>
+            <option value="PE">PE</option>
+            <option value="PG">PG</option>
+            <option value="PH">PH</option>
+            <option value="PK">PK</option>
+            <option value="PL">PL</option>
+            <option value="PR">PR</option>
+            <option value="PT">PT</option>
+            <option value="PY">PY</option>
+            <option value="QA">QA</option>
+            <option value="RO">RO</option>
+            <option value="RS">RS</option>
+            <option value="RU">RU</option>
+            <option value="SA">SA</option>
+            <option value="SE">SE</option>
+            <option value="SG">SG</option>
+            <option value="SI">SI</option>
+            <option value="SK">SK</option>
+            <option value="SN">SN</option>
+            <option value="SV">SV</option>
+            <option value="TH">TH</option>
+            <option value="TN">TN</option>
+            <option value="TR">TR</option>
+            <option value="TW">TW</option>
+            <option value="TZ">TZ</option>
+            <option value="UA">UA</option>
+            <option value="UG">UG</option>
+            <option value="US" selected="">US</option>
+            <option value="UY">UY</option>
+            <option value="VE">VE</option>
+            <option value="VN">VN</option>
+            <option value="YE">YE</option>
+            <option value="ZA">ZA</option>
+            <option value="ZW">ZW</option>
+          </select>
+        </div>
+
         <div class="some-block option-block">
           <h4 data-localise="__MSG_playerStyle__">Player Style</h4>
           <select class="player_style">
@@ -729,6 +842,44 @@
           </select>
         </div>
 
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_theme__">Theme</h4>
+          <select class="dark_mode">
+            <option value="" selected="">auto</option>
+            <option value="light">light</option>
+            <option value="dark">dark</option>
+          </select>
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_thin_mode__">Thin mode</h4>
+          <input class="thin_mode" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_default_home__">Default homepage</h4>
+          <select class="default_home">
+            <option value="">Search</option>
+            <option value="Popular">Popular</option>
+            <option value="Trending">Trending</option>
+          </select>
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_feedMenu__">Feed menu</h4>
+          <select class="feed_menu[0]">
+            <option value="">Search</option>
+            <option value="Popular">Popular</option>
+            <option value="Trending">Trending</option>
+          </select>
+          &nbsp;
+          <select class="feed_menu[1]">
+            <option value="">Search</option>
+            <option value="Popular">Popular</option>
+            <option value="Trending">Trending</option>
+          </select>
+        </div>
+
       </div>
       <hr>