aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay Ramachandran <[email protected]>2020-02-03 22:34:43 -0500
committerAjay Ramachandran <[email protected]>2020-02-03 22:34:43 -0500
commitb0a23a5c4e8660b619d2d433e0e9fe17ba53b98a (patch)
treee3e3991a12af6d9103a53b1251795c42c5c1da61
parent5bb5dae20ef0f6d03842f4b439420726880579e3 (diff)
downloadSponsorBlock-b0a23a5c4e8660b619d2d433e0e9fe17ba53b98a.tar.gz
SponsorBlock-b0a23a5c4e8660b619d2d433e0e9fe17ba53b98a.zip
Converted options page to TypeScript
Diffstat
-rw-r--r--public/options/options.html5
-rw-r--r--src/background.ts2
-rw-r--r--src/content.ts8
-rw-r--r--src/options.ts (renamed from public/options/options.js)78
-rw-r--r--src/utils.ts13
-rw-r--r--webpack/webpack.common.js3
6 files changed, 59 insertions, 50 deletions
diff --git a/public/options/options.html b/public/options/options.html
index 19354139..0e7c155f 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -6,9 +6,8 @@
<link href="options.css" rel="stylesheet"/>
- <script src="../utils.js"></script>
- <script src="../SB.js"></script>
- <script src="options.js"></script>
+ <script src="../js/vendor.js"></script>
+ <script src="../js/options.js"></script>
</head>
<body class="sponsorBlockPageBody">
diff --git a/src/background.ts b/src/background.ts
index e1c4f1ac..967f221a 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -125,7 +125,7 @@ function unregisterFirefoxContentScript(id: string) {
function getSponsorTimes(videoID, callback) {
let sponsorTimes = [];
let sponsorTimesStorage = SB.config.sponsorTimes.get(videoID);
-
+
if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
sponsorTimes = sponsorTimesStorage;
}
diff --git a/src/content.ts b/src/content.ts
index 8d92bef5..833fcc8d 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -49,8 +49,8 @@ var previewBar = null;
//the player controls on the YouTube player
var controls = null;
-// Direct Links
-videoIDChange(getYouTubeVideoID(document.URL));
+// Direct Links after the config is loaded
+utils.wait(() => SB.config !== null).then(() => videoIDChange(getYouTubeVideoID(document.URL)));
//the last time looked at (used to see if this time is in the interval)
var lastTime = -1;
@@ -417,7 +417,7 @@ function sponsorsLookup(id: string, channelIDPromise = null) {
function getYouTubeVideoID(url: string) {
// For YouTube TV support
if(url.startsWith("https://www.youtube.com/tv#/")) url = url.replace("#", "");
-
+
//Attempt to parse url
let urlObject = null;
try {
@@ -433,7 +433,7 @@ function getYouTubeVideoID(url: string) {
} else if (!["www.youtube.com", "www.youtube-nocookie.com"].includes(urlObject.host)) {
if (!SB.config) {
// Call this later, in case this is an Invidious tab
- this.wait(() => SB.config !== null).then(() => this.videoIDChange(this.getYouTubeVideoID(url)));
+ utils.wait(() => SB.config !== null).then(() => videoIDChange(getYouTubeVideoID(url)));
}
return false
diff --git a/public/options/options.js b/src/options.ts
index 2feeb17a..3cf1acd5 100644
--- a/public/options/options.js
+++ b/src/options.ts
@@ -1,13 +1,18 @@
+import SB from "./SB";
+
+import Utils from "./utils";
+var utils = new Utils();
+
window.addEventListener('DOMContentLoaded', init);
async function init() {
- localizeHtmlPage();
+ utils.localizeHtmlPage();
if (!SB.configListeners.includes(optionsConfigUpdateListener)) {
SB.configListeners.push(optionsConfigUpdateListener);
}
- await wait(() => SB.config !== null);
+ await utils.wait(() => SB.config !== null);
// Set all of the toggle options to the correct option
let optionsContainer = document.getElementById("options");
@@ -51,23 +56,23 @@ async function init() {
break;
case "text-change":
let button = optionsElements[i].querySelector(".trigger-button");
- button.addEventListener("click", () => activateTextChange(optionsElements[i]));
+ button.addEventListener("click", () => activateTextChange(<HTMLElement> optionsElements[i]));
let textChangeOption = optionsElements[i].getAttribute("sync-option");
// See if anything extra must be done
switch (textChangeOption) {
case "invidiousInstances":
- invidiousInstanceAddInit(optionsElements[i], textChangeOption);
+ invidiousInstanceAddInit(<HTMLElement> optionsElements[i], textChangeOption);
}
break;
case "keybind-change":
let keybindButton = optionsElements[i].querySelector(".trigger-button");
- keybindButton.addEventListener("click", () => activateKeybindChange(optionsElements[i]));
+ keybindButton.addEventListener("click", () => activateKeybindChange(<HTMLElement> optionsElements[i]));
break;
case "display":
- updateDisplayElement(optionsElements[i])
+ updateDisplayElement(<HTMLElement> optionsElements[i])
}
}
@@ -87,7 +92,7 @@ function optionsConfigUpdateListener(changes) {
for (let i = 0; i < optionsElements.length; i++) {
switch (optionsElements[i].getAttribute("option-type")) {
case "display":
- updateDisplayElement(optionsElements[i])
+ updateDisplayElement(<HTMLElement> optionsElements[i])
}
}
}
@@ -95,9 +100,9 @@ function optionsConfigUpdateListener(changes) {
/**
* Will set display elements to the proper text
*
- * @param {HTMLElement} element
+ * @param element
*/
-function updateDisplayElement(element) {
+function updateDisplayElement(element: HTMLElement) {
let displayOption = element.getAttribute("sync-option")
let displayText = SB.config[displayOption];
element.innerText = displayText;
@@ -113,11 +118,11 @@ function updateDisplayElement(element) {
/**
* Initializes the option to add Invidious instances
*
- * @param {HTMLElement} element
- * @param {String} option
+ * @param element
+ * @param option
*/
-function invidiousInstanceAddInit(element, option) {
- let textBox = element.querySelector(".option-text-box");
+function invidiousInstanceAddInit(element: HTMLElement, option: string) {
+ let textBox = <HTMLInputElement> element.querySelector(".option-text-box");
let button = element.querySelector(".trigger-button");
let setButton = element.querySelector(".text-change-set");
@@ -133,7 +138,7 @@ function invidiousInstanceAddInit(element, option) {
SB.config[option] = instanceList;
- let checkbox = document.querySelector("#support-invidious input");
+ let checkbox = <HTMLInputElement> document.querySelector("#support-invidious input");
checkbox.checked = true;
invidiousOnClick(checkbox, "supportInvidious");
@@ -158,15 +163,15 @@ function invidiousInstanceAddInit(element, option) {
/**
* Run when the invidious button is being initialized
*
- * @param {HTMLElement} checkbox
- * @param {string} option
+ * @param checkbox
+ * @param option
*/
-function invidiousInit(checkbox, option) {
+function invidiousInit(checkbox: HTMLInputElement, option: string) {
let permissions = ["declarativeContent"];
- if (isFirefox()) permissions = [];
+ if (utils.isFirefox()) permissions = [];
chrome.permissions.contains({
- origins: getInvidiousInstancesRegex(),
+ origins: utils.getInvidiousInstancesRegex(),
permissions: permissions
}, function (result) {
if (result != checkbox.checked) {
@@ -180,28 +185,28 @@ function invidiousInit(checkbox, option) {
/**
* Run whenever the invidious checkbox is clicked
*
- * @param {HTMLElement} checkbox
- * @param {string} option
+ * @param checkbox
+ * @param option
*/
-function invidiousOnClick(checkbox, option) {
+function invidiousOnClick(checkbox: HTMLInputElement, option: string) {
if (checkbox.checked) {
- setupExtraSitePermissions(function (granted) {
+ utils.setupExtraSitePermissions(function (granted) {
if (!granted) {
SB.config[option] = false;
checkbox.checked = false;
}
});
} else {
- removeExtraSiteRegistration();
+ utils.removeExtraSiteRegistration();
}
}
/**
* Will trigger the container to ask the user for a keybind.
*
- * @param {HTMLElement} element
+ * @param element
*/
-function activateKeybindChange(element) {
+function activateKeybindChange(element: HTMLElement) {
let button = element.querySelector(".trigger-button");
if (button.classList.contains("disabled")) return;
@@ -211,11 +216,11 @@ function activateKeybindChange(element) {
let currentlySet = SB.config[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : "";
- let status = element.querySelector(".option-hidden-section > .keybind-status");
+ let status = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status");
status.innerText = chrome.i18n.getMessage("keybindDescription") + currentlySet;
if (SB.config[option] !== null) {
- let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
+ let statusKey = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status-key");
statusKey.innerText = SB.config[option];
}
@@ -227,11 +232,10 @@ function activateKeybindChange(element) {
/**
* Called when a key is pressed in an activiated keybind change option.
*
- * @param {HTMLElement} element
- * @param {KeyboardEvent} e
+ * @param element
+ * @param e
*/
-function keybindKeyPressed(element, e) {
- e = e || window.event;
+function keybindKeyPressed(element: HTMLElement, e: KeyboardEvent) {
var key = e.key;
let button = element.querySelector(".trigger-button");
@@ -247,10 +251,10 @@ function keybindKeyPressed(element, e) {
SB.config[option] = key;
- let status = element.querySelector(".option-hidden-section > .keybind-status");
+ let status = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status");
status.innerText = chrome.i18n.getMessage("keybindDescriptionComplete");
- let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
+ let statusKey = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status-key");
statusKey.innerText = key;
button.classList.remove("disabled");
@@ -259,15 +263,15 @@ function keybindKeyPressed(element, e) {
/**
* Will trigger the textbox to appear to be able to change an option's text.
*
- * @param {HTMLElement} element
+ * @param element
*/
-function activateTextChange(element) {
+function activateTextChange(element: HTMLElement) {
let button = element.querySelector(".trigger-button");
if (button.classList.contains("disabled")) return;
button.classList.add("disabled");
- let textBox = element.querySelector(".option-text-box");
+ let textBox = <HTMLInputElement> element.querySelector(".option-text-box");
let option = element.getAttribute("sync-option");
// See if anything extra must be done
diff --git a/src/utils.ts b/src/utils.ts
index 8f91dc21..e031c8f0 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -42,15 +42,17 @@ class Utils {
// Request permission
let permissions = ["declarativeContent"];
if (this.isFirefox()) permissions = [];
+
+ let self = this;
chrome.permissions.request({
origins: this.getInvidiousInstancesRegex(),
permissions: permissions
}, async function (granted) {
if (granted) {
- this.setupExtraSiteContentScripts();
+ self.setupExtraSiteContentScripts();
} else {
- this.removeExtraSiteRegistration();
+ self.removeExtraSiteRegistration();
}
callback(granted);
@@ -66,7 +68,8 @@ class Utils {
*/
setupExtraSiteContentScripts() {
let js = [
- "content.js"
+ "./js/vendor.js",
+ "./js/content.js"
];
let css = [
"content.css",
@@ -74,6 +77,8 @@ class Utils {
"popup.css"
];
+ let self = this;
+
if (this.isFirefox()) {
let firefoxJS = [];
for (const file of js) {
@@ -101,7 +106,7 @@ class Utils {
} else {
chrome.declarativeContent.onPageChanged.removeRules(["invidious"], function() {
let conditions = [];
- for (const regex of this.getInvidiousInstancesRegex()) {
+ for (const regex of self.getInvidiousInstancesRegex()) {
conditions.push(new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlMatches: regex }
}));
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
index 55488488..70ea347a 100644
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -7,7 +7,8 @@ module.exports = {
entry: {
popup: path.join(__dirname, srcDir + 'popup.ts'),
background: path.join(__dirname, srcDir + 'background.ts'),
- content: path.join(__dirname, srcDir + 'content.ts')
+ content: path.join(__dirname, srcDir + 'content.ts'),
+ options: path.join(__dirname, srcDir + 'options.ts')
},
output: {
path: path.join(__dirname, '../dist/js'),
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 14:28:04 +0000