Merge remote-tracking branch 'origin/february_release' into february_release

Conflicts:
	app/.meteor/packages
	app/client/scripts/events.js

app/.meteor/packages

@@ -18,7 +18,6 @@ ecmascript              # Enable ECMAScript2015+ syntax in app code
 accounts-password
 accounts-github
 service-configuration
-twbs:bootstrap
 jquery
 iron:router
 ejson
@@ -32,3 +31,4 @@ emojione:emojione
 utilities:avatar
 matb33:collection-hooks
 aldeed:collection2
+materialize:materialize

app/.meteor/versions

@@ -59,6 +59,7 @@ livedata@1.0.15
 localstorage@1.0.5
 logging@1.0.8
 matb33:collection-hooks@0.8.1
+materialize:materialize@0.97.5
 meteor@1.1.10
 meteor-base@1.0.1
 meteorhacks:async@1.0.0
@@ -95,7 +96,6 @@ standard-minifiers@1.0.2
 templating@1.1.5
 templating-tools@1.0.0
 tracker@1.0.9
-twbs:bootstrap@3.3.5
 ui@1.0.8
 underscore@1.0.4
 url@1.0.5

app/client/app.css

@@ -1,259 +1,18 @@
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
 
-/*!
- * Slider for Bootstrap
- *
- * Copyright 2012 Stefan Petre
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- */
-.slider {
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-}
-
-.slider.slider-horizontal {
-    width: 210px;
-    height: 20px;
-}
-
-.slider.slider-horizontal .slider-track {
-    height: 10px;
-    width: 100%;
-    margin-top: -5px;
-    top: 50%;
-    left: 0;
-}
-
-.slider.slider-horizontal .slider-selection {
-    height: 100%;
-    top: 0;
-    bottom: 0;
-}
-
-.slider.slider-horizontal .slider-handle {
-    margin-left: -10px;
-    margin-top: -5px;
-}
-
-.slider.slider-horizontal .slider-handle.triangle {
-    border-width: 0 10px 10px 10px;
-    width: 0;
-    height: 0;
-    border-bottom-color: #0480be;
-    margin-top: 0;
-}
-
-.slider.slider-vertical {
-    height: 210px;
-    width: 20px;
-}
-
-.slider.slider-vertical .slider-track {
-    width: 10px;
-    height: 100%;
-    margin-left: -5px;
-    left: 50%;
-    top: 0;
-}
-
-.slider.slider-vertical .slider-selection {
-    width: 100%;
-    left: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.slider.slider-vertical .slider-handle {
-    margin-left: -5px;
-    margin-top: -10px;
-}
-
-.slider.slider-vertical .slider-handle.triangle {
-    border-width: 10px 0 10px 10px;
-    width: 1px;
-    height: 1px;
-    border-left-color: #0480be;
-    margin-left: 0;
-}
-
-.slider input {
-    display: none;
-}
-
-.slider .tooltip-inner {
-    white-space: nowrap;
-}
-
-.slider-track {
-    position: absolute;
-    cursor: pointer;
-    background-color: #f7f7f7;
-    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
-    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
-    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
-    background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-}
-
-.slider-selection {
-    position: absolute;
-    background-color: #f7f7f7;
-    background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
-    background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
-    background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
-    background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-}
-
-.slider-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    background-color: #0e90d2;
-    background-image: -moz-linear-gradient(top, #149bdf, #0480be);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
-    background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
-    background-image: -o-linear-gradient(top, #149bdf, #0480be);
-    background-image: linear-gradient(to bottom, #149bdf, #0480be);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-    opacity: 0.8;
-    border: 0px solid transparent;
-}
-
-.slider-handle.round {
-    -webkit-border-radius: 20px;
-    -moz-border-radius: 20px;
-    border-radius: 20px;
-}
-
-.slider-handle.triangle {
-    background: transparent none;
-}
-
-/*
-* End of slider css
-*/
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-weight: 300;
-}
-
-html, body {
-    height: 100%;
-    background: #50a3a2;
-    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-}
-
 body {
-    font-family: 'Source Sans Pro', sans-serif;
-    font-weight: 300;
-}
-
-body ::-webkit-input-placeholder {
-    /* WebKit browsers */
-    font-family: 'Source Sans Pro', sans-serif;
-    font-weight: 300;
-}
-
-body :-moz-placeholder {
-    /* Mozilla Firefox 4 to 18 */
-    font-family: 'Source Sans Pro', sans-serif;
-    opacity: 1;
-    font-weight: 300;
-}
-
-body ::-moz-placeholder {
-    /* Mozilla Firefox 19+ */
-    font-family: 'Source Sans Pro', sans-serif;
-    opacity: 1;
-    font-weight: 300;
-}
-
-body :-ms-input-placeholder {
-    /* Internet Explorer 10+ */
-    font-family: 'Source Sans Pro', sans-serif;
-    font-weight: 300;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  background-color: rgb(245, 245, 245);
 }
 
-ul {
-    list-style: none;
+main {
+  flex: 1 0 auto;
 }
 
-.navbar {
-    background-color: transparent;
-    border: none;
-}
-
-.navbar a {
-    color: white !important;
-    font-size: 1.3em;
-}
-
-.navbar-default .navbar-nav > .active > a,
-.navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > .active > a:focus {
-    background-color: transparent;
-    font-weight: 900;
-}
-
-.homepage {
-    background: #50a3a2;
-    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-    /*top: 20%;*/
-    width: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    /*padding-bottom: 60px;*/
-
-    min-height: 100%;
-    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
-    height: 100%;
-    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
-}
-
-.landing {
-    background: #50a3a2;
-    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-    position: absolute;
-    /*top: 20%;*/
-    left: 0;
-    width: 100%;
-    height: 100%; /*400px*/
-    /*margin-top: -200px;*/
-    overflow-x: hidden;
-    overflow-y: auto;
+.brand-logo {
+  margin-left: 10px;
 }
 
 .admin-container {
@@ -302,66 +61,6 @@ ul {
   font-size: 18px;
 }
 
-.container {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 80px 0;
-    height: 400px;
-    text-align: center;
-}
-
-.container h1 {
-    font-size: 40px;
-    color: white;
-    -webkit-transition-duration: 1s;
-    transition-duration: 1s;
-    font-weight: 200;
-}
-
-.container p {
-    font-size: 10px;
-    color: white;
-    -webkit-transition-duration: 1s;
-    transition-duration: 1s;
-    font-weight: 200;
-}
-
-form {
-    padding: 20px 0;
-    position: relative;
-    z-index: 2;
-}
-
-form input, .croom, .calert {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    outline: 0;
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    background-color: rgba(255, 255, 255, 0.2);
-    width: 304px;
-    border-radius: 3px;
-    padding: 10px 15px;
-    margin: 0 auto 10px auto;
-    display: block;
-    text-align: center;
-    font-size: 18px;
-    color: white;
-    -webkit-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-    font-weight: 300;
-}
-
-form input:hover {
-    background-color: rgba(255, 255, 255, 0.4);
-}
-
-form input:focus {
-    /*opacity: 0.4;*/
-    width: 354px;
-    color: white;
-}
-
 .g-recaptcha {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -378,256 +77,6 @@ form input:focus {
     font-weight: 300;
 }
 
-form button {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    outline: 0;
-    background-color: white;
-    border: 0;
-    padding: 10px 15px;
-    color: #53e3a6;
-    border-radius: 3px;
-    width: 304px;
-    cursor: pointer;
-    font-size: 18px;
-    -webkit-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-}
-
-::-webkit-input-placeholder {
-    color: white;
-}
-
-::-moz-placeholder {
-    /* Firefox 19+ */
-    color: white;
-}
-
-:-ms-input-placeholder {
-    color: white;
-}
-
-form button:hover {
-    background-color: #f5f7f9;
-}
-
-.bg-bubbles {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-    margin: 0px;
-    pointer-events: none;
-    overflow: hidden;
-}
-
-.bg-bubbles li {
-    position: absolute;
-    list-style: none;
-    display: block;
-    width: 40px;
-    height: 40px;
-    border-radius: 100px;
-    /*background-color: rgba(255, 255, 255, 0.15);*/
-    bottom: 0px;
-    -webkit-animation: square 25s infinite;
-    animation: square 25s infinite;
-    -webkit-transition-timing-function: linear;
-    transition-timing-function: linear;
-    opacity: 0.5;
-}
-
-.bg-bubbles li:nth-child(1) {
-    left: 10%;
-}
-
-.bg-bubbles li:nth-child(2) {
-    left: 20%;
-    width: 80px;
-    height: 80px;
-    -webkit-animation-delay: 2s;
-    animation-delay: 2s;
-    -webkit-animation-duration: 17s;
-    animation-duration: 17s;
-}
-
-.bg-bubbles li:nth-child(3) {
-    left: 25%;
-    -webkit-animation-delay: 4s;
-    animation-delay: 4s;
-}
-
-.bg-bubbles li:nth-child(4) {
-    left: 40%;
-    width: 60px;
-    height: 60px;
-    -webkit-animation-duration: 22s;
-    animation-duration: 22s;
-    /*background-color: rgba(255, 255, 255, 0.25);*/
-}
-
-.bg-bubbles li:nth-child(5) {
-    left: 70%;
-}
-
-.bg-bubbles li:nth-child(6) {
-    left: 80%;
-    width: 120px;
-    height: 120px;
-    -webkit-animation-delay: 3s;
-    animation-delay: 3s;
-    /*background-color: rgba(255, 255, 255, 0.2);*/
-}
-
-.bg-bubbles li:nth-child(7) {
-    left: 32%;
-    width: 160px;
-    height: 160px;
-    -webkit-animation-delay: 7s;
-    animation-delay: 7s;
-}
-
-.bg-bubbles li:nth-child(8) {
-    left: 55%;
-    width: 20px;
-    height: 20px;
-    -webkit-animation-delay: 15s;
-    animation-delay: 15s;
-    -webkit-animation-duration: 40s;
-    animation-duration: 40s;
-}
-
-.bg-bubbles li:nth-child(9) {
-    left: 25%;
-    width: 10px;
-    height: 10px;
-    -webkit-animation-delay: 2s;
-    animation-delay: 2s;
-    -webkit-animation-duration: 40s;
-    animation-duration: 40s;
-    /*background-color: rgba(255, 255, 255, 0.3);*/
-}
-
-.bg-bubbles li:nth-child(10) {
-    left: 80%;
-    width: 160px;
-    height: 160px;
-    -webkit-animation-delay: 11s;
-    animation-delay: 11s;
-}
-
-.bg-bubbles img {
-    width: 100%;
-    height: 100%;
-}
-
-/* Tablet view fix */
-@media (max-width: 768px){
-    body{
-        height: auto !important;
-    }
-    .bg-bubbles li:nth-child(10) {
-        display: none;
-    }
-    #song-media{
-        margin-left: 0 !important;
-    }
-    #song-info{
-        margin: 15px auto;
-        width: 200px;
-    }
-    #settings{
-        margin: 0 auto !important;
-        margin-bottom: 10px !important;
-    }
-    #voting{
-        margin: 0 auto !important;
-        width: 300px !important;
-        margin-bottom: 100px !important;
-    }
-    #side-panel{
-        display: none;
-    }
-}
-/**/
-
-@-webkit-keyframes square {
-    0% {
-        -webkit-transform: translateY(-700px) rotate(600deg);
-        transform: translateY(-700px) rotate(600deg);
-    }
-    100% {
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-    }
-}
-
-@keyframes square {
-    0% {
-        -webkit-transform: translateY(-700px) rotate(600deg);
-        transform: translateY(-700px) rotate(600deg);
-    }
-    100% {
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-    }
-}
-
-.fa-github {
-    margin-top: 3px;
-}
-
-#github-login {
-    background-color: #999;
-    margin-bottom: 100px;
-}
-
-.btn-social {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    outline: 0;
-    border: 0;
-    padding: 10px 15px;
-    border-radius: 3px;
-    width: 304px;
-    cursor: pointer;
-    font-size: 18px;
-    color: #fff;
-}
-
-footer {
-    text-align: center;
-    width: 100%;
-    height: 75px;
-    margin-top: 75px;
-    color: white;
-    padding-top: 5px;
-}
-
-.push {
-    height: 75px; /* .push must be the same height as .footer */
-}
-
-footer a {
-    color: white;
-}
-
-footer a:hover {
-    color: white;
-}
-
-footer p {
-    margin: 0 !important;
-}
-
-footer .fa {
-    font-size: 2em;
-}
-
 .button-nowidth {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -1311,9 +760,7 @@ nav form input[type="image"]{
 .rank-default {
     font-size: 0px;
 }
-.row {
-    margin: 0;
-}
+
 .sidebar-content {
     height: calc(100% - 42px);
 }
@@ -1569,11 +1016,6 @@ input[type="checkbox"]:checked + #two-label:after {
     display: block;
 }
 
-.user-num{
-    font-size: 2em !important;
-    line-height: 100px;
-}
-
 .remove-import-song {
     position: absolute;
     right: 0px;
@@ -1604,3 +1046,25 @@ input[type="checkbox"]:checked + #two-label:after {
     margin-right: auto;
     display: block;
 }
+
+.card-content i{
+    line-height: inherit;
+    float: left;
+}
+
+.card-image img{
+    opacity: 1;
+    transition: 0.3s;
+}
+
+.card-image img:hover{
+    opacity: 0.5;
+}
+
+.user-num{
+    font-size: 1.5em;
+}
+
+.scroll-fix{
+    margin-right: 20px;
+}

app/client/cardcaption.css

@@ -0,0 +1,38 @@
+/*Credids to http://www.1stwebdesigner.com/image-caption-animation-css3/*/
+.card-image:hover figcaption {
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+    filter: alpha(opacity=100);
+    opacity: 1;
+    top: 0;
+}
+
+figcaption {
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    filter: alpha(opacity=0);
+    opacity: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: rgba(0,0,0,.6);
+    color: #fff;
+    -webkit-transition: all .5s ease;
+    -moz-transition: all .5s ease;
+    -o-transition: all .5s ease;
+    -ms-transition: all .5s ease;
+    transition: all .5s ease;
+}
+
+figcaption h5{
+    text-align: center;
+    margin-top: 10px;
+    font-weight: 300;
+    padding: 5px;
+}
+
+/*End of stuff*/
+
+figcaption a{
+    width: 100%;
+    position: absolute !important;
+    bottom: 0;
+}

app/client/head.html

@@ -6,9 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name=viewport content='width=700'>
-	<meta name="keywords" content="music, musare, lisen, app, meteor, edm, rooms, party, good, mus, are, pop">
+	  <meta name="keywords" content="music, musare, lisen, app, meteor, edm, rooms, party, good, mus, are, pop">
     <meta name="description" content="Musare is a website where you can enjoy genre specific playlists with lots of songs! The same song plays for everyone at the same time in the same station, so you can also listen to it with friends!">
-	<meta name="copyright" content="Copyright © 2015 All Right Reserved">
+	  <meta name="copyright" content="Copyright © 2015 All Right Reserved">
     <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
@@ -26,9 +26,9 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
-    <script src="/bootstrap-slider.min.js"></script>
     <script src="/jquery.textcomplete.min.js"></script>
     <script src="/emojidropdown.js"></script>
     <script src="https://connect.soundcloud.com/sdk-2.0.0.js"></script>
@@ -42,7 +42,7 @@
         }
 
         // Doorbell Initialising
