Added more invidious settings #142 #147

2 files changed, 247 insertions, 72 deletions

diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js
index d735c18b..d390ef87 100644
--- a/src/pages/options/youtube/invidious.js
+++ b/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 invidiousAlwaysProxyElement = invidiousElement.getElementsByClassName("local")[0];
-let invidiousPlayerStyleElement = invidiousElement.getElementsByClassName("player_style")[0];
-let invidiousQualityElement = invidiousElement.getElementsByClassName("quality")[0];
-let invidiousVideoLoopElement = invidiousElement.getElementsByClassName("video_loop")[0];
-let invidiousContinueAutoplayElement = invidiousElement.getElementsByClassName("continue_autoplay")[0];
-let invidiousContinueElement = invidiousElement.getElementsByClassName("continue")[0];
-let youtubeListenElement = invidiousElement.getElementsByClassName("listen")[0];
-let invidiousSpeedElement = invidiousElement.getElementsByClassName("speed")[0];
-let invidiousQualityDashElement = invidiousElement.getElementsByClassName("quality_dash")[0];
-let invidiousRelatedVideoElement = invidiousElement.getElementsByClassName("related_videos")[0];
-let invidiousAnnotationsElement = invidiousElement.getElementsByClassName("annotations")[0];
-let invidiousExtendDescElement = invidiousElement.getElementsByClassName("extend_desc")[0];
-let invidiousVrModeElement = invidiousElement.getElementsByClassName("vr_mode")[0];
-let invidiousSavePlayerPosElement = invidiousElement.getElementsByClassName("save_player_pos")[0];
-let invidiousComments0Element = invidiousElement.getElementsByClassName("comments[0]")[0];
-let invidiousComments1Element = invidiousElement.getElementsByClassName("comments[1]")[0];
-let invidiousCaptions0Element = invidiousElement.getElementsByClassName("captions[0]")[0];
-let invidiousCaptions1Element = invidiousElement.getElementsByClassName("captions[1]")[0];
-let invidiousCaptions2Element = invidiousElement.getElementsByClassName("captions[2]")[0];
-let autoplayElement = invidiousElement.getElementsByClassName("youtubeAutoplay")[0];
-let volumeElement = invidiousElement.getElementsByClassName("volume")[0];
-let volumeValueElement = invidiousElement.getElementsByClassName("volume-value")[0];
-
-volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
-
-invidiousElement.addEventListener("change", async _ => {
+let invidious = document.getElementById('invidious');
+let alwaysProxy = invidious.getElementsByClassName("local")[0];
+let playerStyle = invidious.getElementsByClassName("player_style")[0];
+let quality = invidious.getElementsByClassName("quality")[0];
+let videoLoop = invidious.getElementsByClassName("video_loop")[0];
+let continueAutoplay = invidious.getElementsByClassName("continue_autoplay")[0];
+let invidiousContinue = invidious.getElementsByClassName("continue")[0];
+let youtubeListen = invidious.getElementsByClassName("listen")[0];
+let speed = invidious.getElementsByClassName("speed")[0];
+let qualityDash = invidious.getElementsByClassName("quality_dash")[0];
+let relatedVideo = invidious.getElementsByClassName("related_videos")[0];
+let annotations = invidious.getElementsByClassName("annotations")[0];
+let extendDesc = invidious.getElementsByClassName("extend_desc")[0];
+let vrMode = invidious.getElementsByClassName("vr_mode")[0];
+let savePlayerPos = invidious.getElementsByClassName("save_player_pos")[0];
+let comments0 = invidious.getElementsByClassName("comments[0]")[0];
+let comments1 = invidious.getElementsByClassName("comments[1]")[0];
+let captions0 = invidious.getElementsByClassName("captions[0]")[0];
+let captions1 = invidious.getElementsByClassName("captions[1]")[0];
+let captions2 = invidious.getElementsByClassName("captions[2]")[0];
+let autoplay = invidious.getElementsByClassName("youtubeAutoplay")[0];
+let volume = invidious.getElementsByClassName("volume")[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];
+
+volume.addEventListener("input", () => volumeValue.textContent = `${volume.value}%`);
+
+invidious.addEventListener("change", async _ => {
     console.log('changed invidious settings');
     let commentsList = youtubeHelper.getInvidiousComments();
-    commentsList[0] = invidiousComments0Element.value;
-    commentsList[1] = invidiousComments1Element.value;
+    commentsList[0] = comments0.value;
+    commentsList[1] = comments1.value;
 
     let captionsList = youtubeHelper.getInvidiousCaptions();
-    captionsList[0] = invidiousCaptions0Element.value;
-    captionsList[1] = invidiousCaptions1Element.value;
-    captionsList[2] = invidiousCaptions2Element.value;
+    captionsList[0] = captions0.value;
+    captionsList[1] = captions1.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,
-        youtubeAutoplay: autoplayElement.checked,
-        invidiousPlayerStyle: invidiousPlayerStyleElement.value,
-        invidiousQuality: invidiousQualityElement.value,
-        invidiousVideoLoop: invidiousVideoLoopElement.checked,
-        invidiousContinueAutoplay: invidiousContinueAutoplayElement.checked,
-        invidiousContinue: invidiousContinueElement.checked,
-        youtubeListen: youtubeListenElement.checked,
-        invidiousSpeed: invidiousSpeedElement.value,
-        invidiousQualityDash: invidiousQualityDashElement.value,
-        youtubeVolume: volumeElement.value,
+        invidiousAlwaysProxy: alwaysProxy.checked,
+        youtubeAutoplay: autoplay.checked,
+        invidiousPlayerStyle: playerStyle.value,
+        invidiousQuality: quality.value,
+        invidiousVideoLoop: videoLoop.checked,
+        invidiousContinueAutoplay: continueAutoplay.checked,
+        invidiousContinue: invidiousContinue.checked,
+        youtubeListen: youtubeListen.checked,
+        invidiousSpeed: speed.value,
+        invidiousQualityDash: qualityDash.value,
+        youtubeVolume: volume.value,
         invidiousComments: commentsList,
         invidiousCaptions: captionsList,
-        invidiousRelatedVideos: invidiousRelatedVideoElement.checked,
-        invidiousAnnotations: invidiousAnnotationsElement.checked,
-        invidiousExtendDesc: invidiousExtendDescElement.checked,
-        invidiousVrMode: invidiousVrModeElement.checked,
-        invidiousSavePlayerPos: invidiousSavePlayerPosElement.checked
+        invidiousRelatedVideos: relatedVideo.checked,
+        invidiousAnnotations: annotations.checked,
+        invidiousExtendDesc: extendDesc.checked,
+        invidiousVrMode: vrMode.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();
+
+        autoplay.checked = youtubeHelper.getAutoplay();
+
+        playerStyle.value = youtubeHelper.getInvidiousPlayerStyle();
 
-        autoplayElement.checked = youtubeHelper.getAutoplay();
+        continueAutoplay.checked = youtubeHelper.getInvidiousContinueAutoplay();
+        invidiousContinue.checked = youtubeHelper.getInvidiousContinue();
+        alwaysProxy.checked = youtubeHelper.getInvidiousAlwaysProxy();
+        youtubeListen.checked = youtubeHelper.getYoutubeListen();
 
-        invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
+        speed.value = youtubeHelper.getInvidiousSpeed();
+        quality.value = youtubeHelper.getInvidiousQuality();
+        qualityDash.value = youtubeHelper.getInvidiousQualityDash();
 
-        invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay();
-        invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue();
-        invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
-        youtubeListenElement.checked = youtubeHelper.getYoutubeListen();
+        volume.value = youtubeHelper.getVolume();
+        volumeValue.textContent = `${youtubeHelper.getVolume()}%`;
 
-        invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
-        invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
-        invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
+        comments0.value = youtubeHelper.getInvidiousComments()[0];
+        comments1.value = youtubeHelper.getInvidiousComments()[1];
 
-        volumeElement.value = youtubeHelper.getVolume();
-        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+        captions0.value = youtubeHelper.getInvidiousCaptions()[0];
+        captions1.value = youtubeHelper.getInvidiousCaptions()[1];
+        captions2.value = youtubeHelper.getInvidiousCaptions()[2];
 
-        invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
-        invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
+        relatedVideo.checked = youtubeHelper.getInvidiousRelatedVideos();
+        annotations.checked = youtubeHelper.getInvidiousAnnotations();
+        extendDesc.checked = youtubeHelper.getInvidiousExtendDesc();
+        vrMode.checked = youtubeHelper.getInvidiousVrMode();
+        savePlayerPos.checked = youtubeHelper.getInvidiousSavePlayerPos();
 
-        invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
-        invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
-        invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
+        region.value = youtubeHelper.getInvidiousRegion();
+        darkMode.value = youtubeHelper.getInvidiousDarkMode();
+        thin_mode.checked = youtubeHelper.getInvidiousThinMode();
+        default_home.value = youtubeHelper.getInvidiousDefaultHome();
 
-        invidiousRelatedVideoElement.checked = youtubeHelper.getInvidiousRelatedVideos();
-        invidiousAnnotationsElement.checked = youtubeHelper.getInvidiousAnnotations();
-        invidiousExtendDescElement.checked = youtubeHelper.getInvidiousExtendDesc();
-        invidiousVrModeElement.checked = youtubeHelper.getInvidiousVrMode();
-        invidiousSavePlayerPosElement.checked = youtubeHelper.getInvidiousSavePlayerPos();
+        feed_menu0.value = youtubeHelper.getInvidiousFeedMenuList()[0];
+        feed_menu1.value = youtubeHelper.getInvidiousFeedMenuList()[1];
 
         commonHelper.processDefaultCustomInstances(
             'invidious',
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index e29fefbe..17018bfe 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/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>
 
@@ -722,6 +722,119 @@
         </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">
             <option value="invidious" data-localise="__MSG_invidious__">Invidious</option>
@@ -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>
 
@@ -1311,4 +1462,4 @@
   <script type="module" src="../../../assets/javascripts/localise.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file