Updating page title on song and minor things

app/components/controls/music-control.js

@@ -19,7 +19,15 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       this.changePlayerControl('usingMic', !usingMic);
 
       if(!usingMic){
-        Em.$('#micInput').click();
+        navigator.getUserMedia(
+          {audio: true},
+          function(stream) {
+            debugger;
+          },
+          function(err) {
+            console.log("Error during navigator.getUserMedia: " + err);
+          }
+        );
       }
     },
     slideTogglePlayerBottom: function(){
@@ -174,11 +182,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     speakerViewedChanged: function(value){
       this.set('speakerViewed', value);
     },
-    sequentialTransitionChanged: function(value){
+    randomTransitionChanged: function(value){
-      this.set('sequentialTransition', value);
+      this.set('randomTransition', value);
     },
-    onBeatBriOnlyChanged: function(value){
+    onBeatBriAndColorChanged: function(value){
-      this.set('onBeatBriOnly', value);
+      this.set('onBeatBriAndColor', value);
     },
     usingMicChanged: function(value){
       this.set('usingMic', value);
@@ -229,6 +237,27 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     }
   },
 
+  updatePageTitle: function(){
+    var title = 'Huegasm', playQueuePointer = this.get('playQueuePointer'), playQueue = this.get('playQueue');
+
+    if(playQueuePointer !== -1){
+      var song = playQueue[playQueuePointer];
+      if(song.title){
+        title = song.title;
+
+        if(song.artist){
+          title += (' - ' + song.artist);
+        }
+      } else {
+        title = song.filename;
+      }
+
+      title += '- Huegasm';
+    }
+
+    document.title = title;
+  }.observes('playQueuePointer'),
+
   clearCurrentAudio: function(resetPointer) {
     var dancer = this.get('dancer');
 
@@ -275,7 +304,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
   simulateKick: function(mag) {
     var activeLights = this.get('activeLights'),
       transitionTime = this.get('transitionTime') * 10,
-      onBeatBriOnly = this.get('onBeatBriOnly'),
+      onBeatBriAndColor = this.get('onBeatBriAndColor'),
       self = this,
       color = null,
       stimulateLight = function (light, brightness, hue) {
@@ -294,17 +323,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
 
     if(activeLights.length > 0){
       var lastLightBopIndex = this.get('lastLightBopIndex'),
-        sequentialTransition = this.get('sequentialTransition'),
+        randomTransition = this.get('randomTransition'),
         light;
 
-      if(sequentialTransition) {
+      if(randomTransition) {
+        light = Math.floor(Math.random() * activeLights.length) + 1;
+      } else {
         light = activeLights[lastLightBopIndex];
         this.set('lastLightBopIndex', (lastLightBopIndex+1) % activeLights.length);
-      } else {
-        light = Math.floor(Math.random() * activeLights.length) + 1;
       }
 
-      if(!onBeatBriOnly) {
+      if(onBeatBriAndColor) {
         color = Math.floor(Math.random() * 65535);
       }
 
@@ -363,7 +392,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       kick: kick
     });
 
-    ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'sequentialTransition', 'playerBottomDisplayed', 'onBeatBriOnly', 'usingMic'].forEach(function (item) {
+    ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'usingMic'].forEach(function (item) {
       if (localStorage.getItem('huegasm.' + item)) {
         var itemVal = localStorage.getItem('huegasm.' + item);
         if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold' || item === 'transitionTime') {
@@ -377,6 +406,12 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         self.send(item+'Changed', itemVal);
       }
     });
+
+    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+    if(navigator.getUserMedia === undefined){
+      this.set('usingMicSupported', false);
+    }
   },
 
   didInsertElement: function () {

app/components/mixins/music-control.js

@@ -75,6 +75,7 @@ export default Em.Mixin.create({
   timeTotal: 0,
   lastLightBopIndex: 0,
 
+  usingMicSupported: true,
   usingMic: false,
   playerBottomDisplayed: false,
   dragging: false,
@@ -82,6 +83,7 @@ export default Em.Mixin.create({
   dragLeaveTimeoutHandle: null,
   visualizationsDisplayed: false,
 
+  notUsingMic: Em.computed.not('usingMic'),
   playQueueEmpty: Em.computed.empty('playQueue'),
   playQueueNotEmpty: Em.computed.notEmpty('playQueue'),
   playQueueMultiple: function(){
@@ -119,23 +121,23 @@ export default Em.Mixin.create({
     }
   }.property('speakerViewed'),
 
-  sequentialTransition: true,
+  randomTransition: true,
-  sequentialTransitionLabel: function() {
+  randomTransitionLabel: function() {
-    if(this.get('sequentialTransition')){
+    if(this.get('randomTransition')){
-      return 'Sequential Transition';
-    } else {
       return 'Random Transition';
-    }
-  }.property('sequentialTransition'),
-
-  onBeatBriOnly: true,
-  onBeatBriOnlyLabel: function() {
-    if(this.get('onBeatBriOnly')){
-      return 'Brightness';
     } else {
-      return 'Brightness & Color';
+      return 'Sequential Transition';
     }
-  }.property('onBeatBriOnly'),
+  }.property('randomTransition'),
+
+  onBeatBriAndColor: true,
+  onBeatBriAndColorLabel: function() {
+    if(this.get('onBeatBriAndColor')){
+      return 'Brightness & Color';
+    } else {
+      return 'Brightness';
+    }
+  }.property('onBeatBriAndColor'),
 
   changePlayerControl: function(name, value, isOption){
     if(isOption){
@@ -227,7 +229,7 @@ export default Em.Mixin.create({
 
   onOptionChange: function(self, option){
     localStorage.setItem('huegasm.' + option, this.get(option));
-  }.observes('sequentialTransition', 'onBeatBriOnly'),
+  }.observes('randomTransition', 'onBeatBriAndColor'),
 
   onRepeatChange: function () {
     var tooltipTxt = 'Repeat all', type = 'repeat';

app/styles/app.scss

@@ -619,7 +619,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
   box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 1);
 }
 
-#fileInput, #micInput {
+#fileInput {
   width: 1px;
   height: 1px;
   visibility: hidden;
@@ -764,7 +764,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
   background-color: white;
   border-radius: 10px;
   width: 90%;
-  margin: 20px auto;
+  margin: 0 auto 20px auto;
   overflow: auto;
   padding: 10px;
   box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.1);

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

@@ -4,8 +4,10 @@
     <div id="playNotification"
          class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
     <div id="playerControls">
+    {{#if notUsingMic}}
       {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
 
+
       {{#if playQueueMultiple}}
         <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip"
               data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
@@ -21,6 +23,7 @@
                   -->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}
 
       <div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
+    {{/if}}
 
           <span class="pull-right">
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
@@ -35,7 +38,6 @@
 
   <div id="playlist" class="col-sm-4 col-xs-12">
     <input id="fileInput" type="file" accept="audio/*" multiple="true" />
-    <input id="micInput" type="file" accept="audio/*" capture />
 
     <div id="playListControls">
       <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
@@ -44,7 +46,9 @@
 
       <span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music" class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
 
-      <span data-toggle="tooltip" data-placement="bottom auto" class="pull-right bootstrapTooltip" id="usingMicTooltip" data-title={{usingMicTooltipTxt}} {{action "useMic"}}>{{paper-icon icon=micIcon class=usingMicClass}}</span>
+      {{#if usingMicSupported}}
+          <span data-toggle="tooltip" data-placement="bottom auto" class="pull-right bootstrapTooltip" id="usingMicTooltip" data-title={{usingMicTooltipTxt}} {{action "useMic"}}>{{paper-icon icon=micIcon class=usingMicClass}}</span>
+      {{/if}}
     </div>
 
     <div id="playListArea"
@@ -129,17 +133,18 @@
 
       <div id="beatOptionButtonGroup" class="row">
         <div class="beatOption col-xs-6">
-          {{#paper-switch checked=sequentialTransition  disabled=trial}}<span data-toggle="tooltip" data-placement="bottom auto" data-title="The order in which the active lights are transitioned to on beat"
+          {{#paper-switch checked=randomTransition disabled=trial}}<span data-toggle="tooltip" data-placement="bottom auto" data-title="The order in which the active lights are transitioned to on beat" class="optionDescription bootstrapTooltip">{{randomTransitionLabel}}</span>{{/paper-switch}}
-                                                                              class="optionDescription bootstrapTooltip">{{sequentialTransitionLabel}}</span>{{/paper-switch}}
         </div>
         <div class="beatOption col-xs-6">
-          {{#paper-switch checked=onBeatBriOnly disabled=trial}}<span data-toggle="tooltip" data-placement="bottom auto" data-title="The properties of the lights to change on beat" class="optionDescription bootstrapTooltip"> {{onBeatBriOnlyLabel}}</span>{{/paper-switch}}
+          {{#paper-switch checked=onBeatBriAndColor disabled=trial}}<span data-toggle="tooltip" data-placement="bottom auto" data-title="The properties of the lights to change on beat" class="optionDescription bootstrapTooltip"> {{onBeatBriAndColorLabel}}</span>{{/paper-switch}}
         </div>
       </div>
 
       <div id="playerButtonGroup" class="row">
         {{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
-        {{#paper-button raised=true action="saveSongSettings"}}Save Song Settings{{/paper-button}}
+        {{#if notUsingMic}}
+          {{#paper-button raised=true action="saveSongSettings"}}Save Song Settings{{/paper-button}}
+        {{/if}}
       </div>
     </div>