Per-track volume sliders

3 files changed, 82 insertions, 10 deletions

diff --git a/extension/background.js b/extension/background.js
index 3a51809..50b8570 100644
--- a/extension/background.js
+++ b/extension/background.js
@@ -58,10 +58,14 @@ browser.runtime.onMessage.addListener(async ({urlString, music, type, base64, tr
                 const {rule} = rulesOnThisPage[0];
                 const {music} = rule;
 
-                port.postMessage(music.map(track => ({track, volume: 100})));
+                port.postMessage(
+                    Array.from(Object.entries(music)).map(([track, volume]) => ({track, volume}))
+                );
             });
     } else if (music) {
-        port.postMessage(music.map(track => ({track, volume: 100})));
+        port.postMessage(
+            Array.from(Object.entries(music)).map(([track, volume]) => ({track, volume}))
+        );
     } else if (type === 'uploadTrack' && trackName && base64) {
         port.postMessage({type: 'uploadTrack', trackName, base64});
         return new Promise(resolve => {
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);
     });
diff --git a/extension/popup/style.css b/extension/popup/style.css
index 00e0f14..6338f93 100644
--- a/extension/popup/style.css
+++ b/extension/popup/style.css
@@ -155,6 +155,38 @@ h1 {
     float: right;
 }
 
+#track-list li.track label {
+    display: block;
+    white-space: nowrap;
+}
+
+.track .top-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+input[type=range] {
+    -webkit-appearance: none;
+    background: transparent;
+    vertical-align: bottom;
+}
+
+input[type=range]::-moz-range-thumb, input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 3px;
+    background: #777777;
+    border: 1px solid black;
+}
+
+input[type=range]::-moz-range-track, ::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    background: #AAA;
+}
+
 #track-list li.action {
     text-align: center;
 }