Merge pull request #262 from Joe-Dowd/customServerAddress

Add custom server address

public/_locales/en/messages.json

@@ -395,5 +395,23 @@
      },
     "shortCheck": {
         "message": "The following submission is shorter than your minimum duration option. This could mean that this is already submitted, and just being ignored due to this option. Are you sure you would like to submit?"
+    },
+    "customServerAddress": {
+        "message": "SponsorBlock Server Address"
+    },
+    "customServerAddressDescription": {
+        "message": "The address SponsorBlock uses to make calls to the server.\nUnless you have your own server instance, this should not be changed."
+    },
+    "save": {
+        "message": "Save"
+    },
+    "reset": {
+        "message": "Reset"
+    },
+    "customAddressError": {
+        "message": "This address is not in the right form. Make sure you have http:// or https:// at the begining and no slashes or sub-folders at the end."
+    },
+    "areYouSureReset": {
+        "message": "Are you sure you would like to reset this?"
     }
 }

public/options/options.css

@@ -76,6 +76,11 @@ body {
     color: white;
 }
 
+.text-label-container {
+    font-size: 14px;
+    color: white;
+}
+
 .switch {
     position: relative;
     display: inline-block;

public/options/options.html

@@ -41,7 +41,7 @@
 			<br/>
 			<br/>
 	
-			<div option-type="text-change" sync-option="invidiousInstances">
+			<div option-type="private-text-change" sync-option="invidiousInstances">
 				<div class="option-button trigger-button">
 					__MSG_addInvidiousInstance__
 				</div>
@@ -94,6 +94,7 @@
 			<br/>
 			<br/>
 	
+	
 			<div option-type="keybind-change" sync-option="startSponsorKeybind">
 				<div class="option-button trigger-button">
 					__MSG_setStartSponsorShortcut__
@@ -150,6 +151,18 @@
 			<br/>
 			<br/>
 	
+			<div option-type="toggle" toggle-type="reverse" sync-option="dontShowNotice">
+				<label class="switch-container" label-name="__MSG_showSkipNotice__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+			</div>
+	
+			<br/>
+			<br/>
+	
 			<div option-type="toggle" toggle-type="reverse" sync-option="hideVideoPlayerControls">
 				<label class="switch-container" label-name="__MSG_showButtons__">
 					<label class="switch">
@@ -235,7 +248,7 @@
 			<br/>
 			<br/>
 	
-			<div option-type="text-change" sync-option="userID" confirm-message="userIDChangeWarning">
+			<div option-type="private-text-change" sync-option="userID" confirm-message="userIDChangeWarning">
 				<div class="option-button trigger-button">
 					__MSG_changeUserID__
 				</div>
@@ -261,13 +274,25 @@
 			<br/>
 			<br/>
 
-			<div option-type="toggle" toggle-type="reverse" sync-option="dontShowNotice">
+			<div option-type="text-change" sync-option="serverAddress">
-				<label class="switch-container" label-name="__MSG_showSkipNotice__">
+				<label class="text-label-container">
-					<label class="switch">
+					<div>__MSG_customServerAddress__</div>
-						<input type="checkbox" checked>
+
-						<span class="slider round"></span>
+					<input class="option-text-box" type="text">
-					</label>
 				</label>
+
+				<div class="option-button text-change-set inline">
+					__MSG_save__
+				</div>
+
+				<div class="option-button text-change-reset inline">
+					__MSG_reset__
+				</div>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_customServerAddressDescription__</div>
 			</div>
 	
 		</div>

src/config.ts

@@ -1,3 +1,5 @@
+import * as CompileConfig from "../config.json";
+
 interface SBConfig {
     userID: string,
     sponsorTimes: SBMap<string, any>,
@@ -20,6 +22,7 @@ interface SBConfig {
     invidiousUpdateInfoShowCount: number,
     autoUpvote: boolean,
     supportInvidious: false,
+    serverAddress: string,
     minDuration: number
 }
 
@@ -113,6 +116,7 @@ var Config: SBObject = {
         invidiousUpdateInfoShowCount: 0,
         autoUpvote: true,
         supportInvidious: false,
+        serverAddress: CompileConfig.serverAddress,
         minDuration: 0
     },
     localConfig: null,

src/options.ts

@@ -55,14 +55,51 @@ async function init() {
                 });
                 break;
             case "text-change":
-                let button = optionsElements[i].querySelector(".trigger-button");
-                button.addEventListener("click", () => activateTextChange(<HTMLElement> optionsElements[i]));
-
                 let textChangeOption = optionsElements[i].getAttribute("sync-option");
+                let textChangeInput = <HTMLInputElement> optionsElements[i].querySelector(".option-text-box");
+                
+                let textChangeSetButton = <HTMLElement> optionsElements[i].querySelector(".text-change-set");
+
+                textChangeInput.value = Config.config[textChangeOption];
+
+                textChangeSetButton.addEventListener("click", () => {
                     // See if anything extra must be done
                     switch (textChangeOption) {
+                        case "serverAddress":
+                            let result = validateServerAddress(textChangeInput.value);
+
+                            if (result !== null) {
+                                textChangeInput.value = result;
+                            } else {
+                                return;
+                            }
+
+                            break;
+                    }
+
+                    Config.config[textChangeOption] = textChangeInput.value;
+                });
+
+                // Reset to the default if needed
+                let textChangeResetButton = <HTMLElement> optionsElements[i].querySelector(".text-change-reset");
+                textChangeResetButton.addEventListener("click", () => {
+                    if (!confirm(chrome.i18n.getMessage("areYouSureReset"))) return;
+
+                    Config.config[textChangeOption] = Config.defaults[textChangeOption];
+
+                    textChangeInput.value = Config.config[textChangeOption];
+                });
+
+                break;
+            case "private-text-change":
+                let button = optionsElements[i].querySelector(".trigger-button");
+                button.addEventListener("click", () => activatePrivateTextChange(<HTMLElement> optionsElements[i]));
+
+                let privateTextChangeOption = optionsElements[i].getAttribute("sync-option");
+                // See if anything extra must be done
+                switch (privateTextChangeOption) {
                     case "invidiousInstances":
-                        invidiousInstanceAddInit(<HTMLElement> optionsElements[i], textChangeOption);
+                        invidiousInstanceAddInit(<HTMLElement> optionsElements[i], privateTextChangeOption);
                 }
 
                 break;
@@ -283,7 +320,7 @@ function keybindKeyPressed(element: HTMLElement, e: KeyboardEvent) {
  * 
  * @param element 
  */
-function activateTextChange(element: HTMLElement) {
+function activatePrivateTextChange(element: HTMLElement) {
     let button = element.querySelector(".trigger-button");
     if (button.classList.contains("disabled")) return;
 
@@ -312,3 +349,27 @@ function activateTextChange(element: HTMLElement) {
 
     element.querySelector(".option-hidden-section").classList.remove("hidden");
 }
+
+/**
+ * Validates the value used for the database server address.
+ * Returns null and alerts the user if there is an issue.
+ * 
+ * @param input Input server address
+ */
+function validateServerAddress(input: string): string {
+    // Trim the last slash if needed
+    if (input.endsWith("/")) {
+        input = input.substring(0, input.length - 1);
+    }
+
+    // Isn't HTTP protocol or has extra slashes
+    if ((!input.startsWith("https://") && !input.startsWith("http://")) 
+        || input.replace("://", "").includes("/")) {
+
+        alert(chrome.i18n.getMessage("customAddressError"));
+
+        return null;
+    }
+
+    return input;
+}

src/utils.ts

@@ -1,4 +1,3 @@
-import * as CompileConfig from "../config.json";
 import Config from "./config";
 
 class Utils {
@@ -240,7 +239,7 @@ class Utils {
     sendRequestToServer(type: string, address: string, callback?: (xmlhttp: XMLHttpRequest, err: boolean) => any) {
         let xmlhttp = new XMLHttpRequest();
   
-        xmlhttp.open(type, CompileConfig.serverAddress + address, true);
+        xmlhttp.open(type, Config.config.serverAddress + address, true);
   
         if (callback != undefined) {
             xmlhttp.onreadystatechange = function () {