saving song beat preferences

README.md

@@ -8,7 +8,6 @@ Music awesomeness for hue lights.
 - app intro with intro.js
 - music visualizations with three.js
 - integrate with soundcloud
-- display player time when hovering over seek bar
 
 ## BUGS
 - can't create groups anymore
@@ -18,3 +17,4 @@ Music awesomeness for hue lights.
 - help, contact, about, youtube video ???
 - beat settings by interval
 - auto beat detection mode
+- display player time when hovering over seek bar

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

@@ -20,6 +20,20 @@ export default Em.Component.extend({
         activeLights.removeObject(light);
       } else {
         activeLights.pushObject(light);
+
+        // sync the current light settings to the newly added light
+        var options = {on: this.get('lightsOn'), bri: this.get('lightsBrightness'), effect: this.get('colorLoopOn') ? 'colorloop' : 'none'},
+          rgb = this.get('rgb');
+
+        if(rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
+          options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
+        }
+
+        Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
+          data: JSON.stringify(options),
+          contentType: 'application/json',
+          type: 'PUT'
+        });
       }
     },
     toggleColorpicker() {
@@ -175,7 +189,6 @@ export default Em.Component.extend({
     return this.get('colorLoopOn') ? 'On' : 'Off';
   }.property('colorLoopOn'),
 
-
   // **************** STROBE LIGHT START ****************
 
   strobeOn: false,

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

@@ -50,8 +50,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       this.$('#playerBottom').slideToggle();
       this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
     },
-    saveSongSettings() {
-    },
     goToSong(index, playSong){
       var dancer = this.get('dancer'), audio = new Audio();
       audio.src = this.get('playQueue')[index].url;
@@ -66,6 +64,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         timeElapsed: 0
       });
 
+      this.loadSongBeatPreferences();
+
       if(playSong){
         this.send('play');
       }
@@ -199,6 +199,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         }
       }
     },
+    addAudio: function () {
+      Em.$('#fileInput').click();
+    },
     shuffleChanged(value) {
       this.changePlayerControl('shuffle', Em.isNone(value) ? !this.get('shuffle') : value);
     },
@@ -220,28 +223,13 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     frequencyChanged(value){
       this.changePlayerControl('frequency', value, true);
     },
-    addAudio: function () {
-      Em.$('#fileInput').click();
-    },
     playListAreaAddAudio(){
       this.send('addAudio');
     },
-    speakerViewedChanged(value){
-      this.set('speakerViewed', value);
-    },
-    randomTransitionChanged(value){
-      this.set('randomTransition', value);
-    },
-    onBeatBriAndColorChanged(value){
-      this.set('onBeatBriAndColor', value);
-    },
-    dimmerEnabledChanged(value){
-      this.set('dimmerEnabled', value);
-    },
     audioModeChanged(value){
       if(value === 1) {
         this.startUsingMic();
-      } else if(value === 3) {
+      } else if(value === 0) {
         this.send('useLocalAudio');
       } else {
         this.set('audioMode', value);
@@ -268,10 +256,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         playQueue = this.get('playQueue'),
         updatePlayQueue = function(){
           var tags = ID3.getAllTags("local");
-          playQueue.push({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title });
+          playQueue.pushObject({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title });
 
           ID3.clearAll();
-          self.notifyPropertyChange('playQueue');
 
           // make sure to init the first song
           if(playQueue.length > 0 && self.get('playQueuePointer') === -1){
@@ -293,6 +280,52 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     }
   },
 
+  changePlayerControl(name, value, isOption, skipSaveBeatPrefs){
+    this.set(name, value);
+
+    if(isOption){
+      var options = {};
+      options[name] = value;
+      if(this.get('usingLocalAudio') && this.get('playQueuePointer') !== -1 && skipSaveBeatPrefs !== true) {
+        this.saveSongBeatPreferences();
+      }
+
+      this.get('kick').set(options);
+    }
+
+    localStorage.setItem('huegasm.' + name, value);
+  },
+
+  incrementElapseTime(){
+    this.incrementProperty('timeElapsed');
+    if(this.get('timeElapsed') === this.get('timeTotal')){
+      this.send('next');
+    }
+  },
+
+  saveSongBeatPreferences() {
+    var song = this.get('playQueue')[this.get('playQueuePointer')],
+      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') };
+
+    localStorage.setItem('huegasm.songBeatPreferences', JSON.stringify(songBeatPreferences));
+  },
+
+  loadSongBeatPreferences() {
+    var song = this.get('playQueue')[this.get('playQueuePointer')],
+      title = Em.isEmpty(song.artist) ? song.filename : song.artist + '-' + song.title,
+      songBeatPreferences = this.get('songBeatPreferences'),
+      preference = songBeatPreferences[title];
+
+    if(!Em.isNone(preference)) {
+      this.changePlayerControl('threshold', preference.threshold, true, true);
+      this.changePlayerControl('decay', preference.decay, true, true);
+      this.changePlayerControl('frequency', preference.frequency, true, true);
+    }
+  },
+
   startUsingMic() {
     navigator.getUserMedia(
       {audio: true},
@@ -504,18 +537,25 @@ 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'].forEach(function (item) {
+    ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences'].forEach(function (item) {
       if (localStorage.getItem('huegasm.' + item)) {
         var itemVal = localStorage.getItem('huegasm.' + item);
+
         if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold' || item === 'transitionTime' || item === 'audioMode') {
           itemVal = Number(itemVal);
         } else if(item === 'frequency') {
           itemVal = itemVal.split(',').map(function(val){return Number(val);});
+        } else if(item === 'songBeatPreferences') {
+          itemVal = JSON.parse(itemVal);
         } else {
           itemVal = (itemVal === 'true');
         }
 
-        self.send(item+'Changed', itemVal);
+        if(Em.isNone(self.actions[item+'Changed'])){
+          self.set(item, itemVal);
+        } else {
+          self.send(item + 'Changed', itemVal);
+        }
       }
     });
   },

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

