From d45ed0fd7b7b19fa65c8b23c8a7f4216514beb37 Mon Sep 17 00:00:00 2001 From: lone-cloud Date: Wed, 30 Sep 2015 00:15:43 -0700 Subject: [PATCH] Bottom area toggle --- app/components/controls/music-control.js | 29 +++- app/components/mixins/music-control.js | 9 ++ app/styles/app.scss | 150 ++---------------- app/templates/components/bridge-finder.hbs | 4 +- .../components/controls/music-control.hbs | 65 ++++---- package.json | 3 +- 6 files changed, 83 insertions(+), 177 deletions(-) diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js index fe449c5..c4fac48 100644 --- a/app/components/controls/music-control.js +++ b/app/components/controls/music-control.js @@ -14,6 +14,16 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { }.observes('active'), actions: { + slideTogglePlayerBottom: function(){ + var playerBottomDisplayed = this.get('playerBottomDisplayed'); + this.changePlayerControl('playerBottomDisplayed', !playerBottomDisplayed); + + if(!playerBottomDisplayed){ + Em.$('#playerBottom').slideDown(); + } else { + Em.$('#playerBottom').slideUp(); + } + }, saveSongPreference: function() { }, goToSong: function(index){ @@ -143,8 +153,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { this.changePlayerControl('threshold', value, true); }, transitionTimeChanged: function(value) { - this.changePlayerControl('transitionTime', value, true); + this.changePlayerControl('transitionTime', value); }, + playerBottomDisplayedChanged: function(value) {}, decayChanged: function(value){ this.changePlayerControl('decay', value, true); }, @@ -255,6 +266,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { simulateKick: function(mag) { var activeLights = this.get('activeLights'), transitionTime = this.get('transitionTime') * 10, + transitionBriOffFactor = 5, self = this, brightnessChange = function (light, brightness) { Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', { @@ -273,17 +285,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { light = activeLights[lastLightBopIndex]; this.set('lastLightBopIndex', (lastLightBopIndex+1) % activeLights.length); } else { - light = Math.floor(Math.random() * activeLights.length); + light = Math.floor(Math.random() * activeLights.length) + 1; } brightnessChange(light, 254); - setTimeout(brightnessChange, 50, light, 1); + setTimeout(brightnessChange, transitionTime + 50, light, 1); this.set('paused', true); setTimeout(function () { self.set('paused', false); - }, 100); + }, 150); } //work the music beat area @@ -330,10 +342,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { kick: kick }); - ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'sequentialTransition'].forEach(function (item) { + ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'sequentialTransition', 'playerBottomDisplayed'].forEach(function (item) { if (localStorage.getItem('huegasm.' + item)) { var itemVal = localStorage.getItem('huegasm.' + item); - if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold') { + if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold' || item === 'transitionTime') { itemVal = Number(itemVal); } else if(item === 'frequency') { itemVal = itemVal.split(',').map(function(val){return Number(val);}); @@ -358,6 +370,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenter', function(event) { event.preventDefault(); }); + + if(!this.get('playerBottomDisplayed')){ + Em.$('#playerBottom').hide(); + } + // control the volume by scrolling up/down Em.$('#playerArea').on('mousewheel', function(event) { if(self.get('playQueueNotEmpty')) { diff --git a/app/components/mixins/music-control.js b/app/components/mixins/music-control.js index 6f57829..6b882d4 100644 --- a/app/components/mixins/music-control.js +++ b/app/components/mixins/music-control.js @@ -75,6 +75,7 @@ export default Em.Mixin.create({ timeTotal: 0, lastLightBopIndex: 0, + playerBottomDisplayed: false, dragging: false, draggingOverPlayListArea: false, dragLeaveTimeoutHandle: null, @@ -280,6 +281,14 @@ export default Em.Mixin.create({ } }, + beatDetectionArrowIcon: function(){ + if(this.get('playerBottomDisplayed')){ + return 'arrow-drop-down'; + } else { + return 'arrow-drop-up'; + } + }.property('playerBottomDisplayed'), + timeElapsedTxt: function(){ return this.formatTime(this.get('timeElapsed')); }.property('timeElapsed'), diff --git a/app/styles/app.scss b/app/styles/app.scss index e14dbb4..8d116c4 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -397,6 +397,13 @@ md-toolbar { margin: 0; } +#slideToggle { + position: absolute; + z-index: 100; + left: 45%; + color: white; +} + md-switch.md-default-theme.md-checked .md-bar { background-color: rgba(241, 43, 36, 0.5); } @@ -656,10 +663,11 @@ md-switch.md-default-theme.md-checked .md-thumb { } #beatOptionGroup { - margin-top: 10px; .beatOption { - display: inline-block; - margin-right: 1em; + text-align: center; + .optionDescription { + font-size: 13px; + } } } @@ -725,13 +733,13 @@ md-switch.md-default-theme.md-checked .md-thumb { #playerButtonGroup { margin-top: 10px; button { - box-shadow: 5px 0px 15px 5px rgba(0, 0, 0, 0.3); + box-shadow: 5px 0 15px 5px rgba(0, 0, 0, 0.3); } } #vertDivider { position: absolute; - right: 10px; + right: 0; top: 25%; width: 2px; height: 50%; @@ -759,135 +767,3 @@ md-switch.md-default-theme.md-checked .md-thumb { display: table-cell; } } - -// FANCY BUTTON -.button { - position: absolute; - top: calc(50% - 115px); - left: calc(50% - 90px); - display: block; - width: 180px; - height: 230px; - background-image: -webkit-linear-gradient(top, #464a54 0%, #2c2225 100%); - background-image: linear-gradient(to bottom, #464a54 0%, #2c2225 100%); - border-radius: 6px; - cursor: pointer; - box-shadow: 0 -5px 0px #464649, 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 1px #66696e inset, 4px 0 0 rgba(0, 0, 0, 0.1) inset, -4px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -8px 2px rgba(0, 0, 0, 0.1) inset; -} - -.button .hole { - position: absolute; - top: 20px; - left: 20px; - display: block; - width: 140px; - height: 186px; - overflow: hidden; - background-color: #090909; - border-radius: 8px; - box-shadow: 0 -2px 1px rgba(255, 255, 255, 0.25) inset, 0 2px 1px rgba(255, 255, 255, 0.2) inset; -} - -.button .switch { - position: absolute; - top: 6px; - left: 4px; - display: block; - width: 132px; - height: 174px; - background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.07) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), -webkit-linear-gradient(top, #882626 0%, #290606 100%); - background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #882626 0%, #290606 100%); - background-size: 100% 80px, 100% 80px, 10px 10px, 100%; - background-position: top left, bottom left, bottom left, center; - background-repeat: no-repeat, no-repeat, repeat, no-repeat; - border-radius: 8px; - box-shadow: 2px 0 1px rgba(255, 255, 255, 0.1) inset, -2px 0 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 2px rgba(255, 255, 255, 0.05) inset, 0 4px 2px rgba(0, 0, 0, 0.05) inset, 0 -30px 8px rgba(198, 45, 45, 0.5), 0 -25px 8px rgba(198, 45, 45, 0.3), 0 -20px 8px rgba(198, 45, 45, 0.4), 0 -15px 8px rgba(198, 45, 45, 0.5), 0 -10px 8px rgba(198, 45, 45, 0.6), 0 -5px 8px rgba(198, 45, 45, 0.9); - -webkit-transform-style: preserve3d; - transform-style: preserve3d; - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - -webkit-transform: perspective(1500px) rotateX(-30deg) translateY(16px); - transform: perspective(1500px) rotateX(-30deg) translateY(16px); - -webkit-transition: -webkit-transform 200ms ease; - transition: transform 200ms ease; -} - -.button .switch:before { - content: ""; - position: absolute; - top: -2px; - left: 5px; - width: 122px; - height: 5px; - background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.4) 0%, transparent 80%); - background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, transparent 80%); -} - -.button .switch .one { - position: absolute; - top: 24px; - left: calc(47%); - display: block; - width: 6px; - height: 40px; - background-image: -webkit-linear-gradient(top, #cccccc 0%, #999999 100%); - background-image: linear-gradient(to bottom, #cccccc 0%, #999999 100%); - box-shadow: 0 2px 1px white inset; - border-radius: 4px; -} - -.button .switch .zero { - position: absolute; - bottom: 24px; - left: calc(36%); - display: block; - width: 32px; - height: 40px; - box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #666666 inset; - border-radius: 50%; -} - -.button input { - display: none; -} - -.button input:checked ~ .hole .switch { - background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.07) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(254, 244, 0, 0.5) 0%, rgba(254, 244, 0, 0.2) 30%, rgba(254, 244, 0, 0.1) 50%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 50%), -webkit-linear-gradient(top, #b43222 0%, #a51810 100%); - background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(254, 244, 0, 0.5) 0%, rgba(254, 244, 0, 0.2) 30%, rgba(254, 244, 0, 0.1) 50%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 50%), linear-gradient(to bottom, #b43222 0%, #a51810 100%); - background-size: 100% 80px, 100% 80px, 100% 180px, 10px 10px, 100%; - background-position: top left, bottom left, 0 30px, bottom left, center; - background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat; - border-radius: 8px; - box-shadow: 4px 0 1px rgba(255, 255, 255, 0.15) inset, -4px 0 1px rgba(255, 255, 255, 0.15) inset, 0 4px 1px rgba(255, 255, 255, 0.15) inset, 0 -12px 8px rgba(0, 0, 0, 0.25) inset, 0 30px 8px rgba(128, 17, 5, 0.5), 0 25px 8px rgba(128, 17, 5, 0.3), 0 20px 8px rgba(128, 17, 5, 0.4), 0 15px 8px rgba(128, 17, 5, 0.5), 0 10px 8px rgba(128, 17, 5, 0.6), 0 5px 8px rgba(128, 17, 5, 0.9); - -webkit-transform: perspective(1500px) rotateX(30deg) translateY(-16px); - transform: perspective(1500px) rotateX(30deg) translateY(-16px); -} - -.button input:checked ~ .hole .switch:before { - top: auto; - bottom: -2px; -} - -.button input:checked ~ .hole .switch:after { - content: ""; - position: absolute; - bottom: -24px; - left: calc(14%); - width: 96px; - height: 16px; - border-radius: 50%; - background-image: -webkit-radial-gradient(center, ellipse, #fef400 0%, rgba(254, 244, 0, 0.3) 60%, transparent 100%); - background-image: radial-gradient(ellipse at center, #fef400 0%, rgba(254, 244, 0, 0.3) 60%, transparent 100%); - -webkit-filter: blur(8px); - filter: blur(8px); -} - -.button input:checked ~ .hole .switch .one { - background-image: -webkit-linear-gradient(top, #eeeeee 0%, #aaaaaa 100%); - background-image: linear-gradient(to bottom, #eeeeee 0%, #aaaaaa 100%); -} - -.button input:checked ~ .hole .switch .zero { - box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #aaaaaa inset; -} diff --git a/app/templates/components/bridge-finder.hbs b/app/templates/components/bridge-finder.hbs index 2ad6a9e..af833da 100644 --- a/app/templates/components/bridge-finder.hbs +++ b/app/templates/components/bridge-finder.hbs @@ -34,11 +34,11 @@ {{#paper-button action="findBridgeByIp" primary=true}}Find{{/paper-button}} - {{#liquid-if manualBridgeIpNotFound}} + {{#if manualBridgeIpNotFound}}

Could not find a bridge with that IP address.

- {{/liquid-if}} + {{/if}} {{/if}} {{/if}} {{/if}} diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs index d1aa4be..bba5a42 100644 --- a/app/templates/components/controls/music-control.hbs +++ b/app/templates/components/controls/music-control.hbs @@ -68,47 +68,52 @@ +
+ {{paper-icon icon=beatDetectionArrowIcon}} Beat Detection Settings {{paper-icon icon=beatDetectionArrowIcon}} +
+
- -
-
-
{{threshold}}
- {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} - Max. Intensity -
+ +
+ Light Selection {{#paper-switch checked=sequentialTransition}} {{sequentialTransitionLabel}} {{/paper-switch}} +
- - -
- {{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 -
- -
- Transition type: {{#paper-switch checked=sequentialTransition}} {{sequentialTransitionLabel}} {{/paper-switch}} -
+
+
+
{{threshold}}
+ {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} + Max. Intensity
-
+
+
{{decay}} sec
+ {{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 +
+
+ +
{{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}} {{#paper-button raised=true action="saveSongPreference"}}Save Song Preference{{/paper-button}}
- {{#liquid-if speakerViewed}} + {{#if speakerViewed}}
@@ -121,7 +126,7 @@

{{{item}}}

{{/each}}
- {{/liquid-if}} + {{/if}} {{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
diff --git a/package.json b/package.json index 8d8a367..8ff6fff 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,6 @@ "ember-export-application-global": "^1.0.3", "ember-modal-dialog": "0.8.1", "ember-paper": "0.2.8", - "ember-truth-helpers": "1.1.0", - "liquid-fire": "0.21.2" + "ember-truth-helpers": "1.1.0" } }