Added station pausing and syncing. Lost initial 16h of work.

backend/logic/coreHandler.js

@@ -163,7 +163,9 @@ module.exports = {
 					displayName: station.getDisplayName(),
 					users: station.getUsers(),
 					currentSong: station.getCurrentSong(),
-					timePaused: 0
+					timePaused: station.getTimePaused(),
+					paused: station.isPaused(),
+					currentTime: Date.now()
 				}
 			});
 		}

backend/logic/global.js

@@ -5,6 +5,7 @@ class Timer {
 		this.callback = callback;
 		this.timerId = undefined;
 		this.start = undefined;
+		this.paused = paused;
 		this.remaining = delay * 1000;
 		this.timeWhenPaused = 0;
 		this.timePaused = Date.now();
@@ -18,6 +19,7 @@ class Timer {
 		clearTimeout(this.timerId);
 		this.remaining -= Date.now() - this.start;
 		this.timePaused = Date.now();
+		this.paused = true;
 	}
 
 	ifNotPaused() {
@@ -31,14 +33,19 @@ class Timer {
 		clearTimeout(this.timerId);
 		this.timerId = setTimeout(this.callback, this.remaining);
 		this.timeWhenPaused = Date.now() - this.timePaused;
+		this.paused = false;
 	}
 
 	resetTimeWhenPaused() {
 		this.timeWhenPaused = 0;
 	}
 
-	timeWhenPaused() {
-		return this.timeWhenPaused;
+	getTimePaused() {
+		if (!this.paused) {
+			return this.timeWhenPaused;
+		} else {
+			return Date.now() - this.timePaused;
+		}
 	}
 }
 

backend/logic/stations.js

@@ -8,8 +8,18 @@ module.exports = {
 	Station: class Station {
 		constructor(id, data) {
 			this.nsp = io.of(id);
+			let local = this;
 			this.nsp.on('connection', socket => {
 				console.log('someone connected');
+				socket.on("pause", function() {
+					local.pause();
+				});
+				socket.on("unpause", function() {
+					local.unPause();
+				});
+				socket.on("skipSong", function() {
+					local.skipSong();
+				});
 			});
 			this.id = id;
 
@@ -22,6 +32,7 @@ module.exports = {
 			this.users = [];
 			this.displayName = data.displayName;
 			this.description = data.description;
+			this.timePaused = 0;
 			this.timer = undefined;
 			this.skipSong();
 		}
@@ -40,6 +51,7 @@ module.exports = {
 				this.timer = new global.Timer(() => {
 					self.skipSong();
 				}, this.currentSong.duration, this.paused);
+				this.timePaused = 0;
 				this.currentSong.startedAt = Date.now();
 				this.nsp.emit("skippedSong", this.currentSong);
 			}
@@ -58,18 +70,21 @@ module.exports = {
 		}
 
 		pause() {
+			console.log("PAUSE");
 			if (!this.paused) {
 				this.paused = true;
 				this.timer.pause();
-				this.snp.emit("pause");
+				this.nsp.emit("pause");
 			}
 		}
 
 		unPause() {
+			console.log("UNPAUSE");
 			if (this.paused) {
 				this.paused = false;
 				this.timer.resume();
-				this.snp.emit("unpause");
+				this.timePaused += this.timer.getTimePaused();
+				this.nsp.emit("unpause", this.timePaused);
 			}
 		}
 
@@ -84,14 +99,14 @@ module.exports = {
 		lock() {
 			if (!this.locked) {
 				this.locked = true;
-				this.snp.emit("lock");
+				this.nsp.emit("lock");
 			}
 		}
 
 		unlock() {
 			if (this.locked) {
 				this.locked = false;
-				this.snp.emit("unlocked");
+				this.nsp.emit("unlocked");
 			}
 		}
 
@@ -102,13 +117,13 @@ module.exports = {
 		updateDisplayName(newDisplayName) {
 			// TODO: Update db
 			this.displayName = newDisplayName;
-			this.snp.emit("updateDisplayName", newDisplayName);
+			this.nsp.emit("updateDisplayName", newDisplayName);
 		}
 
 		updateDescription(newDescription) {
 			// TODO: Update db
 			this.description = newDescription;
-			this.snp.emit("updateDescription", newDescription);
+			this.nsp.emit("updateDescription", newDescription);
 		}
 
 		getId() {
@@ -125,17 +140,22 @@ module.exports = {
 
 		addUser(user) {
 			this.users.add(user);
-			this.snp.emit("updateUsers", this.users);
+			this.nsp.emit("updateUsers", this.users);
 		}
 
 		removeUser(user) {
 			this.users.splice(this.users.indexOf(user), 1);
-			this.snp.emit("updateUsers", this.users);
+			this.nsp.emit("updateUsers", this.users);
 		}
 
 		getUsers() {
 			return this.users;
 		}
+
+		getTimePaused() {
+			console.log(this.timePaused, "        ", this.timer.getTimePaused());
+			return this.timePaused + this.timer.getTimePaused();
+		}
 	},
 	addStation: station => {
 		stations.push(station);

frontend/components/pages/Station.vue

@@ -10,6 +10,8 @@
 			</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">
 						<h4 id="time-display">{{timeElapsed}} / {{songDuration}}</h4>
 						<h3>{{title}}</h3>
@@ -78,14 +80,15 @@
 							if (volume > 0) {
 								local.player.unMute();
 							}
-							if (!local.paused) {
-								local.playVideo();
-							}
+							local.playVideo();
 						},
 						'onStateChange': function (event) {
 							if (event.data === 1 && local.videoLoading === true) {
 								local.videoLoading = false;
 								local.player.seekTo(local.getTimeElapsed() / 1000, true);
+								if (local.paused) {
+									local.player.pauseVideo();
+								}
 							}
 						}
 					}
@@ -139,7 +142,7 @@
 					local.interval = setInterval(function () {
 						local.resizeSeekerbar();
 						local.calculateTimeElapsed();
-					}, 500);
+					}, 250);
 				}
 			},
 			resizeSeekerbar: function() {
@@ -150,14 +153,20 @@
 			},
 			calculateTimeElapsed: function() {
 				let local = this;
+				let currentTime = Date.now();
+				if (local.timePausedCurrentTime !== undefined && local.paused) {
+					local.timePaused += (Date.now() - local.timePausedCurrentTime);
+					local.timePausedCurrentTime = undefined;
+				}
 				let duration = (Date.now() - local.currentSong.startedAt - local.timePaused) / 1000;
 				let songDuration = local.currentSong.duration;
 				if (songDuration <= duration) {
 					local.player.pauseVideo();
 				}
 				let d = moment.duration(duration, 'seconds');
-				if (!local.paused) {
-					this.timeElapsed = d.minutes() + ":" + ("0" + d.seconds()).slice(-2);
+				console.log(duration, "    ", local.timePaused);
+				if ((!local.paused || local.timeElapsed === "0:00") && duration <= songDuration) {
+					local.timeElapsed = d.minutes() + ":" + ("0" + d.seconds()).slice(-2);
 				}
 			},
 			changeVolume: function() {
@@ -171,6 +180,16 @@
 					}
 				}
 			},
+			unpauseStation: function() {
+				console.log("UNPAUSE1");
+				let local = this;
+				local.stationSocket.emit("unpause");
+			},
+			pauseStation: function() {
+				console.log("PAUSE1");
+				let local = this;
+				local.stationSocket.emit("pause");
+			},
 			toggleLike: function() {
 				let local = this;
 				local.stationSocket.emit("toggleLike");//TODO Add code here to see if this was a success or not
@@ -189,9 +208,21 @@
 			let socket = this.$parent.socket;
 			local.stationSocket = io.connect('http://dev.musare.com/edm');
 			local.stationSocket.on("skippedSong", function(currentSong) {
+				console.log("SKIPPED SONG");
 				local.currentSong = currentSong;
+				local.timePaused = 0;
 				local.playVideo();
 			});
+			local.stationSocket.on("pause", function() {
+				console.log("PAUSE");
+				local.pauseVideo();
+			});
+			local.stationSocket.on("unpause", function(timePaused) {
+				console.log("UNPAUSE");
+				local.timePaused = timePaused;
+				local.unpauseVideo();
+			});
+
 
 			let volume = parseInt(localStorage.getItem("volume"));
 			volume = (typeof volume === "number") ? volume : 20;
@@ -200,6 +231,9 @@
 			// TODO: Remove this
 			socket.emit("/stations/join/:id", "edm", function(data) {
 				local.currentSong = data.data.currentSong;
+				local.paused = data.data.paused;
+				local.timePaused = data.data.timePaused;
+				local.timePausedCurrentTime  = data.data.currentTime;
 				let tag = document.createElement('script');
 
 				tag.src = "https://www.youtube.com/iframe_api";
@@ -329,6 +363,7 @@
 				left: 0;
 				width: 100%;
 				height: 100%;
+				pointer-events: none;
 			}
 		}
 		.video-col {