Added Piped-Material #51

8 files changed, 268 insertions, 27 deletions

diff --git a/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js b/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
new file mode 100644
index 00000000..c47b8c86
--- /dev/null
+++ b/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
@@ -0,0 +1,25 @@
+window.browser = window.browser || window.chrome;
+
+browser.storage.local.get(
+    [
+        "youtubeTheme",
+        "youtubeAutoplay"
+    ],
+    res => {
+        let prefs = JSON.parse(
+            decodeURIComponent(
+                localStorage.getItem("PREFERENCES")
+            )
+        ) ?? {};
+        let oldPrefs = { ...prefs };
+
+        if (res.youtubeTheme == 'dark') prefs.darkMode = true;
+        if (res.youtubeTheme == 'light') prefs.darkMode = false;
+
+        if (res.youtubeAutoplay != "DEFAULT") prefs.playerAutoplay = res.youtubeAutoplay;
+
+        if (oldPrefs != prefs) localStorage.setItem("PREFERENCES", encodeURIComponent(JSON.stringify(prefs)));
+    }
+)
+
+window.onunload = () => localStorage.removeItem("PREFERENCES");
\ No newline at end of file
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index 0277221c..3866f72e 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -35,8 +35,8 @@ let redirects = {
   },
   "pipedMaterial": {
     "normal": [
-      "https://piped-material.১.net/",
-      "https://piped-material.ftp.sh/",
+      "https://piped-material.xn--17b.net",
+      "https://piped-material.ftp.sh",
     ],
     "tor": []
   }
@@ -79,7 +79,6 @@ function setInvidiousNormalCustomRedirects(val) {
   console.log("invidiousNormalCustomRedirects: ", val)
 }
 
