diff --git a/README.md b/README.md index daf6fe1..212d341 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Music awesomeness for hue lights. - save beat detection settings per song - app intro with intro.js - music visualizations with three.js -- integrate with youtube +- integrate with soundcloud - display player time when hovering over seek bar ## BUGS diff --git a/app/pods/components/music-tab/component.js b/app/pods/components/music-tab/component.js index e284715..49413e2 100644 --- a/app/pods/components/music-tab/component.js +++ b/app/pods/components/music-tab/component.js @@ -17,7 +17,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { actions: { toggleDimming: function(){ - this.toggleProperty('dimmerEnabled'); + this.changePlayerControl('dimmerEnabled', !this.get('dimmerEnabled')); }, useLocalAudio: function(){ var audioStream = this.get('audioStream'); @@ -47,6 +47,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { } }, slideTogglePlayerBottom(){ + this.$('#playerBottom').slideToggle(); this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed')); }, saveSongSettings() { @@ -98,6 +99,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { if (this.get('playing')) { dancer.pause(); clearInterval(this.get('incrementElapseTimeHandle')); + if(!replayPause){ this.set('timeElapsed', Math.floor(dancer.getTime())); } @@ -121,8 +123,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { this.set('dimmerOn', true); } - this.setProperties('incrementElapseTimeHandle', window.setInterval(this.incrementElapseTime.bind(this), 1000)); + this.set('incrementElapseTimeHandle', window.setInterval(this.incrementElapseTime.bind(this), 1000)); } + this.toggleProperty('playing'); } }, @@ -131,6 +134,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { if(this.get('playing')) { this.get('dancer').setVolume(value/100); } + + if(this.get('volume') > 0 && this.get('volumeMuted')){ + this.changePlayerControl('volumeMuted', false); + } }, next() { var playQueuePointer = this.get('playQueuePointer'), playQueueLength = this.get('playQueue.length'); @@ -228,6 +235,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { onBeatBriAndColorChanged(value){ this.set('onBeatBriAndColor', value); }, + dimmerEnabledChanged(value){ + this.set('dimmerEnabled', value); + }, audioModeChanged(value){ if(value === 1) { this.startUsingMic(); @@ -394,15 +404,25 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { if(activeLights.length > 0){ var lastLightBopIndex = this.get('lastLightBopIndex'), randomTransition = this.get('randomTransition'), + lightBopIndex, light; if(randomTransition) { - light = Math.floor(Math.random() * activeLights.length) + 1; + lightBopIndex = Math.floor(Math.random() * activeLights.length) + 1; + + // let's try not to select the same light twice in a row + if(activeLights.length > 1) { + while(lightBopIndex === lastLightBopIndex) { + lightBopIndex = Math.floor(Math.random() * activeLights.length) + 1; + } + } } else { - light = activeLights[lastLightBopIndex]; - this.set('lastLightBopIndex', (lastLightBopIndex+1) % activeLights.length); + lightBopIndex = (lastLightBopIndex + 1) % activeLights.length; } + light = activeLights[lightBopIndex]; + this.set('lastLightBopIndex', lightBopIndex); + if(onBeatBriAndColor) { color = Math.floor(Math.random() * 65535); } @@ -484,7 +504,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'].forEach(function (item) { + ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled'].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') { @@ -534,5 +554,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { event.preventDefault(); } }); + + if(!this.get('playerBottomDisplayed')) { + Em.$('#playerBottom').hide(); + } } }); diff --git a/app/pods/components/music-tab/mixins/music-tab.js b/app/pods/components/music-tab/mixins/music-tab.js index 36a180c..5e3ed22 100644 --- a/app/pods/components/music-tab/mixins/music-tab.js +++ b/app/pods/components/music-tab/mixins/music-tab.js @@ -270,6 +270,16 @@ export default Em.Mixin.create({ }.observes('dimmerEnabled'), + onDimmerOnChange: function() { + var opacity = 0; + + if(this.get('dimmerOn')) { + opacity = 0.8; + } + + this.$('#dimmer').fadeTo(400, opacity); + }.observes('dimmerOn'), + onSpeakerViewedChange: function(){ localStorage.setItem('huegasm.speakerViewed', this.get('speakerViewed')); this.get('beatHistory').clear(); diff --git a/app/pods/components/music-tab/template.hbs b/app/pods/components/music-tab/template.hbs index 2c81895..34de800 100644 --- a/app/pods/components/music-tab/template.hbs +++ b/app/pods/components/music-tab/template.hbs @@ -1,7 +1,6 @@
-
+
{{#if usingLocalAudio}} {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}} @@ -24,14 +23,11 @@ {{/if}} - {{paper-icon icon="brightness-high" class=dimmingClass}} + {{paper-icon icon="brightness-high" class=dimmingClass}} - {{paper-icon icon="remove-red-eye" class="playerControllIcon"}} + {{paper-icon icon="remove-red-eye" class="playerControllIcon"}} - {{paper-icon icon="fullscreen" class="playerControllIcon"}} + {{paper-icon icon="fullscreen" class="playerControllIcon"}}
@@ -42,19 +38,13 @@
{{#if usingLocalAudio}} - {{paper-icon icon="add" class="playerControllIcon"}} - {{paper-icon icon="shuffle" class=shuffleClass}} - {{paper-icon icon=repeatIcon class=repeatClass}} + {{paper-icon icon="add" class="playerControllIcon"}} + {{paper-icon icon="shuffle" class=shuffleClass}} + {{paper-icon icon=repeatIcon class=repeatClass}} {{/if}} {{#if usingMicSupported}} - {{paper-icon icon=micIcon class=usingMicAudioClass}} + {{paper-icon icon=micIcon class=usingMicAudioClass}} {{/if}}
@@ -86,8 +76,8 @@ {{else}} {{item.filename}} {{/if}} -
{{paper-icon icon="close"}}
+
{{paper-icon icon="close"}} +
{{/each}}
@@ -102,98 +92,88 @@ -{{#if playerBottomDisplayed}} -
-
-
-
-
{{threshold}}
- {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} - Max. Intensity -
- -
-
{{decay}}
- {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}} - Decay Rate -
- -
-
[{{#each frequency as |item index|}}{{item}}{{#unless index}} - ,{{/unless}}{{/each}} - ] -
- {{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}} - Frequency Range -
- -
-
{{transitionTime}} sec
- {{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}} - Transition Time -
+
+
+
+
+
{{threshold}}
+ {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} + Max. Intensity
-
-
- {{#paper-switch checked=randomTransition disabled=trial}}{{randomTransitionLabel}}{{/paper-switch}} -
-
- {{#paper-switch checked=onBeatBriAndColor disabled=trial}} {{onBeatBriAndColorLabel}}{{/paper-switch}} -
+
+
{{decay}}
+ {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}} + Decay Rate
-
- {{#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}} +
+
[{{#each frequency as |item index|}}{{item}}{{#unless index}} + ,{{/unless}}{{/each}} + ] +
+ {{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}} + Frequency Range +
+ +
+
{{transitionTime}} sec
+ {{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}} + Transition Time
-
- {{#if speakerViewed}} -
-
-
-
-
-
-
-
-
+
+
+ {{#paper-switch checked=randomTransition disabled=trial}}{{randomTransitionLabel}}{{/paper-switch}} +
+
+ {{#paper-switch checked=onBeatBriAndColor disabled=trial}} {{onBeatBriAndColorLabel}}{{/paper-switch}} +
+
-
-
-
-
-
- {{else}} -
- {{#each beatHistory as |item|}} -

{{{item}}}

- {{/each}} -
+
+ {{#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}} - - {{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
-{{/if}} + +
+ {{#if speakerViewed}} +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ {{else}} +
+ {{#each beatHistory as |item|}} +

{{{item}}}

+ {{/each}} +
+ {{/if}} + + {{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}} +
+
{{ember-notify closeAfter=5000}} -
\ No newline at end of file +
\ No newline at end of file diff --git a/app/styles/app.scss b/app/styles/app.scss index e622961..2480bd1 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -28,6 +28,7 @@ body { #settings { padding-right: 0; text-align: right; + z-index: 3; } .settingsItem { @@ -462,7 +463,7 @@ md-switch.md-default-theme.md-checked .md-thumb { } .playerControllIcon.active { - color: white !important; + color: #F12B24 !important; } .playerControllIcon:hover { @@ -472,9 +473,11 @@ md-switch.md-default-theme.md-checked .md-thumb { #playNotification { position: relative; color: white; - top: 45%; - left: 45%; + top: 50%; + left: 50%; opacity: 0; + background: black; + border-radius: 100%; } .fadeOut { @@ -490,7 +493,7 @@ md-switch.md-default-theme.md-checked .md-thumb { to { opacity: 0; - font-size: 50px; + transform: scale(3); } } @@ -674,7 +677,7 @@ md-switch.md-default-theme.md-checked .md-thumb { #beatArea { height: $playerBottomHeight; position: relative; - padding-top: 20px; + padding: 20px 0 0 0; } #beatArea * .noUi-target { @@ -711,9 +714,11 @@ md-switch.md-default-theme.md-checked .md-thumb { border: 1px solid black; width: 100%; background: white; + height: $playerBottomHeight; } #beatContainer { + -webkit-transform: translate3d(0, 0, 0); // hack for chrome to force hardware acceleration and stop flickering padding: 0; height: $playerBottomHeight; md-switch { @@ -721,7 +726,7 @@ md-switch.md-default-theme.md-checked .md-thumb { position: absolute; margin-left: 0; z-index: 3; - margin-bottom: 2px; + margin-bottom: 10px; } } @@ -758,8 +763,8 @@ $center1size: 250px; $bezelsize: 285px; $vibratesize: $centersize*1.06; $vibratemargin:-$vibratesize/2; -$vibrateblur: 2px; -$vibrateblur1:1px; +$vibrateblurinner: 3px; +$vibrateblurouter: 2px; /* Extenders */ %base { @@ -777,16 +782,16 @@ $vibrateblur1:1px; /* Keyframes */ @keyframes vibrateInner { 50% { - -webkit-filter: blur($vibrateblur); - filter: blur($vibrateblur); - transform: scale(1.1); + -webkit-filter: blur($vibrateblurinner); + filter: blur($vibrateblurinner); + transform: scale(1.05); } } @keyframes vibrateOuter { 0% { - -webkit-filter: blur($vibrateblur1); - filter: blur($vibrateblur1); + -webkit-filter: blur($vibrateblurouter); + filter: blur($vibrateblurouter); border: 15px solid #333; } 30% { @@ -795,8 +800,8 @@ $vibrateblur1:1px; border: 17px solid #333; } 50% { - -webkit-filter: blur($vibrateblur1); - filter: blur($vibrateblur1); + -webkit-filter: blur($vibrateblurouter); + filter: blur($vibrateblurouter); border: 15px solid #333; } 65% { @@ -805,18 +810,18 @@ $vibrateblur1:1px; border: 17px solid #333; } 70% { - -webkit-filter: blur($vibrateblur1); - filter: blur($vibrateblur1); + -webkit-filter: blur($vibrateblurouter); + filter: blur($vibrateblurouter); border: 15px solid #333; } 80% { - -webkit-filter: blur($vibrateblur1); - filter: blur($vibrateblur1); + -webkit-filter: blur($vibrateblurouter); + filter: blur($vibrateblurouter); border: 17px solid #333; } 100% { - -webkit-filter: blur($vibrateblur1); - filter: blur($vibrateblur1); + -webkit-filter: blur($vibrateblurouter); + filter: blur($vibrateblurouter); border: 15px solid #333; } } @@ -925,7 +930,6 @@ $vibrateblur1:1px; width: 100%; height: 100%; background: black; - opacity: 0.7; top: 0; left: 0; display: none;