diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/background/background.js | 3 | ||||
| -rw-r--r-- | src/pages/options/youtube/embed-exceptions.js | 80 | ||||
| -rw-r--r-- | src/pages/options/youtube/youtube.html | 29 |
3 files changed, 110 insertions, 2 deletions
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" /> + + <select id="exceptions-custom-instance-type"> + <option value="url">URL</option> + <option value="regex">Regex</option> + </select> + + </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> |