Adding langFrom, langTo to settings translation. changing naming schemes

4 files changed, 278 insertions, 27 deletions

diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html
index 36380865..72ea3906 100644
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@@ -122,6 +122,237 @@
 
         <hr>
 
+        <div id="simplyTranslate-lingva">
+            <div class="some-block option-block">
+                <h4>From</h4>
+                <select id="from">
+                    <option value="auto">Auto</option>
+                    <option value="af">Afrikaans</option>
+                    <option value="sq">Albanian</option>
+                    <option value="am">Amharic</option>
+                    <option value="ar">Arabic</option>
+                    <option value="hy">Armenian</option>
+                    <option value="az">Azerbaijani</option>
+                    <option value="eu">Basque</option>
+                    <option value="be">Belarusian</option>
+                    <option value="bn">Bengali</option>
+                    <option value="bs">Bosnian</option>
+                    <option value="bg">Bulgarian</option>
+                    <option value="ca">Catalan</option>
+                    <option value="ceb">Cebuano</option>
+                    <option value="ny">Chichewa</option>
+                    <option value="zh-CN">Chinese</option>
+                    <option value="co">Corsican</option>
+                    <option value="hr">Croatian</option>
+                    <option value="cs">Czech</option>
+                    <option value="da">Danish</option>
+                    <option value="nl">Dutch</option>
+                    <option value="en">English</option>
+                    <option value="eo">Esperanto</option>
+                    <option value="et">Estonian</option>
+                    <option value="tl">Filipino</option>
+                    <option value="fi">Finnish</option>
+                    <option value="fr">French</option>
+                    <option value="fy">Frisian</option>
+                    <option value="gl">Galician</option>
+                    <option value="ka">Georgian</option>
+                    <option value="de">German</option>
+                    <option value="el">Greek</option>
+                    <option value="gu">Gujarati</option>
+                    <option value="ht">Haitian Creole</option>
+                    <option value="ha">Hausa</option>
+                    <option value="haw">Hawaiian</option>
+                    <option value="iw">Hebrew</option>
+                    <option value="hi">Hindi</option>
+                    <option value="hmn">Hmong</option>
+                    <option value="hu">Hungarian</option>
+                    <option value="is">Icelandic</option>
+                    <option value="ig">Igbo</option>
+                    <option value="id">Indonesian</option>
+                    <option value="ga">Irish</option>
+                    <option value="it">Italian</option>
+                    <option value="ja">Japanese</option>
+                    <option value="jw">Javanese</option>
+                    <option value="kn">Kannada</option>
+                    <option value="kk">Kazakh</option>
+                    <option value="km">Khmer</option>
+                    <option value="rw">Kinyarwanda</option>
+                    <option value="ko">Korean</option>
+                    <option value="ku">Kurdish (Kurmanji)</option>
+                    <option value="ky">Kyrgyz</option>
+                    <option value="lo">Lao</option>
+                    <option value="la">Latin</option>
+                    <option value="lv">Latvian</option>
+                    <option value="lt">Lithuanian</option>
+                    <option value="lb">Luxembourgish</option>
+                    <option value="mk">Macedonian</option>
+                    <option value="mg">Malagasy</option>
+                    <option value="ms">Malay</option>
+                    <option value="ml">Malayalam</option>
+                    <option value="mt">Maltese</option>
+                    <option value="mi">Maori</option>
+                    <option value="mr">Marathi</option>
+                    <option value="mn">Mongolian</option>
+                    <option value="my">Myanmar (Burmese)</option>
+                    <option value="ne">Nepali</option>
+                    <option value="no">Norwegian</option>
+                    <option value="or">Odia (Oriya)</option>
+                    <option value="ps">Pashto</option>
+                    <option value="fa">Persian</option>
+                    <option value="pl">Polish</option>
+                    <option value="pt">Portuguese</option>
+                    <option value="pa">Punjabi</option>
+                    <option value="ro">Romanian</option>
+                    <option value="ru">Russian</option>
+                    <option value="sm">Samoan</option>
+                    <option value="gd">Scots Gaelic</option>
+                    <option value="sr">Serbian</option>
+                    <option value="st">Sesotho</option>
+                    <option value="sn">Shona</option>
+                    <option value="sd">Sindhi</option>
+                    <option value="si">Sinhala</option>
+                    <option value="sk">Slovak</option>
+                    <option value="sl">Slovenian</option>
+                    <option value="so">Somali</option>
+                    <option value="es">Spanish</option>
+                    <option value="su">Sundanese</option>
+                    <option value="sw">Swahili</option>
+                    <option value="sv">Swedish</option>
+                    <option value="tg">Tajik</option>
+                    <option value="ta">Tamil</option>
+                    <option value="tt">Tatar</option>
+                    <option value="te">Telugu</option>
+                    <option value="th">Thai</option>
+                    <option value="tr">Turkish</option>
+                    <option value="tk">Turkmen</option>
+                    <option value="uk">Ukrainian</option>
+                    <option value="ur">Urdu</option>
+                    <option value="ug">Uyghur</option>
+                    <option value="uz">Uzbek</option>
+                    <option value="vi">Vietnamese</option>
+                    <option value="cy">Welsh</option>
+                    <option value="xh">Xhosa</option>
+                    <option value="yi">Yiddish</option>
+                    <option value="yo">Yoruba</option>
+                    <option value="zu">Zulu</option>
+                </select>
+            </div>
+
+            <div class="some-block option-block">
+                <h4>To</h4>
+                <select id="to">
+                    <option value="af">Afrikaans</option>
+                    <option value="sq">Albanian</option>
+                    <option value="am">Amharic</option>
+                    <option value="ar">Arabic</option>
+                    <option value="hy">Armenian</option>
+                    <option value="az">Azerbaijani</option>
+                    <option value="eu">Basque</option>
+                    <option value="be">Belarusian</option>
+                    <option value="bn">Bengali</option>
+                    <option value="bs">Bosnian</option>
+                    <option value="bg">Bulgarian</option>
+                    <option value="ca">Catalan</option>
+                    <option value="ceb">Cebuano</option>
+                    <option value="ny">Chichewa</option>
+                    <option value="zh-CN">Chinese</option>
+                    <option value="co">Corsican</option>
+                    <option value="hr">Croatian</option>
+                    <option value="cs">Czech</option>
+                    <option value="da">Danish</option>
+                    <option value="nl">Dutch</option>
+                    <option value="en">English</option>
+                    <option value="eo">Esperanto</option>
+                    <option value="et">Estonian</option>
+                    <option value="tl">Filipino</option>
+                    <option value="fi">Finnish</option>
+                    <option value="fr">French</option>
+                    <option value="fy">Frisian</option>
+                    <option value="gl">Galician</option>
+                    <option value="ka">Georgian</option>
+                    <option value="de">German</option>
+                    <option value="el">Greek</option>
+                    <option value="gu">Gujarati</option>
+                    <option value="ht">Haitian Creole</option>
+                    <option value="ha">Hausa</option>
+                    <option value="haw">Hawaiian</option>
+                    <option value="iw">Hebrew</option>
+                    <option value="hi">Hindi</option>
+                    <option value="hmn">Hmong</option>
+                    <option value="hu">Hungarian</option>
+                    <option value="is">Icelandic</option>
+                    <option value="ig">Igbo</option>
+                    <option value="id">Indonesian</option>
+                    <option value="ga">Irish</option>
+                    <option value="it">Italian</option>
+                    <option value="ja">Japanese</option>
+                    <option value="jw">Javanese</option>
+                    <option value="kn">Kannada</option>
+                    <option value="kk">Kazakh</option>
+                    <option value="km">Khmer</option>
+                    <option value="rw">Kinyarwanda</option>
+                    <option value="ko">Korean</option>
+                    <option value="ku">Kurdish (Kurmanji)</option>
+                    <option value="ky">Kyrgyz</option>
+                    <option value="lo">Lao</option>
+                    <option value="la">Latin</option>
+                    <option value="lv">Latvian</option>
+                    <option value="lt">Lithuanian</option>
+                    <option value="lb">Luxembourgish</option>
+                    <option value="mk">Macedonian</option>
+                    <option value="mg">Malagasy</option>
+                    <option value="ms">Malay</option>
+                    <option value="ml">Malayalam</option>
+                    <option value="mt">Maltese</option>
+                    <option value="mi">Maori</option>
+                    <option value="mr">Marathi</option>
+                    <option value="mn">Mongolian</option>
+                    <option value="my">Myanmar (Burmese)</option>
+                    <option value="ne">Nepali</option>
+                    <option value="no">Norwegian</option>
+                    <option value="or">Odia (Oriya)</option>
+                    <option value="ps">Pashto</option>
+                    <option value="fa">Persian</option>
+                    <option value="pl">Polish</option>
+                    <option value="pt">Portuguese</option>
+                    <option value="pa">Punjabi</option>
+                    <option value="ro">Romanian</option>
+                    <option value="ru">Russian</option>
+                    <option value="sm">Samoan</option>
+                    <option value="gd">Scots Gaelic</option>
+                    <option value="sr">Serbian</option>
+                    <option value="st">Sesotho</option>
+                    <option value="sn">Shona</option>
+                    <option value="sd">Sindhi</option>
+                    <option value="si">Sinhala</option>
+                    <option value="sk">Slovak</option>
+                    <option value="sl">Slovenian</option>
+                    <option value="so">Somali</option>
+                    <option value="es">Spanish</option>
+                    <option value="su">Sundanese</option>
+                    <option value="sw">Swahili</option>
+                    <option value="sv">Swedish</option>
+                    <option value="tg">Tajik</option>
+                    <option value="ta">Tamil</option>
+                    <option value="tt">Tatar</option>
+                    <option value="te">Telugu</option>
+                    <option value="th">Thai</option>
+                    <option value="tr">Turkish</option>
+                    <option value="tk">Turkmen</option>
+                    <option value="uk">Ukrainian</option>
+                    <option value="ur">Urdu</option>
+                    <option value="ug">Uyghur</option>
+                    <option value="uz">Uzbek</option>
+                    <option value="vi">Vietnamese</option>
+                    <option value="cy">Welsh</option>
+                    <option value="xh">Xhosa</option>
+                    <option value="yi">Yiddish</option>
+                    <option value="yo">Yoruba</option>
+                    <option value="zu">Zulu</option>
+                </select>
+            </div>
+        </div>
+
         <div id="simplyTranslate">
             <div class="some-block option-block">
                 <h4>Default Instances</h4>
