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

implementing dragging, fixing bugs, kicking ass, etc

Browse source
This commit is contained in:
Egor 2015-09-16 00:43:16 -07:00
parent 7aa83c90c2
commit 2aeb666226
7 changed files with 101 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/components/bridge-controls.js
View file

@ -1,7 +1,8 @@
import Em from 'ember';
export default Em.Component.extend({
classNames: ['bridgeControls', 'container-fluid'],
classNames: ['container-fluid'],
elementId: 'bridgeControls',
bridgeIp: null,
manualBridgeIp: null,
@ -30,6 +31,16 @@ export default Em.Component.extend({
return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
}.property('bridgeIp', 'bridgeUsername'),
didInsertElement: function(){
//TODO: make less shitty
var observer = new MutationObserver(function(mutations) {
Em.run.once(this, function(){
Em.$('.bootstrapTooltip').tooltip();
});
});
observer.observe(Em.$('#bridgeControls')[0], {childList: true, subtree: true});
},
init: function() {
this._super();

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

@ -163,8 +163,44 @@ export default Em.Component.extend(musicControlMixin, {
// simulate the speaker vibration by running a CSS animation on it
Em.$('#beatSpeakerCenter').removeClass('pop').prop('offsetWidth', Em.$('#beatSpeakerCenter').prop('offsetWidth')).addClass('pop');
},
audioDrop: function(){
debugger;
dropFiles: function(){
this.setProperties({
dragging: false,
draggingOverPlayListArea: false
});
this.send('handleNewFiles', event.dataTransfer.files);
},
playListAreaDragOver: function(){
this.set('draggingOverPlayListArea', true);
},
playListAreaDragLeave: function(){
this.set('draggingOverPlayListArea', false);
},
handleNewFiles: function(files){
var self = this,
playQueue = this.get('playQueue'),
updatePlayQueue = function(){
var tags = ID3.getAllTags("local");
playQueue.push({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title });
ID3.clearAll();
self.notifyPropertyChange('playQueue');
// make sure to init the first song
if(playQueue.length > 0 && self.get('playQueuePointer') === -1){
self.send('goToSong', 0);
}
};
for (var key in files) {
if (files.hasOwnProperty(key)) {
var file = files[key];
ID3.loadTags("local", updatePlayQueue.bind(file),{
dataReader: new FileAPIReader(file)
});
}
}
}
},
@ -269,36 +305,13 @@ export default Em.Component.extend(musicControlMixin, {
},
didInsertElement: function () {
var self = this, playQueue = this.get('playQueue');
var self = this;
Em.$('#fileInput').on('change', function () {
var files = this.files,
updatePlayQueue = function(){
var tags = ID3.getAllTags("local");
playQueue.push({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title });
ID3.clearAll();
self.notifyPropertyChange('playQueue');
// make sure to init the first song
if(playQueue.length > 0 && self.get('playQueuePointer') === -1){
self.send('goToSong', 0);
}
};
for (var key in files) {
if (files.hasOwnProperty(key)) {
var file = files[key];
ID3.loadTags("local", updatePlayQueue.bind(file),{
dataReader: new FileAPIReader(file)
});
}
}
var files = this.files;
self.send('handleNewFiles', files);
});
// initialize bootstrap tooltips
Em.$('[data-toggle="tooltip"]').tooltip();
// prevent space/text selection when the user repeatedly clicks on the center
Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenter', function(event) {
event.preventDefault();
@ -310,25 +323,11 @@ export default Em.Component.extend(musicControlMixin, {
if(event.deltaY < 0) {
scrollSize *= -1;
}
self.send('volumeChanged', self.get('volume') + scrollSize);
var newVolume = self.get('volume') + scrollSize;
self.send('volumeChanged', newVolume < 0 ? 0 : newVolume);
event.preventDefault();
});
// file drag and drop support
//Em.$('.dragArea').on(
// 'dragover',
// function(e) {
// console.log('dragover');
// e.preventDefault();
// e.stopPropagation();
// }
//).on(
// 'dragenter',
// function(e) {
// console.log('dragenter');
// e.preventDefault();
// e.stopPropagation();
// }
//);
},
// component clean up

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

@ -59,6 +59,7 @@ export default Em.Mixin.create({
timeTotal: 0,
dragging: false,
draggingOverPlayListArea: false,
playQueueEmpty: Em.computed.empty('playQueue'),
playQueueNotEmpty: Em.computed.notEmpty('playQueue'),
@ -116,6 +117,20 @@ export default Em.Mixin.create({
}
}.property('playing'),
playListAreaClass: function(){
var classes = 'cursorPointer dragArea';
if(this.get('dragging')){
classes += ' dragHereHighlight';
}
if(this.get('draggingOverPlayListArea')){
classes += ' draggingOver';
}
return classes;
}.property('dragging', 'draggingOverPlayListArea'),
repeatClass: function () {
return this.get('repeat') !== 0 ? 'playerControllIcon active' : 'playerControllIcon';
}.property('repeat'),

19
app/styles/app.scss
View file

@ -377,8 +377,8 @@ md-toolbar {
}
#volumeBar {
width: 7.143em;
height: 0.571em;
width: 5em;
height: 0.4em;
display: inline-block;
}
@ -387,8 +387,8 @@ md-toolbar {
}
.noUi-horizontal .noUi-handle {
width: 0.400em;
height: 1.500em;
width: 0.4em;
height: 1.3em;
left: -0.071em;
top: -0.500em;
transition-duration: 0.1s;
@ -437,7 +437,7 @@ md-toolbar {
}
#playListArea {
background: lighten($playListBackgroundColor, 20%);
background-color: lighten($playListBackgroundColor, 20%);
width: 100%;
height: 333px;
margin: 10px auto 0 auto;
@ -586,7 +586,12 @@ md-toolbar {
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.1);
}
.dragHere {
background-color: white !important;
#playListArea.dragArea.dragHereHighlight {
background-color: white;
border: 5px dotted #5383ff;
}
#playListArea.dragArea.draggingOver {
background-color: darken(white, 5%);
box-shadow: inset 0 0 20px 0 rgba(0,0,0,1);
}

4
app/templates/components/controls/group-control.hbs
View file

@ -1,9 +1,9 @@
<h3 class="sideNavTitle">Light Groups<span data-toggle="tooltip" data-placement="top auto" title="Add Group" class="addButton pull-right cursorPointer" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}}</span></h3>
<h3 class="sideNavTitle">Light Groups<span data-toggle="tooltip" data-placement="bottom auto" title="Add Group" class="bootstrapTooltip addButton pull-right cursorPointer" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}}</span></h3>
{{#paper-list}}
{{#each groupsArrData as |group|}}
{{#paper-item class=group.rowClass}}
<div class="groupSelect cursorPointer" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="bottom auto" title="Remove Group" class="removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
<div class="groupSelect cursorPointer" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="top auto" title="Remove Group" class="bootstrapTooltip removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
{{/paper-item}}
{{/each}}
{{/paper-list}}

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

@ -5,23 +5,23 @@
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
{{#if playQueueMultiple}}
<span data-toggle="tooltip" data-placement="top" title="Previous"
<span data-toggle="tooltip" data-placement="top" title="Previous" class="bootstrapTooltip"
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><!--
id="playingTooltip" class="bootstrapTooltip" title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
-->{{#if playQueueMultiple}}<!--
--><span data-toggle="tooltip" data-placement="top"
title="Next song" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
title="Next song" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
-->{{/if}}<!--
--><span data-toggle="tooltip" data-placement="top"
title={{volumeMutedTooltipTxt}} id="volumeMutedTooltip" {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!--
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="volumeMutedTooltip"
title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!--
-->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}
<span id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</span>
<span class="pull-right">
<span data-toggle="tooltip" data-placement="top"
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
</span>
</span>
@ -29,20 +29,20 @@
</div>
<div id="playlist" class="col-xs-4">
<input id="fileInput" type="file" accept="audio/*" multiple="true"/>
<input id="fileInput" type="file" accept="audio/*" multiple="true" />
<div id="playListControls">
<span data-toggle="tooltip" data-placement="bottom auto"
title={{shuffleTooltipTxt}} id="shuffleTooltip" {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip"
title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto"
title={{repeatTooltipTxt}} id="repeatTooltip" {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip"
title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
<span data-toggle="tooltip" data-placement="bottom" title="Add new music"
class="pull-right" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
</div>
<div id="playListArea" class="cursorPointer dragArea {{if dragging "dragHere"}}" {{action "playListAreaAddAudio"}}>
<div id="playListArea" class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
{{#if playQueueEmpty}}
<div id="dragHere">Drag your music files here</div>
{{paper-icon icon="library-music"}}
@ -56,7 +56,7 @@
{{else}}
{{item.filename}}
{{/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>
<div data-toggle="tooltip" data-placement="bottom auto" title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div></div>
{{/each}}
</div>
</div>

2
app/templates/components/light-group.hbs
View file

@ -1,5 +1,5 @@
{{#each lightsList as |light|}}
<span class="{{light.activeClass}}" data-toggle="tooltip" data-placement="top auto" title="{{light.name}}" {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
<span class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" title="{{light.name}}" {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
<img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
</span>
{{/each}}