Add youtube lib

src/App.css

@@ -3,16 +3,13 @@
 .app {
   padding-top: 25px;
   text-align: center;
-  background-color: #B9461A;
-  border: 8px solid black;
   color: white;
-  min-height: 800px;
 }
 
 .social {
   position: absolute;
-  top: 25px;
-  left: 25px;
+  top: 15px;
+  left: 15px;
 }
 
 .social iframe {

src/App.js

@@ -1,10 +1,16 @@
 import React, { Component } from 'react';
 import './App.css';
 import logo from './logo.png';
+import youtube from './lib/youtube';
 
 import Container from './components/Container/Container';
 
 class App extends Component {
+  componentWillMount() {
+    // Load the youtube player asap
+    youtube.init();
+  }
+
   render() {
     return (
       <div className="app">

src/components/Form/Form.css

@@ -2,17 +2,52 @@
 
 }
 
-#form select {
-    margin: 0 12px 10px 0;
-    outline: none;
+#form select.genre {
+  margin: 0 12px 10px 0;
+  outline: none;
+  color: #B9461A;
+  font-weight: bold;
+  text-overflow: ellipsis;
+  text-overflow: "";
+}
+
+#form .slider {
+  -webkit-appearance: none;  /* Override default CSS styles */
+  appearance: none;
+  width: 200px; /* Full-width */
+  height: 25px; /* Specified height */
+  background: #d3d3d3; /* Grey background */
+  outline: none; /* Remove outline */
+  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+  transition: opacity .2s;
+}
 
-    color: #B9461A;
-    padding:6px 10px;
+/* Mouse-over effects */
+#form .slider:hover {
+  opacity: 1; /* Fully shown on mouse-over */
+}
 
-    font-weight: bold;
-    text-overflow: ellipsis;
+/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
+#form .slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  width: 25px; /* Set a specific slider handle width */
+  height: 25px; /* Slider handle height */
+  background: #4CAF50; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
 
+#form .slider::-moz-range-thumb {
+  width: 25px; /* Set a specific slider handle width */
+  height: 25px; /* Slider handle height */
+  background: #4CAF50; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
 
-    text-indent: 0.01px;
-    text-overflow: "";
+#form label {
+  width: 200px;
+  color: #e3e3e3;
+  font-weight: bold;
+  text-align: right;
 }

src/components/Form/Form.js

@@ -2,29 +2,39 @@ import React, { Component } from 'react';
 import './Form.css';
 
 class Form extends Component {
+  submit() {
+    // Clear out the player view
+    // Get token to use with the spotify api if time has passed
+    // Get recomendations
+    // Find videos on youtube
+  }
+
   render() {
     return (
       <div id="form">
         <div>
-          <select id="mood" autoComplete="off">
+          <label>genre</label>
+          <select autoComplete="off" className="genre">
             <option>aggressive</option>
 
           </select>
         </div>
         <div>
           <label>energy</label>
-          <input type="range" min="0" max="1"/>
+          <input type="range" min="0" max="100" defaultValue="50" className="slider"/>
         </div>
 
         <div>
           <label>danceability</label>
-          <input type="range" min="0" max="1"/>
+          <input type="range" min="0" max="100" defaultValue="50" className="slider"/>
         </div>
 
         <div>
           <label>happiness</label>
-          <input type="range" min="0" max="1"/>
+          <input type="range" min="0" max="100" defaultValue="50" className="slider"/>
         </div>
+
+        <div><button onClick={this.submit}>go</button></div>
       </div>
     );
   }

src/index.css

@@ -1,6 +1,5 @@
 body {
   margin: 0;
-  padding: 12px;
   font-family: sans-serif;
-  background-color: #F28333;
+  background-color: #B9461A;
 }

src/lib/youtube.js

@@ -0,0 +1,48 @@
+'use strict';
+
+let player;
+
+const youtube = {
+  init: () => {
+    console.log(234);
+    // This code loads the IFrame Player API code asynchronously.
+    const tag = document.createElement('script');
+
+    tag.src = "https://www.youtube.com/iframe_api";
+    const firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    // Youtube api needs to use the global space
+    window.onYouTubeIframeAPIReady = () => {
+      player = new YT.Player('player', {
+        height: '279',
+        width: '372',
+        videoId: '',
+        playerVars: { 
+          'wmode': 'opaque',
+          'rel': 0,
+          'showinfo': 1,
+          'controls': 2
+        },
+        events: {
+          'onReady': function () {
+            ytf.init();
+          },
+          'onStateChange': function (event) {
+
+            ytf.setPageTitle(event.data);
+
+            if (event.data == YT.PlayerState.ENDED) {
+              ytf.next();
+            } 
+          }
+        }
+      });
+    }
+  },
+  getPlayer: () => {
+    return player;
+  }
+};
+
+export default youtube;