2 files changed, 18 insertions, 13 deletions
diff --git a/pages/options/options.html b/pages/options/options.html
index 8e074037..6641e5c4 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -127,7 +127,7 @@
             id="nitter-instance"
             type="url"
             name="nitter-instance"
-            placeholder="https://nitter.net"
+            placeholder="Random instance (none selected)"
           />
         </div>
       </section>
@@ -137,7 +137,7 @@
           <input
             id="invidious-instance"
             type="url"
-            placeholder="https://invidious.snopyta.org"
+            placeholder="Random instance (none selected)"
           />
         </div>
       </section>
@@ -147,7 +147,7 @@
           <input
             id="bibliogram-instance"
             type="url"
-            placeholder="https://bibliogram.art"
+            placeholder="Random instance (none selected)"
           />
         </div>
       </section>
@@ -228,9 +228,8 @@
           <option value="">Default</option>
           <option value="hd720">720p</option>
           <option value="medium">480p</option>
-          <option value="dash"
-            >DASH (Dynamic Adaptive Streaming over HTTP)</option
-          >
+          <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+          </option>
         </select>
       </section>
       <section class="settings-block">
@@ -257,7 +256,9 @@
         </table>
       </section>
       <section class="settings-block">
-        <h1 data-localise="__MSG_invidiousVolume__">Invidious Volume</h1>
+        <h1 data-localise="__MSG_invidiousVolume__">
+          Invidious Volume
+        </h1>
         <input
           id="invidious-volume"
           name="invidious-volume"
@@ -265,7 +266,7 @@
           min="0"
           max="100"
           step="1"
-        />
+        /><span id="volume-value"></span>
       </section>
       <section class="settings-block">
         <h1 data-localise="__MSG_invidiousPlayerStyle__">
diff --git a/pages/options/options.js b/pages/options/options.js
index 89ef315f..8149be7b 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -140,6 +140,9 @@ browser.storage.sync.get(
     exceptions = result.exceptions || [];
     exceptions.forEach(prependExceptionsItem);
     invidiousVolume.value = result.invidiousVolume;
+    document.querySelector("#volume-value").textContent = result.invidiousVolume
+      ? `${result.invidiousVolume}%`
+      : " - ";
     invidiousPlayerStyle.value = result.invidiousPlayerStyle || "";
     invidiousSubtitles.value = result.invidiousSubtitles || "";
     invidiousAutoplay.checked = result.invidiousAutoplay;
@@ -313,11 +316,12 @@ persistInvidiousPrefs.addEventListener("change", (event) => {
 });
 
 let invidiousVolumeChange = debounce(() => {
-  if (invidiousInstance.checkValidity()) {
-    browser.storage.sync.set({
-      invidiousVolume: invidiousVolume.value,
-    });
-  }
+  document.querySelector(
+    "#volume-value"
+  ).textContent = `${invidiousVolume.value}%`;
+  browser.storage.sync.set({
+    invidiousVolume: invidiousVolume.value,
+  });
 }, 500);
 invidiousVolume.addEventListener("input", invidiousVolumeChange);