filtered beats, much better 'beat interval' slider, linking to artist's url

app/pods/components/music-tab/component.js

@@ -16,6 +16,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
   }.observes('active'),
 
   actions: {
+    gotoURL(URL){
+      window.open(URL, '_blank');
+    },
     handleNewSoundCloudURL(URL){
     SC.resolve(URL).then((resultObj)=>{
       var processResult = (result)=>{
@@ -117,10 +120,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     defaultControls(){
       var beatOptions = this.get('beatOptions');
 
-      this.changePlayerControl('threshold', beatOptions.threshold.defaultValue, true, true);
+      this.changePlayerControl('threshold', beatOptions.threshold.defaultValue);
-      this.changePlayerControl('decay', beatOptions.decay.defaultValue, true, true);
+      this.changePlayerControl('interval', beatOptions.interval.defaultValue);
-      this.changePlayerControl('frequency', beatOptions.frequency.defaultValue, true, true);
+      this.changePlayerControl('frequency', beatOptions.frequency.defaultValue);
-      this.changePlayerControl('transitionTime', beatOptions.transitionTime.defaultValue, true, true);
+      this.changePlayerControl('transitionTime', beatOptions.transitionTime.defaultValue);
     },
     playerAreaPlay(){
       if(Em.isEmpty(Em.$('#playerControls:hover')) && this.get('playQueuePointer') !== -1 ){
@@ -245,17 +248,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     repeatChanged(value) {
       this.changePlayerControl('repeat', Em.isNone(value) ? (this.get('repeat') + 1) % 3 : value);
     },
-    thresholdChanged(value) {
-      this.changePlayerControl('threshold', value, true);
-    },
     transitionTimeChanged(value) {
       this.changePlayerControl('transitionTime', value);
     },
     playerBottomDisplayedChanged(value) {
       this.changePlayerControl('playerBottomDisplayed', value);
     },
-    decayChanged(value){
+    thresholdChanged(value) {
-      this.changePlayerControl('decay', value, true);
+      this.changePlayerControl('threshold', value, true);
+    },
+    intervalChanged(value){
+      this.changePlayerControl('interval', value, true);
     },
     frequencyChanged(value){
       this.changePlayerControl('frequency', value, true);
@@ -314,21 +317,18 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     }
   },
 
-  changePlayerControl(name, value, isOption, skipSaveBeatPrefs){
+  changePlayerControl(name, value, saveBeatPrefs){
     this.set(name, value);
 
-    if(isOption){
+    if(saveBeatPrefs && this.get('usingLocalAudio') && this.get('playQueuePointer') !== -1){
-      var options = {};
-      options[name] = value;
-      if(this.get('usingLocalAudio') && this.get('playQueuePointer') !== -1 && skipSaveBeatPrefs !== true) {
       this.saveSongBeatPreferences();
     }
 
-      // filter the threshold manually
+    if(name === 'frequency'){
-      if(name !== 'threshold'){
+      var options = {};
+      options[name] = value;
       this.get('kick').set(options);
     }
-    }
 
     this.get('storage').set('huegasm.' + name, value);
   },
@@ -345,7 +345,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       title = Em.isEmpty(song.artist) ? song.filename : song.artist + '-' + song.title,
       songBeatPreferences = this.get('songBeatPreferences');
 
-    songBeatPreferences[title] = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') };
+    songBeatPreferences[title] = {threshold: this.get('threshold'), interval: this.get('interval'), frequency: this.get('frequency') };
 
     this.set('usingBeatPreferences', true);
     this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences, { compress: true });
@@ -360,16 +360,16 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       newOldBeatPrefCache = null;
 
     if(!Em.isNone(preference)) { // load existing beat prefs
-      newOldBeatPrefCache = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') };
+      newOldBeatPrefCache = {threshold: this.get('threshold'), interval: this.get('interval'), frequency: this.get('frequency') };
 
-      this.changePlayerControl('threshold', preference.threshold, true, true);
+      this.changePlayerControl('threshold', preference.threshold);
-      this.changePlayerControl('decay', preference.decay, true, true);
+      this.changePlayerControl('interval', preference.interval);
-      this.changePlayerControl('frequency', preference.frequency, true, true);
+      this.changePlayerControl('frequency', preference.frequency);
       this.set('usingBeatPreferences', true);
     } else if(!Em.isNone(oldBeatPrefCache)) { // revert to using beat prefs before the remembered song
-      this.changePlayerControl('threshold', oldBeatPrefCache.threshold, true, true);
+      this.changePlayerControl('threshold', oldBeatPrefCache.threshold);
-      this.changePlayerControl('decay', oldBeatPrefCache.decay, true, true);
+      this.changePlayerControl('interval', oldBeatPrefCache.interval);
-      this.changePlayerControl('frequency', oldBeatPrefCache.frequency, true, true);
+      this.changePlayerControl('frequency', oldBeatPrefCache.frequency);
       this.set('usingBeatPreferences', false);
     }
 
@@ -465,7 +465,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
   },
 
   simulateKick(mag) {
-    var validBeat = (this.get('threshold') < mag);
+    var validBeat = (this.get('threshold') < mag),
+      beatInterval = this.get('interval');
 
     if(validBeat){
       var activeLights = this.get('activeLights'),
@@ -515,15 +516,16 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
 
         stimulateLight(light, 254, color);
         setTimeout(stimulateLight, transitionTime + 50, light, 1);
-
-        this.set('paused', true);
-
-        setTimeout(function () {
-          self.set('paused', false);
-        }, 150);
       }
     }
 
+    if(beatInterval > 0 && validBeat){
+      this.set('paused', true);
+      setTimeout(() => {
+        this.set('paused', false);
+      }, beatInterval * 1000);
+    }
+
     //work the music beat area
     if(this.get('speakerViewed')){
       if(validBeat){
@@ -537,7 +539,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         maxSize = this.get('maxBeatHistorySize'),
         html = 'Beat intesity of <b>' + mag.toFixed(3) + '</b> at <b>' + this.get('timeElapsedTxt') + '</b>';
 
-      if(!validBeat && debugFiltered){
+      if(!validBeat){
+        if(!debugFiltered){
+          return;
+        }
         html = '<span class="filterBeat">' + html + ' ( filtered ) </span>';
       }
       beatHistory.unshiftObjects(html);
@@ -554,11 +559,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     var dancer = new Dancer(),
       storage = new window.Locally.Store(),
       self = this,
-      decay = this.get('decay'),
       frequency = this.get('frequency'),
       kick = dancer.createKick({
         threshold: this.beatOptions.threshold.range.min,
-        decay: decay,
         frequency: frequency,
         onKick: function (mag) {
           if (self.get('paused') === false) {
@@ -601,7 +604,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       this.set('usingMicSupported', false);
     }
 
-    ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences'].forEach(function (item) {
+    ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences', 'debugFiltered'].forEach(function (item) {
       if (!Em.isNone(storage.get('huegasm.' + item))) {
         var itemVal = storage.get('huegasm.' + item);
 

app/pods/components/music-tab/mixins/music-tab.js

@@ -20,10 +20,10 @@ export default Em.Mixin.create({
         }
       }
     },
-    decay: {
+    interval: {
-      range: {min: 0, max: 0.1},
+      range: {min: 0, max: 0.5},
       step: 0.01,
-      defaultValue: 0.02,
+      defaultValue: 0.15,
       pips: {
         mode: 'positions',
         values: [0,20,40,60,80,100],
@@ -66,13 +66,13 @@ export default Em.Mixin.create({
 
   transitionTime: 0.1,
   threshold: 0.3,
-  decay: 0.02,
+  interval: 0.15,
   frequency: [0,4],
 
   playQueuePointer: -1,
   playQueue: Em.A(),
   beatHistory: Em.A(),
-  maxBeatHistorySize: 100,
+  maxBeatHistorySize: 200,
   timeElapsed: 0,
   timeTotal: 0,
   lastLightBopIndex: 0,
@@ -136,16 +136,23 @@ export default Em.Mixin.create({
   }.property('playing'),
 
   speakerViewed: true,
-  debugFiltered: true,
+  debugFiltered: false,
   speakerLabel: function() {
+    this.get('storage').set('huegasm.speakerViewed', this.get('speakerViewed'));
+
     if(this.get('speakerViewed')){
+      this.get('beatHistory').clear();
       return 'Speaker View';
     } else {
       return 'Debug View';
     }
   }.property('speakerViewed'),
   debugFilteredText: function(){
-    if(this.get('debugFiltered')){
+    var debugFiltered = this.get('debugFiltered');
+    this.get('storage').set('huegasm.debugFiltered', debugFiltered);
+    Em.$('#beatHistory .filterBeat').css('display', debugFiltered === true ? 'inline' : 'none');
+
+    if(debugFiltered){
       return 'View Filtered';
     } else {
       return 'Hide Filtered';
@@ -280,11 +287,6 @@ export default Em.Mixin.create({
     });
   }.observes('dimmerOn'),
 
-  onSpeakerViewedChange: function(){
-    this.get('storage').set('huegasm.speakerViewed', this.get('speakerViewed'));
-    this.get('beatHistory').clear();
-  }.observes('speakerViewed'),
-
   onOptionChange: function(self, option){
     this.get('storage').set('huegasm.' + option, this.get(option));
   }.observes('randomTransition', 'onBeatBriAndColor'),

app/pods/components/music-tab/template.hbs

@@ -73,7 +73,12 @@
               class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
               {{#if item.title}}
                 {{item.title}}
+              {{#if item.artistUrl}}
+                  <a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}><div class="songArtist">{{item.artist}}</div></a>
+              {{else}}
                   <div class="songArtist">{{item.artist}}</div>
+              {{/if}}
+
               {{else}}
                 {{item.filename}}
               {{/if}}
@@ -102,31 +107,28 @@
     {{/if}}
 
     <div class="row">
-      <div class="beatOption col-xs-4">
+      <div class="beatOption col-xs-3">
         <div class="text-center">{{threshold}}</div>
         {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
-        <span data-toggle="tooltip" data-placement="bottom auto" data-title="Threshold of the sound intensity for the beat" class="optionDescription bootstrapTooltip">Treshold</span>
+        <span data-toggle="tooltip" data-placement="bottom auto" data-title="The minimum sound intensity for the beat to register" class="optionDescription bootstrapTooltip">Beat Threshold</span>
       </div>
 
-{{!--
     <div class="beatOption col-xs-3">
-        <div class="text-center">{{decay}}</div>
+        <div class="text-center">{{interval}} sec</div>
-      {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
+      {{range-slider start=interval orientation="vertical" step=beatOptions.interval.step range=beatOptions.interval.range slide="intervalChanged" pips=beatOptions.interval.pips}}
-        <span data-toggle="tooltip" data-placement="bottom auto" data-title="The rate at which the previously registered beat's intensity is reduced to find the next beat" class="optionDescription bootstrapTooltip">Decay Rate</span>
+        <span data-toggle="tooltip" data-placement="bottom auto" data-title="The minimum amount of time between each registered beat" class="optionDescription bootstrapTooltip">Beat Interval</span>
     </div>
-{{/if}}
- --}}
 
-<div class="beatOption col-xs-4">
+<div class="beatOption col-xs-3">
   <div class="text-center">[{{#each frequency as |item index|}}{{item}}{{#unless index}}
     ,{{/unless}}{{/each}}
     ]
   </div>
   {{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
-  <span data-toggle="tooltip" data-placement="bottom auto" data-title="The frequency range of sound to listen on for the beat" class="optionDescription bootstrapTooltip">Frequency Range</span>
+  <span data-toggle="tooltip" data-placement="bottom auto" data-title="The frequency range of the sound to listen on for the beat" class="optionDescription bootstrapTooltip">Frequency Range</span>
 </div>
 
-<div class="beatOption col-xs-4">
+<div class="beatOption col-xs-3">
   <div class="text-center">{{transitionTime}} sec</div>
   {{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}}
   <span data-toggle="tooltip" data-placement="bottom auto" data-title="The time it takes for a light to change color or brightness" class="optionDescription bootstrapTooltip">Transition Time</span>

app/styles/app.scss

@@ -746,7 +746,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
   height: 85%;
   background-color: white;
   border-radius: 10px;
-  width: 300px;
+  width: 290px;
   margin: 40px auto 0 auto;
   overflow: auto;
   padding: 10px;

bower.json

@@ -10,7 +10,9 @@
     "ember-qunit": "0.4.9",
     "ember-qunit-notifications": "0.0.7",
     "ember-resolver": "~0.1.18",
+    "font-awesome": "~4.4.0",
     "hammerjs": "~2.0.4",
+    "intro.js": "~1.1.1",
     "JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
     "jquery": "~2.1.4",
     "jquery-mousewheel": "~3.1.13",
@@ -19,8 +21,7 @@
     "matchMedia": "~0.2.0",
     "nouislider": "^8.0.1",
     "qunit": "~1.18.0",
-    "three.js": "~0.72.0",
+    "three.js": "~0.72.0"
-    "font-awesome": "~4.4.0"
   },
   "resolutions": {
     "ember": "~2.1.0",

ember-cli-build.js

@@ -15,6 +15,8 @@ module.exports = function(defaults) {
   app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
   app.import('bower_components/three.js/three.js');
   app.import('bower_components/locallyjs/dist/locally.min.js');
+  app.import('bower_components/intro.js/intro.js');
+  app.import('bower_components/intro.js/introjs.css');
 
   // Use `app.import` to add additional libraries to the generated
   // output files.