weekend werk

This commit is contained in:
lone-cloud 2015-09-13 23:06:26 -07:00
parent 1535ec19fc
commit 40dbec0850
10 changed files with 144 additions and 45 deletions

View file

@ -1,7 +1,7 @@
import Em from 'ember';
export default Em.Component.extend({
classNames: ['bridgeControls'],
classNames: ['bridgeControls', 'container-fluid'],
bridgeIp: null,
manualBridgeIp: null,
@ -12,6 +12,19 @@ export default Em.Component.extend({
lightsData: null,
activeLights: [],
groupControlDisplayed: false,
actions: {
changeTab: function(tabName){
var index = this.get('tabList').indexOf(tabName);
this.set('selectedTab', index);
localStorage.setItem('huegasm.selectedTab', index);
},
toggleGroupControl: function(){
this.toggleProperty('groupControlDisplayed');
}
},
apiURL: function(){
return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
@ -70,14 +83,6 @@ export default Em.Component.extend({
lightsTabSelected: Em.computed.equal('selectedTab', 0),
musicTabSelected: Em.computed.equal('selectedTab', 1),
actions: {
changeTab: function(tabName){
var index = this.get('tabList').indexOf(tabName)
this.set('selectedTab', index);
localStorage.setItem('huegasm.selectedTab', index);
}
},
updateLightData: function(){
var self = this;

View file

@ -1,7 +1,8 @@
import Em from 'ember';
export default Em.Component.extend({
classNames: ['innerControlFrame', 'groupControl'],
classNameBindings: ['groupControlDisplayed:on'],
classNames: ['innerControlFrame', 'groupControls'],
tagName: null,

View file

@ -5,6 +5,20 @@ export default Em.Component.extend(musicControlMixin, {
classNames: ['innerControlFrame'],
actions: {
goToSong: function(index){
var a = new Audio();
a.src = this.get('playQueue')[index].url;
this.get('dancer').load(a);
this.set('playQueuePointer', index);
this.send('play');
},
removeAudio: function(index){
this.get('playQueue').removeAt(index);
//if(index === this.get('playQueuePointer')){
// this.get('dancer')
//}
},
defaultControls: function(){
var beatOptions = this.get('beatOptions');
@ -15,6 +29,11 @@ export default Em.Component.extend(musicControlMixin, {
clickLight:function() {
debugger;
},
playerAreaPlay: function(){
if(Em.isEmpty(Em.$('#playerControls:hover'))){
this.send('play');
}
},
play: function () {
var dancer = this.get('dancer'),
playQueue = this.get('playQueue');
@ -35,6 +54,8 @@ export default Em.Component.extend(musicControlMixin, {
this.set('incrementElapseTimeHandle', window.setInterval(this.incrementElapseTime.bind(this), 1000));
this.toggleProperty('playing');
}
Em.$('#playerArea').removeClass('material-icons').prop('offsetWidth', Em.$('#playerArea').prop('offsetWidth')).addClass('material-icons');
},
volumeChanged: function (value) {
this.changePlayerControl('volume', value);
@ -51,9 +72,12 @@ export default Em.Component.extend(musicControlMixin, {
fullscreen: function () {
},
seekChanged: function () {
seekChanged: function (position) {
var audioPosition = Math.floor(this.get('timeTotal') * position / 100);
this.get('dancer').source.currentTime = audioPosition;
this.set('timeElapsed', audioPosition);
},
volumeMutedChanged: function (value) {
var dancer = this.get('dancer'),
volumeMuted = Em.isNone(value) ? !this.get('volumeMuted') : value;
@ -86,6 +110,14 @@ export default Em.Component.extend(musicControlMixin, {
addAudio: function () {
Em.$('#fileInput').click();
},
playListAreaAddAudio: function(){
if(this.get('playQueue').length === 0){
this.send('addAudio');
}
},
speakerViewedChanged: function(value){
this.set('speakerViewed', value);
},
clickSpeaker: function(){
// simulate the speaker vibration by running a CSS animation on it
Em.$('#beatSpeakerCenter').removeClass('pop').prop('offsetWidth', Em.$('#beatSpeakerCenter').prop('offsetWidth')).addClass('pop');
@ -141,9 +173,16 @@ export default Em.Component.extend(musicControlMixin, {
self.set('paused', false);
}, 150);
if(self.get('speakerViewed')){
self.send('clickSpeaker');
console.log('Kick at ' + mag);
} else {
var beatHistory = self.get('beatHistory'),
maxSize = self.get('maxBeatHistorySize');
beatHistory.unshiftObjects('Beat strength of <b>' + mag.toFixed(3) + '</b> at <b>' + self.get('timeElapsedTxt') + '</b>');
if(beatHistory.length > maxSize){
beatHistory.popObject();
}
}
}
}
@ -161,7 +200,7 @@ export default Em.Component.extend(musicControlMixin, {
kick: kick
});
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency'].forEach(function (item) {
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed'].forEach(function (item) {
if (localStorage.getItem('huegasm.' + item)) {
var itemVal = localStorage.getItem('huegasm.' + item);
if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold') {
@ -191,9 +230,7 @@ export default Em.Component.extend(musicControlMixin, {
// make sure to init the first song
if(playQueue.length > 0 && !self.get('dancer').isLoaded()){
var a = new Audio();
a.src = playQueue[0].url;
self.get('dancer').load(a);
self.send('goToSong', 0);
}
};
@ -208,9 +245,19 @@ export default Em.Component.extend(musicControlMixin, {
}
});
// initialize bootstrap tooltips
Em.$('[data-toggle="tooltip"]').tooltip();
// prevent space/text selection when the user repeatedly clicks on the center
Em.$('#beatSpeakerCenter').mousedown(function(event) {
Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenter', function(event) {
event.preventDefault();
});
Em.$('#playerArea').on('mousewheel', function(event) {
var scrollSize = 5;
if(event.deltaY < 0) {
scrollSize *= -1;
}
self.send('volumeChanged', self.get('volume') + scrollSize);
event.preventDefault();
});
},

View file

@ -51,9 +51,19 @@ export default Em.Mixin.create({
decay: 0.02,
frequency: [0,5],
playQueue: [],
playQueuePointer: 0,
playQueue: Em.A(),
beatHistory: Em.A(),
maxBeatHistorySize: 30,
timeElapsed: 0,
timeTotal: 0,
playQueueEmpty: Ember.computed.empty('playQueue'),
playQueueNotEmpty: Ember.computed.notEmpty('playQueue'),
playQueueMultiple: function(){
return this.get('playQueue.length') > 1;
}.property('playQueue'),
seekPosition: function() {
var timeTotal = this.get('timeTotal'), timeElapsed = this.get('timeElapsed');
@ -69,9 +79,20 @@ export default Em.Mixin.create({
shuffle: false,
volumeMuted: false,
volume: 100,
// beat detection related pausing
paused: false,
// audio: playing or paused
playing: false,
speakerViewed: true,
speakerLabel: function() {
if(this.get('speakerViewed')){
return 'Speaker View';
} else {
return 'Debug View';
}
}.property('speakerViewed'),
incrementElapseTimeHandle: null,
incrementElapseTime: function(){
this.incrementProperty('timeElapsed');
@ -115,6 +136,11 @@ export default Em.Mixin.create({
}
}.property('volumeMuted', 'volume'),
onSpeakerViewedChange: function(){
localStorage.setItem('huegasm.speakerViewed', this.get('speakerViewed'));
this.get('beatHistory').clear();
}.observes('speakerViewed'),
onRepeatChange: function () {
var tooltipTxt = 'Repeat all', type = 'repeat';
@ -174,10 +200,6 @@ export default Em.Mixin.create({
this.set(type + 'TooltipTxt', text);
},
nextPrevEnabled: function () {
return this.get('playQueue').length > 1;
}.property('playQueue.[]'),
timeElapsedTxt: function(){
return this.formatTime(this.get('timeElapsed'));
}.property('timeElapsed'),
@ -190,5 +212,5 @@ export default Em.Mixin.create({
return this.pad(Math.floor(time/60), 2) + ':' + this.pad(time%60, 2);
},
pad: function(num, size){ return ('000000000' + num).substr(-size); },
pad: function(num, size){ return ('000000000' + num).substr(-size); }
});

View file

@ -1,6 +1,9 @@
{{#if ready}}
<span {{action "toggleGroupControl"}} id="groupControlToggle" class={{if groupControlDisplayed 'on'}}>
{{paper-icon icon="menu"}}
</span>
{{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData}}
{{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
<div class="navigation">
{{#each tabData as |tab|}}

View file

@ -1,5 +1,4 @@
{{#paper-list}}
{{#paper-item class="item"}}
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL}}
{{/paper-item}}

View file

@ -1,15 +1,16 @@
<div class="row">
<div id="playerArea" class="col-xs-8">
<div id="playerArea" class="col-xs-8 material-icons {{if playing "play-arrow" "pause"}} {{if playQueueEmpty "blockAnimation"}}" {{action "playerAreaPlay"}}>
<div id="playerControls">
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
{{#if nextPrevEnabled}}
{{#if playQueueMultiple}}
<span data-toggle="tooltip" data-placement="top" title="Previous"
id="prevTooltip" {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span>{{/if}}<!--
id="prevTooltip" {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
-->{{/if}}<!--
--><span data-toggle="tooltip" data-placement="top"
title={{playingTooltipTxt}} id="playingTooltip" {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
-->{{#if nextPrevEnabled}}<!--
-->{{#if playQueueMultiple}}<!--
--><span data-toggle="tooltip" data-placement="top"
title="Next song" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
-->{{/if}}<!--
@ -41,14 +42,21 @@
class="pull-right" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
</div>
<div id="playListArea">
{{#each playQueue as |item|}}
<div class="playlistItem">
<div id="playListArea" class={{if playQueueEmpty "cursorPointer"}} {{action "playListAreaAddAudio"}}>
{{#if playQueueEmpty}}
<div id="dragHere">Drag your music files here</div>
{{paper-icon icon="library-music"}}
{{/if}}
{{#each playQueue as |item index|}}
<div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}}" {{action "goToSong" index}}>
{{#if item.title}}
{{item.artist}} - {{item.title}}
{{item.title}}
<div class="songArtist">{{item.artist}}</div>
{{else}}
{{item.filename}}
{{/if}}</div>
{{/if}}
<div data-toggle="tooltip" data-placement="bottom auto" title="Remove from playlist" class="audioRemoveButton cursorPointer" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div></div>
{{/each}}
</div>
</div>
@ -82,9 +90,17 @@
</span>
<span id="beatSpeakerContainer" class="col-xs-5">
{{#paper-switch checked=speakerViewed noink=true}} {{speakerLabel}} {{/paper-switch}}
{{#liquid-if speakerViewed}}
<div id="beatSpeaker">
<span id="beatSpeakerCenter"
class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}}></span>
<span id="beatSpeakerCenter" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}}></span>
</div>
{{else}}
<div id ="beatHistory">
{{#each beatHistory as |item|}}
<p>{{{item}}}</p>
{{/each}}
</div>
{{/liquid-if}}
</span>
</div>

View file

@ -13,11 +13,15 @@
"hammerjs": "~2.0.4",
"JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
"jquery": "~2.1.4",
"jquery-mousewheel": "~3.1.13",
"loader.js": "ember-cli/loader.js#3.2.0",
"nouislider": "^8.0.1",
"qunit": "~1.18.0"
},
"resolutions": {
"ember": "~2.0.2"
"ember": "~2.0.2",
"ember-qunit": "0.4.9",
"jquery": "~2.1.4",
"qunit": "~1.18.0"
}
}

View file

@ -9,6 +9,7 @@ module.exports = function(defaults) {
app.import('vendor/dancer.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
// Use `app.import` to add additional libraries to the generated
// output files.

View file

@ -30,17 +30,18 @@
"ember-cli-ic-ajax": "0.2.1",
"ember-cli-inject-live-reload": "^1.3.0",
"ember-cli-nouislider": "0.7.0",
"ember-cli-qunit": "1.0.1",
"ember-cli-qunit": "1.0.3",
"ember-cli-release": "0.2.6",
"ember-cli-sass": "4.2.0",
"ember-cli-sri": "^1.0.1",
"ember-cli-uglify": "^1.0.1",
"ember-cli-windows-addon": "^1.2.2",
"ember-data": "1.13.11",
"ember-data": "1.13.12",
"ember-disable-proxy-controllers": "^1.0.0",
"ember-export-application-global": "^1.0.3",
"ember-modal-dialog": "0.7.7",
"ember-modal-dialog": "0.8.0",
"ember-paper": "0.2.7",
"ember-truth-helpers": "1.1.0",
"liquid-fire": "0.21.2"
}
}