lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redoing the dimmer

Browse source
This commit is contained in:
lone-cloud 2015-10-16 00:27:57 -07:00
parent 12f3621633
commit 534792349e
7 changed files with 56 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/pods/components/hue-controls/template.hbs
View file

@ -33,5 +33,5 @@
</div>
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates}}
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn}}
{{/if}}

24
app/pods/components/huegasm-app/component.js
View file

@ -1,12 +1,36 @@
import Em from 'ember';
export default Em.Component.extend({
actions: {
toggleDimmer(){
this.toggleProperty('dimmerOn');
}
},
bridgeIp: null,
bridgeUsername: null,
trial: false,
dimmerOn: false,
dimmerOnClass: function(){
var dimmerOn = this.get('dimmerOn'),
className = null;
if(dimmerOn){
className = 'active';
Em.$('body').addClass('dimmerOn');
Em.$('html').addClass('dimmerOn');
Em.$('md-icon').addClass('dimmerOn');
} else {
Em.$('body').removeClass('dimmerOn');
Em.$('html').removeClass('dimmerOn');
Em.$('md-icon').removeClass('dimmerOn');
}
return className;
}.property('dimmerOn'),
init(){
this._super();

4
app/pods/components/huegasm-app/template.hbs
View file

@ -1,9 +1,9 @@
{{#if bridgeUsername}}
{{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
{{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn}}
{{else}}
{{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
{{/if}}
<footer id="footer">
<p>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</p>
<p><span class="dimmerWrapper" {{action "toggleDimmer"}}>{{fa-icon "fa-lightbulb-o" classNames=dimmerOnClass}}</span>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</p>
</footer>

20
app/pods/components/music-tab/component.js
View file

@ -72,9 +72,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
toggleIsShowingAddSoundCloudModal() {
this.toggleProperty('isShowingAddSoundCloudModal');
},
toggleDimming(){
this.changePlayerControl('dimmerEnabled', !this.get('dimmerEnabled'));
},
useLocalAudio(){
var audioStream = this.get('audioStream');
this.changePlayerControl('audioMode', 0);
@ -192,8 +189,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
if(!replayPause){
this.set('timeElapsed', Math.floor(dancer.getTime()));
}
this.set('dimmerOn', false);
} else {
var timeTotal = this.get('timeTotal');
@ -209,10 +204,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
}
dancer.play();
if(this.get('dimmerEnabled')){
this.set('dimmerOn', true);
}
}
this.toggleProperty('playing');
@ -287,8 +278,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
var dancer = this.get('dancer');
if(dancer.audio){
var audioPosition = Math.floor(this.get('timeTotal') * position / 100);
dancer.audio.currentTime = audioPosition;
dancer.audio.currentTime = Math.floor(this.get('timeTotal') * position / 100);
}
},
volumeMutedChanged(value) {
@ -665,7 +655,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
this.set('usingMicSupported', false);
}
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences', 'debugFiltered'].forEach(function (item) {
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'songBeatPreferences', 'debugFiltered'].forEach(function (item) {
if (!Em.isNone(storage.get('huegasm.' + item))) {
var itemVal = storage.get('huegasm.' + item);
@ -696,12 +686,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
event.preventDefault();
});
Em.$(document).on('mousedown', function(event){
if(Em.$('#musicTab').has(event.target).length === 0 && self.get('dimmerEnabled')){
self.set('dimmerEnabled', false);
}
});
// control the volume by scrolling up/down
Em.$('#playerArea').on('mousewheel', function(event) {
if(self.get('playQueueNotEmpty')) {

43
app/pods/components/music-tab/mixins/music-tab.js
View file

@ -90,7 +90,6 @@ export default Em.Mixin.create({
visualizationsDisplayed: false,
audioStream: null,
dimmerOn: false,
dimmerEnabled: false,
isShowingAddSoundCloudModal: false,
SC_CLIENT_ID: 'aeec0034f58ecd85c2bd1deaecc41594',
@ -225,22 +224,12 @@ export default Em.Mixin.create({
}
if(this.get('dimmerOn')){
classes += ' dimmerFriendly';
classes += ' dimmerOn';
}
return classes;
}.property('dragging', 'draggingOverPlayListArea', 'dimmerOn'),
dimmingClass: function(){
var classes = 'playerControllIcon';
if(this.get('dimmerEnabled')){
classes += ' active';
}
return classes;
}.property('dimmerEnabled'),
volumeMutedClass: function(){
var classes = 'playerControllIcon volumeButton';
@ -281,20 +270,6 @@ export default Em.Mixin.create({
}
}.property('volumeMuted', 'volume'),
onDimmerOnChange: function() {
var opacity = 0;
if(this.get('dimmerOn')) {
opacity = 0.8;
}
this.$('#dimmer').fadeTo(400, opacity, function() {
if(opacity === 0) {
Em.$(this).hide();
}
});
}.observes('dimmerOn'),
onOptionChange: function(self, option){
this.get('storage').set('huegasm.' + option, this.get(option));
}.observes('randomTransition', 'onBeatBriAndColor'),
@ -311,22 +286,6 @@ 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';

9
app/pods/components/music-tab/template.hbs
View file

@ -1,4 +1,4 @@
<div class="row antiDimmer">
<div class="row">
<div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
<div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
<div id="playerControls">
@ -23,8 +23,6 @@
{{/if}}
<span class="pull-right">
<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>
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
@ -99,13 +97,13 @@
</div>
</div>
<div id="slideToggle" class="text-center cursorPointer row antiDimmer" {{action "slideTogglePlayerBottom"}}>
<div id="slideToggle" class="text-center cursorPointer row" {{action "slideTogglePlayerBottom"}}>
<div class="col-xs-offset-5 col-xs-2">
{{paper-icon icon=beatDetectionArrowIcon}}
</div>
</div>
<div id="playerBottom" class="row antiDimmer {{if dimmerOn "dimmerFriendly"}}">
<div id="playerBottom" class="row {{if dimmerOn "dimmerOn"}}">
<div id="beatArea" class="col-sm-7 col-xs-12">
{{#if usingBeatPreferences}}
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Using your saved beat preferences from the last time you listened to this song" class="bootstrapTooltip savedStarTooltip">
@ -192,6 +190,5 @@
</div>
{{ember-notify closeAfter=5000}}
<div id="dimmer" {{action "toggleDimming"}}></div>
{{add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}}

44
app/styles/app.scss
View file

@ -426,7 +426,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
}
#playerControls {
opacity: 0;
transition: all 0.2s ease-in-out;
position: absolute;
bottom: 0;
@ -501,10 +500,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
padding: 0;
}
#playerArea:hover #playerControls {
opacity: 1;
}
#playlist {
height: $playerHeight;
background-color: #1E1E1E;
@ -965,26 +960,33 @@ $vibrateblurouter: 2px;
height: 100%
}
#dimmer {
position: fixed;
width: 100%;
height: 100%;
background: black;
top: 0;
left: 0;
display: none;
}
.antiDimmer {
position: relative;
z-index: 2;
}
.dimmerFriendly {
div.dimmerOn {
color: white !important;
background: #171717 !important;
}
html.dimmerOn {
color: white;
background: #242424;
}
body.dimmerOn {
color: white;
background: #242424;
}
md-icon.dimmerOn {
color: inherit !important;
}
.dimmerWrapper {
font-size: 40px;
position: relative;
top: 7px;
margin-right: 20px;
cursor: pointer;
}
.noUi-value-vertical {
margin-top: -10px;
}