Changed rooms to collections. Added loading screen.

app/app.css

@@ -462,4 +462,16 @@ footer a:hover{
     margin-left: 35px;
     margin-right: 35px;
     overflow: hidden;
+}
+
+#spinner {
+  font-size: 200px;
+  color: bisque;
+}
+
+#spinner-container {
+  margin-left: auto;
+  margin-right: auto;
+  width: 200px;
+  margin-top: 10%;
 }

app/app.js

@@ -1,5 +1,6 @@
 History = new Mongo.Collection("history");
 Playlists = new Mongo.Collection("playlists");
+Rooms = new Mongo.Collection("rooms");
 
 if (Meteor.isClient) {
     Meteor.startup(function() {
@@ -177,6 +178,9 @@ if (Meteor.isClient) {
         },
         artist: function(){
           return Session.get("artist");
+        },
+        loaded: function() {
+            return Session.get("loaded");
         }
     });
 
@@ -325,31 +329,32 @@ if (Meteor.isClient) {
 
         Meteor.subscribe("history");
         Meteor.subscribe("playlists");
+        Meteor.subscribe("rooms", function() {
+            Session.set("loaded", false);
+            if (Rooms.find({type: type}).fetch().length !== 1) {
+                window.location = "/";
+            } else {
+                Session.set("loaded", true);
+                Meteor.setInterval(function() {
+                    var data = undefined;
+                    var dataCursor = History.find({type: type});
+                    dataCursor.map(function(doc) {
+                        if (data === undefined) {
+                            data = doc;
+                        }
+                    });
+                    if (data !== undefined && data.history.length > size) {
+                        currentSong = data.history[data.history.length-1];
+                        size = data.history.length;
+                        startSong();
+                    }
+                }, 1000);
 
-        var room_types = ["edm", "nightcore"];
-        if (room_types.indexOf(type) === -1) {
-            window.location = "/";
-        }
-
-        Meteor.setInterval(function() {
-            var data = undefined;
-            var dataCursor = History.find({type: type});
-            dataCursor.map(function(doc) {
-                if (data === undefined) {
-                    data = doc;
-                }
-            });
-            if (data !== undefined && data.history.length > size) {
-                currentSong = data.history[data.history.length-1];
-                size = data.history.length;
-                startSong();
+                Meteor.setInterval(function() {
+                    resizeSeekerbar();
+                }, 50);
             }
-        }, 1000);
-
-        Meteor.setInterval(function() {
-            resizeSeekerbar();
-        }, 50);
-
+        });
     });
 
     Template.admin.events({
@@ -397,11 +402,11 @@ if (Meteor.isServer) {
         return duration;
     }
 
-    var room_types = ["edm", "nightcore"];
+    //var room_types = ["edm", "nightcore"];
     var songsArr = [];
 
-
-    room_types.forEach(function(type) {
+    Rooms.find({}).fetch().forEach(function(room) {
+        var type = room.type;
         if (Playlists.find({type: type}).fetch().length === 0) {
             if (type === "edm") {
                 Playlists.insert({type: type, songs: [{id: "aE2GCa-_nyU", title: "Radioactive - Lindsey Stirling and Pentatonix", duration: getSongDuration("Radioactive - Lindsey Stirling and Pentatonix"), type: "youtube"}, {id: "aHjpOzsQ9YI", title: "Crystallize", artist: "Linsdey Stirling", duration: getSongDuration("Crystallize"), type: "youtube"}]});
@@ -441,8 +446,6 @@ if (Meteor.isServer) {
         songTimer();
     });
 
-
-
     ServiceConfiguration.configurations.remove({
         service: "facebook"
     });
@@ -471,6 +474,10 @@ if (Meteor.isServer) {
         return Playlists.find({})
     });
 
+    Meteor.publish("rooms", function() {
+        return Rooms.find()
+    });
+
     Meteor.methods({
         createUserMethod: function(formData, captchaData) {
             var verifyCaptchaResponse = reCAPTCHA.verifyCaptcha(this.connection.clientAddress, captchaData);
@@ -489,7 +496,7 @@ if (Meteor.isServer) {
         },
         addPlaylistSong: function(type, songData) {
             type = type.toLowerCase();
-            if (room_types.indexOf(type) !== -1) {
+            if (Rooms.find({type: type}).fetch().length === 1) {
                 if (songData !== undefined && Object.keys(songData).length === 4 && songData.type !== undefined && songData.title !== undefined && songData.title !== undefined && songData.artist !== undefined) {
                     songData.duration = getSongDuration(songData.title);
                     Playlists.update({type: type}, {$push: {songs: {id: songData.id, title: songData.title, artist: songData.artist, duration: songData.duration, type: songData.type}}});

app/head.html

@@ -7,6 +7,7 @@
     <meta name=viewport content='width=700'>
     <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'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
     <script type="application/javascript">
         addEventListener("load", function() {
             setTimeout(hideURLbar, 0);

app/templates/loading.html

@@ -0,0 +1,5 @@
+<template name="loading">
+    <div id="spinner-container">
+        <i class="fa fa-spinner fa-pulse" id="spinner"></i>
+    </div>
+</template>

app/templates/room.html

@@ -1,19 +1,23 @@
 <template name="room">
     <div class="landing">
-        <h1 class="room-name">{{{type}}}</h1>
-        <h2 class="room-title">{{{title}}}</h2>
-        <h2 class="room-artist">{{{artist}}}</h2>
-        <div id="seeker-container">
-            <div id="seeker-bar"></div>
-        </div>
-        {{> playlist}}
-        <input type="text" id="song-input">
-        <button type="button" id="search-song" class="button">Search</button>
-        <div id="song-results"></div>
-        <!--src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1&controls=0&autohide=1">-->
-        
-        <div width="960" height="540" id="player">
-        </div>
+        {{#if loaded}}
+            <h1 class="room-name">{{{type}}}</h1>
+            <h2 class="room-title">{{{title}}}</h2>
+            <h2 class="room-artist">{{{artist}}}</h2>
+            <div id="seeker-container">
+                <div id="seeker-bar"></div>
+            </div>
+            {{> playlist}}
+            <input type="text" id="song-input">
+            <button type="button" id="search-song" class="button">Search</button>
+            <div id="song-results"></div>
+            <!--src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1&controls=0&autohide=1">-->
+
+            <div width="960" height="540" id="player">
+            </div>
+        {{else}}
+            {{> loading}}
+        {{/if}}
         <ul class="bg-bubbles">
             <li></li>
             <li></li>