Merge pull request #13 from NYPD/v0.1.0

V0.1.0
NYPD · Aug 6, 2017 · 78e4e06 · 78e4e06
2 parents 48a8120 + a9c71e8
commit 78e4e06
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,20 @@
-## Update 2017-5-22
-Extension is fully useless. I'll look into enhancing what they have since it is a bit difficult to select an exact volume.
-
-## Update 2017-5-16
-Looks like soundcloud changed the way their default volume control handles, which could possibly result in this extension now being useless....
-
 # stratus
-soundcloud.com is way too loud.
+~~soundcloud.com is way too loud.~~
+
+soundcloud.com was way too loud, now its just hard to select an appropriate volume level of your choosing.
 
 ## What is this?
-Simple chrome extension that provides more control over the volume slider than is available by the default on [SoundCloud.](www.soundcloud.com)
+Simple chrome extension that provides more control over the volume slider than is available by the default on [SoundCloud.](https://www.soundcloud.com)
 
 Check it out on the [chrome web store.](https://chrome.google.com/webstore/detail/stratus/ankobfgkkipkkdpbkgpplhjoapjkfheg)
 
 ## Why?
-The volume slider they give on that page is wack. Plus other chrome extensions found on the store seemed to have too many permissions for my liking / did not work on SoundCloud.
+The volume slider they give on that page ~~is wack~~ was wack. Now it is just difficult to exactly select what you want. Plus other chrome extensions found on the store seemed to have too many permissions for my liking / did not work on SoundCloud.
+
+## Extension History
+
+#### Update 2017-5-22
+Extension is fully useless. I'll look into enhancing what they have since it is a bit difficult to select an exact volume.
+
+#### Update 2017-5-16
+Looks like soundcloud changed the way their default volume control handles, which could possibly result in this extension now being useless....
diff --git a/css/content-script.css b/css/content-script.css
@@ -1,6 +1,12 @@
 /* Soundcloud overwrites **************************************************************************/
 .playControls__volume {
-  margin-right: 10px !important;
+  margin-right: 5px !important;
+}
+
+/* Allows for the hover css property to properly take effexct */
+.playControls__volume.stratus {
+  padding-top: 5px;
+  margin-top: -5px;
 }
 
 .playControls__volume.stratus .volume__button {
@@ -42,23 +48,29 @@
   left: -66px;
   bottom: 50px;
   z-index: 1;
-  height: 45px;
+  height: 50px;
   padding: 5px;
   border-radius: 5px;
   text-align: center;
   background-color: #f2f2f2;
   border: 1px solid transparent;
-  border-color: #ccc;
+  border-color: #cccccc;
   box-shadow: 0 2px 4px rgba(0,0,0,.1);
 }
-.playControls__volume .stratus-slider-container .stratus-volume {
+.playControls__volume .stratus-slider-container .stratus-volume-input {
+  width: 40px;
+  padding-left: 5px;
+  padding-right: 5px;
   font-weight: bold;
 }
 
 .playControls__volume .stratus-slider-container .stratus-slider {
+  width: 200px;
   cursor: pointer;
 }
 
+.playControls__volume.stratus:hover .stratus-slider-container,
+.playControls__volume.stratus .stratus-slider-container:hover,
 .playControls__volume.stratus .volume.expanded .stratus-slider-container {
   display: block;
 }

diff --git a/js/content-script.js b/js/content-script.js
@@ -1,34 +1,33 @@
 const stratus = (function() {
 
-  let playControlsVolume = document.querySelector('.playControls__volume');
-  let soundCloudVolumeDiv = playControlsVolume.querySelector('.volume');
-  let soundcloudVolumeButton = soundCloudVolumeDiv.querySelector('.volume__button');
-  let soundcloudVolumeSliderWrapper = soundCloudVolumeDiv.querySelector('.volume__sliderWrapper');
+  let _playControlsVolume = document.querySelector('.playControls__volume');
+  let _soundCloudVolumeDiv = _playControlsVolume.querySelector('.volume');
+  let _soundcloudVolumeButton = _soundCloudVolumeDiv.querySelector('.volume__button');
+  let _soundcloudVolumeSliderWrapper = _soundCloudVolumeDiv.querySelector('.volume__sliderWrapper');
+  let _stratusSlider;
+  let _stratusVolumeInput;
 
   let intialize = function() {
     _insertControls();
     _initializeListeners();
 
-    var turnOnStratus = localStorage.getItem('stratusOn') === 'true';
-    if(turnOnStratus) {
+    var stratusOff = localStorage.getItem('stratusOn') !== 'true';
+    if (stratusOff) return;
 
-      var stratusInput = document.querySelector('.stratus-input');
-      var changeEvent = new Event('change', {'bubbles': true});
-      changeEvent.stratusVolume = localStorage.getItem('stratusVolume');
+    var stratusInput = document.querySelector('.stratus-checkbox');
+    var changeEvent = new Event('change', {'bubbles': true});
+    changeEvent.stratusVolume = localStorage.getItem('stratusVolume');
 
-      stratusInput.checked = true;
-      stratusInput.dispatchEvent(changeEvent);
-    }
+    stratusInput.checked = true;
+    stratusInput.dispatchEvent(changeEvent);
   };
 
   let _insertControls = function() {
 
-    let playControlsVolume = document.querySelector('.playControls__volume');
-
     //Listener Handle
     let checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
-    checkbox.className = 'stratus-input';
+    checkbox.className = 'stratus-checkbox';
     checkbox.title = 'Check to enable stratus';
 
     let stratusIcon = document.createElement('img');
@@ -41,102 +40,117 @@ const stratus = (function() {
     divInputContainer.appendChild(stratusIcon);
     divInputContainer.appendChild(checkbox);
 
-    playControlsVolume.insertAdjacentElement('afterend', divInputContainer);
+    _playControlsVolume.insertAdjacentElement('afterend', divInputContainer);
 
 
     //Slider Stuff
     let stratusSlider = document.createElement('input');
     stratusSlider.type = 'range';
     stratusSlider.className = 'stratus-slider';
 
-    let stratusVolumeSpan = document.createElement('span');
-    stratusVolumeSpan.className = 'stratus-volume';
+    let stratusVolumeInput = document.createElement('input');
+    stratusVolumeInput.type = 'number';
+    stratusVolumeInput.className = 'stratus-volume-input';
+    stratusVolumeInput.min = 0;
+    stratusVolumeInput.max = 100;
 
     let stratusSliderContainer = document.createElement('div');
     stratusSliderContainer.className = 'stratus-slider-container';
 
     stratusSliderContainer.appendChild(stratusSlider);
-    stratusSliderContainer.appendChild(stratusVolumeSpan);
+    stratusSliderContainer.appendChild(stratusVolumeInput);
 
-    playControlsVolume.querySelector('.volume').insertAdjacentElement('beforeend', stratusSliderContainer);
+    _playControlsVolume.querySelector('.volume').insertAdjacentElement('beforeend', stratusSliderContainer);
 
   };
 
   let _initializeListeners = function() {
 
     let stratusContainer = document.querySelector('.stratus-container');
-    let stratusInput = document.querySelector('.stratus-input');
-    let stratusSlider = document.querySelector('.stratus-slider');
+    let stratusCheckbox = document.querySelector('.stratus-checkbox');
+    _stratusVolumeInput = document.querySelector('.stratus-volume-input');
+    _stratusSlider = document.querySelector('.stratus-slider');
 
     stratusContainer.addEventListener('click', function(event) {
 
       var target = event.target;
       var isInput = target.nodeName === 'INPUT';
-      if(isInput) return false;
+      if (isInput) return false;
 
       var clickEvent = new MouseEvent('click', {'bubbles': false});
-      stratusInput.dispatchEvent(clickEvent);
+      stratusCheckbox.dispatchEvent(clickEvent);
 
       return false;
     });
 
-    stratusInput.addEventListener('change', function(event) {
+    stratusCheckbox.addEventListener('change', function(event) {
 
-      localStorage.setItem('stratusOn', stratusInput.checked);
+      localStorage.setItem('stratusOn', stratusCheckbox.checked);
 
-      playControlsVolume.classList.toggle('stratus');
+      _playControlsVolume.classList.toggle('stratus');
 
-      var stratusNotEnabled = !playControlsVolume.classList.contains('stratus');
-      if (stratusNotEnabled) {
-        /*
-         * Sets the [data-level] to a whole number between 0-10 so the correct speaker
-         * icon will be displayed in soundcloud when coming out of stratus mode. This actually
-         * does not change the actual volume level so the user won't hear a sudden change in volume
-         */
-        soundCloudVolumeDiv.setAttribute('data-level', Math.ceil(stratusSlider.value / 10));
-        return false;
+      var stratusNotEnabled = !_playControlsVolume.classList.contains('stratus');
+      if (stratusNotEnabled) {
+        /*
+         * Sets the [data-level] to a whole number between 0-10 so the correct speaker
+         * icon will be displayed in soundcloud when coming out of stratus mode. This actually
+         * does not change the actual volume level so the user won't hear a sudden change in volume
+         */
+        _soundCloudVolumeDiv.setAttribute('data-level', Math.ceil(_stratusSlider.value / 10));
+        return false;
       }
 
       var hasStratusVolume = event.stratusVolume !== undefined && event.stratusVolume !== null;
 
-      var volumeLevel = hasStratusVolume ? event.stratusVolume : Number.parseFloat(soundcloudVolumeSliderWrapper.getAttribute('aria-valuenow')) * 100;
-      stratusSlider.value = volumeLevel;
+      var volumeLevel = hasStratusVolume ? event.stratusVolume : Number.parseFloat(_soundcloudVolumeSliderWrapper.getAttribute('aria-valuenow')) * 100;
+      _stratusSlider.value = volumeLevel;
 
-      var changeEvent = new Event('change', {'bubbles': false });
-      stratusSlider.dispatchEvent(changeEvent);
+      var changeEvent = new Event('change', {'bubbles': false});
+      _stratusSlider.dispatchEvent(changeEvent);
 
     });
 
-    stratusSlider.addEventListener('change', _stratusSliderEventHandler); //Normal change event
-    stratusSlider.addEventListener('input', _stratusSliderEventHandler); //Range sliding event
-    stratusSlider.addEventListener('mouseout', function () {stratusSlider.blur();});
+    _stratusVolumeInput.addEventListener('change', _stratusVolumeInputEventHandler);
+    _stratusVolumeInput.addEventListener('mouseup', _stratusVolumeInputEventHandler);
+
+    _stratusSlider.addEventListener('change', _stratusSliderEventHandler); //Normal change event
+    _stratusSlider.addEventListener('input', _stratusSliderEventHandler); //Range sliding event
+    _stratusSlider.addEventListener('mouseout', function() {
+      _stratusSlider.blur();
+    });
 
-    soundcloudVolumeButton.addEventListener('click', function(event) {
+    _soundcloudVolumeButton.addEventListener('click', function(event) {
 
-      var stratusNotEnabled = !playControlsVolume.classList.contains('stratus');
+      var stratusNotEnabled = !_playControlsVolume.classList.contains('stratus');
       if (stratusNotEnabled) return true;
 
-      soundcloudVolumeButton.classList.toggle('stratus-muted');
+      _soundcloudVolumeButton.classList.toggle('stratus-muted');
 
-      var isMuted = soundcloudVolumeButton.classList.contains('stratus-muted');
-      var volumeLevel = isMuted? 0 : Number.parseFloat(stratusSlider.getAttribute('data-previous-volume'), 10);
+      var isMuted = _soundcloudVolumeButton.classList.contains('stratus-muted');
+      var volumeLevel = isMuted ? 0 : Number.parseFloat(_stratusSlider.getAttribute('data-previous-volume'), 10);
 
-      if(isMuted) stratusSlider.setAttribute('data-previous-volume', stratusSlider.value);
-      stratusSlider.value = volumeLevel;
+      if (isMuted) _stratusSlider.setAttribute('data-previous-volume', _stratusSlider.value);
+      _stratusSlider.value = volumeLevel;
 
-      var changeEvent = new Event('change', {'bubbles': true });
-      stratusSlider.dispatchEvent(changeEvent);
+      var changeEvent = new Event('change', {'bubbles': true});
+      _stratusSlider.dispatchEvent(changeEvent);
 
       event.preventDefault();
       event.stopPropagation();
     });
 
   };
 
+  let _stratusVolumeInputEventHandler = function() {
+    _stratusSlider.value = _stratusVolumeInput.value;
+    var changeEvent = new Event('change', {'bubbles': false});
+    _stratusSlider.dispatchEvent(changeEvent);
+  };
+
   let _stratusSliderEventHandler = function() {
 
     //'this' is the element this function will be attached to for the event listener
-    soundCloudVolumeDiv.setAttribute('data-stratus-volume', Math.ceil(this.value / 10));
+    _soundCloudVolumeDiv.setAttribute('data-stratus-volume', Math.ceil(this.value / 10));
 
     var stratusScript = document.querySelector('.stratus-script');
     if (stratusScript !== null) stratusScript.parentNode.removeChild(stratusScript);

diff --git a/js/stratus-inject.js b/js/stratus-inject.js
@@ -10,10 +10,10 @@ webpackJsonp([], {
 
       if (! modules[x].exports.broadcast) continue;
 
-      modules[x].exports.broadcast('volume:set', (volume / 100));
+      modules[x].exports.broadcast('volume', {volume: (volume / 100), muted: false} );
       break;
     }
   }
 });
 
-document.querySelector('.stratus-volume').innerText = volume;
+document.querySelector('.stratus-volume-input').value = volume;
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "stratus",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Simple extension that allows finer volume control on SoundCloud.com",
 
   "content_scripts": [{