@@ -120,6 +120,7 @@ export default Em.Mixin.create({
   // audio: playing or paused
   playing: false,
   fadeOutNotification: false,
+  songBeatPreferences: {},
 
   speakerViewed: true,
   speakerLabel: function() {
@@ -148,24 +149,7 @@ export default Em.Mixin.create({
     }
   }.property('onBeatBriAndColor'),
 
-  changePlayerControl(name, value, isOption){
-    if(isOption){
-      var options = {};
-      options[name] = value;
-      this.get('kick').set(options);
-    }
-
-    this.set(name, value);
-    localStorage.setItem('huegasm.' + name, value);
-  },
-
   incrementElapseTimeHandle: null,
-  incrementElapseTime(){
-    this.incrementProperty('timeElapsed');
-    if(this.get('timeElapsed') === this.get('timeTotal')){
-      this.send('next');
-    }
-  },
 
   micIcon: function () {
     if (this.get('usingMicAudio')) {
@@ -261,15 +245,6 @@ export default Em.Mixin.create({
     }
   }.property('volumeMuted', 'volume'),
 
-  onDimmerEnabledChange: function(){
-    if(!this.get('dimmerEnabled')){
-      this.set('dimmerOn', false);
-    } else if(this.get('playing')){
-      this.set('dimmerOn', true);
-    }
-
-  }.observes('dimmerEnabled'),
-
   onDimmerOnChange: function() {
     var opacity = 0;
 
@@ -301,6 +276,22 @@ export default Em.Mixin.create({
     this.changeTooltipText(type, tooltipTxt);
   }.observes('repeat').on('init'),
 
+  onDimmerEnabledChange: function () {
+    var tooltipTxt = 'Dim on play', type = 'dimmerEnabled';
+
+    if (this.get(type)) {
+      tooltipTxt = 'Stop dimming';
+    }
+
+    if(!this.get(type)){
+      this.set('dimmerOn', false);
+    } else if(this.get('playing')){
+      this.set('dimmerOn', true);
+    }
+
+    this.changeTooltipText(type, tooltipTxt);
+  }.observes('dimmerEnabled').on('init'),
+
   onShuffleChange: function () {
     var tooltipTxt = 'Shuffle', type = 'shuffle';
 

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

@@ -23,7 +23,7 @@
       {{/if}}
 
       <span class="pull-right">
-            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Dim on play" {{action "toggleDimming"}}>{{paper-icon icon="brightness-high"  class=dimmingClass}}
+            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="dimmerEnabledTooltip" data-title={{dimmerEnabledTooltipTxt}} {{action "toggleDimming"}}>{{paper-icon icon="brightness-high" class=dimmingClass}}
             </span>
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye"  class="playerControllIcon"}}
             </span>
@@ -140,9 +140,6 @@
 
     <div id="playerButtonGroup" class="row">
       {{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
-      {{#if usingLocalAudio}}
-        {{#paper-button raised=true action="saveSongSettings"}}Save Song Settings{{/paper-button}}
-      {{/if}}
     </div>
   </div>
 

app/styles/app.scss

@@ -7,7 +7,7 @@ $playerBackColor: #F12B24;
 $playerHeight: 400px;
 $playerDefaultIconColor: #BBBBBB;
 $footerHeight: 40px;
-$playerBottomHeight: 390px;
+$playerBottomHeight: 380px;
 
 // BRIDGE FINDER
 html {
@@ -696,7 +696,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
 }
 
 #beatOptionButtonGroup {
-  margin: 20px 0;
+  margin: 20px 0 10px 0;
 }
 
 .beatOption {