Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-07 12:07:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Converted options page to TypeScript

Browse Source
This commit is contained in:
Ajay Ramachandran
2020-02-03 22:34:43 -05:00
parent 5bb5dae20e
commit b0a23a5c4e
6 changed files with 59 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/options/options.html
View File

@@ -6,9 +6,8 @@
<link href="options.css" rel="stylesheet"/> <link href="options.css" rel="stylesheet"/>
<script src="../utils.js"></script> <script src="../js/vendor.js"></script>
<script src="../SB.js"></script> <script src="../js/options.js"></script>
<script src="options.js"></script>
</head> </head>
<body class="sponsorBlockPageBody"> <body class="sponsorBlockPageBody">

6
src/content.ts
View File

@@ -49,8 +49,8 @@ var previewBar = null;
//the player controls on the YouTube player //the player controls on the YouTube player
var controls = null; var controls = null;
// Direct Links // Direct Links after the config is loaded
videoIDChange(getYouTubeVideoID(document.URL)); 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) //the last time looked at (used to see if this time is in the interval)
var lastTime = -1; var lastTime = -1;
@@ -433,7 +433,7 @@ function getYouTubeVideoID(url: string) {
} else if (!["www.youtube.com", "www.youtube-nocookie.com"].includes(urlObject.host)) { } else if (!["www.youtube.com", "www.youtube-nocookie.com"].includes(urlObject.host)) {
if (!SB.config) { if (!SB.config) {
// Call this later, in case this is an Invidious tab // 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 return false

78
public/options/options.js → src/options.ts
View File

@@ -1,13 +1,18 @@
import SB from "./SB";
import Utils from "./utils";
var utils = new Utils();
window.addEventListener('DOMContentLoaded', init); window.addEventListener('DOMContentLoaded', init);
async function init() { async function init() {
localizeHtmlPage(); utils.localizeHtmlPage();
if (!SB.configListeners.includes(optionsConfigUpdateListener)) { if (!SB.configListeners.includes(optionsConfigUpdateListener)) {
SB.configListeners.push(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 // Set all of the toggle options to the correct option
let optionsContainer = document.getElementById("options"); let optionsContainer = document.getElementById("options");
@@ -51,23 +56,23 @@ async function init() {
break; break;
case "text-change": case "text-change":
let button = optionsElements[i].querySelector(".trigger-button"); 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"); let textChangeOption = optionsElements[i].getAttribute("sync-option");
// See if anything extra must be done // See if anything extra must be done
switch (textChangeOption) { switch (textChangeOption) {
case "invidiousInstances": case "invidiousInstances":
invidiousInstanceAddInit(optionsElements[i], textChangeOption); invidiousInstanceAddInit(<HTMLElement> optionsElements[i], textChangeOption);
} }
break; break;
case "keybind-change": case "keybind-change":
let keybindButton = optionsElements[i].querySelector(".trigger-button"); let keybindButton = optionsElements[i].querySelector(".trigger-button");
keybindButton.addEventListener("click", () => activateKeybindChange(optionsElements[i])); keybindButton.addEventListener("click", () => activateKeybindChange(<HTMLElement> optionsElements[i]));
break; break;
case "display": case "display":
updateDisplayElement(optionsElements[i]) updateDisplayElement(<HTMLElement> optionsElements[i])
} }
} }
@@ -87,7 +92,7 @@ function optionsConfigUpdateListener(changes) {
for (let i = 0; i < optionsElements.length; i++) { for (let i = 0; i < optionsElements.length; i++) {
switch (optionsElements[i].getAttribute("option-type")) { switch (optionsElements[i].getAttribute("option-type")) {
case "display": case "display":
updateDisplayElement(optionsElements[i]) updateDisplayElement(<HTMLElement> optionsElements[i])
} }
} }
} }
@@ -95,9 +100,9 @@ function optionsConfigUpdateListener(changes) {
/** /**
* Will set display elements to the proper text * 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 displayOption = element.getAttribute("sync-option")
let displayText = SB.config[displayOption]; let displayText = SB.config[displayOption];
element.innerText = displayText; element.innerText = displayText;
@@ -113,11 +118,11 @@ function updateDisplayElement(element) {
/** /**
* Initializes the option to add Invidious instances * Initializes the option to add Invidious instances
* *
* @param {HTMLElement} element * @param element
* @param {String} option * @param option
*/ */
function invidiousInstanceAddInit(element, option) { function invidiousInstanceAddInit(element: HTMLElement, option: string) {
let textBox = element.querySelector(".option-text-box"); let textBox = <HTMLInputElement> element.querySelector(".option-text-box");
let button = element.querySelector(".trigger-button"); let button = element.querySelector(".trigger-button");
let setButton = element.querySelector(".text-change-set"); let setButton = element.querySelector(".text-change-set");
@@ -133,7 +138,7 @@ function invidiousInstanceAddInit(element, option) {
SB.config[option] = instanceList; SB.config[option] = instanceList;
let checkbox = document.querySelector("#support-invidious input"); let checkbox = <HTMLInputElement> document.querySelector("#support-invidious input");
checkbox.checked = true; checkbox.checked = true;
invidiousOnClick(checkbox, "supportInvidious"); invidiousOnClick(checkbox, "supportInvidious");
@@ -158,15 +163,15 @@ function invidiousInstanceAddInit(element, option) {
/** /**
* Run when the invidious button is being initialized * Run when the invidious button is being initialized
* *
* @param {HTMLElement} checkbox * @param checkbox
* @param {string} option * @param option
*/ */
function invidiousInit(checkbox, option) { function invidiousInit(checkbox: HTMLInputElement, option: string) {
let permissions = ["declarativeContent"]; let permissions = ["declarativeContent"];
if (isFirefox()) permissions = []; if (utils.isFirefox()) permissions = [];
chrome.permissions.contains({ chrome.permissions.contains({
origins: getInvidiousInstancesRegex(), origins: utils.getInvidiousInstancesRegex(),
permissions: permissions permissions: permissions
}, function (result) { }, function (result) {
if (result != checkbox.checked) { if (result != checkbox.checked) {
@@ -180,28 +185,28 @@ function invidiousInit(checkbox, option) {
/** /**
* Run whenever the invidious checkbox is clicked * Run whenever the invidious checkbox is clicked
* *
* @param {HTMLElement} checkbox * @param checkbox
* @param {string} option * @param option
*/ */
function invidiousOnClick(checkbox, option) { function invidiousOnClick(checkbox: HTMLInputElement, option: string) {
if (checkbox.checked) { if (checkbox.checked) {
setupExtraSitePermissions(function (granted) { utils.setupExtraSitePermissions(function (granted) {
if (!granted) { if (!granted) {
SB.config[option] = false; SB.config[option] = false;
checkbox.checked = false; checkbox.checked = false;
} }
}); });
} else { } else {
removeExtraSiteRegistration(); utils.removeExtraSiteRegistration();
} }
} }
/** /**
* Will trigger the container to ask the user for a keybind. * 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"); let button = element.querySelector(".trigger-button");
if (button.classList.contains("disabled")) return; if (button.classList.contains("disabled")) return;
@@ -211,11 +216,11 @@ function activateKeybindChange(element) {
let currentlySet = SB.config[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : ""; 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; status.innerText = chrome.i18n.getMessage("keybindDescription") + currentlySet;
if (SB.config[option] !== null) { 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]; statusKey.innerText = SB.config[option];
} }
@@ -227,11 +232,10 @@ function activateKeybindChange(element) {
/** /**
* Called when a key is pressed in an activiated keybind change option. * Called when a key is pressed in an activiated keybind change option.
* *
* @param {HTMLElement} element * @param element
* @param {KeyboardEvent} e * @param e
*/ */
function keybindKeyPressed(element, e) { function keybindKeyPressed(element: HTMLElement, e: KeyboardEvent) {
e = e || window.event;
var key = e.key; var key = e.key;
let button = element.querySelector(".trigger-button"); let button = element.querySelector(".trigger-button");
@@ -247,10 +251,10 @@ function keybindKeyPressed(element, e) {
SB.config[option] = key; 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"); 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; statusKey.innerText = key;
button.classList.remove("disabled"); 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. * 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"); let button = element.querySelector(".trigger-button");
if (button.classList.contains("disabled")) return; if (button.classList.contains("disabled")) return;
button.classList.add("disabled"); 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"); let option = element.getAttribute("sync-option");
// See if anything extra must be done // See if anything extra must be done

13
src/utils.ts
View File

@@ -43,14 +43,16 @@ class Utils {
let permissions = ["declarativeContent"]; let permissions = ["declarativeContent"];
if (this.isFirefox()) permissions = []; if (this.isFirefox()) permissions = [];
let self = this;
chrome.permissions.request({ chrome.permissions.request({
origins: this.getInvidiousInstancesRegex(), origins: this.getInvidiousInstancesRegex(),
permissions: permissions permissions: permissions
}, async function (granted) { }, async function (granted) {
if (granted) { if (granted) {
this.setupExtraSiteContentScripts(); self.setupExtraSiteContentScripts();
} else { } else {
this.removeExtraSiteRegistration(); self.removeExtraSiteRegistration();
} }
callback(granted); callback(granted);
@@ -66,7 +68,8 @@ class Utils {
*/ */
setupExtraSiteContentScripts() { setupExtraSiteContentScripts() {
let js = [ let js = [
"content.js" "./js/vendor.js",
"./js/content.js"
]; ];
let css = [ let css = [
"content.css", "content.css",
@@ -74,6 +77,8 @@ class Utils {
"popup.css" "popup.css"
]; ];
let self = this;
if (this.isFirefox()) { if (this.isFirefox()) {
let firefoxJS = []; let firefoxJS = [];
for (const file of js) { for (const file of js) {
@@ -101,7 +106,7 @@ class Utils {
} else { } else {
chrome.declarativeContent.onPageChanged.removeRules(["invidious"], function() { chrome.declarativeContent.onPageChanged.removeRules(["invidious"], function() {
let conditions = []; let conditions = [];
for (const regex of this.getInvidiousInstancesRegex()) { for (const regex of self.getInvidiousInstancesRegex()) {
conditions.push(new chrome.declarativeContent.PageStateMatcher({ conditions.push(new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlMatches: regex } pageUrl: { urlMatches: regex }
})); }));

3
webpack/webpack.common.js
View File

@@ -7,7 +7,8 @@ module.exports = {
entry: { entry: {
popup: path.join(__dirname, srcDir + 'popup.ts'), popup: path.join(__dirname, srcDir + 'popup.ts'),
background: path.join(__dirname, srcDir + 'background.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: { output: {
path: path.join(__dirname, '../dist/js'), path: path.join(__dirname, '../dist/js'),