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

Fixing fadeout notification transition

Browse source
This commit is contained in:
Egor Philippov 2015-09-28 15:31:06 -07:00
parent 3d710e18ad
commit 5b3a4b123b
4 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/components/controls/music-control.js
View file

@ -8,28 +8,26 @@ export default Em.Component.extend(musicControlMixin, {
onActiveChange: function(){ onActiveChange: function(){
if(this.get('active')){ if(this.get('active')){
Em.$('#beatSpeakerCenter').removeClass('pop'); Em.$('#beatSpeakerCenter').removeClass('pop');
Em.$('#playNotification').removeClass('fadeout'); Em.$('#playNotification').removeClass('fadeOut');
} }
}.observes('active'), }.observes('active'),
actions: { actions: {
goToSong: function(index){ goToSong: function(index){
//if(index !== this.get('playQueuePointer')) { var dancer = this.get('dancer'), audio = new Audio();
var dancer = this.get('dancer'), audio = new Audio(); audio.src = this.get('playQueue')[index].url;
audio.src = this.get('playQueue')[index].url;
if(dancer.audio) { if(dancer.audio) {
this.clearCurrentAudio(true); this.clearCurrentAudio(true);
} }
dancer.load(audio); dancer.load(audio);
this.setProperties({ this.setProperties({
playQueuePointer: index, playQueuePointer: index,
timeElapsed: 0 timeElapsed: 0
}); });
this.send('play'); this.send('play');
//}
}, },
removeAudio: function(index){ removeAudio: function(index){
if(index === this.get('playQueuePointer')) { if(index === this.get('playQueuePointer')) {
@ -58,7 +56,8 @@ export default Em.Component.extend(musicControlMixin, {
playerAreaPlay: function(){ playerAreaPlay: function(){
if(Em.isEmpty(Em.$('#playerControls:hover'))){ if(Em.isEmpty(Em.$('#playerControls:hover'))){
this.send('play'); this.send('play');
Em.$('#playNotification').removeClass('fadeout').prop('offsetWidth', Em.$('#playerArea').prop('offsetWidth')).addClass('fadeout'); this.set('fadeOutNotification', true);
Em.$('#playNotification').removeClass('fadeOut').prop('offsetWidth', Em.$('#playNotification').prop('offsetWidth')).addClass('fadeOut');
} }
}, },
play: function () { play: function () {

2
app/components/mixins/music-control.js
View file

@ -90,6 +90,8 @@ export default Em.Mixin.create({
// audio: playing or paused // audio: playing or paused
playing: false, playing: false,
fadeOutNotification: false,
speakerViewed: true, speakerViewed: true,
speakerLabel: function() { speakerLabel: function() {
if(this.get('speakerViewed')){ if(this.get('speakerViewed')){

4
app/styles/app.scss
View file

@ -456,7 +456,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
opacity: 0; opacity: 0;
} }
.fadeOut:before { .fadeOut {
animation-duration: 1s; animation-duration: 1s;
animation-name: fadeOut; animation-name: fadeOut;
} }
@ -529,7 +529,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
background: white !important; background: white !important;
} }
#playerArea * .noUi-handle:after, #playerArea * .noUi-handle:before { #playerArea * .noUi-handle::after, #playerArea * .noUi-handle::before {
content: none; content: none;
} }

6
app/templates/components/controls/music-control.hbs
View file

@ -1,7 +1,7 @@
<div class="row"> <div class="row">
<div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}> <div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
<div id="playNotification" class="material-icons {{if playing "play-arrow" "pause"}}"></div> <div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
<div id="playerControls"> <div id="playerControls">
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}} {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
@ -96,7 +96,7 @@
</div> </div>
<div id="beatContainer" class="col-sm-4 col-xs-12"> <div id="beatContainer" class="col-sm-4 col-xs-12">
{{#if speakerViewed}} {{#liquid-if speakerViewed}}
<div id="beatSpeaker"> <div id="beatSpeaker">
<img src="assets/images/speaker-outer.png" /> <img src="assets/images/speaker-outer.png" />
<div id="beatSpeakerCenter"> <div id="beatSpeakerCenter">
@ -109,7 +109,7 @@
<p>{{{item}}}</p> <p>{{{item}}}</p>
{{/each}} {{/each}}
</div> </div>
{{/if}} {{/liquid-if}}
{{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}} {{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
</div> </div>