-
 let invidiousTorRedirectsChecks;
 const getInvidiousTorRedirectsChecks = () => invidiousTorRedirectsChecks;
 function setInvidiousTorRedirectsChecks(val) {
@@ -96,7 +95,6 @@ function setInvidiousTorCustomRedirects(val) {
   console.log("invidiousTorCustomRedirects: ", val)
 }
 
-
 let pipedNormalRedirectsChecks;
 const getPipedNormalRedirectsChecks = () => pipedNormalRedirectsChecks;
 function setPipedNormalRedirectsChecks(val) {
@@ -113,7 +111,6 @@ function setPipedNormalCustomRedirects(val) {
   console.log("pipedNormalCustomRedirects: ", val)
 }
 
-
 let pipedTorRedirectsChecks;
 const getPipedTorRedirectsChecks = () => pipedTorRedirectsChecks;
 function setPipedTorRedirectsChecks(val) {
@@ -136,6 +133,44 @@ function setPipedRedirects(val) {
   console.log("pipedRedirects: ", val)
 }
 
+let pipedMaterialNormalRedirectsChecks;
+const getPipedMaterialNormalRedirectsChecks = () => pipedMaterialNormalRedirectsChecks;
+function setPipedMaterialNormalRedirectsChecks(val) {
+  pipedMaterialNormalRedirectsChecks = val;
+  browser.storage.local.set({ pipedMaterialNormalRedirectsChecks })
+  console.log("pipedMaterialNormalRedirectsChecks: ", val)
+}
+
+let pipedMaterialNormalCustomRedirects = [];
+const getPipedMaterialNormalCustomRedirects = () => pipedMaterialNormalCustomRedirects;
+function setPipedMaterialNormalCustomRedirects(val) {
+  pipedMaterialNormalCustomRedirects = val;
+  browser.storage.local.set({ pipedMaterialNormalCustomRedirects })
+  console.log("pipedMaterialNormalCustomRedirects: ", val)
+}
+
+let pipedMaterialTorRedirectsChecks;
+const getPipedMaterialTorRedirectsChecks = () => pipedMaterialTorRedirectsChecks;
+function setPipedMaterialTorRedirectsChecks(val) {
+  pipedMaterialTorRedirectsChecks = val;
+  browser.storage.local.set({ pipedMaterialTorRedirectsChecks })
+  console.log("pipedMaterialTorRedirectsChecks: ", val)
+}
+
+let pipedMaterialTorCustomRedirects = [];
+const getPipedMaterialTorCustomRedirects = () => pipedMaterialTorCustomRedirects;
+function setPipedMaterialTorCustomRedirects(val) {
+  pipedMaterialTorCustomRedirects = val;
+  browser.storage.local.set({ pipedMaterialTorCustomRedirects })
+  console.log("pipedMaterialTorCustomRedirects: ", val)
+}
+
+function setPipedMaterialRedirects(val) {
+  redirects.pipedMaterial = val;
+  browser.storage.local.set({ youtubeRedirects: redirects })
+  console.log("pipedMaterialRedirects: ", val)
+}
+
 let disable;
 const getDisable = () => disable;
 function setDisable(val) {
@@ -386,28 +421,55 @@ function redirect(url, details, initiator) {
 
     return `${randomInstance}${url.pathname}${url.search}`;
   }
+  else if (frontend == 'pipedMaterial' ||
+    ((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'pipedMaterial' && details.type === "sub_frame")) {
+    if (OnlyEmbeddedVideo == 'onlyEmbedded' && details.type !== "sub_frame") return null;
+    if (
+      OnlyEmbeddedVideo == 'onlyNotEmbedded' && details.type !== "main_frame" &&
+      !((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'pipedMaterial' && details.type == "sub_frame")
+    ) return null;
+
+    let instancesList;
+    if (protocol == 'normal') instancesList = [...pipedMaterialNormalRedirectsChecks, ...pipedMaterialNormalCustomRedirects];
+    else if (protocol == 'tor') instancesList = [...pipedMaterialTorRedirectsChecks, ...pipedMaterialTorCustomRedirects];
+    let randomInstance = commonHelper.getRandomInstance(instancesList);
+
+    return `${randomInstance}${url.pathname}${url.search}`;
+  }
   return 'CANCEL';
 }
 
 function changeInstance(url) {
+  console.log("changeInstance Youtube");
 
   let protocolHost = `${url.protocol}//${url.host}`;
 
+  console.log("protocolHost", protocolHost);
+
   if (
     protocol == 'normal' &&
     ![
       ...redirects.invidious.normal,
       ...redirects.piped.normal,
+      ...redirects.pipedMaterial.normal,
+
       ...invidiousNormalCustomRedirects,
-      ...pipedNormalCustomRedirects
+      ...pipedNormalCustomRedirects,
+      ...pipedMaterialNormalCustomRedirects
+    ].includes(protocolHost)
+  ) return null;
+
+  if (protocol == 'tor' &&
+    ![
+      ...redirects.invidious.tor,
+      ...redirects.piped.tor,
+      ...redirects.pipedMaterial.tor,
+
+      ...invidiousTorCustomRedirects,
+      ...pipedTorCustomRedirects,
+      ...pipedMaterialTorCustomRedirects
     ].includes(protocolHost)
   ) return null;
-  if (protocol == 'tor' && ![
-    ...redirects.invidious.tor,
-    ...redirects.piped.tor,
-    ...invidiousTorCustomRedirects,
-    ...pipedTorCustomRedirects
-  ].includes(protocolHost)) return null;
 
   let instancesList;
   if (frontend == 'invidious') {
@@ -418,6 +480,11 @@ function changeInstance(url) {
     if (protocol == 'normal') instancesList = [...pipedNormalRedirectsChecks, ...pipedNormalCustomRedirects];
     else if (protocol == 'tor') instancesList = [...pipedTorRedirectsChecks, ...pipedTorCustomRedirects];
   }
+  else if (frontend == 'pipedMaterial') {
+
+    if (protocol == 'normal') instancesList = [...pipedMaterialNormalRedirectsChecks, ...pipedMaterialNormalCustomRedirects];
+    else if (protocol == 'tor') instancesList = [...pipedMaterialTorRedirectsChecks, ...pipedMaterialTorCustomRedirects];
+  }
 
   console.log("instancesList", instancesList);
   let index = instancesList.indexOf(protocolHost);
@@ -468,6 +535,14 @@ function isUrlPipedorInvidious(url, frontend) {
       ...pipedTorCustomRedirects,
     ].includes(protocolHost);
 
+  if (frontend == 'pipedMaterial')
+    return [
+      ...redirects.pipedMaterial.normal,
+      ...redirects.pipedMaterial.tor,
+      ...pipedMaterialNormalCustomRedirects,
+      ...pipedMaterialTorCustomRedirects,
+    ].includes(protocolHost);
+
   return [
     ...redirects.invidious.normal,
     ...redirects.invidious.tor,
@@ -567,6 +642,16 @@ function initPipedLocalStorage(tabId) {
   );
 }
 
+function initPipedMaterialLocalStorage(tabId) {
+  browser.tabs.executeScript(
+    tabId,
+    {
+      file: "/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js",
+      runAt: "document_start"
+    }
+  );
+}
+
 function initInvidiousCookies(tabId) {
   browser.tabs.executeScript(
     tabId,
@@ -605,6 +690,12 @@ async function init() {
           "pipedNormalRedirectsChecks",
           "pipedNormalCustomRedirects",
 
+          "pipedMaterialNormalRedirectsChecks",
+          "pipedMaterialNormalCustomRedirects",
+
+          "pipedMaterialTorRedirectsChecks",
+          "pipedMaterialTorCustomRedirects",
+
           "pipedTorRedirectsChecks",
           "pipedTorCustomRedirects",
           "alwaysUsePreferred",
@@ -646,6 +737,13 @@ async function init() {
           pipedTorRedirectsChecks = result.pipedTorRedirectsChecks ?? [...redirects.piped.tor];
           pipedTorCustomRedirects = result.pipedTorCustomRedirects ?? [];
 
+
+          pipedMaterialNormalRedirectsChecks = result.pipedMaterialNormalRedirectsChecks ?? [...redirects.pipedMaterial.normal];
+          pipedMaterialNormalCustomRedirects = result.pipedMaterialNormalCustomRedirects ?? [];
+
+          pipedMaterialTorRedirectsChecks = result.pipedMaterialTorRedirectsChecks ?? [...redirects.pipedMaterial.tor];
+          pipedMaterialTorCustomRedirects = result.pipedMaterialTorCustomRedirects ?? [];
+
           persistInvidiousPrefs = result.persistInvidiousPrefs ?? false;
 
           alwaysUsePreferred = result.alwaysUsePreferred ?? true;
@@ -665,6 +763,7 @@ export default {
   setBypassWatchOnYoutube,
   initInvidiousCookies,
   initPipedLocalStorage,
+  initPipedMaterialLocalStorage,
 
   getFrontend,
   setFrontend,
@@ -741,6 +840,20 @@ export default {
   getPipedTorCustomRedirects,
   setPipedTorCustomRedirects,
 
+  getPipedMaterialNormalRedirectsChecks,
+  setPipedMaterialNormalRedirectsChecks,
+
+  getPipedMaterialNormalCustomRedirects,
+  setPipedMaterialNormalCustomRedirects,
+
+  getPipedMaterialTorRedirectsChecks,
+  setPipedMaterialTorRedirectsChecks,
+
+  getPipedMaterialTorCustomRedirects,
+  setPipedMaterialTorCustomRedirects,
+
+  setPipedMaterialRedirects,
+
   getExceptions,
   setExceptions,
   isException,
diff --git a/src/manifest.json b/src/manifest.json
index ec72ba91..c4e73a35 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -38,6 +38,7 @@
     "open_in_tab": true
   },
   "web_accessible_resources": [
-    "assets/javascripts/helpers/youtube/piped-preferences.js"
+    "assets/javascripts/helpers/youtube/piped-preferences.js",
+    "assets/javascripts/helpers/youtube/pipedMaterial-preferences.js"
   ]
 }
\ No newline at end of file
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';
     }
 }