Added Piped-Material #51

2022-03-03 22:13:17 +03:00 · 2022-03-03 22:13:17 +03:00 · 3ef2aa7cc1
parent f9ea99a12f
commit 3ef2aa7cc1
8 changed files with 270 additions and 29 deletions
--- a/src/assets/javascripts/helpers/youtube/pipedMaterial-preferences.js
+++ 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");
--- 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,
--- 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"
  ]
 }
--- 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);
  });
--- a/src/pages/options/youtube/piped.js
+++ b/src/pages/options/youtube/piped.js
@ -23,11 +23,3 @@ youtubeHelper.init().then(() => {
        youtubeHelper.setPipedTorCustomRedirects
    );
 });
-
-
-
-
-
-
-
-
--- a/src/pages/options/youtube/pipedMaterial.js
+++ 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
+    );
+});
--- 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>
--- 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'
-        pipedDivElement.style.display = 'block';
-        invidiousDivElement.style.display = 'none';
+        invidiousDivElement.style.display = 'block';
+        pipedDivElement.style.display = 'none';
+        pipedMaterialDivElement.style.display = 'none';
        freetubeYatteeDivElement.style.display = 'none';
    }
-    else if (frontend == 'invidious') {
+    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 == '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';
    }
 }