From 8c98fdf105c223f05873e5d92da381c1adc317f8 Mon Sep 17 00:00:00 2001 From: Date: Sat, 5 Aug 2017 18:01:23 -0400 Subject: [PATCH 1/7] Update version number --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 507fc25..09dbc11 100755 --- 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": [{ From 15f705871179070eef663d5242a3823b0db90b40 Mon Sep 17 00:00:00 2001 From: NYPD Date: Sat, 5 Aug 2017 18:38:35 -0400 Subject: [PATCH 2/7] Fix stratus volume from not being able to be set Fixes #12 --- js/stratus-inject.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/stratus-inject.js b/js/stratus-inject.js index 34f4287..f7105cd 100644 --- a/js/stratus-inject.js +++ b/js/stratus-inject.js @@ -10,7 +10,7 @@ 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; } } From 301a1f13d9f6c66c3b96d589e4f719e1ec6e8f29 Mon Sep 17 00:00:00 2001 From: NYPD Date: Sun, 6 Aug 2017 01:08:47 -0400 Subject: [PATCH 3/7] Increase slider length Closes #8 --- css/content-script.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/content-script.css b/css/content-script.css index bfa7669..69a9309 100644 --- a/css/content-script.css +++ b/css/content-script.css @@ -56,6 +56,7 @@ } .playControls__volume .stratus-slider-container .stratus-slider { + width: 200px; cursor: pointer; } From 7e5484c3eb72a347434be6fd4b99111cddd1cd8e Mon Sep 17 00:00:00 2001 From: NYPD Date: Sun, 6 Aug 2017 01:10:57 -0400 Subject: [PATCH 4/7] Fix readme link to soundcloud.com Fixes #11 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ac158aa..164660c 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Looks like soundcloud changed the way their default volume control handles, whic soundcloud.com is way too loud. ## 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) From 02fe34b41c6069d29499000a92960df21c78c5b9 Mon Sep 17 00:00:00 2001 From: NYPD Date: Sun, 6 Aug 2017 01:15:36 -0400 Subject: [PATCH 5/7] Update readme to reflect latest extension development --- README.md | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 164660c..4a7d765 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,7 @@ -## 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.](https://www.soundcloud.com) @@ -13,4 +9,12 @@ Simple chrome extension that provides more control over the volume slider than i 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.... From 09a8eb3bb1b722b600ab5dbf09dc34b591bcc318 Mon Sep 17 00:00:00 2001 From: NYPD Date: Sun, 6 Aug 2017 02:50:01 -0400 Subject: [PATCH 6/7] Make the sound volume into a text input This will alow users to directly enter what colume they want easily. Closes #9 --- js/content-script.js | 120 ++++++++++++++++++++++++------------------- js/stratus-inject.js | 2 +- 2 files changed, 68 insertions(+), 54 deletions(-) diff --git a/js/content-script.js b/js/content-script.js index 8849499..83677cc 100644 --- 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,7 +40,7 @@ const stratus = (function() { divInputContainer.appendChild(stratusIcon); divInputContainer.appendChild(checkbox); - playControlsVolume.insertAdjacentElement('afterend', divInputContainer); + _playControlsVolume.insertAdjacentElement('afterend', divInputContainer); //Slider Stuff @@ -49,83 +48,92 @@ const stratus = (function() { 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(); @@ -133,10 +141,16 @@ const stratus = (function() { }; + 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 index f7105cd..b6c617c 100644 --- a/js/stratus-inject.js +++ b/js/stratus-inject.js @@ -16,4 +16,4 @@ webpackJsonp([], { } }); -document.querySelector('.stratus-volume').innerText = volume; +document.querySelector('.stratus-volume-input').value = volume; From a9c71e89084581c6c214c3c3c25512c30ab082a3 Mon Sep 17 00:00:00 2001 From: NYPD Date: Sun, 6 Aug 2017 02:50:23 -0400 Subject: [PATCH 7/7] Fix issues with the stratus container losing focus --- css/content-script.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/css/content-script.css b/css/content-script.css index 69a9309..d8fa742 100644 --- 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,16 +48,19 @@ 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; } @@ -60,6 +69,8 @@ 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; }