diff --git a/src/pages/options/translate/translate.js b/src/pages/options/translate/translate.js
index a28d3215..4db80072 100644
--- a/src/pages/options/translate/translate.js
+++ b/src/pages/options/translate/translate.js
@@ -1,22 +1,24 @@
 import translateHelper from "../../../assets/javascripts/helpers/translate.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let disableTranslateElement = document.getElementById("disable-simplyTranslate");
-disableTranslateElement.addEventListener("change",
-    (event) => translateHelper.setDisableTranslate(!event.target.checked)
+let disableElement = document.getElementById("disable-simplyTranslate");
+disableElement.addEventListener("change",
+    (event) => translateHelper.setDisable(!event.target.checked)
 );
 
-
+let simplyTranslateLingvaDivElement = document.getElementById("simplyTranslate-lingva")
 let simplyTranslateDivElement = document.getElementById("simplyTranslate")
 let lingvaDivElement = document.getElementById("lingva")
 
 
 function changeFrontendsSettings(frontend) {
     if (frontend == 'simplyTranslate') {
+        simplyTranslateLingvaDivElement.style.display = 'block';
         simplyTranslateDivElement.style.display = 'block';
         lingvaDivElement.style.display = 'none';
     }
     else if (frontend == 'lingva') {
+        simplyTranslateLingvaDivElement.style.display = 'block';
         simplyTranslateDivElement.style.display = 'none';
         lingvaDivElement.style.display = 'block';
     }
@@ -30,11 +32,29 @@ translateFrontendElement.addEventListener("change",
     }
 );
 
+let fromElement = document.getElementById("from");
+fromElement.addEventListener("change",
+    (event) => {
+        let from = event.target.options[fromElement.selectedIndex].value;
+        translateHelper.setFrom(from);
+    }
+);
+
+let toElement = document.getElementById("to");
+toElement.addEventListener("change",
+    (event) => {
+        let to = event.target.options[toElement.selectedIndex].value;
+        translateHelper.setTo(to);
+    }
+);
+
 translateHelper.init().then(() => {
-    disableTranslateElement.checked = !translateHelper.getDisableTranslate();
+    disableElement.checked = !translateHelper.getDisable();
     let frontend = translateHelper.getFrontend();
     translateFrontendElement.value = frontend;
     changeFrontendsSettings(frontend);
+    fromElement.value = translateHelper.getFrom();
+    toElement.value = translateHelper.getTo();
 
     commonHelper.processDefaultCustomInstances(
         'simplyTranslate',
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 29831198..097ba096 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -36,31 +36,31 @@ disableYoutubeElement.addEventListener("change",
     (event) => youtubeHelper.setDisableYoutube(!event.target.checked)
 );
 
-let invidiousThemeElement = document.getElementById("invidious-theme");
-invidiousThemeElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousTheme(event.target.options[invidiousThemeElement.selectedIndex].value)
+let themeElement = document.getElementById("invidious-theme");
+themeElement.addEventListener("change",
+    (event) => youtubeHelper.setTheme(event.target.options[themeElement.selectedIndex].value)
 );
 
-let invidiousVolumeElement = document.getElementById("invidious-volume");
-let invidiousVolumeValueElement = document.querySelector("#volume-value");
-invidiousVolumeElement.addEventListener("input",
+let volumeElement = document.getElementById("invidious-volume");
+let volumeValueElement = document.querySelector("#volume-value");
+volumeElement.addEventListener("input",
     () => {
-        youtubeHelper.setInvidiousVolume(invidiousVolumeElement.value);
-        invidiousVolumeValueElement.textContent = `${invidiousVolumeElement.value}%`;
+        youtubeHelper.setVolume(volumeElement.value);
+        volumeValueElement.textContent = `${volumeElement.value}%`;
     }
 );
 let invidiousClearVolumeElement = document.getElementById("clear-invidious-volume");
 invidiousClearVolumeElement.addEventListener("click",
     (_) => {
-        youtubeHelper.setInvidiousVolume('--');
-        invidiousVolumeValueElement.textContent = `--%`;
-        invidiousVolumeElement.value = 50;
+        youtubeHelper.setVolume('--');
+        volumeValueElement.textContent = `--%`;
+        volumeElement.value = 50;
     }
 );
 
-let invidiousAutoplayElement = document.getElementById("invidious-autoplay");
-invidiousAutoplayElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousAutoplay(event.target.options[invidiousAutoplayElement.selectedIndex].value)
+let autoplayElement = document.getElementById("invidious-autoplay");
+autoplayElement.addEventListener("change",
+    (event) => youtubeHelper.setAutoplay(event.target.options[autoplayElement.selectedIndex].value)
 );
 
 let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
@@ -75,12 +75,12 @@ alwaysUsePreferredElement.addEventListener("change",
 
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
-    invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme();
-    invidiousVolumeElement.value = youtubeHelper.getInvidiousVolume();
-    invidiousVolumeValueElement.textContent = `${youtubeHelper.getInvidiousVolume()}%`;
+    themeElement.checked = youtubeHelper.getTheme();
+    volumeElement.value = youtubeHelper.getVolume();
+    volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
     OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();
     alwaysUsePreferredElement.checked = youtubeHelper.getAlwaysusePreferred();
-    invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay();
+    autoplayElement.checked = youtubeHelper.getAutoplay();
     let frontend = youtubeHelper.getFrontend();
     youtubeFrontendElement.value = frontend;
     changeFrontendsSettings(frontend);
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
index fb46d96f..5ae42b97 100644
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -20,7 +20,7 @@ let disableInstagramElement = document.querySelector("#disable-bibliogram");
 let disableMapsElement = document.querySelector("#disable-osm");
 let disableRedditElement = document.querySelector("#disable-reddit");
 let disableSearchElement = document.querySelector("#disable-search");
-let disableTranslateElement = document.querySelector("#disable-simplyTranslate");
+let disableElement = document.querySelector("#disable-simplyTranslate");
 let disableWikipediaElement = document.querySelector("#disable-wikipedia");
 let disableMediumElement = document.querySelector("#disable-medium");
 let disableImgurElement = document.querySelector("#disable-imgur");
@@ -47,7 +47,7 @@ wholeInit().then(() => {
   disableMapsElement.checked = !mapsHelper.getDisableMaps();
   disableRedditElement.checked = !redditHelper.getDisableReddit();
   disableSearchElement.checked = !searchHelper.getDisableSearch();
-  disableTranslateElement.checked = !translateHelper.getDisableTranslate();
+  disableElement.checked = !translateHelper.getDisable();
   disableWikipediaElement.checked = !wikipediaHelper.getDisableWikipedia();
   disableImgurElement.checked = !imgurHelper.getDisableImgur();
   disableTiktokElement.checked = !tiktokHelper.getDisableTiktok();
@@ -78,8 +78,8 @@ disableSearchElement.addEventListener("change",
   (event) => searchHelper.setDisableSearch(!event.target.checked)
 );
 
-disableTranslateElement.addEventListener("change",
-  (event) => translateHelper.setDisableTranslate(!event.target.checked)
+disableElement.addEventListener("change",
+  (event) => translateHelper.setDisable(!event.target.checked)
 );
 
 disableWikipediaElement.addEventListener("change",