Merge pull request #34 from Musare/staging

Speed improvements and bug fixes

.gitignore

@@ -17,11 +17,11 @@ backend/config/default.json
 
 # Front End
 frontend/node_modules/
-frontend/build/bundle.js
+frontend/build/*.js
 frontend/build/config/default.json
 
 npm
 
 # Logs
 log/
-.env
+.env

README.md

@@ -99,7 +99,7 @@ Now you have different paths here.
 	
 	4. Create an admin user
 	
-		`db.createUser({user: 'admin', pwd: 'PASSWORD_HERE', roles: [{role: 'userAdminAnyDatabase', db: 'admin'}]})`
+		`db.createUser({user: 'admin', pwd: 'PASSWORD_HERE', roles: [{role: 'root', db: 'admin'}]})`
 		
 	5. Connect to the Musare database
 	

backend/config/template.json

@@ -1,6 +1,7 @@
 {
 	"secret": "",
 	"domain": "",
+	"frontendPort": 80,
 	"serverDomain": "",
   	"serverPort": 8080,
   	"isDocker": true,

backend/index.js

@@ -203,8 +203,8 @@ async.waterfall([
 		if (!config.get("isDocker")) {
 			const express = require('express');
 			const app = express();
-			app.listen(80);
-			const rootDir = __dirname.substr(0, __dirname.lastIndexOf("backend")) + "frontend\\build\\";
+			app.listen(config.get("frontendPort"));
+			const rootDir = __dirname.substr(0, __dirname.lastIndexOf("backend")) + "frontend/build/";
 
 			app.get("/*", (req, res) => {
 				const path = req.path;

backend/logic/stations.js

@@ -106,7 +106,6 @@ module.exports = {
 			(station, next) => {
 				if (!station) return next('Station not found.');
 				notifications.unschedule(`stations.nextSong?id=${station._id}`);
-				if (subscription) notifications.remove(subscription);
 				subscription = notifications.subscribe(`stations.nextSong?id=${station._id}`, _this.skipStation(station._id), true, station);
 				if (station.paused) return next(true, station);
 				next(null, station);

docker-compose.yml

@@ -19,7 +19,7 @@ services:
   mongo:
     image: mongo
     ports:
-    - "27018:27018"
+    - "27017:27017"
     command: "--auth"
   mongoclient:
     image: mongoclient/mongoclient
@@ -31,4 +31,4 @@ services:
     volumes:
     - .redis:/data
     ports:
-    - "6371:6371"
+    - "6379:6379"

frontend/App.vue

@@ -66,7 +66,7 @@
 					this.currentlyGettingUsernameFrom[userId] = true;
 			        io.getSocket(socket => {
 			            socket.emit('users.getUsernameFromId', userId, (data) => {
-			                if (data.status === 'success') this.$set(`userIdMap.${userId}`, data.data);
+			                if (data.status === 'success') this.$set(`userIdMap.Z${userId}`, data.data);
 							this.currentlyGettingUsernameFrom[userId] = false;
 						});
 					});
@@ -184,6 +184,8 @@
 </script>
 
 <style type='scss'>
+	.center { text-align: center; }
+
 	#toast-container { z-index: 10000 !important; }
 
 	html {

frontend/build/index.css

@@ -9,4 +9,90 @@ body {
 
 .toast {
 	z-index: 10000 !important;
+}
+
+ul {
+	list-style: none;
+	margin: 0;
+	display: block;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 400;
+	line-height: 1.1;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+	font-weight: inherit;
+}
+
+h1 {
+	font-size: 4.2rem;
+	line-height: 110%;
+	margin: 2.1rem 0 1.68rem 0;
+}
+
+h2 {
+	font-size: 3.56rem;
+	line-height: 110%;
+	margin: 1.78rem 0 1.424rem 0;
+}
+
+h3 {
+	font-size: 2.92rem;
+	line-height: 110%;
+	margin: 1.46rem 0 1.168rem 0;
+}
+
+h4 {
+	font-size: 2.28rem;
+	line-height: 110%;
+	margin: 1.14rem 0 0.912rem 0;
+}
+
+h5 {
+	font-size: 1.64rem;
+	line-height: 110%;
+	margin: 0.82rem 0 0.656rem 0;
+}
+
+h6 {
+	font-size: 1rem;
+	line-height: 110%;
+	margin: 0.5rem 0 0.4rem 0;
+}
+
+.thin {
+	font-weight: 200;
+}
+
+.left {
+	float: left !important;
+}
+
+.right {
+	float: right !important;
+}
+
+.light-blue {
+	background-color: #03a9f4 !important;
+}
+
+.white {
+	background-color: #FFFFFF !important;
+}
+
+.btn-search {
+	font-size: 14px;
+}
+
+a.nav-item.is-tab {
+	border-bottom: 1px solid transparent;
+	border-top: 1px solid transparent;
+}
+
+.button.is-info {
+	background-color: #03a9f4;
+	border-width: 0;
+	color: #fff;
 }

frontend/build/index.html

@@ -36,6 +36,7 @@
 	<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'>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/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>

frontend/components/MainHeader.vue

@@ -67,8 +67,6 @@
 </script>
 
 <style lang="scss" scoped>
-	@import 'theme.scss';
-
 	.nav {
 		background-color: #03a9f4;
 		height: 64px;
@@ -99,10 +97,10 @@
 
 		.nav-item {
 			font-size: 15px;
-			color: $white;
+			color: hsl(0, 0%, 100%);
 
 			&:hover {
-				color: $white;
+				color: hsl(0, 0%, 100%);
 			}
 		}
 		.admin {
@@ -145,10 +143,10 @@
 
 			.nav-item {
 				font-size: 15px;
-				color: $white;
+				color: hsl(0, 0%, 100%);
 
 				&:hover {
-					color: $white;
+					color: hsl(0, 0%, 100%);
 				}
 			}
 			.admin strong {

frontend/components/Modals/IssuesModal.vue

@@ -3,9 +3,9 @@
 		<div slot='body'>
 			<article class="message">
 				<div class="message-body">
-					<strong>Song ID: </strong>{{ $parent.editing.songId }}<br/ >
-					<strong>Created By: </strong>{{ $parent.editing.createdBy }}<br/ >
-					<strong>Created At: </strong>{{ $parent.editing.createdAt }}<br/ >
+					<strong>Song ID: </strong>{{ $parent.editing.songId }}<br/>
+					<strong>Created By: </strong>{{ $parent.editing.createdBy }}<br/>
+					<strong>Created At: </strong>{{ $parent.editing.createdAt }}<br/>
 					<span v-if='$parent.editing.description'><strong>Description: </strong>{{ $parent.editing.description }}</span>
 				</div>
 			</article>

frontend/components/Modals/Playlists/Edit.vue

@@ -94,9 +94,11 @@
 		},
 		methods: {
 			formatTime: function (length) {
+				length = 1000000;
 				let duration = moment.duration(length, 'seconds');
+				function getHours() {return Math.floor(duration.asHours());}
 				if (length <= 0) return '0 seconds';
-				else return ((duration.hours() > 0 ? (duration.hours > 1 ? (duration.hours() < 10 ? ('0' + duration.hours() + ' hours ') : (duration.hours() + ' hours ')) : ('0' + duration.hours() + ' hour ')) : '') + (duration.minutes() > 0 ? (duration.minutes() > 1 ? (duration.minutes() < 10 ? ('0' + duration.minutes() + ' minutes ') : (duration.minutes() + ' minutes ')) : ('0' + duration.minutes() + ' minute ')) : '') + (duration.seconds() > 0 ? (duration.seconds() > 1 ? (duration.seconds() < 10 ? ('0' + duration.seconds() + ' seconds ') : (duration.seconds() + ' seconds ')) : ('0' + duration.seconds() + ' second ')) : ''));
+				else return ((getHours() > 0 ? (getHours() > 1 ? (getHours() < 10 ? ('0' + getHours() + ' hours ') : (getHours() + ' hours ')) : ('0' + getHours() + ' hour ')) : '') + (duration.minutes() > 0 ? (duration.minutes() > 1 ? (duration.minutes() < 10 ? ('0' + duration.minutes() + ' minutes ') : (duration.minutes() + ' minutes ')) : ('0' + duration.minutes() + ' minute ')) : '') + (duration.seconds() > 0 ? (duration.seconds() > 1 ? (duration.seconds() < 10 ? ('0' + duration.seconds() + ' seconds ') : (duration.seconds() + ' seconds ')) : ('0' + duration.seconds() + ' second ')) : ''));
 			},
 			totalLength: function() {
 			    let length = 0;

frontend/components/Sidebars/SongsList.vue

@@ -31,7 +31,7 @@
 							<strong class="songTitle">{{ song.title }}</strong>
 							<small>{{ song.artists.join(', ') }}</small>
 							<div v-if="this.$parent.$parent.type === 'community' && this.$parent.$parent.station.partyMode === true">
-								<small>Requested by <b>{{this.$parent.$parent.$parent.getUsernameFromId(song.requestedBy)}} {{this.userIdMap[song.requestedBy]}}</b></small>
+								<small>Requested by <b>{{this.$parent.$parent.$parent.getUsernameFromId(song.requestedBy)}} {{this.userIdMap['Z' + song.requestedBy]}}</b></small>
 								<i class="material-icons" style="vertical-align: middle;" @click="removeFromQueue(song.songId)" v-if="isOwnerOnly() || isAdminOnly()">delete_forever</i>
 							</div>
 					</div>

frontend/components/Station/CommunityHeader.vue

@@ -142,7 +142,6 @@
 </script>
 
 <style lang='scss' scoped>
-	@import 'theme.scss';
 	.nav {
 		background-color: #03a9f4;
 		line-height: 64px;
@@ -155,18 +154,18 @@
 	}
 
 	a.nav-item {
-		color: $white;
+		color: hsl(0, 0%, 100%);
 		font-size: 15px;
 
 		&:hover {
-			color: $white;
+			color: hsl(0, 0%, 100%);
 		}
 
 		.admin {
 			color: #424242;
 		}
 
-		padding: 0 18px;
+		padding: 0 12px;
 		.icon {
 			height: 64px;
 			i {
@@ -218,7 +217,7 @@
 	.nav-center {
 		display: flex;
     align-items: center;
-		color: $blue;
+		color: #03A9F4;
 		font-size: 22px;
 		position: absolute;
 		margin: auto;

frontend/components/Station/OfficialHeader.vue

@@ -148,7 +148,6 @@
 </script>
 
 <style lang='scss' scoped>
-	@import 'theme.scss';
 	.nav {
 		background-color: #03a9f4;
 		line-height: 64px;
@@ -161,18 +160,18 @@
 	}
 
 	a.nav-item {
-		color: $white;
+		color: hsl(0, 0%, 100%);
 		font-size: 15px;
 
 		&:hover {
-			color: $white;
+			color: hsl(0, 0%, 100%);
 		}
 
 		.admin {
 			color: #424242;
 		}
 
-		padding: 0 18px;
+		padding: 0 12px;
 		.icon {
 			height: 64px;
 			i {
@@ -224,7 +223,7 @@
 	.nav-center {
 		display: flex;
     	align-items: center;
-		color: $blue;
+		color: #03A9F4;
 		font-size: 22px;
 		position: absolute;
 		margin: auto;

frontend/components/Station/Station.vue

@@ -69,7 +69,7 @@
 								<br>
 								<div v-if="station.partyMode">
 									<br>
-									<small>Requested by <b>{{this.$parent.$parent.getUsernameFromId(song.requestedBy)}} {{this.userIdMap[song.requestedBy]}}</b></small>
+									<small>Requested by <b>{{this.$parent.$parent.getUsernameFromId(song.requestedBy)}} {{this.userIdMap['Z' + song.requestedBy]}}</b></small>
 									<button class="button" @click="removeFromQueue(song.songId)" v-if="isOwnerOnly() || isAdminOnly()">REMOVE</button>
 								</div>
 						</div>
@@ -93,7 +93,7 @@
 								<p class='volume-slider-wrapper'>
 									<i class="material-icons" @click='toggleMute()' v-if='muted'>volume_mute</i>
 									<i class="material-icons" @click='toggleMute()' v-else>volume_down</i>
-									<input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
+									<input type="range" id="volumeSlider" min="0" max="10000" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
 									<i class="material-icons" @click='increaseVolume()'>volume_up</i>
 								</p>
 							</form>
@@ -131,7 +131,7 @@
 								<p class='column is-11-mobile volume-slider-wrapper'>
 									<i class="material-icons" @click='toggleMute()' v-if='muted'>volume_mute</i>
 									<i class="material-icons" @click='toggleMute()' v-else>volume_down</i>
-									<input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
+									<input type="range" id="volumeSlider" min="0" max="10000" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
 									<i class="material-icons" @click='increaseVolume()'>volume_up</i>
 								</p>
 							</form>
@@ -311,13 +311,13 @@
 					window.stationInterval = setInterval(function () {
 						local.resizeSeekerbar();
 						local.calculateTimeElapsed();
-					}, 250);
+					}, 150);
 				}
 			},
 			resizeSeekerbar: function() {
 				let local = this;
 				if (!local.paused) {
-					$(".seeker-bar").width(parseInt(((local.getTimeElapsed() / 1000) / local.currentSong.duration * 100)) + "%");
+					$(".seeker-bar").width(parseFloat(((local.getTimeElapsed() / 1000) / local.currentSong.duration * 100)) + "%");
 				}
 			},
 			formatTime: function(duration) {
@@ -350,9 +350,9 @@
 			changeVolume: function() {
 				let local = this;
 				let volume = $("#volumeSlider").val();
-				localStorage.setItem("volume", volume);
+				localStorage.setItem("volume", volume / 100);
 				if (local.playerReady) {
-					local.player.setVolume(volume);
+					local.player.setVolume(volume / 100);
 					if (volume > 0) local.player.unMute();
 				}
 			},
@@ -402,10 +402,10 @@
 			},
 			toggleMute: function () {
 				if (this.playerReady) {
-					let previousVolume = parseInt(localStorage.getItem("volume"));
-					let volume = this.player.getVolume() <= 0 ? previousVolume : 0;
+					let previousVolume = parseFloat(localStorage.getItem("volume"));
+					let volume = this.player.getVolume() * 100 <= 0 ? previousVolume : 0;
 					this.muted = !this.muted;
-					$("#volumeSlider").val(volume);
+					$("#volumeSlider").val(volume * 100);
 					this.player.setVolume(volume);
 					if (!this.muted) localStorage.setItem("volume", volume);
 				}
@@ -416,7 +416,7 @@
 					let volume = previousVolume + 5;
 					if (previousVolume === 0) this.muted = false;
 					if (volume > 100) volume = 100;
-					$("#volumeSlider").val(volume);
+					$("#volumeSlider").val(volume * 100);
 					this.player.setVolume(volume);
 					localStorage.setItem("volume", volume);
 				}
@@ -451,7 +451,6 @@
 						_this.socket.emit('playlists.getFirstSong', _this.privatePlaylistQueueSelected, data => {
 							if (data.status === 'success') {
 							    if (data.song.duration < 15 * 60) {
-									console.log(data.song);
 									let songId = data.song._id;
 									_this.automaticallyRequestedSongId = data.song.songId;
 									_this.socket.emit('stations.addToQueue', _this.station._id, data.song.songId, data2 => {
@@ -691,7 +690,6 @@
 				});
 
 				_this.socket.on('event:newOfficialPlaylist', (playlist) => {
-					console.log(playlist);
 					if (this.type === 'official') {
 						this.songsList = playlist;
 					}
@@ -711,10 +709,10 @@
 			});
 
 
-			let volume = parseInt(localStorage.getItem("volume"));
+			let volume = parseFloat(localStorage.getItem("volume"));
 			volume = (typeof volume === "number" && !isNaN(volume)) ? volume : 20;
 			localStorage.setItem("volume", volume);
-			$("#volumeSlider").val(volume);
+			$("#volumeSlider").val(volume * 100);
 		},
 		components: {
 			OfficialHeader,

frontend/components/pages/Home.vue

@@ -171,8 +171,6 @@
 </script>
 
 <style lang='scss'>
-	@import 'theme.scss';
-
 	* { box-sizing: border-box; }
 
 	html {

frontend/main.js

@@ -4,28 +4,13 @@ import App from './App.vue';
 import auth from './auth';
 import io from './io';
 
-import NotFound from './components/404.vue';
-import Home from './components/pages/Home.vue';
-import Station from './components/Station/Station.vue';
-import Admin from './components/pages/Admin.vue';
-
-import News from './components/pages/News.vue';
-import About from './components/pages/About.vue';
-import Terms from './components/pages/Terms.vue';
-import Privacy from './components/pages/Privacy.vue';
-import Team from './components/pages/Team.vue';
-import User from './components/User/Show.vue';
-import Settings from './components/User/Settings.vue';
-import ResetPassword from './components/User/ResetPassword.vue';
-import Login from './components/Modals/Login.vue';
-import Register from './components/Modals/Register.vue';
-
 Vue.use(VueRouter);
 
 let router = new VueRouter({
 	history: true,
 	suppressTransitionError: true
 });
+
 let _this = this;
 
 lofig.folder = '../config/default.json';
@@ -42,8 +27,8 @@ lofig.get('serverDomain', function(res) {
 });
 
 document.onkeydown = event => {
-    event = event || window.event;
-    if (event.keyCode === 27) router.app.$dispatch('closeModal');
+	event = event || window.event;
+	if (event.keyCode === 27) router.app.$dispatch('closeModal');
 };
 
 router.beforeEach(transition => {
@@ -86,70 +71,71 @@ router.beforeEach(transition => {
 	}
 });
 
-router.afterEach((data) => {
+router.afterEach(data => {
 	ga('set', 'page', data.to.path);
 	ga('send', 'pageview');
 });
 
+
 router.map({
 	'/': {
-		component: Home
+		component: resolve => require(['./components/pages/Home.vue'], resolve)
 	},
 	'*': {
-		component: NotFound
+		component: resolve => require(['./components/404.vue'], resolve)
 	},
 	'404': {
-		component: NotFound
+		component: resolve => require(['./components/404.vue'], resolve)
 	},
 	'/terms': {
-		component: Terms
+		component: resolve => require(['./components/pages/Terms.vue'], resolve)
 	},
 	'/privacy': {
-		component: Privacy
+		component: resolve => require(['./components/pages/Privacy.vue'], resolve)
 	},
 	'/team': {
-		component: Team
+		component: resolve => require(['./components/pages/Team.vue'], resolve)
 	},
 	'/news': {
-		component: News
+		component: resolve => require(['./components/pages/News.vue'], resolve)
 	},
 	'/about': {
-		component: About
+		component: resolve => require(['./components/pages/About.vue'], resolve)
 	},
 	'/u/:username': {
-		component: User
+		component: resolve => require(['./components/User/Show.vue'], resolve),
 	},
 	'/settings': {
-		component: Settings,
+		component: resolve => require(['./components/User/Settings.vue'], resolve),
 		loginRequired: true
 	},
 	'/reset_password': {
-		component: ResetPassword
+		component: resolve => require(['./components/User/ResetPassword.vue'], resolve)
 	},
 	'/login': {
-		component: Login
+		component: resolve => require(['./components/Modals/Login.vue'], resolve)
 	},
 	'/register': {
-		component: Register
+		component: resolve => require(['./components/Modals/Register.vue'], resolve)
 	},
 	'/admin': {
-		component: Admin,
+		component: resolve => require(['./components/pages/Admin.vue'], resolve),
 		adminRequired: true
 	},
 	'/admin/:page': {
-		component: Admin,
+		component: resolve => require(['./components/pages/Admin.vue'], resolve),
 		adminRequired: true
 	},
 	'/official/:id': {
-		component: Station,
+		component: resolve => require(['./components/Station/Station.vue'], resolve),
 		officialRequired: true
 	},
 	'/:id': {
-		component: Station,
+		component: resolve => require(['./components/Station/Station.vue'], resolve),
 		officialRequired: true
 	},
 	'/community/:id': {
-		component: Station,
+		component: resolve => require(['./components/Station/Station.vue'], resolve),
 		communityRequired: true
 	}
 });

frontend/package.json

@@ -16,7 +16,6 @@
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.14.0",
     "babel-runtime": "^6.11.6",
-    "bulma": "^0.2.3",
     "css-loader": "^0.25.0",
     "eslint": "^3.4.0",
     "eslint-loader": "^1.5.0",
@@ -27,9 +26,9 @@
     "vue-html-loader": "^1.2.3",
     "vue-loader": "^8.5.2",
     "vue-style-loader": "^1.0.0",
-    "whatwg-fetch": "^0.11.1",
     "webpack": "^1.14.0",
-    "webpack-dev-server": "^1.15.1"
+    "webpack-dev-server": "^1.15.1",
+    "whatwg-fetch": "^0.11.1"
   },
   "dependencies": {
     "chart.js": "^2.5.0",

frontend/theme.scss

@@ -1,12 +0,0 @@
-// Change any Bulma default variables here
-$blue: #03A9F4;
-
-.is-primary {
-	background-color: $blue !important;
-}
-
-@import '~bulma';
-
-.center {
-  text-align: center;
-}

frontend/webpack.config.js

@@ -5,6 +5,7 @@ module.exports = {
 	entry: './main.js',
 	output: {
 		path: __dirname + '/build/',
+		publicPath: '/',
 		filename: 'bundle.js'
 	},
 	module: {
@@ -22,13 +23,13 @@ module.exports = {
 			},
 			{
 				test: /\.scss$/,
+				exclude: /node_modules/,
 				loader: 'css-loader!sass-loader'
 			}
 		]
 	},
 	vue: {
 		loaders: {
-			sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
 			scss: 'style-loader!css-loader!sass-loader'
 		}
 	}

windows-start.cmd

@@ -1,5 +1,5 @@
 start "Redis" "startRedis.cmd"
-start "Mongo" "startmongo.cmd"
+start "Mongo" "startMongo.cmd"
 cd frontend
 start "Frontend" npm run development-watch
 cd ..