5 files changed, 116 insertions, 14 deletions
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index c35e240c..7098f6e0 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -110,5 +110,6 @@ browser.tabs.onRemoved.addListener((tabId) => {
 browser.tabs.onUpdated.addListener(
   (tabId, changeInfo, _) => {
     if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'piped')) youtubeHelper.initPipedLocalStorage(tabId);
+    if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'pipedMaterial')) youtubeHelper.initPipedMaterialLocalStorage(tabId);
     // if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url, 'invidious')) youtubeHelper.initInvidiousCookies(tabId);
   });
\ No newline at end of file
diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js
index 6c541a8d..c6517966 100644
--- a/src/pages/options/youtube/piped.js
+++ b/src/pages/options/youtube/piped.js
@@ -23,11 +23,3 @@ youtubeHelper.init().then(() => {
         youtubeHelper.setPipedTorCustomRedirects
     );
 });
-
-
-
-
-
-
-
-
diff --git a/src/pages/options/youtube/pipedMaterial.js b/src/pages/options/youtube/pipedMaterial.js
new file mode 100644
index 00000000..9a8a9610
--- /dev/null
+++ b/src/pages/options/youtube/pipedMaterial.js
@@ -0,0 +1,25 @@
+import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
+
+youtubeHelper.init().then(() => {
+    commonHelper.processDefaultCustomInstances(
+        'pipedMaterial',
+        'normal',
+        youtubeHelper,
+        document,
+        youtubeHelper.getPipedMaterialNormalRedirectsChecks,
+        youtubeHelper.setPipedMaterialNormalRedirectsChecks,
+        youtubeHelper.getPipedMaterialNormalCustomRedirects,
+        youtubeHelper.setPipedMaterialNormalCustomRedirects
+    );
+    commonHelper.processDefaultCustomInstances(
+        'pipedMaterial',
+        'tor',
+        youtubeHelper,
+        document,
+        youtubeHelper.getPipedMaterialTorRedirectsChecks,
+        youtubeHelper.setPipedMaterialTorRedirectsChecks,
+        youtubeHelper.getPipedMaterialTorCustomRedirects,
+        youtubeHelper.setPipedMaterialTorCustomRedirects
+    );
+});
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index add3276c..27c0ceff 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -112,6 +112,7 @@
         <select id="youtube-embed-frontend">
           <option value="invidious">Invidious</option>
           <option value="piped">Piped</option>
+          <option value="pipedMaterial">Piped-Material</option>
           <option value="youtube">Youtube</option>
         </select>
       </div>
@@ -321,6 +322,58 @@
       </div>
     </div>
 
+    <div id="pipedMaterial">
+      <hr>
+
+      <div id="pipedMaterial-normal">
+        <div class="some-block option-block">
+          <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="pipedMaterial-normal-checklist"></div>
+        <hr>
+        <div class="some-block option-block">
+          <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-pipedMaterial-normal-instance-form">
+          <div class="some-block option-block">
+            <input id="pipedMaterial-normal-custom-instance" placeholder="https://piped-material.com" type="url" />
+            <button type="submit" class="add" id="pipedMaterial-normal-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="pipedMaterial-normal-custom-checklist"></div>
+      </div>
+
+      <div id="pipedMaterial-tor">
+        <div class="some-block option-block">
+          <h4>Default Instances</h4>
+        </div>
+        <div class="checklist" id="pipedMaterial-tor-checklist"></div>
+        <hr>
+        <div class="some-block option-block">
+          <h4>Custom Instances</h4>
+        </div>
+        <form id="custom-pipedMaterial-tor-instance-form">
+          <div class="some-block option-block">
+            <input id="pipedMaterial-tor-custom-instance" placeholder="https://pipedMaterial.com" type="url" />
+            <button type="submit" class="add" id="pipedMaterial-tor-add-instance">
+              <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                fill="currentColor">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="checklist" id="pipedMaterial-tor-custom-checklist"></div>
+      </div>
+    </div>
+
     <hr>
 
     <div class="some-block option-block">
