youtube is a harsh mistress

app/index.html

@@ -17,7 +17,8 @@
     <link rel="stylesheet" href="assets/vendor.css">
     <link rel="stylesheet" href="assets/huegasm.css">
 
-    <script async src="https://apis.google.com/js/client.js"></script>
+    <script src="http://apis.google.com/js/client.js"></script>
+    <script src="http://www.youtube.com/iframe_api"></script>
 
     {{content-for 'head-footer'}}
   </head>

app/pods/components/music-tab/component.js

@@ -49,16 +49,20 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         console.log('ready');
       }, onPlayerStateChange = function(){
         console.log('onPlayerStateChange');
+      }, onError = function(err){
+        console.log('onError' + err.data);
       };
 
-      //var youtubePlayer = new YT.Player('ytplayer', {
+      var youtubePlayer = new YT.Player('playerArea', {
-      //  events: {
+        videoId: 'Mc8LjwZvxHw'
-      //    'onReady': onPlayerReady,
+      });
-      //    'onStateChange': onPlayerStateChange
+
-      //  }
+      var audio = new Audio(), dancer = this.get('dancer');
-      //});
+      audio.src = "https://www.youtube.com/embed/Mc8LjwZvxHw?enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A4200";
-      //
+      dancer.load(audio);
-      //this.set('youtubePlayer', youtubePlayer);
+      dancer.play();
+
+      this.set('youtubePlayer', youtubePlayer);
       document.title = 'Youtube - Huegasm';
     },
     useLocalAudio: function(){
@@ -258,10 +262,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     audioModeChanged(value){
       if(value === 1) {
         this.startUsingMic();
-      } else if(value === 2){
+      } else if(value === 3) {
-        this.send('useYoutubeAudio');
-      } else {
         this.send('useLocalAudio');
+      } else {
+        this.set('audioMode', value);
       }
     },
     clickSpeaker(){
@@ -556,8 +560,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       }
     });
 
-    window.onYouTubeIframeAPIReady = function() {
+    if(this.get('audioMode') === 2){
-      debugger;
+      this.send('useYoutubeAudio');
-    };
+    }
   }
 });

app/pods/components/music-tab/template.hbs

@@ -36,7 +36,6 @@
     </div>
   {{else}}
     <div id="playerArea" class="col-sm-8 col-xs-12">
-        <iframe id="ytplayer" type="text/html" src="//www.youtube.com/embed/?listType=user_uploads&list=MrSuicideSheep" frameborder="0" allowfullscreen></iframe>
     </div>
   {{/if}}
 
@@ -187,7 +186,6 @@
         <div id="beatContainer" class="col-lg-4 col-xs-12">
           {{#if speakerViewed}}
             <div class="bezel">
-                <div class="rivet1"></div>
                 <div class="rivet2"></div>
                 <div class="rivet3"></div>
                 <div class="rivet4"></div>

app/styles/app.scss

@@ -412,7 +412,7 @@ md-toolbar {
 
 #slideToggle {
   color: $playerDefaultIconColor;
-  background: darkgrey;
+  background: #8C3E3E;
   z-index: 2;
   div i {
    font-size: 25px;
@@ -603,7 +603,7 @@ i.playerControllIcon {
 }
 
 #playListArea, #playAreaMic, #playAreaYoutube {
-  background-color: lighten($playListBackgroundColor, 20%);
+  background-color: white;
   width: 100%;
   height: 333px;
   margin: 10px auto 0 auto;
@@ -685,6 +685,7 @@ i.playerControllIcon {
 #beatArea {
   z-index: 2;
   position: relative;
+  padding-top: 20px;
 }
 
 #beatArea * .noUi-target {
@@ -692,8 +693,9 @@ i.playerControllIcon {
 }
 
 #beatArea * .noUi-base, #beatArea * .noUi-background {
-  background-color: #3F3F3F;
+  background-color: #ADADAD;
   cursor: pointer;
+  border: 1px solid #797979;
 }
 
 #beatArea * .noUi-vertical {
@@ -747,9 +749,6 @@ i.playerControllIcon {
 
 #playerButtonGroup {
   margin-top: 10px;
-  button {
-    box-shadow: 5px 0 15px 5px rgba(0, 0, 0, 0.3);
-  }
 }
 
 #beatHistory {
@@ -996,3 +995,16 @@ $vibrateblur1:1px;
   left: 0;
   display: none;
 }
+
+.noUi-value-vertical {
+  color: black;
+}
+
+.noUi-vertical .noUi-handle {
+  border: 1px solid #A3A0A0;
+  width: 26px;
+}
+
+.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before{
+  background: grey;
+}

config/environment.js

@@ -21,7 +21,7 @@ module.exports = function(environment) {
 
     contentSecurityPolicy: {
       'default-src': "'none'",
-      'script-src': "'self' apis.google.com 'unsafe-inline'",
+      'script-src': "'self' apis.google.com www.youtube.com s.ytimg.com 'unsafe-inline'",
       'font-src': "'self' fonts.gstatic.com",
       'connect-src': "'self' *",
       'img-src': "'self' data:",