weekend werk
This commit is contained in:
parent
1535ec19fc
commit
40dbec0850
10 changed files with 144 additions and 45 deletions
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import Em from 'ember';
|
||||
|
||||
export default Em.Component.extend({
|
||||
classNames: ['innerControlFrame', 'groupControl'],
|
||||
classNameBindings: ['groupControlDisplayed:on'],
|
||||
classNames: ['innerControlFrame', 'groupControls'],
|
||||
|
||||
tagName: null,
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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|}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
{{#paper-list}}
|
||||
|
||||
{{#paper-item class="item"}}
|
||||
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL}}
|
||||
{{/paper-item}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue