Hello Bulma

frontend/.eslintrc

@@ -1,6 +1,6 @@
 {
 	"rules": {
-		"indent": [2, "tab"]
+		"indent": [2, "tab", { "SwitchCase": 1 }]
 	},
 	"parserOptions": {
 		"ecmaVersion": 6,

frontend/App.vue

@@ -9,12 +9,6 @@
 		replace: false,
 		data() {
 			return {
-				home: {
-					visible: true
-				},
-				station: {
-					visible: false
-				},
 				register: {
 					email: "",
 					username: "",
@@ -33,11 +27,11 @@
 		methods: {
 			logout() {
 				$.ajax({
-					method: "GET",
+					method: "POST",
 					url: "/users/logout",
 					dataType: "json",
-					complete: function (msg) {
-						alert("Logged in!");
+					complete: msg => {
+						alert("Logged out!");
 						location.reload();
 					}
 				});
@@ -63,7 +57,7 @@
 			});
 		},
 		events: {
-			'register': () => {
+			'register': function() {
 				$.ajax({
 					method: "POST",
 					url: "/users/register",
@@ -77,18 +71,14 @@
 					dataType: "json",
 					success: function (msg) {
 						if (msg) console.log(msg);
-						alert("Registered!");
-						//do something
 					},
 					error: function (err) {
 						if (err) console.log(err);
 						alert("Not registered!");
-						//do something else
-
 					}
 				});
 			},
-			'login': () => {
+			'login': function() {
 				$.ajax({
 					method: "POST",
 					url: "/users/login",
@@ -100,14 +90,12 @@
 					dataType: "json",
 					success: function (msg) {
 						if (msg) console.log(msg);
-						alert("Logged in!");
+						location.reload();
 						//do something
 					},
 					error: function (err) {
 						if (err) console.log(err);
 						alert("Not logged in!");
-						//do something else
-
 					}
 				});
 			},

frontend/build/index.html

@@ -4,16 +4,14 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Musare</title>
-	<!--<link rel="shortcut icon" type="image/x-icon" href="https://musare.com/favicon.ico" />-->
+	<link rel="shortcut icon" type="image/x-icon" href="https://musare.com/favicon.ico" />
 	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 	<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-	<!-- Bootstrap -->
-	<link rel="stylesheet" href="./vendor/bootstrap.min.css">
+	<link rel="stylesheet" href="./vendor/bulma.min.css">
 	<link rel="stylesheet" href="./index.css">
 	<script src="https://www.youtube.com/iframe_api"></script>
 	<script src="./vendor/jquery.min.js"></script>
-	<script src="./vendor/bootstrap.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
 	<script src='https://www.google.com/recaptcha/api.js'></script>

frontend/components/MainFooter.vue

@@ -1,111 +1,22 @@
 <template>
-	<footer>
-		<div class="footer-left">
-			<div class="left-title">Stay Connected</div>
-			<div class="left-message">Follow us on social media or send us an email!</div>
-			<div class="left-icons">
-				<div class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
-				<div class="icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>
-				<div class="icon"><i class="fa fa-twitch" aria-hidden="true"></i></div>
+	<footer class="footer">
+		<div class="container">
+			<div class="content has-text-centered">
+				<p>
+					© Copyright Musare 2015 - {{ new Date().getFullYear() }}
+				</p>
+				<p>
+					<a class="icon" href="https://github.com/musare/musarenode">
+						<i class="fa fa-github"></i>
+					</a>
+				</p>
 			</div>
 		</div>
-		<div class="footer-right">
-			<div class="right-links">
-				<div class="links-title">Links</div>
-				<a class="link">GitHub</a>
-				<a class="link">Feedback</a>
-				<a class="link">FAQ</a>
-				<a class="link">Terms</a>
-				<a class="link">Privacy</a>
-			</div>
-		</div>
-		<div class="footer-message">© Copyright Musare: 2015 - {{ new Date().getFullYear() }}</div>
 	</footer>
 </template>
 
 <style lang="sass" scoped>
-	footer {
-		width: 100%;
-		height: 200px;
-		background-color: #e0e0e0;
-		padding-top: 26px;
-		margin-top: 100px;
-
-		.footer-left {
-			float: left;
-			width: 50%;
-			height: 150px;
-			padding-left: 64px;
-
-			.left-title {
-				font-size: 25px;
-				color: #616161;
-				margin-bottom: 16px;
-			}
-
-			.left-message {
-				font-size: 15px;
-				color: #757575;
-				margin-bottom: 16px;
-			}
-
-			.left-icons {
-				.icon {
-					float: left;
-					font-size: 32px;
-					padding-right: 16px;
-					color: #757575;
-
-					&:hover {
-						cursor: pointer;
-						color: #222222;
-					}
-				}
-			}
-		}
-
-		.footer-right {
-			float: right;
-			width: 50%;
-			height: 150px;
-			padding-left: 64px;
-
-			.right-links {
-				float: right;
-				width: 200px;
-			}
-
-			.links-title {
-				float: right;
-				width: 200px;
-				font-size: 25px;
-				color: #616161;
-				margin-bottom: 8px;
-			}
-
-			.link {
-				float: right;
-				width: 200px;
-				clear: both;
-				font-size: 15px;
-				color: #757575;
-				margin-bottom: 2px;
-
-				&:hover {
-					cursor: pointer;
-					color: #222222;
-				}
-			}
-		}
-
-		.footer-message {
-			float: left;
-			width: 100%;
-			height: 50px;
-			line-height: 50px;
-			padding-left: 128px;
-			background-color: #d3d3d3;
-			color: #757575;
-		}
+	.content a:not(.button) {
+		border: 0;
 	}
 </style>

frontend/components/MainHeader.vue

@@ -1,72 +1,46 @@
 <template>
-	<nav class="navbar navbar-default">
-		<div class="container-fluid">
-			<div class="navbar-header">
-				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
-					<span class="sr-only">Toggle navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
-				<a class="navbar-brand" href="#" v-link="{ path: '/' }">Musare</a>
-			</div>
-			<div class="collapse navbar-collapse" id="main-navbar">
-				<ul class="nav navbar-nav navbar-right">
-					<li><a v-link="{ path: '/admin/queue' }">Admin Queue</a></li>
-					<li><a href="#">The Project</a></li>
-					<li><a href="#">Donate</a></li>
-					<li v-if="$parent.$parent.loggedIn"><a href="#" @click="$parent.$parent.logout()">Logout</a></li>
-					<span class="grouped" v-else>
-						<li><a href="#" data-toggle="modal" data-target="#register">Register</a></li>
-						<li><a href="#" data-toggle="modal" data-target="#login">Login</a></li>
-					</span>
-				</ul>
-			</div>
+	<nav class="nav">
+		<div class="nav-left">
+			<a class="nav-item is-brand" href="#" v-link="{ path: '/' }">
+				Musare
+			</a>
+		</div>
+
+		<!--<span class="nav-toggle" :class="{ 'is-active': isActive }" @click="toggleMobileMenu()">
+			<span></span>
+			<span></span>
+			<span></span>
+		</span>-->
+
+		<div class="nav-right">
+			<a class="nav-item" href="#" v-link="{ path: '/admin/queue' }">
+				Admin Queue
+			</a>
+			<a class="nav-item" href="#">
+				About
+			</a>
+			<a class="nav-item" href="#">
+				Donate
+			</a>
+			<a class="nav-item" href="#" v-if="$parent.$parent.loggedIn" @click="$parent.$parent.logout()">
+				Sign Out
+			</a>
+			<span class="grouped" v-else>
+				<a class="nav-item" href="#" @click="$parent.toggleModal('login')">
+					Sign In
+				</a>
+				<a class="nav-item" href="#" @click="$parent.toggleModal('register')">
+					Register
+				</a>
+			</span>
 		</div>
 	</nav>
 </template>
 
 <style lang="sass" scoped>
-	.navbar-default {
-		background-color: #424242;
-		border: 0;
-		border-radius: 0;
+	.grouped {
 		margin: 0;
-		min-height: 50px;
-
-		.navbar-brand, li a, li a:hover, li a:focus {
-			line-height: 50px;
-			padding: 0px 10px;
-			margin: 0px;
-			color: #fff;
-		}
-
-		li:hover {
-			background-color: #393939;
-			color: #fff;
-		}
-
-		a {
-    		text-decoration: none;
-		}
-
-		.navbar-toggle, .navbar-toggle:hover, .navbar-toggle:focus {
-			border: 0;
-			background: 0;
-
-			.icon-bar {
-				background-color: #fff;
-			}
-		}
-
-		.navbar-collapse {
-			border: 0;
-		}
-
-		.grouped {
-			margin: 0;
-    		display: flex;
-			text-decoration: none;
-		}
+		display: flex;
+		text-decoration: none;
 	}
 </style>

frontend/components/StationHeader.vue

@@ -1,26 +1,54 @@
 <template>
-	<nav class="navbar navbar-default" role="navigation">
-		<div class="container-fluid">
-			<div class="navbar-header">
-				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#station-navbar" aria-expanded="false">
-					<span class="sr-only">Toggle navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
-			</div>
-			<div class="collapse navbar-collapse" id="station-navbar">
-				<ul class="nav navbar-nav">
-					<li class="pull-left"><a href="#" v-link="{ path: '/' }"><i class="material-icons left">home</i></a></li>
-					<li class="pull-left"><a href="#" data-toggle="modal" data-target="#queue"><i class="material-icons left">playlist_add</i></a></li>
-					<li class="pull-left"><a href="#"><i class="material-icons left">flag</i></a></li>
-					<li class="pull-left"><a href="#"><i class="material-icons left">skip_next</i></a></li>
-					<li class="pull-center"><a href="#">{{title}}</a></li>
-					<li class="pull-right"><a href="#"><i class="material-icons">queue_music</i></a></li>
-					<li class="pull-right"><a href="#"><i class="material-icons">chat</i></a></li>
-					<li class="pull-right"><a href="#"><i class="material-icons">people</i></a></li>
-				</ul>
-			</div>
+	<nav class="nav has-shadow">
+		<div class="nav-left">
+			<a class="nav-item" href="#" v-link="{ path: '/' }">
+				<span class="icon">
+					<i class="fa fa-home"></i>
+				</span>
+			</a>
+			<a class="nav-item" href="#" @click="$parent.toggleModal()">
+				<span class="icon">
+					<i class="fa fa-plus"></i>
+				</span>
+			</a>
+			<a class="nav-item" href="#">
+				<span class="icon">
+					<i class="fa fa-flag"></i>
+				</span>
+			</a>
+			<a class="nav-item" href="#">
+				<span class="icon">
+					<i class="fa fa-step-forward"></i>
+				</span>
+			</a>
+		</div>
+
+		<div class="nav-center">
+			{{title}}
+		</div>
+
+		<!--<span class="nav-toggle" :class="{ 'is-active': isActive }" @click="toggleMobileMenu()">
+			<span></span>
+			<span></span>
+			<span></span>
+		</span>-->
+
+		<div class="nav-right">
+			<a class="nav-item" href="#">
+				<span class="icon">
+					<i class="fa fa-music"></i>
+				</span>
+			</a>
+			<a class="nav-item" href="#">
+				<span class="icon">
+					<i class="fa fa-comments"></i>
+				</span>
+			</a>
+			<a class="nav-item" href="#">
+				<span class="icon">
+					<i class="fa fa-users"></i>
+				</span>
+			</a>
 		</div>
 	</nav>
 </template>
@@ -29,67 +57,31 @@
 	export default {
 		data() {
 			return {
-				title: this.$route.params.id
+				title: this.$route.params.id,
+				isActive: false
+			}
+		},
+		methods: {
+			toggleMobileMenu: function() {
+				this.isActive = !this.isActive;
 			}
 		}
 	}
 </script>
 
 <style lang="sass" scoped>
-	.navbar-default {
+	.nav {
 		background-color: #0091ea;
-		border: 0;
-		border-radius: 0;
-		margin: 0;
-		min-height: 64px;
-
-		.navbar-nav {
-			width: 100%;
-			text-align: center;
-
-			li a, li a:hover, li a:focus {
-				padding: 0px 10px;
-				margin: 0px;
-				color: #fff;
-			}
-
-			li.pull-center a {
-				line-height: 64px;
-				text-transform: capitalize;
-			}
-
-			li.pull-right, li.pull-left {
-				height: 64px;
-				display: flex;
-				align-items: center;
-			}
-
-			li {
-				float: none;
-				display: inline-block;
-
-				i {
-					font-size: 40px;
-				}
-
-				&:hover {
-					background-color: rgba(0, 0, 0, 0.1);
-					color: #fff;
-				}
-			}
-		}
-
-		.navbar-toggle, .navbar-toggle:hover, .navbar-toggle:focus {
-			border: 0;
-			background: 0;
+	}
 
-			.icon-bar {
-				background-color: #fff;
-			}
-		}
+	a.nav-item {
+		color: #fff;
+	}
 
-		.navbar-collapse {
-			border: 0;
-		}
+	.nav-center {
+		display: flex;
+    	align-items: center;
+		text-transform: capitalize;
+		color: #fff;
 	}
 </style>

frontend/components/pages/Home.vue

@@ -1,40 +1,55 @@
 <template>
 	<div class="app">
 		<main-header></main-header>
-		<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="register-modal">
-			<div class="modal-dialog" role="document">
-				<div class="modal-content">
-					<div class="modal-header">
-						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-						<h5 class="modal-title">Register</h5>
-					</div>
-					<div class="modal-body">
-						<input class="form-control" type="text" placeholder="Email..." v-model="$parent.register.email"/>
-						<input class="form-control" type="text" placeholder="Username..." v-model="$parent.register.username"/>
-						<input class="form-control" type="password" placeholder="Password..." v-model="$parent.register.password"/>
-						<div class="g-recaptcha" data-sitekey="6Lfa-wYUAAAAANY6iVvWNEXohC38l1cZqHRole9T"></div>
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-primary" data-dismiss="modal" @click="this.$dispatch('register');">Submit</button>
-					</div>
-				</div>
+		<div class="modal" :class="{ 'is-active': isRegisterActive }">
+			<div class="modal-background"></div>
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Register</p>
+					<button class="delete" @click="toggleModal('register')"></button>
+				</header>
+				<section class="modal-card-body">
+					<!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
+					<label class="label">Email</label>
+					<p class="control">
+						<input class="input" type="text" placeholder="Email..." v-model="$parent.register.email">
+					</p>
+					<label class="label">Username</label>
+					<p class="control">
+						<input class="input" type="text" placeholder="Username..." v-model="$parent.register.username">
+					</p>
+					<label class="label">Password</label>
+					<p class="control">
+						<input class="input" type="password" placeholder="Password..." v-model="$parent.register.password">
+					</p>
+					<div class="g-recaptcha" data-sitekey="6Lfa-wYUAAAAANY6iVvWNEXohC38l1cZqHRole9T"></div>
+				</section>
+				<footer class="modal-card-foot">
+					<a class="button is-primary" @click="submitModal('register')">Submit</a>
+				</footer>
 			</div>
 		</div>
-		<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login-modal">
-			<div class="modal-dialog" role="document">
-				<div class="modal-content">
-					<div class="modal-header">
-						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-						<h5 class="modal-title">Login</h5>
-					</div>
-					<div class="modal-body">
-						<input class="form-control" type="text" placeholder="Email..." v-model="$parent.login.email"/>
-						<input class="form-control" type="password" placeholder="Password..." v-model="$parent.login.password"/>
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-primary" data-dismiss="modal" @click="this.$dispatch('login');">Submit</button>
-					</div>
-				</div>
+		<div class="modal" :class="{ 'is-active': isLoginActive }">
+			<div class="modal-background"></div>
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Login</p>
+					<button class="delete" @click="toggleModal('login')"></button>
+				</header>
+				<section class="modal-card-body">
+					<!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
+					<label class="label">Email</label>
+					<p class="control">
+						<input class="input" type="text" placeholder="Email..." v-model="$parent.login.email">
+					</p>
+					<label class="label">Password</label>
+					<p class="control">
+						<input class="input" type="password" placeholder="Password..." v-model="$parent.login.password">
+					</p>
+				</section>
+				<footer class="modal-card-foot">
+					<a class="button is-primary" @click="submitModal('login')">Submit</a>
+				</footer>
 			</div>
 		</div>
 		<div class="group">
@@ -63,6 +78,36 @@
 	import MainFooter from '../MainFooter.vue'
 
 	export default {
+		data() {
+			return {
+				isRegisterActive: false,
+				isLoginActive: false
+			}
+		},
+		methods: {
+			toggleModal: function(type) {
+				switch(type) {
+					case 'register':
+						this.isRegisterActive = !this.isRegisterActive;
+						break;
+					case 'login':
+						this.isLoginActive = !this.isLoginActive;
+						break;
+				}
+			},
+			submitModal: function(type) {
+				switch(type) {
+					case 'register':
+						this.$dispatch('register');
+						this.toggleModal('register');
+						break;
+					case 'login':
+						this.$dispatch('login');
+						this.toggleModal('login');
+						break;
+				}
+			}
+		},
 		components: { MainHeader, MainFooter }
 	}
 </script>
@@ -101,16 +146,20 @@
 		}
 	}
 
+	.label {
+		display: flex;
+	}
+
 	.g-recaptcha {
 		display: flex;
 		justify-content: center;
-		margin-top: 10px;
+		margin-top: 20px;
 	}
 
 	.group {
 		width: 100%;
 		height: 448px;
-		margin: 64px 0 64px 0;
+		margin: 64px 0 0 0;
 
 		.group-title {
 			float: left;
@@ -175,26 +224,4 @@
 			}
 		}
 	}
-
-	.btn-github {
-		background-color: #333;
-		color: #fff;
-		border: 0;
-
-		&:hover, &:active, &:focus {
-			background-color: darken(#333, 5%);
-			color: #fff;
-		}
-	}
-
-	.btn-discord {
-		background-color: #7289DA;
-		color: #fff;
-		border: 0;
-
-		&:hover, &:active, &:focus {
-			background-color: darken(#7289DA, 5%);
-			color: #fff;
-		}
-	}
 </style>

frontend/components/pages/Station.vue

@@ -1,27 +1,29 @@
 <template>
 	<station-header></station-header>
 	<div class="station">
-		<div class="row">
-			<div class="col-md-8 col-md-push-2 col-sm-10 col-sm-push-1 col-xs-12 video-col">
+		<div class="columns is-mobile">
+			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
 				<div class="video-container">
 					<div id="player"></div>
 				</div>
 			</div>
-			<div class="col-md-8 col-md-push-2 col-sm-10 col-sm-push-1 col-xs-12">
-				<div class="row">
-					<!--<button v-if="paused" @click="unpauseStation()">Unpause</button>-->
-					<!--<button v-if="!paused" @click="pauseStation()">Pause</button>-->
-					<div class="col-md-8 col-sm-12 col-sm-12">
+		</div>
+		<div class="columns is-mobile">
+			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
+				<!--<button v-if="paused" @click="unpauseStation()">Unpause</button>-->
+				<!--<button v-if="!paused" @click="pauseStation()">Pause</button>-->
+				<div class="columns is-mobile">
+					<div class="column is-8-desktop is-12-mobile">
 						<h4 id="time-display">{{timeElapsed}} / {{currentSong.duration}}</h4>
 						<h3>{{currentSong.title}}</h3>
 						<h4 class="thin" style="margin-left: 0">{{currentSong.artists}}</h4>
-						<div class="row">
-							<form style="margin-top: 12px; margin-bottom: 0;" action="#" class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
+						<div class="columns is-mobile">
+							<form style="margin-top: 12px; margin-bottom: 0;" action="#" class="column is-7-desktop is-4-mobile">
 								<p style="margin-top: 0; position: relative;">
 									<input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
 								</p>
 							</form>
-							<div class="col-xs-8 col-sm-5 col-md-5" style="float: right;">
+							<div class="column is-8-mobile is-5-desktop" style="float: right;">
 								<ul id="ratings">
 									<li id="like" class="right"><span class="flow-text">{{currentSong.likes}} </span> <i id="thumbs_up" class="material-icons grey-text">thumb_up</i></li>
 									<li style="margin-right: 10px;" id="dislike" class="right"><span class="flow-text">{{currentSong.dislikes}} </span><i id="thumbs_down" class="material-icons grey-text">thumb_down</i></li>
@@ -32,54 +34,58 @@
 							<div class="seeker-bar light-blue" style="width: 60.9869%;"></div>
 						</div>
 					</div>
-					<img class="img-responsive col-md-4 col-xs-12 col-sm-12" id="song-thumbnail" style="margin-top: 10px !important" :src="currentSong.thumbnail" alt="Song Thumbnail" />
+					<div class="column is-4-desktop is-12-mobile">
+						<img class="image" id="song-thumbnail" style="margin-top: 10px !important" :src="currentSong.thumbnail" alt="Song Thumbnail" />
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<main-footer></main-footer>
-	<div class="modal fade" id="queue" tabindex="-1" role="dialog" aria-labelledby="queue-modal">
-		<div class="modal-dialog modal-large" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-					<h5 class="modal-title">Add to Station</h5>
-				</div>
-				<div class="modal-body">
-					<div class="form-group">
-						<div class="input-group">
-							<input class="form-control" type="text" placeholder="YouTube Query" v-model="queryInput"/>
-							<a type="button" class="input-group-btn btn btn-primary btn-search" @click="submitQuery()">Search</a>
-						</div>
-					</div>
-					<div>
-						<div v-for="result in queryResults">
-							<div class="media">
-								<div class="media-left">
-									<a href={{result.url}}>
-										<img class="media-object" :src="result.thumbnail" />
-									</a>
-								</div>
-								<div class="media-body">
-									<h4 class="media-heading">{{result.title}}</h4>
-									<button class="btn btn-success" @click='addSongToQueue(result)'>Add</button>
-								</div>
-							</div>
-						</div>
-					</div>
+	<div class="modal" :class="{ 'is-active': isActive }">
+		<div class="modal-background"></div>
+		<div class="modal-card">
+			<header class="modal-card-head">
+				<p class="modal-card-title">Add Songs to Station</p>
+				<button class="delete" @click="toggleModal()" ></button>
+			</header>
+			<section class="modal-card-body">
+				<div class="control is-grouped">
+					<p class="control is-expanded">
+						<input class="input" type="text" placeholder="YouTube Query" v-model="querySearch">
+					</p>
+					<p class="control">
+						<a class="button is-info" @click="submitQuery()">
+							Search
+						</a>
+					</p>
 				</div>
-			</div>
+				<table class="table">
+					<tbody>
+						<tr v-for="result in queryResults">
+							<td>
+								<img :src="result.thumbnail" />
+							</td>
+							<td>{{result.title}}</td>
+							<td>
+								<a class="button is-success" @click="addSongToQueue(result)">
+									Add
+								</a>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</section>
 		</div>
 	</div>
 </template>
 
 <script>
 	import StationHeader from '../StationHeader.vue'
-	import MainFooter from '../MainFooter.vue'
 
 	export default {
 		data() {
 			return {
+				isActive: false,
 				playerReady: false,
 				currentSong: {},
 				player: undefined,
@@ -87,12 +93,15 @@
 				paused: false,
 				timeElapsed: "0:00",
 				interval: 0,
-				queryInput: "",
+				querySearch: "",
 				queryResults: [],
 				queue: []
 			}
 		},
 		methods: {
+			toggleModal: function() {
+				this.isActive = !this.isActive;
+			},
 			youtubeReady: function() {
 				let local = this;
 				local.player = new YT.Player("player", {
@@ -209,7 +218,7 @@
 			},
 			submitQuery: function() {
 				let local = this;
-				local.socket.emit("/youtube/getVideo/:query", local.queryInput, function(data) {
+				local.socket.emit("/youtube/getVideo/:query", local.querySearch, function(data) {
 					local.queryResults = [];
 					for (let i = 0; i < data.items.length; i++) {
 						local.queryResults.push({
@@ -248,7 +257,7 @@
 			volume = (typeof volume === "number") ? volume : 20;
 			$("#volumeSlider").val(volume);
 		},
-		components: { StationHeader, MainFooter }
+		components: { StationHeader }
 	}
 </script>
 
@@ -415,6 +424,11 @@
 		color: #EC644B !important;
 	}
 
+	#song-thumbnail {
+		max-width: 100%;
+		width: 85%;
+	}
+
 	.seeker-bar-container {
 		position: relative;
 		height: 5px;

frontend/webpack.config.js

@@ -34,6 +34,7 @@ module.exports = {
 	},
 	babel: {
 		presets: ['es2015'],
-		plugins: ['transform-runtime']
+		plugins: ['transform-runtime'],
+		comments: false
 	}
 };