☰

Bandcamp Volume Slider

A subtle volume slider for Bandcamp sites

  1. // ==UserScript==
  2. // @namespace   raina
  3. // @name        Bandcamp Volume Slider
  4. // @author      raina
  5. // @description A subtle volume slider for Bandcamp sites
  6. // @version     0.2
  7. // @include     /^https?:\/\//
  8. // @run-at      document-end
  9. // @grant       none
  10. // ==/UserScript==
  11. window.self === window.top && window.siteroot && "https://bandcamp.com" == window.siteroot && (function() {
  12.     const progbar_empty = document.querySelector('.progbar_empty');
  13.     const progbar_fill = document.querySelector('.progbar_fill');
  14.     const thumb = document.querySelector('.progbar .thumb');
  15.     const style = document.createElement("style");
  16.     style.textContent = `
  17.         #volume_cell {
  18.             vertical-align: middle;
  19.         }
  20.         #volume_ctrl {
  21.             -moz-appearance: none;
  22.             -webkit-appearance: none;
  23.             background-color: ${getComputedStyle(progbar_empty).getPropertyValue("background-color")};
  24.             background-image: linear-gradient(${getComputedStyle(progbar_fill).getPropertyValue("background-color")}, ${getComputedStyle(progbar_fill).getPropertyValue("background-color")});
  25.             background-repeat: repeat-y;
  26.             border: ${getComputedStyle(progbar_empty).getPropertyValue("border-top-color")} 1px solid;
  27.             height: 8px;
  28.             width: 45px;
  29.         }
  30.         #volume_ctrl::-webkit-slider-thumb,
  31.         #volume_ctrl::-moz-range-thumb {
  32.             -moz-appearance: none;
  33.             -webkit-appearance: none;
  34.             background: ${getComputedStyle(thumb).getPropertyValue("background-color")};
  35.             box-shadow: ${getComputedStyle(thumb).getPropertyValue("border-top-color")} 0 0 0 1px inset;
  36.             border: none;
  37.             border-radius: 1px;
  38.             height: 12px;
  39.             width: 20px;
  40.         }
  41.     `;
  42.     document.head.appendChild(style);
  43.     const player_title = document.querySelector('.track_cell');
  44.     const volume_cell = document.createElement("td");
  45.     volume_cell.id = "volume_cell";
  46.     volume_cell.setAttribute("colspan", 2);
  47.     const volume_ctrl = document.createElement("input");
  48.     volume_ctrl.id = "volume_ctrl";
  49.     volume_ctrl.type = "range";
  50.     volume_ctrl.min = 0;
  51.     volume_ctrl.max = 100;
  52.     volume_ctrl.step = 10;
  53.     volume_ctrl.value = 70;
  54.     volume_ctrl.addEventListener("input", ev => {
  55.     volume_ctrl.style.backgroundSize = parseInt(volume_ctrl.value, 10) + "%";
  56.         volume_ctrl.style.backgroundSize = parseInt(ev.target.value, 10) + "%";
  57.         [].forEach.call(document.querySelectorAll("audio"), track => {
  58.             track.volume = parseInt(ev.target.value, 10) / 100;
  59.         });
  60.     });
  61.     volume_cell.appendChild(volume_ctrl);
  62.     player_title.removeAttribute("colspan");
  63.     player_title.parentElement.appendChild(volume_cell);
  64.     document.addEventListener("load", ev => console.log("moo"));
  65. }());