-        window.doorbellOptions = {
+        /*window.doorbellOptions = {
             strings: {
                 'email-input-placeholder': 'Your email address (optional)'
             },
@@ -50,7 +50,7 @@
         };
         (function(d, t) {
             var g = d.createElement(t);g.id = 'doorbellScript';g.type = 'text/javascript';g.async = true;g.src = 'https://embed.doorbell.io/button/2408?t='+(new Date().getTime());(d.getElementsByTagName('head')[0]||d.getElementsByTagName('body')[0]).appendChild(g);
-        }(document, 'script'));
+        }(document, 'script'));*/
 
         // YouTube Iniialising
         Session.set("YTLoaded", false);

app/client/scripts/helpers.js

@@ -0,0 +1,369 @@
+Template.admin.helpers({
+    queueCount: function(display) {
+        var d = display.toLowerCase();
+        return queues && "songs" in queues ? queues.songs.length : 0;
+        var queues = Queues.findOne({type: d});
+    },
+    queues: function() {
+        var queues = Queues.find({}).fetch();
+        return queues;
+    },
+    usersOnline: function(){
+        Meteor.call("getUserNum", function(err, num){
+            if(err){
+                console.log(err);
+            }
+            Session.set("userNum", num);
+        });
+        return Session.get("userNum");
+    },
+    roomUserNum: function(){
+        var type = this.type;
+        var userNum = Rooms.findOne({type: type}).users;
+        return userNum;
+    },
+    allUsers: function(){
+        Meteor.call("getTotalUsers", function(err, num){
+            Session.set("allUsers", num);
+        })
+        return Session.get("allUsers");
+    },
+    playlists: function() {
+        var playlists = Playlists.find({}).fetch();
+        playlists.map(function(playlist) {
+            if (Rooms.find({type: playlist.type}).count() !== 1) {
+                return;
+            } else {
+                playlist.display = Rooms.findOne({type: playlist.type}).display;
+                return playlist;
+            }
+        });
+        return playlists;
+    },
+    reportsCount: function(room) {
+        room = room.toLowerCase();
+        var reports = Reports.findOne({room:room});
+        return reports && "report" in reports ? reports.report.length : 0;
+    }
+});
+
+Template.alerts.helpers({
+    alerts: function() {
+        return Alerts.find({active: true});
+    }
+});
+
+Template.alertsDashboard.helpers({
+    "activeAlerts": function() {
+        return Alerts.find({active: true});
+    },
+    "inactiveAlerts": function() {
+        return Alerts.find({active: false});
+    }
+});
+
+Template.banned.helpers({
+    bannedAt: function() {
+        if (Session.get("ban") !== undefined) {
+            return Session.get("ban").bannedAt;
+        }
+    },
+    bannedBy: function() {
+        if (Session.get("ban") !== undefined) {
+            return Session.get("ban").bannedBy;
+        }
+    },
+    bannedUntil: function() {
+        if (Session.get("ban") !== undefined) {
+            return Session.get("ban").bannedUntil;
+        }
+    },
+    bannedReason: function() {
+        if (Session.get("ban") !== undefined) {
+            return Session.get("ban").bannedReason;
+        }
+    }
+});
+
+Template.header.helpers({
+    userId: function() {
+        return Meteor.userId();
+    }
+});
+
+Template.home.helpers({
+    currentSong: function(){
+        var type = this.type;
+        var room = Rooms.findOne({type: type});
+        if(room !== undefined){
+            return room.currentSong;
+        } else {
+            return false;
+        }
+    },
+    userNum: function(){
+        var type = this.type;
+        var userNum = Rooms.findOne({type: type}).users;
+        return userNum;
+    }
+})
+
+Template.playlist.helpers({
+    playlist_songs: function() {
+        parts = location.href.split('/');
+        id = parts.pop();
+        type = id.toLowerCase();
+        var data = Playlists.findOne({type: type});
+        if (data !== undefined) {
+            data.songs.map(function(song) {
+                if (Session.get("currentSong") !== undefined && song.mid === Session.get("currentSong").mid) {
+                    song.current = true;
+                } else {
+                    song.current = false;
+                }
+                return song;
+            });
+            return data.songs;
+        } else {
+            return [];
+        }
+    }
+});
+
+Template.profile.helpers({
+    "real_name": function(){
+        return Session.get("real_name");
+    },
+    "username": function() {
+        return Session.get("username")
+    },
+    "first_joined": function() {
+        return moment(Session.get("first_joined")).format("DD/MM/YYYY HH:mm:ss");
+    },
+    "rank": function() {
+        return Session.get("rank");
+    },
+    loaded: function() {
+        return Session.get("loaded");
+    },
+    likedSongs: function(){
+        var likedArr = [];
+        Session.get("liked").forEach(function(mid){
+            Rooms.find().forEach(function(room){
+                Playlists.find({type: room.type}).forEach(function(pl){
+                    for(var i in pl.songs){
+                        if(pl.songs[i].mid === mid){
+                            likedArr.push({title: pl.songs[i].title, artist: pl.songs[i].artist, room: room.display});
+                        }
+                    }
+                });
+            })
+        });
+        return likedArr;
+    },
+    dislikedSongs: function(){
+        var dislikedArr = [];
+        Session.get("disliked").forEach(function(mid){
+            Rooms.find().forEach(function(room){
+                Playlists.find({type: room.type}).forEach(function(pl){
+                    for(var i in pl.songs){
+                        if(pl.songs[i].mid === mid){
+                            dislikedArr.push({title: pl.songs[i].title, artist: pl.songs[i].artist, room: room.display});
+                        }
+                    }
+                });
+            })
+        });
+        return dislikedArr;
+    },
+    isUser: function(){
+        var parts = Router.current().url.split('/');
+        var username = parts.pop();
+        if(username === Meteor.user().profile.username){
+            return true;
+        }
+    }
+});
+
+Template.queues.helpers({
+    queues: function() {
+        var queues = Queues.find({}).fetch();
+        queues.map(function(queue) {
+            if (Rooms.find({type: queue.type}).count() !== 1) {
+                return;
+            } else {
+                queue.display = Rooms.findOne({type: queue.type}).display;
+                return queue;
+            }
+        });
+        return queues;
+    }
+});
+
+Template.room.helpers({
+    singleVideo: function() {
+        return true;
+    },
+    chat: function() {
+        Meteor.setTimeout(function() {
+            var elem = document.getElementById('chat');
+            if (elem !== undefined && elem !== null) {
+                elem.scrollTop = elem.scrollHeight;
+            }
+        }, 100);
+        return Chat.find({type: Session.get("type")}, {sort: {time: -1}, limit: 50 }).fetch().reverse();
+    },
+    globalChat: function() {
+        Meteor.setTimeout(function() {
+            var elem = document.getElementById('global-chat');
+            if (elem !== undefined && elem !== null) {
+                elem.scrollTop = elem.scrollHeight;
+            }
+        }, 100);
+        return Chat.find({type: "global"}, {sort: {time: -1}, limit: 50 }).fetch().reverse();
+    },
+    likes: function() {
+        var playlist = Playlists.findOne({type: Session.get("type")});
+        var likes = 0;
+        playlist.songs.forEach(function(song) {
+            if (Session.get("currentSong") && song.mid === Session.get("currentSong").mid) {
+                likes = song.likes;
+                return;
+            }
+        });
+        return likes;
+    },
+    dislikes: function() {
+        var playlist = Playlists.findOne({type: Session.get("type")});
+        var dislikes = 0;
+        playlist.songs.forEach(function(song) {
+            if (Session.get("currentSong") && song.mid === Session.get("currentSong").mid) {
+                dislikes = song.dislikes;
+                return;
+            }
+        });
+        return dislikes;
+    },
+    liked: function() {
+        if (Meteor.userId()) {
+            var currentSong = Session.get("currentSong");
+            if (currentSong && Meteor.user().profile.liked.indexOf(currentSong.mid) !== -1) {
+                return "active";
+            } else {
+                return "";
+            }
+        } else {
+            "";
+        }
+    },
+    disliked: function() {
+        if (Meteor.userId()) {
+            var currentSong = Session.get("currentSong");
+            if (currentSong && Meteor.user().profile.disliked.indexOf(currentSong.mid) !== -1) {
+                return "active";
+            } else {
+                return "";
+            }
+        } else {
+            "";
+        }
+    },
+    type: function() {
+        var parts = location.href.split('/');
+        var id = parts.pop().toLowerCase();
+        return Rooms.findOne({type: id}).display;
+    },
+    users: function() {
+        var parts = location.href.split('/');
+        var id = parts.pop().toLowerCase();
+        return Rooms.findOne({type: id}).users;
+    },
+    title: function(){
+        return Session.get("title");
+    },
+    artist: function(){
+        return Session.get("artist");
+    },
+    loaded: function() {
+        return Session.get("loaded");
+    },
+    paused: function() {
+        return Session.get("state") === "paused";
+    },
+    private: function() {
+        return Rooms.findOne({type: Session.get("type")}).private === true;
+    },
+    report: function() {
+        return Session.get("reportObj");
+    },
+    reportSong: function() {
+        return Session.get("reportSong");
+    },
+    reportTitle: function() {
+        return Session.get("reportTitle");
+    },
+    reportAuthor: function() {
+        return Session.get("reportAuthor");
+    },
+    reportDuration: function() {
+        return Session.get("reportDuration");
+    },
+    reportAudio: function() {
+        return Session.get("reportAudio");
+    },
+    reportAlbumart: function() {
+        return Session.get("reportAlbumart");
+    },
+    reportOther: function() {
+        return Session.get("reportOther");
+    },
+    currentSong: function() {
+        return Session.get("currentSong");
+    },
+    previousSong: function() {
+        return Session.get("previousSong");
+    },
+    currentSongR: function() {
+        return Session.get("currentSongR");
+    },
+    previousSongR: function() {
+        return Session.get("previousSongR");
+    },
+    reportingSong: function() {
+        if (Session.get("reportPrevious")) {
+            return Session.get("previousSongR");
+        } else {
+            return Session.get("currentSongR");
+        }
+    },
+    votes: function(){
+        return Rooms.findOne({type: Session.get("type")}).votes;
+    }
+});
+
+Template.settings.helpers({
+    username: function() {
+        if (Meteor.user() !== undefined) {
+            return Meteor.user().profile.username;
+        } else {
+            return "";
+        }
+    }
+});
+
+Template.stations.helpers({
+    playlist: function() {
+        var query = {type: Session.get("playlistToEdit").toLowerCase()};
+        var playlists = Playlists.find(query).fetch();
+        return playlists;
+    },
+    whichStation: function(){
+        return Session.get("playlistToEdit");
+    },
+    reports: function() {
+        var query = {room: Session.get("playlistToEdit").toLowerCase()};
+        var reports = Reports.find(query).fetch();
+        console.log(reports);
+        return reports;
+    }
+});

app/client/scripts/main.js

@@ -0,0 +1,119 @@
+Meteor.startup(function() {
+    reCAPTCHA.config({
+        publickey: '6LcVxg0TAAAAAE18vBiH00UAyaJggsmLm890SjZl'
+    });
+
+    Avatar.setOptions({
+        fallbackType: "initials",
+        defaultImageUrl: "http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg",
+        generateCSS: true,
+        imageSizes: {
+            'header': 40
+        }
+    });
+});
+
+Deps.autorun(function() {
+    Meteor.subscribe("queues");
+    Meteor.subscribe("reports");
+    Meteor.subscribe("chat");
+    Meteor.subscribe("playlists");
+    Meteor.subscribe("alerts");
+    Meteor.subscribe("rooms");
+    Meteor.subscribe("userData", Meteor.userId());
+});
+
+Handlebars.registerHelper("isAdmin", function(argument){
+    if (Meteor.user() && Meteor.user().profile) {
+        return Meteor.user().profile.rank === "admin";
+    } else {
+        return false;
+    }
+});
+
+Handlebars.registerHelper("isModerator", function(argument){
+    if (Meteor.user() && Meteor.user().profile && (Meteor.user().profile.rank === "admin" || Meteor.user().profile.rank === "moderator")) {
+        return true;
+    } else {
+        return false;
+    }
+});
+
+Handlebars.registerHelper("initials", function(argument){
+    var user = Meteor.user();
+    if (user !== undefined) {
+        return user.profile.username[0].toUpperCase();
+    } else {
+        return "";
+    }
+});
+
+/* Global collection helpers */
+Handlebars.registerHelper("rooms", function(){
+    return Rooms.find({});
+});
+
+Handlebars.registerHelper('active', function(path) {
+    return curPath() == path ? 'active' : '';
+});
+
+UI.registerHelper("formatTime", function(seconds) {
+    var d = moment.duration(parseInt(seconds), 'seconds');
+    return d.minutes() + ":" + ("0" + d.seconds()).slice(-2);
+});
+
+Template.registerHelper("rtime", function(date) {
+    Session.get("time");
+    if (date) {
+        return moment(date).fromNow();
+    }
+});
+
+var allAlertSub = undefined;
+var YTPlayer = undefined;
+var SCPlayer = undefined;
+var previewEndSongTimeout = undefined;
+var hpSound = undefined;
+var songsArr = [];
+var parts = location.href.split('/');
+var id = parts.pop();
+var type = id.toLowerCase();
+
+curPath=function(){var c=window.location.pathname;var b=c.slice(0,-1);var a=c.slice(-1);if(b==""){return"/"}else{if(a=="/"){return b}else{return c}}};
+
+function gup( name, url ) {
+    if (!url) url = location.href;
+    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+    var regexS = "[\\?&]"+name+"=([^&#]*)";
+    var regex = new RegExp( regexS );
+    var results = regex.exec( url );
+    return results == null ? null : results[1];
+}
+
+var ban_interval = Meteor.setInterval(function() {
+    var userId = Meteor.userId();
+    if (userId !== undefined) {
+        var userData = Meteor.user();
+        if (localStorage.getItem("banned") === "true") {
+            if (userData !== undefined && userData !== null && userData.punishments !== undefined && userData.punishments.ban !== undefined) {
+                var ban = userData.punishments.ban;
+                if (new Date(ban.bannedUntil).getTime() <= new Date().getTime()) {
+                    Meteor.call("isBanned", function(err, res) {
+                        if (res === false) {
+                            localStorage.setItem("banned", false);
+                            Meteor._reload.reload();
+                        }
+                    });
+                }
+            } else {
+                localStorage.setItem("banned", false);
+                Meteor._reload.reload();
+            }
+        } else {
+            if (userData !== undefined && userData !== null && userData.punishments !== undefined && userData.punishments.ban !== undefined) {
+                localStorage.setItem("banned", true);
+                Meteor._reload.reload();
+            }
+        }
+    }
+}, 1000);

app/client/scripts/onCreated.js

@@ -0,0 +1,347 @@
+var SCPlayer = undefined;
+var minterval;
+var StationSubscription = undefined;
+var resizeSeekerbarInterval;
+
+Template.alertsDashboard.onCreated(function() {
+    if (allAlertSub === undefined) {
+        allAlertSub = Meteor.subscribe("allAlerts");
+    }
+});
+
+Template.banned.onCreated(function() {
+    if (rTimeInterval !== undefined) {
+        Meteor.clearInterval(rTimeInterval)
+    }
+    rTimeInterval = Meteor.setInterval(function() {
+        Session.set("time", new Date().getTime());
+    }, 10000);
+    Session.set("ban", Meteor.user().punishments.ban);
+});
+
+Template.dashboard.onCreated(function() {
+    if (SCPlayer !== undefined) SCPlayer.stop();
+    if (minterval !== undefined) {
+        Meteor.clearInterval(minterval);
+    }
+    if (resizeSeekerbarInterval !== undefined) {
+        Meteor.clearInterval(resizeSeekerbarInterval);
+        resizeSeekerbarInterval = undefined;
+    }
+    if (StationSubscription !== undefined) {
+        StationSubscription.stop();
+    }
+    Session.set("type", undefined);
+});
+
+Template.login.onCreated(function() {
+    Session.set("github", true);
+    Accounts.onLoginFailure(function() {
+        if (Session.get("github") === true) {
+            var errAlert = $('<div style="margin-bottom: 0" class="alert alert-danger" role="alert"><strong>Oh Snap!</strong> Something went wrong when trying to log in with GitHub.</div>');
+            $(".landing").before(errAlert);
+            Meteor.setTimeout(function() {
+                errAlert.fadeOut(5000, function() {
+                    errAlert.remove();
+                });
+            }, 10000);
+        }
+    });
+});
+
+Template.profile.onCreated(function() {
+    var parts = Router.current().url.split('/');
+    var username = parts.pop();
+    Session.set("loaded", false);
+    Meteor.subscribe("userProfiles", username.toLowerCase(), function() {
+        if (Meteor.users.find({"profile.usernameL": username.toLowerCase()}).count() === 0) {
+            window.location = "/";
+        } else {
+            var data = Meteor.users.findOne({"profile.usernameL": username.toLowerCase()});
+            Session.set("real_name", data.profile.realname);
+            Session.set("username", data.profile.username);
+            Session.set("first_joined", data.createdAt);
+            Session.set("rank", data.profile.rank);
+            Session.set("liked", data.profile.liked);
+            Session.set("disliked", data.profile.disliked);
+            Session.set("loaded", true);
+        }
+    });
+});
+
+Template.queues.onCreated(function() {
+    var tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    YTPlayer = undefined;
+    SCPlayer = undefined;
+});
+
+Template.register.onCreated(function() {
+    Accounts.onLoginFailure(function() {
+        var errAlert = $('<div style="margin-bottom: 0" class="alert alert-danger" role="alert"><strong>Oh Snap!</strong> Something went wrong when trying to register with GitHub. Maybe an account with that username already exists?</div>');
+        $(".landing").before(errAlert);
+        Meteor.setTimeout(function() {
+            errAlert.fadeOut(5000, function() {
+                errAlert.remove();
+            });
+        }, 10000);
+    });
+});
+
+Template.room.onCreated(function () {
+    Chat.after.find(function(userId, selector) {
+        if (selector.type === "global") {
+            if (!$("#global-chat-tab").hasClass("active")) {
+                $("#global-chat-tab").addClass("unread-messages");
+            }
+        } else if(selector.type === Session.get("type")) {
+            if (!$("#chat-tab").hasClass("active")) {
+                $("#chat-tab").addClass("unread-messages");
+            }
+        }
+    });
+    Session.set("reportSong", false);
+    Session.set("reportTitle", false);
+    Session.set("reportAuthor", false);
+    Session.set("reportDuration", false);
+    Session.set("reportAudio", false);
+    Session.set("reportAlbumart", false);
+    Session.set("reportOther", false);
+    if (resizeSeekerbarInterval !== undefined) {
+        Meteor.clearInterval(resizeSeekerbarInterval);
+        resizeSeekerbarInterval = undefined;
+    }
+    YTPlayer = undefined;
+    SCPlayer = undefined;
+    Session.set("videoHidden", false);
+    var tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    Session.set("singleVideo", true);
+
+    var currentSong = undefined;
+    var currentSongR = undefined;
+
+    function getTimeElapsed() {
+        if (currentSong !== undefined) {
+            var room = Rooms.findOne({type: type});
+            if (room !== undefined) {
+                return Date.now() - currentSong.started - room.timePaused;
+            }
+        }
+        return 0;
+    }
+
+    function getSongInfo(songData){
+        Session.set("title", songData.title);
+        Session.set("artist", songData.artist);
+        Session.set("id", songData.id);
+        $("#song-img").attr("src", songData.img);
+        Session.set("duration", parseInt(songData.duration));
+        var d = moment.duration(parseInt(songData.duration), 'seconds');
+        $("#time-total").text(d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
+        Session.set("timeFormat", d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
+    }
+
+    function resizeSeekerbar() {
+        if (Session.get("state") === "playing") {
+            $("#seeker-bar").width(((getTimeElapsed() / 1000) / Session.get("duration") * 100) + "%");
+        }
+    }
+
+    function startSong() {
+        $("#time-elapsed").text("0:00");
+        $("#vote-skip").attr("disabled", false);
+        if (currentSong !== undefined) {
+            if (SCPlayer !== undefined) SCPlayer.stop();
+            if (YTPlayer !== undefined && YTPlayer.stopVideo !== undefined) YTPlayer.stopVideo();
+
+            var volume = localStorage.getItem("volume") || 20;
+
+            if (currentSong.type === "SoundCloud") {
+                if ($("#soundcloud-image").length !== 1) {
+                    //$("#media-container").append('<img alt="Not loading" src="/soundcloud-image.png" class="embed-responsive-item" id="soundcloud-image" />');
+                    $("#media-container").append('<h1 id="soundcloud-image">We have temporarily disabled the playing of SoundCloud songs. We are sorry for this inconvenience.</h1>');
+                }
+                if ($("#player").length === 1) {
+                    $("#player").hide();
+                }
+                $("#soundcloud-image").show();
+                //getSongInfo(currentSong);
+                /*SC.stream("/tracks/" + currentSong.id, function(sound){
+                 SCPlayer = sound;
+                 sound.setVolume(volume / 100);
+                 sound.play();
+                 var interval = setInterval(function() {
+                 if (sound.getState() === "playing") {
+                 sound.seek(getTimeElapsed());
+                 window.clearInterval(interval);
+                 }
+                 }, 200);
+                 Session.set("duration", parseInt(currentSong.duration));
+                 var d = moment.duration(parseInt(currentSong.duration), 'seconds');
+                 $("#time-total").text(d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
+                 resizeSeekerbar();
+                 });*/
+            } else {
+                if ($("#player").length !== 1) {
+                    $("#media-container").append('<div id="player" class="embed-responsive-item"></div>');
+                }
+                if ($("#soundcloud-image").length === 1) {
+                    $("#soundcloud-image").hide();
+                }
+                $("#player").show();
+                function loadVideo() {
+                    if (!Session.get("YTLoaded")) {
+                        Session.set("loadVideoTimeout", Meteor.setTimeout(function () {
+                            loadVideo();
+                        }, 500));
+                    } else {
+                        if (YTPlayer === undefined) {
+                            YTPlayer = new YT.Player("player", {
+                                height: 540,
+                                width: 960,
+                                videoId: currentSong.id,
+                                playerVars: {controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0},
+                                events: {
+                                    'onReady': function (event) {
+                                        if (currentSong.skipDuration === undefined) {
+                                            currentSong.skipDuration = 0;
+                                        }
+                                        event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
+                                        event.target.playVideo();
+                                        event.target.setVolume(volume);
+                                        resizeSeekerbar();
+                                    },
+                                    'onStateChange': function (event) {
+                                        if (Session.get("YTLoaded")) {
+                                            if (event.data == YT.PlayerState.PAUSED && Session.get("state") === "playing") {
+                                                event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
+                                                event.target.playVideo();
+                                            }
+                                            if (event.data == YT.PlayerState.PLAYING && Session.get("state") === "paused") {
+                                                event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
+                                                event.target.pauseVideo();
+                                            }
+                                        }
+                                    }
+                                }
+                            });
+                        } else {
+                            YTPlayer.loadVideoById(currentSong.id);
+                            if (currentSong.skipDuration === undefined) {
+                                currentSong.skipDuration = 0;
+                            }
+                            YTPlayer.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
+                        }
+                        Session.set("pauseVideo", false);
+                        getSongInfo(currentSong);
+                    }
+                }
+                loadVideo();
+            }
+        }
+    }
+
+    Session.set("loaded", false);
+    Meteor.subscribe("rooms", function() {
+        var parts = location.href.split('/');
+        var id = parts.pop();
+        var type = id.toLowerCase();
+        Session.set("type", type);
+        if (Rooms.find({type: type}).count() !== 1) {
+            window.location = "/";
+        } else {
+            StationSubscription = Meteor.subscribe(type);
+            Session.set("loaded", true);
+            minterval = Meteor.setInterval(function () {
+                var room = Rooms.findOne({type: type});
+                if (room !== undefined) {
+                    if (room.state === "paused" || Session.get("pauseVideo")) {
+                        Session.set("state", "paused");
+                        // TODO Fix issue where sometimes nothing loads with the YT is not defined error. The error points to around this.
+                        if (YTPlayer !== undefined && YTPlayer.getPlayerState !== undefined && YTPlayer.getPlayerState() === 1) {
+                            YTPlayer.pauseVideo();
+                        } else if (SCPlayer !== undefined && SCPlayer.getState().indexOf("playing") !== -1) {
+                            SCPlayer.pause();
+                        }
+                    } else {
+                        Session.set("state", "playing");
+                        if (YTPlayer !== undefined && YTPlayer.getPlayerState !== undefined && YTPlayer.getPlayerState() !== 1) {
+                            YTPlayer.playVideo();
+                        } else if (SCPlayer !== undefined && SCPlayer.getState().indexOf("paused") !== -1) {
+                            SCPlayer.play();
+                        }
+                    }
+                }
+
+                if (currentSongR === undefined || room.currentSong.started !== currentSongR.started) {
+                    Session.set("previousSong", currentSong);
+                    currentSongR = room.currentSong;
+
+                    currentSong = room.currentSong.song;
+                    currentSong.started = room.currentSong.started;
+                    Session.set("currentSong", currentSong);
+                    Meteor.clearTimeout(Session.get("loadVideoTimeout"));
+                    startSong();
+                }
+
+                if (currentSong !== undefined) {
+                    if (room !== undefined) {
+                        var duration = (Date.now() - currentSong.started - room.timePaused) / 1000;
+                        var song_duration = currentSong.duration;
+                        if (song_duration <= duration) {
+                            Session.set("pauseVideo", true);
+                        }
+                        var d = moment.duration(duration, 'seconds');
+                        if (Session.get("state") === "playing") {
+                            $("#time-elapsed").text(d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
+                        }
+                    }
+                }
+            }, 100);
+            resizeSeekerbarInterval = Meteor.setInterval(function () {
+                resizeSeekerbar();
+            }, 500);
+        }
+    });
+});
+
+Template.settings.onCreated(function() {
+    $(document).ready(function() {
+        var user = Meteor.user();
+        function initSettings() {
+            if (user !== undefined) {
+                if (user.profile.settings && user.profile.settings.showRating === true) {
+                    function setChecked() {
+                        $("#showRating").prop("checked", true);
+                        if (!$("#showRating").prop("checked")) {
+                            Meteor.setTimeout(function() {
+                                setChecked();
+                            }, 100);
+                        }
+                    }
+                    setChecked();
+                }
+            } else {
+                Meteor.setTimeout(function() {
+                    initSettings();
+                }, 500);
+            }
+        }
+        initSettings();
+    });
+});
+
+Template.stations.onCreated(function() {
+    var tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    YTPlayer = undefined;
+    SCPlayer = undefined;
+});

app/client/scripts/onRendered.js

@@ -0,0 +1,128 @@
+var rTimeInterval = undefined;
+
+Template.queues.onRendered(function() {
+    $("#previewModal").on("hidden.bs.modal", function() {
+        if (previewEndSongTimeout !== undefined) {
+            Meteor.clearTimeout(previewEndSongTimeout);
+        }
+        $("#play").attr("disabled", false);
+        $("#stop").attr("disabled", true);
+        if (YTPlayer !== undefined) {
+            $("#previewPlayer").hide();
+            YTPlayer.seekTo(0);
+            YTPlayer.stopVideo();
+        }
+        if (SCPlayer !== undefined) {
+            SCPlayer.stop();
+        }
+    });
+    $(document).ready(function() {
+        function makeSlider(){
+            var slider = $("#volume-slider").slider();
+            var volume = localStorage.getItem("volume") || 20;
+            $("#volume-slider").slider("setValue", volume);
+            if (slider.length === 0) {
+                Meteor.setTimeout(function() {
+                    makeSlider();
+                }, 500);
+            } else {
+                slider.on("slide", function(val) {
+                    localStorage.setItem("volume", val.value);
+                    if (YTPlayer !== undefined) {
+                        YTPlayer.setVolume(val.value);
+                    } else if (SCPlayer !== undefined) {
+                        var volume = val.value / 100;
+                        SCPlayer.setVolume(volume);
+                    }
+                });
+            }
+        }
+        makeSlider();
+    });
+});
+
+Template.room.onRendered(function() {
+    if (rTimeInterval !== undefined) {
+        Meteor.clearInterval(rTimeInterval)
+    }
+    rTimeInterval = Meteor.setInterval(function() {
+        Session.set("time", new Date().getTime());
+    }, 10000);
+    $(document).ready(function() {
+        function makeSlider(){
+            var slider = $("#volume-slider").slider();
+            var volume = Number(localStorage.getItem("volume"));
+            $("#volume-slider").slider("setValue", volume);
+            if (slider.length === 0) {
+                Meteor.setTimeout(function() {
+                    makeSlider();
+                }, 500);
+            } else {
+                if (volume === 0) {
+                    $("#volume-icon").removeClass("fa-volume-down").addClass("fa-volume-off")
+                } else {
+                    $("#volume-icon").removeClass("fa-volume-off").addClass("fa-volume-down")
+                }
+                slider.on("slide", function(val) {
+                    if (val.value === 0) {
+                        $("#volume-icon").removeClass("fa-volume-down").addClass("fa-volume-off")
+                    } else {
+                        $("#volume-icon").removeClass("fa-volume-off").addClass("fa-volume-down")
+                    }
+
+                    if (YTPlayer !== undefined) {
+                        YTPlayer.setVolume(val.value);
+                        localStorage.setItem("volume", val.value);
+                    } else if (SCPlayer !== undefined) {
+                        //SCPlayer
+                        var volume = val.value / 100;
+                        SCPlayer.setVolume(volume);
+                        localStorage.setItem("volume", val.value);
+                    }
+                });
+            }
+        }
+        makeSlider();
+    });
+});
+
+Template.stations.onRendered(function() {
+    $("#previewModal").on("hidden.bs.modal", function() {
+        if (previewEndSongTimeout !== undefined) {
+            Meteor.clearTimeout(previewEndSongTimeout);
+        }
+        $("#play").attr("disabled", false);
+        $("#stop").attr("disabled", true);
+        if (YTPlayer !== undefined) {
+            $("#previewPlayer").hide();
+            YTPlayer.seekTo(0);
+            YTPlayer.stopVideo();
+        }
+        if (SCPlayer !== undefined) {
+            SCPlayer.stop();
+        }
+    });
+    $(document).ready(function() {
+        function makeSlider(){
+            var slider = $("#volume-slider").slider();
+            var volume = localStorage.getItem("volume") || 20;
+            $("#volume-slider").slider("setValue", volume);
+            if (slider.length === 0) {
+                Meteor.setTimeout(function() {
+                    makeSlider();
+                }, 500);
+            } else {
+                slider.on("slide", function(val) {
+                    localStorage.setItem("volume", val.value);
+                    if (YTPlayer !== undefined) {
+                        YTPlayer.setVolume(val.value);
+                    } else if (SCPlayer !== undefined) {
+                        var volume = val.value / 100;
+                        SCPlayer.setVolume(volume);
+                    }
+                });
+            }
+        }
+        makeSlider();
+    });
+});

app/client/routes.js → app/client/scripts/routes.js

@@ -33,7 +33,7 @@ Router.route("/login", {
     }
 });
 
-Router.route("/signup", {
+Router.route("/register", {
     action: function() {
         var user = Meteor.user();
         if (user === undefined || user === null) {

app/client/templates/banned.html

@@ -10,6 +10,4 @@
             <h3 class="text text-center">Reason: {{bannedReason}}</h3>
         </div>
     </div>
-
-    {{> bubbles}}
-</template>
+</template>

app/client/templates/bubbles.html

@@ -1,14 +0,0 @@
-<template name="bubbles">
-    <ul class="bg-bubbles">
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-        <li><img src="/Snowflake.png"/></li>
-    </ul>
-</template>

app/client/templates/footer.html

@@ -1,14 +1,25 @@
 <template name="footer">
-    <footer>
-        <p>Copyright © 2015 All Right Reserved</p>
-        <a href="/faq" class="footerButtons" id="FAQButton">FAQ |</a>
-        <a href="/terms" class="footerButtons" id="termsButton">Terms |</a>
-        <a href="/privacy" class="footerButtons" id="privacyButton">Privacy |</a>
-        <a href="/about" class="footerButtons" id="aboutButton">About |</a>
-        <a href="/contact" class="footerButtons" id="contactButton">Contact</a>
-        <br>
-        <a class="social-link" href="https://www.facebook.com/MusareMusic" target="_blank"><i class="fa fa-facebook"></i></a>
-        <a class="social-link" href="https://twitter.com/musareapp" target="_blank"><i class="fa fa-twitter"></i></a>
-        <a class="social-link" href="https://github.com/AkiraLaine/music-app" target="_blank"><i class="fa fa-github"></i></a>
+    <footer class="page-footer teal accent-4">
+        <div class="container row">
+            <div class="col l6 s12">
+                <h5 class="white-text">Footer Content</h5>
+
+                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer
+                    content.</p>
+            </div>
+            <div class="col l4 offset-l2 s12">
+                <h5 class="white-text">Links</h5>
+                <ul>
+                    <li><a class="grey-text text-lighten-3" href="/faq">FAQ</a></li>
+                    <li><a class="grey-text text-lighten-3" href="/terms">Terms</a></li>
+                    <li><a class="grey-text text-lighten-3" href="/privacy">Privacy</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="footer-copyright">
+            <div class="container">
+               Musare | © 2015 Copyright
+            </div>
+        </div>
     </footer>
 </template>

app/client/templates/home.html

@@ -1,19 +1,33 @@
 <template name="home">
-    {{> alerts}}
-    <div class="homepage">
-        <!--<div class="alert alert-success alert-dismissible" role="alert" style="margin-bottom: 0">-->
-            <!--<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span></button>-->
-            <!--<strong>Hey there!</strong> Welcome to Musare - a modern, open-source, collaborative music app.-->
-        <!--</div>-->
-        {{> header}}
-        {{#if currentUser}}
-            {{> dashboard}}
-        {{else}}
-            {{> dashboard}}
-        {{/if}}
-        <div class="push"></div>
+    {{> header}}
+    <main>
+    <div class="col s12 m10 l8">
+        <div class="row">
+            {{#each rooms}}
+                <div class="col s12 m5 l2">
+                    <div class="card">
+                        <div class="card-image waves-effect waves-block waves-light">
+                            <img src={{currentSong.song.img}}>
+                            <figcaption>
+                                <h5>{{currentSong.song.title}}</h5>
+                                <h5>{{currentSong.song.artist}}</h5>
+                                <a href=/{{type}} class="waves-effect waves-light btn">Join Room</a>
+                            </figcaption>
+                        </div>
+                        <div class="card-content">
+                            <span class="card-title activator grey-text text-darken-4">{{display}}<i
+                                    class="material-icons right">more_vert</i></span>
+
+                            <p><span class="user-num">{{userNum}}</span> <i class="material-icons">perm_identity</i></p>
+                        </div>
+                        <div class="card-reveal">
+                            <span class="card-title grey-text text-darken-4">{{display}}<i class="material-icons right">close</i></span>
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
     </div>
+    </main>
     {{> footer}}
-
-    {{> bubbles}}
 </template>

app/client/templates/loading.html

@@ -3,6 +3,5 @@
         <div id="spinner-container">
             <i class="fa fa-spinner fa-pulse" id="spinner"></i>
         </div>
-        {{> bubbles}}
     </div>
-</template>
+</template>

app/client/templates/login.html

@@ -1,18 +1,26 @@
 <template name="login">
-    {{> alerts}}
-  <div class="landing">
-    {{> header}}
-    <div class="container">
+  {{> header}}
+  <main>
+    <div class="container row">
+      <form class="col s12 offset-s3">
         <h1>Login</h1>
-        <form class="form" id="login-form">
-            <input type="text" autocorrect="off" name="loginUsername" placeholder="Enter your username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your username'" required/>
-            <input type="password" autocorrect="off" name="loginPassword" placeholder="Enter your password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your password'" required/>
-            <button type="submit">Login</button>
-        </form>
-        <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Login with Github</button>
+        <div class="row">
+          <div class="input-field col s6">
+            <input id="username" type="text" class="validate">
+            <label for="first_name">Username</label>
+          </div>
+        </div>
+        <div class="row">
+          <div class="input-field col s6">
+            <input id="password" type="password" class="validate">
+            <label for="password">Password</label>
+          </div>
+        </div>
+        <button class="btn waves-effect waves-light" type="submit" name="action">Submit
+          <i class="material-icons right">send</i>
+        </button>
+      </form>
     </div>
-
-      {{> bubbles}}
-
-  </div>
+  </main>
+  {{> footer}}
 </template>

app/client/templates/profile.html

@@ -84,6 +84,5 @@
             {{> loading}}
         {{/if}}
       </div>
-        {{> bubbles}}
     </div>
 </template>

app/client/templates/register.html

@@ -1,18 +1,30 @@
 <template name="register">
-    {{> alerts}}
-    <div class="landing">
         {{> header}}
-        <div class="container">
-            <h1>Sign Up</h1>
-            <form class="form">
-                <input id="usernameInput" type="text" autocorrect="off" name="registerUsername" placeholder="Enter a username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a username'" required/>
-                <input id="emailInput" type="email" name="registerEmail" placeholder="Enter your email" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your email'" required>
-                <input type="password" name="registerPassword" placeholder="Enter a password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a password'" required/> {{> reCAPTCHA}}
-                <p>By registering, you agree to the Terms and Conditions and Privacy Policy.</p>
-                <button type="submit">Sign Up</button>
+        <main>
+          <div class="container row">
+            <h1>Register</h1>
+            <form class="col s12">
+              <div class="row">
+                <div class="input-field col s6">
+                  <input id="username" type="text" class="validate">
+                  <label for="first_name">Username</label>
+                </div>
+                <div class="input-field col s6">
+                  <input id="email" type="email" class="validate">
+                  <label for="last_name">Email</label>
+                </div>
+              </div>
+              <div class="row">
+                <div class="input-field col s12">
+                  <input id="password" type="password" class="validate">
+                  <label for="password">Password</label>
+                </div>
+              </div>
             </form>
-            <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Signup with Github</button>
-        </div>
-        {{> bubbles}}
-    </div>
+            <button class="btn waves-effect waves-light" type="submit" name="action" style="margin-left: 10px;">Submit
+              <i class="material-icons right">send</i>
+            </button>
+          </div>
+        </main>
+        {{> footer}}
 </template>

app/client/templates/settings.html

@@ -27,5 +27,4 @@
             </div>
         </div>
     </div>
-    {{> bubbles}}
-</template>
+</template>