modal view added

app/app.css

@@ -423,7 +423,6 @@ footer a:hover{
   color: white;
   margin-top: 1em;
   font-size: 1.5em;
-  width: 500px;
   text-align: center;
 }
 #song-results p{
@@ -474,7 +473,6 @@ footer a:hover{
   font-size: 200px;
   color: bisque;
 }
-
 #spinner-container {
   margin-left: auto;
   margin-right: auto;
@@ -492,15 +490,20 @@ footer a:hover{
 #croom {
   width: 304px !important;
 }
-
 #spinner {
   font-size: 200px;
   color: bisque;
 }
-
 #spinner-container {
   margin-left: auto;
   margin-right: auto;
   width: 200px;
   margin-top: 10%;
 }
+#song-modal{
+  margin: 10px 0 10px 35px;
+}
+.modal-content{
+  background-color: rgb(107, 197, 164);
+  color: white;
+}

app/app.js

@@ -88,27 +88,6 @@ if (Meteor.isClient) {
             }
         },
 
-        "click .button-tunein": function(){
-            SC.stream("/tracks/172055891/", function(sound){
-             sound._player._volume = 0.3;
-                sound.play();
-            });
-        },
-
-        "click #play": function(){
-            $("#play").hide();
-            SC.stream("/tracks/172055891/", function(sound){
-                hpSound = sound;
-                sound._player._volume = 0.3;
-                sound.play();
-                $("#stop").on("click", function(){
-                    $("#stop").hide();
-                    $("#play").show();
-                    sound._player.pause();
-                })
-            });
-            $("#stop").show();
-        },
         "click #croom_create": function() {
             Meteor.call("createRoom", $("#croom").val(), function (err, res) {
                 if (err) {
@@ -150,29 +129,32 @@ if (Meteor.isClient) {
             })
           }
         })
-        SC.get('/tracks', { q: $("#song-input").val()}, function(tracks) {
-          console.log(tracks);
-          for(var i in tracks){
-            $("#song-results").append("<p>" + tracks[i].title + "</p>")
-            songsArr.push({title: tracks[i].title, id: tracks[i].id, duration: tracks[i].duration / 1000});
-          }
-          $("#song-results p").click(function(){
-            var title = $(this).text();
-            for(var i in songsArr){
-              if(songsArr[i].title === title){
-                var id = songsArr[i].id;
-                var duration = songsArr[i].duration;
-                var songObj = {
-                  title: songsArr[i].title,
-                  id: id,
-                  duration: duration,
-                  type: "soundcloud"
-                }
-              }
-            }
-            console.log(id);
-          })
-        });
+        // SC.get('/tracks', { q: $("#song-input").val()}, function(tracks) {
+        //   console.log(tracks);
+        //   for(var i in tracks){
+        //     $("#song-results").append("<p>" + tracks[i].title + "</p>")
+        //     songsArr.push({title: tracks[i].title, id: tracks[i].id, duration: tracks[i].duration / 1000});
+        //   }
+        //   $("#song-results p").click(function(){
+        //     var title = $(this).text();
+        //     for(var i in songsArr){
+        //       if(songsArr[i].title === title){
+        //         var id = songsArr[i].id;
+        //         var duration = songsArr[i].duration;
+        //         var songObj = {
+        //           title: songsArr[i].title,
+        //           id: id,
+        //           duration: duration,
+        //           type: "soundcloud"
+        //         }
+        //       }
+        //     }
+        //     console.log(id);
+        //   })
+        // });
+      },
+      "click #add-songs": function(){
+        $("#add-songs-modal").show();
       }
     });
 

app/templates/room.html

@@ -7,10 +7,30 @@
             <div id="seeker-container">
                 <div id="seeker-bar"></div>
             </div>
+            <button type="button" id="song-modal" class="button" data-toggle="modal" data-target="#myModal">Add songs</button>
             {{> playlist}}
-            <input type="text" id="song-input">
-            <button type="button" id="search-song" class="button">Search</button>
-            <div id="song-results"></div>
+            <!-- Modal -->
+            <div id="myModal" class="modal fade" role="dialog">
+              <div class="modal-dialog">
+
+                <!-- Modal content-->
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="modal-title">Search for a song</h4>
+                  </div>
+                  <div class="modal-body">
+                    <input type="text" id="song-input">
+                    <button type="button" id="search-song" class="button">Search</button>
+                    <div id="song-results"></div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                  </div>
+                </div>
+
+              </div>
+            </div>
             <!--src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1&controls=0&autohide=1">-->
 
             <div width="960" height="540" id="player">