Add minimum duration option

options/options.css

@@ -309,4 +309,13 @@ h1,h2,h3,h4,h5,h6 {
 
 svg {
     text-decoration: none; 
+}
+
+.number-container:before {
+    content: attr(label-name);
+    padding-right: 4px;
+    width: max-content;
+
+    font-size: 14px;
+    color: white;
 }

options/options.html

@@ -78,6 +78,20 @@
 			<br/>
 			<br/>
 	
+			<div option-type="number-change" sync-option="minDuration">
+				<label class="number-container" label-name="__MSG_minDuration__">
+					<input type="number" step="0.1" min="0">
+				</label>
+
+				<br/>
+				<br/>
+
+				<div class="small-description">__MSG_minDurationDescription__</div>
+			</div>
+
+			<br/>
+			<br/>
+
 			<div option-type="toggle" toggle-type="reverse" sync-option="disableAutoSkip">
 				<label class="switch-container" label-name="__MSG_autoSkip__">
 					<label class="switch">
@@ -94,7 +108,7 @@
 
 			<br/>
 			<br/>
-	
+
 			<div option-type="keybind-change" sync-option="startSponsorKeybind">
 				<div class="option-button trigger-button">
 					__MSG_setStartSponsorShortcut__

options/options.js

@@ -68,6 +68,20 @@ async function init() {
                 break;
             case "display":
                 updateDisplayElement(optionsElements[i])
+
+                break;
+            case "number-change":
+                let numberChangeOption = optionsElements[i].getAttribute("sync-option");
+                let configValue = SB.config[numberChangeOption];
+                let numberInput = optionsElements[i].querySelector("input");
+
+                if (configValue != undefined) {
+                    numberInput.value = configValue;
+                }
+
+                numberInput.addEventListener("input", () => {
+                    SB.config[numberChangeOption] = numberInput.value;
+                });
         }
     }