Added keybind option.

_locales/en/messages.json

@@ -341,5 +341,8 @@
     },
     "showSkipNotice": {
         "message": "Show Notice After A Sponsor Is Skipped"
+    },
+    "keybindCurrentlySet": {
+        "message": ". It is currently set to:"
     }
 }

options/options.css

@@ -7,15 +7,28 @@ body {
     text-align: center;
 }
 
+.bold {
+    font-weight: bold;
+}
+
 .hidden {
     display: none;
 }
 
+.keybind-status {
+    display: inline;
+}
+
 .small-description {
     color: white;
     font-size: 13;
 }
 
+.medium-description {
+    color: white;
+    font-size: 15;
+}
+
 .option-text-box {
     width: 300px;
 }
@@ -161,6 +174,8 @@ body {
     text-align: center;
     padding-top: 0px;
     padding-bottom: 0px;
+
+    display: inline-block;
 }
 
 #title {

options/options.html

@@ -20,6 +20,7 @@
 		<h1>__MSG_Options__</h1>
 	
 		<div id="options" class="hidden">
+			
 	
 			<div option-type="toggle" toggle-type="reverse" sync-option="disableAutoSkip">
 				<label class="switch-container" label-name="__MSG_autoSkip__">
@@ -34,6 +35,27 @@
 	
 				<div class="small-description">__MSG_autoSkipDescription__</div>
 			</div>
+
+			<br/>
+			<br/>
+	
+			<div option-type="keybind-change" sync-option="startSponsorKeybind">
+				<div class="option-button trigger-button">
+					__MSG_setStartSponsorShortcut__
+				</div>
+	
+				<div class="option-hidden-section hidden">
+					<br/>
+	
+					<div class="medium-description keybind-status">
+						__MSG_keybindDescription__
+					</div>
+
+					<span class="medium-description bold keybind-status-key">
+						
+					</span>
+				</div>
+			</div>
 	
 			<br/>
 			<br/>
@@ -107,7 +129,7 @@
 			<br/>
 	
 			<div option-type="text-change" sync-option="userID">
-				<div class="option-button text-change-trigger">
+				<div class="option-button trigger-button">
 					__MSG_changeUserID__
 				</div>
 	
@@ -115,7 +137,7 @@
 	
 				<div class="small-description">__MSG_whatChangeUserID__</div>
 	
-				<div class="option-hidden-hidden hidden">
+				<div class="option-hidden-section hidden">
 					<br/>
 	
 					<input class="option-text-box" type="text">

options/options.js

@@ -37,9 +37,14 @@ async function init() {
                 checksLeft++;
                 break;
             case "text-change":
-                let button = optionsElements[i].querySelector(".text-change-trigger");
+                let button = optionsElements[i].querySelector(".trigger-button");
                 button.addEventListener("click", () => activateTextChange(optionsElements[i]));
 
+                break;
+            case "keybind-change":
+                let keybindButton = optionsElements[i].querySelector(".trigger-button");
+                keybindButton.addEventListener("click", () => activateKeybindChange(optionsElements[i]));
+
                 break;
         }
     }
@@ -50,13 +55,68 @@ async function init() {
     optionsContainer.classList.add("animated");
 }
 
+/**
+ * Will trigger the container to ask the user for a keybind.
+ * 
+ * @param {HTMLElement} element 
+ */
+function activateKeybindChange(element) {
+    let button = element.querySelector(".trigger-button");
+    if (button.classList.contains("disabled")) return;
+
+    button.classList.add("disabled");
+
+    let option = element.getAttribute("sync-option");
+
+    chrome.storage.sync.get([option], function(result) {
+        let currentlySet = result[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : "";
+        
+        let status = element.querySelector(".option-hidden-section > .keybind-status");
+        status.innerText = chrome.i18n.getMessage("keybindDescription") + currentlySet;
+
+        if (result[option] !== null) {
+            let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
+            statusKey.innerText = result[option];
+        }
+    
+        element.querySelector(".option-hidden-section").classList.remove("hidden");
+        
+        document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
+    });
+}
+
+/**
+ * Called when a key is pressed in an activiated keybind change option.
+ * 
+ * @param {HTMLElement} element 
+ * @param {KeyboardEvent} e
+ */
+function keybindKeyPressed(element, e) {
+    e = e || window.event;
+    var key = e.key;
+
+    let option = element.getAttribute("sync-option");
+
+    chrome.storage.sync.set({[option]: key});
+
+    let status = element.querySelector(".option-hidden-section > .keybind-status");
+    status.innerText = chrome.i18n.getMessage("keybindDescriptionComplete");
+
+    let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
+    statusKey.innerText = key;
+
+    let button = element.querySelector(".trigger-button");
+
+    button.classList.remove("disabled");
+}
+
 /**
  * Will trigger the textbox to appear to be able to change an option's text.
  * 
  * @param {HTMLElement} element 
  */
 function activateTextChange(element) {
-    let button = element.querySelector(".text-change-trigger");
+    let button = element.querySelector(".trigger-button");
     if (button.classList.contains("disabled")) return;
 
     button.classList.add("disabled");
@@ -70,7 +130,7 @@ function activateTextChange(element) {
         let setButton = element.querySelector(".text-change-set");
         setButton.addEventListener("click", () => setOptionValue(option, textBox.value));
 
-        element.querySelector(".option-hidden-hidden").classList.remove("hidden");
+        element.querySelector(".option-hidden-section").classList.remove("hidden");
     });
 }