@@ -355,6 +408,7 @@
   <script type="module" src="./youtube.js"></script>
   <script type="module" src="./invidious.js"></script>
   <script type="module" src="./piped.js"></script>
+  <script type="module" src="./pipedMaterial.js"></script>
   <script type="module" src="./embed-exceptions.js"></script>
   <!-- <script src="../../assets/javascripts/localise.js"></script> -->
 </body>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 168a9d30..61c02e98 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -5,26 +5,44 @@ let disableYoutubeElement = document.getElementById("disable-invidious");
 let youtubeFrontendElement = document.getElementById("youtube-frontend");
 let invidiousDivElement = document.getElementById("invidious");
 let pipedDivElement = document.getElementById("piped");
+let pipedMaterialDivElement = document.getElementById("pipedMaterial");
 let invidiousPipedDivElement = document.getElementById("invidious-piped");
 let freetubeYatteeDivElement = document.getElementById("freetube-yatte");
 
 function changeFrontendsSettings(frontend) {
-    if (frontend == 'piped') {
+    if (frontend == 'invidious') {
         invidiousPipedDivElement.style.display = 'block'
+        invidiousDivElement.style.display = 'block';
+        pipedDivElement.style.display = 'none';
+        pipedMaterialDivElement.style.display = 'none';
+        freetubeYatteeDivElement.style.display = 'none';
+    }
+    else if (frontend == 'piped') {
+        invidiousPipedDivElement.style.display = 'block'
+        invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'block';
+        pipedMaterialDivElement.style.display = 'none';
+        freetubeYatteeDivElement.style.display = 'none';
+    }
+    else if (frontend == 'piped') {
+        invidiousPipedDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'none';
+        pipedDivElement.style.display = 'block';
+        pipedMaterialDivElement.style.display = 'none';
         freetubeYatteeDivElement.style.display = 'none';
     }
-    else if (frontend == 'invidious') {
+    else if (frontend == 'pipedMaterial') {
         invidiousPipedDivElement.style.display = 'block'
+        invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'none';
-        invidiousDivElement.style.display = 'block';
+        pipedMaterialDivElement.style.display = 'block';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'freetube' || frontend == 'yatte') {
         invidiousPipedDivElement.style.display = 'none'
-        pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'none';
+        pipedDivElement.style.display = 'none';
+        pipedMaterialDivElement.style.display = 'none';
         freetubeYatteeDivElement.style.display = 'block';
         changeYoutubeEmbedFrontendsSettings(youtubeHelper.getYoutubeEmbedFrontend());
     }
@@ -118,19 +136,31 @@ function changeProtocolSettings(protocol) {
     let normalPipedDiv = document.getElementById("piped-normal");
     let torPipedDiv = document.getElementById("piped-tor");
 
+    let normalPipedMaterialDiv = document.getElementById("pipedMaterial-normal");
+    let torPipedMaterialDiv = document.getElementById("pipedMaterial-tor");
+
     let normalInvidiousDiv = document.getElementById("invidious-normal");
     let torInvidiousDiv = document.getElementById("invidious-tor");
+
     if (protocol == 'normal') {
-        normalPipedDiv.style.display = 'block';
         normalInvidiousDiv.style.display = 'block';
         torInvidiousDiv.style.display = 'none';
+
+        normalPipedDiv.style.display = 'block';
         torPipedDiv.style.display = 'none';
+
+        normalPipedMaterialDiv.style.display = 'block';
+        torPipedMaterialDiv.style.display = 'none';
     }
     else if (protocol == 'tor') {
-        normalPipedDiv.style.display = 'none';
         normalInvidiousDiv.style.display = 'none';
         torInvidiousDiv.style.display = 'block';
+
+        normalPipedDiv.style.display = 'none';
         torPipedDiv.style.display = 'block';
+
+        normalPipedMaterialDiv.style.display = 'none';
+        torPipedMaterialDiv.style.display = 'block';
     }
 }