Added youtube embed exceptions #46

5 files changed, 145 insertions, 4 deletions

diff --git a/src/assets/javascripts/helpers/exceptions.js b/src/assets/javascripts/helpers/exceptions.js
index 5969cc4c..7c6e4798 100644
--- a/src/assets/javascripts/helpers/exceptions.js
+++ b/src/assets/javascripts/helpers/exceptions.js
@@ -1,7 +1,6 @@
 "use strict";
 window.browser = window.browser || window.chrome;
 
-
 let exceptions = {
     "url": [],
     "regex": [],
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index b10ceb76..55f18555 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -238,6 +238,28 @@ function setAlwaysusePreferred(val) {
   console.log("alwaysusePreferred: ", alwaysusePreferred)
 }
 
+let exceptions = {
+  "url": [],
+  "regex": [],
+};
+const getExceptions = () => exceptions;
+function setExceptions(val) {
+  exceptions = val;
+  browser.storage.local.set({ youtubeEmbedExceptions: val })
+  console.log("youtubeEmbedExceptions: ", val)
+}
+
+function isException(url) {
+  for (const item of exceptions.url) {
+    let protocolHost = `${url.protocol}//${url.host}`
+    console.log(item, protocolHost)
+    if (item == protocolHost) return true;
+  }
+  for (const item of exceptions.regex)
+    if (new RegExp(item).test(url.href)) return true;
+  return false;
+}
+
 function isYoutube(url, initiator) {
   if (disable) return false;
   if (
@@ -300,7 +322,11 @@ function isYoutube(url, initiator) {
     return isTargets
 }
 
-function redirect(url, type) {
+function redirect(url, type, details) {
+  if (type != "main_frame" && details.frameAncestors.length > 0 && isException(new URL(details.frameAncestors[0].url))) {
+    console.log(`Canceled ${url.href}`, details.frameAncestors[0].url)
+    return null;
+  }
   if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
 
   if (frontend == 'yatte' && type === "main_frame")
@@ -536,6 +562,8 @@ async function init() {
           "youtubeEmbedFrontend",
 
           "youtubeProtocol",
+
+          "youtubeEmbedExceptions"
         ],
         (result) => {
           redirects.invidious = dataJson.invidious;
@@ -572,6 +600,8 @@ async function init() {
 
           alwaysusePreferred = result.alwaysusePreferred ?? true;
 
+          if (result.youtubeEmbedExceptions) exceptions = result.youtubeEmbedExceptions;
+
           resolve();
         });
     });
@@ -660,5 +690,9 @@ export default {
   getAlwaysusePreferred,
   setAlwaysusePreferred,
 
+  getExceptions,
+  setExceptions,
+  isException,
+
   init,
 };
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index 71ae568a..1f91ad4d 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -50,8 +50,7 @@ browser.webRequest.onBeforeRequest.addListener(
     if (exceptionsHelper.isException(url, initiator)) newUrl = null;
 
     else if (youtubeMusicHelper.isYoutubeMusic(url, initiator)) newUrl = youtubeMusicHelper.redirect(url, details.type)
-
-    else if (youtubeHelper.isYoutube(url, initiator)) newUrl = youtubeHelper.redirect(url, details.type)
+    else if (youtubeHelper.isYoutube(url, initiator)) newUrl = youtubeHelper.redirect(url, details.type, details)
 
     else if (twitterHelper.isTwitter(url, initiator)) newUrl = twitterHelper.redirect(url);
 
diff --git a/src/pages/options/youtube/embed-exceptions.js b/src/pages/options/youtube/embed-exceptions.js
new file mode 100644
index 00000000..ca2900d4
--- /dev/null
+++ b/src/pages/options/youtube/embed-exceptions.js
@@ -0,0 +1,80 @@
+"use strict";
+window.browser = window.browser || window.chrome;
+
+import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
+
+let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
+let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
+let instanceType = "url"
+
+youtubeHelper.init().then(() => {
+    instanceTypeElement.addEventListener("change",
+        (event) => {
+            instanceType = event.target.options[instanceTypeElement.selectedIndex].value
+            if (instanceType == 'url') {
+                nameCustomInstanceInput.setAttribute("type", "url");
+                nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com");
+            }
+            else if (instanceType == 'regex') {
+                nameCustomInstanceInput.setAttribute("type", "text");
+                nameCustomInstanceInput.setAttribute("placeholder", "https?:\/\/(www\.|music|)youtube\.com\/watch\?v\=..*");
+            }
+        }
+    )
+    let exceptionsCustomInstances = youtubeHelper.getExceptions();
+    function calcExceptionsCustomInstances() {
+        console.log("exceptionsCustomInstances", exceptionsCustomInstances)
+        document.getElementById("exceptions-custom-checklist").innerHTML =
+            [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex].map(
+                (x) => `<div>${x}<button class="add" id="clear-${x}">
+                      <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 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                      </svg>
+                    </button>
+                </div>
+                <hr>`
+            ).join('\n');
+
+        for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) {
+            document.getElementById(`clear-${x}`).addEventListener("click",
+                () => {
+                    console.log(x);
+                    let index;
+                    index = exceptionsCustomInstances.url.indexOf(x);
+                    if (index > -1)
+                        exceptionsCustomInstances.url.splice(index, 1);
+                    else {
+                        index = exceptionsCustomInstances.regex.indexOf(x);
+                        if (index > -1)
+                            exceptionsCustomInstances.regex.splice(index, 1);
+                    }
+                    youtubeHelper.setExceptions(exceptionsCustomInstances);
+                    calcExceptionsCustomInstances();
+                });
+        }
+    }
+    calcExceptionsCustomInstances();
+    document.getElementById("custom-exceptions-instance-form").addEventListener("submit", (event) => {
+        event.preventDefault();
+
+        let val
+        if (instanceType == 'url') {
+            if (nameCustomInstanceInput.validity.valid) {
+                let url = new URL(nameCustomInstanceInput.value);
+                val = `${url.protocol}//${url.host}`
+                if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
+            }
+        } else if (instanceType == 'regex') {
+            val = nameCustomInstanceInput.value
+            if (val.trim() != '' && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val)
+        }
+        if (val) {
+            youtubeHelper.setExceptions(exceptionsCustomInstances);
+            console.log("exceptionsCustomInstances", exceptionsCustomInstances)
+            nameCustomInstanceInput.value = '';
+        }
+        calcExceptionsCustomInstances();
+    })
+})
\ No newline at end of file
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index d35c5c91..0fb4f195 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -346,12 +346,41 @@
       </div>
     </div>
 
+    <hr>
+
+    <div class="some-block option-block">
+      <h4>Embed Exceptions</h4>
+    </div>
+    <form id="custom-exceptions-instance-form">
+      <div class="some-block option-block">
+        <div class="some-block" style="padding:0;">
+          <input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" />
+          &nbsp;
+          <select id="exceptions-custom-instance-type">
+            <option value="url">URL</option>
+            <option value="regex">Regex</option>
+          </select>
+          &nbsp;
+        </div>
+        <button type="submit" class="add" id="exceptions-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="exceptions-custom-checklist"></div>
+    </a>
+  </section>
+
   </section>
 
   <script type="module" src="../init.js"></script>
   <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="./embed-exceptions.js"></script>
   <!-- <script src="../../assets/javascripts/localise.js"></script> -->
 </body>