implementing dragging, fixing bugs, kicking ass, etc

app/components/bridge-controls.js

@@ -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();
 

app/components/controls/music-control.js

@@ -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(){
+    dropFiles: function(){
-      debugger;
+      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,
+      var files = this.files;
-        updatePlayQueue = function(){
+      self.send('handleNewFiles', files);
-          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)
-          });
-        }
-      }
     });
 
-    // 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

app/components/mixins/music-control.js

@@ -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'),

app/styles/app.scss

@@ -377,8 +377,8 @@ md-toolbar {
 }
 
 #volumeBar {
-  width: 7.143em;
+  width: 5em;
-  height: 0.571em;
+  height: 0.4em;
   display: inline-block;
 }
 
@@ -387,8 +387,8 @@ md-toolbar {
 }
 
 .noUi-horizontal .noUi-handle {
-  width: 0.400em;
+  width: 0.4em;
-  height: 1.500em;
+  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 {
+#playListArea.dragArea.dragHereHighlight {
-  background-color: white !important;
+  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);
+}

app/templates/components/controls/group-control.hbs

@@ -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}}

app/templates/components/controls/music-control.hbs

@@ -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"
+                --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
-                  title="Next song"  {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
+                         title="Next song"  {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
                   -->{{/if}}<!--
-          --><span data-toggle="tooltip" data-placement="top"
+          --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="volumeMutedTooltip"
-                   title={{volumeMutedTooltipTxt}} id="volumeMutedTooltip" {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass  class="playerControllIcon volumeButton"}}</span><!--
+                   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"
+            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip"
-                  title={{shuffleTooltipTxt}} id="shuffleTooltip" {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
+                  title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
 
-            <span data-toggle="tooltip" data-placement="bottom auto"
+            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip"
-                  title={{repeatTooltipTxt}} id="repeatTooltip" {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
+                  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>

app/templates/components/light-group.hbs

@@ -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}}