From 34826599494a0cea3558f2de0f0aee23d2f190cd Mon Sep 17 00:00:00 2001 From: Egor Philippov Date: Wed, 7 Oct 2015 16:55:18 -0700 Subject: [PATCH] saving song beat preferences --- README.md | 2 +- app/pods/components/lights-tab/component.js | 15 +++- app/pods/components/music-tab/component.js | 84 ++++++++++++++----- .../components/music-tab/mixins/music-tab.js | 43 ++++------ app/pods/components/music-tab/template.hbs | 5 +- app/styles/app.scss | 4 +- 6 files changed, 97 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index 212d341..30d6b41 100644 --- a/README.md +++ b/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 diff --git a/app/pods/components/lights-tab/component.js b/app/pods/components/lights-tab/component.js index 7843824..2aaeec2 100644 --- a/app/pods/components/lights-tab/component.js +++ b/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, diff --git a/app/pods/components/music-tab/component.js b/app/pods/components/music-tab/component.js index 49413e2..e9e7739 100644 --- a/app/pods/components/music-tab/component.js +++ b/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); + } } }); }, diff --git a/app/pods/components/music-tab/mixins/music-tab.js b/app/pods/components/music-tab/mixins/music-tab.js index 5e3ed22..3dce95c 100644 --- a/app/pods/components/music-tab/mixins/music-tab.js +++ b/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'; diff --git a/app/pods/components/music-tab/template.hbs b/app/pods/components/music-tab/template.hbs index 34de800..67a6cc3 100644 --- a/app/pods/components/music-tab/template.hbs +++ b/app/pods/components/music-tab/template.hbs @@ -23,7 +23,7 @@ {{/if}} - {{paper-icon icon="brightness-high" class=dimmingClass}} + {{paper-icon icon="brightness-high" class=dimmingClass}} {{paper-icon icon="remove-red-eye" class="playerControllIcon"}} @@ -140,9 +140,6 @@
{{#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}}
diff --git a/app/styles/app.scss b/app/styles/app.scss index 2480bd1..4bde652 100644 --- a/app/styles/app.scss +++ b/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 {