Per-track volume sliders

1 files changed, 44 insertions, 8 deletions

diff --git a/extension/popup/main.js b/extension/popup/main.js
index 5b95db8..b9d9201 100644
--- a/extension/popup/main.js
+++ b/extension/popup/main.js
@@ -48,24 +48,30 @@ function loadTrackList(opts) {
 
             li.classList.add('track');
 
+            const topRow = document.createElement('div');
+            li.appendChild(topRow);
+
             const label = document.createElement('label');
-            li.appendChild(label);
+            topRow.appendChild(label);
+
+            topRow.classList.add('top-row');
 
             const checkbox = document.createElement('input');
             label.appendChild(checkbox);
 
             checkbox.type = 'checkbox';
-            checkbox.checked = music.includes(track);
+            checkbox.checked = track in music;
             checkbox.title = `Toggle whether the track "${track}" will play when this site is opened.`
 
             checkbox.addEventListener('click', () => {
+                updateVolumeSlider();
                 if (checkbox.checked) {
-                    if (!music.includes(track)) {
-                        music.push(track);
+                    if (!(track in music)) {
+                        music[track] = volumeSlider.value;
                     }
                 } else {
-                    if (music.includes(track)) {
-                        music.splice(music.indexOf(track), 1);
+                    if (track in music) {
+                        delete music[track];
                     }
                 }
                 saveRule();
@@ -74,7 +80,7 @@ function loadTrackList(opts) {
             label.appendChild(document.createTextNode(' ' + track));
 
             const deleteButton = document.createElement('button');
-            li.appendChild(deleteButton);
+            topRow.appendChild(deleteButton);
 
             deleteButton.appendChild(document.createTextNode('Delete...'));
             deleteButton.title = `Delete the track from all site configuration. You will be confirmed first.`;
@@ -95,6 +101,36 @@ function loadTrackList(opts) {
                     ]).then(() => changeScreen('main-screen'));
                 }
             });
+
+            const bottomRow = document.createElement('div');
+            li.appendChild(bottomRow);
+
+            const volumeLabel = document.createElement('label');
+            bottomRow.appendChild(volumeLabel);
+
+            volumeLabel.appendChild(document.createTextNode('Volume: '));
+
+            const updateVolumeSlider = () => {
+                volumeLabel.style.display = checkbox.checked ? 'block' : 'none';
+            };
+
+            const volumeSlider = document.createElement('input');
+            volumeLabel.appendChild(volumeSlider);
+
+            updateVolumeSlider();
+
+            volumeSlider.type = 'range';
+            volumeSlider.min = 0;
+            volumeSlider.max = 100;
+            volumeSlider.step = 1;
+            volumeSlider.value = track in music ? music[track] : 100;
+
+            volumeSlider.addEventListener('change', () => {
+                if (track in music) {
+                    music[track] = volumeSlider.value;
+                    saveRule();
+                }
+            });
         }
 
         const actionLi = document.createElement('li');
@@ -343,7 +379,7 @@ function loadRuleList({tab, siteSettings, selectRule}) {
             sourceURL: tab.url,
             hostnameMatch: hostnameParts.slice().reverse(),
             pathnameMatch: [],
-            music: []
+            music: {}
         };
         selectRule(rule);
     });