Merge branch 'master' of https://github.com/AkiraLaine/music-app

app/app.css

@@ -300,30 +300,46 @@ footer a:hover{
   color: white;
   font-weight: 600;
 }
-#dashboard .station{
-  width: 150px;
-  height: 150px;
-  background-color: rgba(255,255,255,0.7);
-  border-radius: 100px;
-  margin-top: 100px;
-  margin-left: 300px;
+#dashboard .logout{
+  margin-left: 20px;
   cursor: pointer;
 }
-#dashboard .station h3{
-  text-align: center;
+#dashboard .station{
+  background-color: rgba(255,255,255,0.3);
+  height: 250px;
   color: white;
+  margin-top: 1em;
+}
+#dashboard .station .station-name{
+  text-align: center;
+  font-size: 3em;
   font-weight: 600;
-  font-size: 3.5em;
-  line-height: 150px;
 }
 #dashboard .station .song-info{
-  color: darkcyan;
-  margin-left: 70px;
+  text-align: center;
 }
 #dashboard .station .song-title{
-  font-size: 2em;
-  font-weight: 900;
+  font-size: 2.5em;
 }
 #dashboard .station .song-artist{
-  font-size: 1.5em;
+  font-size: 2em;
+}
+#dashboard .station .button-tunein{
+  outline: 0;
+  border: 0;
+  border: 2px solid white;
+  padding: 10px 15px;
+  border-radius: 3px;
+  width: 250px;
+  cursor: pointer;
+  font-size: 18px;
+  color: #fff;
+  background-color: transparent;
+  display: block;
+  margin: 0 auto;
+}
+#dashboard .station .controls{
+  font-size: 2em;
+  display: block;
+  text-align: center;
 }

app/app.html

@@ -5,17 +5,12 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
   <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
   <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
-  <script src="https://connect.soundcloud.com/sdk.js"></script>
+  <script src="https://connect.soundcloud.com/sdk-2.0.0.js"></script>
   <script>
     function init() {
-      /*SC.initialize({
+      SC.initialize({
           client_id: "577d3fbbdb5fe05bb4af698d686508fe"
       });
-
-      var sound = [];
-      SC.stream("/tracks/293", function(sound){
-          sound.play();
-      });*/
     }
   </script>
 </head>
@@ -54,12 +49,21 @@
 
 <template name="dashboard">
   <div class="landing">
-    <div id="name-container"> <h1>{{currentUser.username}}{{currentUser.services.facebook.first_name}} {{currentUser.services.facebook.last_name}}{{currentUser.services.github.username}}</h1></div>
-    <div class="station">
-      <h3>EDM</h3>
-      <div class="song-info"></div>
+    <div id="name-container"> <h1>{{currentUser.username}}{{currentUser.services.facebook.first_name}} {{currentUser.services.facebook.last_name}}{{currentUser.services.github.username}}<i class="fa fa-power-off logout" tooltip="Logout"></i></h1></div>
+    <div class="row">
+      <div class="col-md-4">
+        <div class="station">
+          <p class="station-name">EDM</p>
+          <div class="song-info">
+            <p class="song-title">Immortals</p>
+            <p class="song-artist">Fall Out Boy</p>
+          </div>
+          <!-- <button class="button-tunein">Tune in to station!</button> -->
+          <i id="play" class="fa fa-play controls"></i>
+          <i id="stop" class="fa fa-stop controls" style="display:none"></i>
+        </div>
+      </div>
     </div>
-    <a href="#" class="logout">Logout</a>
 
     <ul class="bg-bubbles">
     	<li></li>
@@ -119,4 +123,4 @@
 
 <template name="Room">
     <h1>{{{type}}}</h1>
-</template>
+</template>

app/app.js

@@ -63,13 +63,26 @@ if (Meteor.isClient) {
         Meteor.logout();
     },
 
-    "click .station": function() {
-      $(".station").css({
-        "width": "250px",
-        "height": "250px",
-        "border-radius": "150px",
-      })
-      $(".station .song-info").html("<h6 class='song-title'>Immortals</h6><p class='song-artist'>Fall Out Boy</p>")
+    "click .button-tunein": function(){
+      SC.stream("/tracks/172055891/", function(sound){
+        console.log(sound);
+        sound._player._volume = 0.3;
+        sound.play();
+      });
+    },
+
+    "click #play": function(){
+      $("#play").hide();
+      SC.stream("/tracks/172055891/", function(sound){
+        sound._player._volume = 0.3;
+        sound.play();
+        $("#stop").on("click", function(){
+          $("#stop").hide();
+          $("#play").show();
+          sound._player.pause();
+        })
+      });
+      $("#stop").show();
     }
   });
   
@@ -110,4 +123,4 @@ Router.route("/", {
 
 Router.route("/:type", {
     template: "Room"
-});
+});