Added local pause/resume button on station page

frontend/src/pages/Station/StationHeader.vue

@@ -77,7 +77,7 @@
 						<span class="icon-purpose">Skip current song</span>
 					</a>
 					<a
-						v-if="paused"
+						v-if="stationPaused"
 						class="sidebar-item"
 						href="#"
 						@click="$parent.resumeStation()"
@@ -88,7 +88,7 @@
 						<span class="icon-purpose">Resume station</span>
 					</a>
 					<a
-						v-if="!paused"
+						v-if="!stationPaused"
 						class="sidebar-item"
 						href="#"
 						@click="$parent.pauseStation()"
@@ -100,6 +100,28 @@
 					</a>
 					<hr />
 				</div>
+				<a
+					v-if="localPaused"
+					class="sidebar-item"
+					href="#"
+					@click="$parent.resumeLocalStation()"
+				>
+					<span class="icon">
+						<i class="material-icons">play_arrow</i>
+					</span>
+					<span class="icon-purpose">Resume station ;pca;</span>
+				</a>
+				<a
+					v-if="!localPaused"
+					class="sidebar-item"
+					href="#"
+					@click="$parent.pauseLocalStation()"
+				>
+					<span class="icon">
+						<i class="material-icons">pause</i>
+					</span>
+					<span class="icon-purpose">Pause station local</span>
+				</a>
 				<div v-if="loggedIn">
 					<a
 						v-if="station.type === 'official'"
@@ -225,7 +247,8 @@ export default {
 		username: state => state.user.auth.username,
 		role: state => state.user.auth.role,
 		station: state => state.station.station,
-		paused: state => state.station.paused,
+		stationPaused: state => state.station.stationPaused,
+		localPaused: state => state.station.localPaused,
 		noSong: state => state.station.noSong,
 		currentSong: state => state.station.currentSong
 	}),

frontend/src/pages/Station/index.vue

@@ -486,7 +486,8 @@ export default {
 			station: state => state.station,
 			currentSong: state => state.currentSong,
 			songsList: state => state.songsList,
-			paused: state => state.paused,
+			stationPaused: state => state.stationPaused,
+			localPaused: state => state.localPaused,
 			noSong: state => state.noSong,
 			privatePlaylistQueueSelected: state =>
 				state.privatePlaylistQueueSelected
@@ -576,10 +577,11 @@ export default {
 										this.currentSong.skipDuration,
 									true
 								);
-								if (this.paused) this.player.pauseVideo();
+								if (this.localPaused || this.stationPaused)
+									this.player.pauseVideo();
 							} else if (
 								event.data === window.YT.PlayerState.PLAYING &&
-								this.paused
+								(this.localPaused || this.stationPaused)
 							) {
 								this.player.seekTo(
 									this.timeBeforePause / 1000,
@@ -594,7 +596,8 @@ export default {
 							}
 							if (
 								event.data === window.YT.PlayerState.PAUSED &&
-								!this.paused &&
+								!this.localPaused &&
+								!this.stationPaused &&
 								!this.noSong &&
 								this.player.getDuration() / 1000 <
 									this.currentSong.duration
@@ -614,7 +617,8 @@ export default {
 		getTimeElapsed() {
 			if (this.currentSong) {
 				let { timePaused } = this;
-				if (this.paused) timePaused += Date.currently() - this.pausedAt;
+				if (this.stationPaused)
+					timePaused += Date.currently() - this.pausedAt;
 				return Date.currently() - this.startedAt - timePaused;
 			}
 			return 0;
@@ -636,7 +640,7 @@ export default {
 			}
 		},
 		resizeSeekerbar() {
-			if (!this.paused) {
+			if (!this.stationPaused) {
 				document.getElementsByClassName(
 					"seeker-bar"
 				)[0].style.width = `${parseFloat(
@@ -672,7 +676,7 @@ export default {
 				}
 			}
 
-			if (!this.paused) {
+			if (!this.stationPaused && !this.localPaused) {
 				const timeElapsed = this.getTimeElapsed();
 				const currentPlayerTime =
 					Math.max(
@@ -737,14 +741,15 @@ export default {
 			} */
 
 			let { timePaused } = this;
-			if (this.paused) timePaused += Date.currently() - this.pausedAt;
+			if (this.stationPaused)
+				timePaused += Date.currently() - this.pausedAt;
 
 			const duration =
 				(Date.currently() - this.startedAt - timePaused) / 1000;
 
 			const songDuration = this.currentSong.duration;
 			if (songDuration <= duration) this.player.pauseVideo();
-			if (!this.paused && duration <= songDuration)
+			if (!this.stationPaused && duration <= songDuration)
 				this.timeElapsed = utils.formatTime(duration);
 		},
 		toggleLock() {
@@ -770,7 +775,14 @@ export default {
 			}
 		},
 		resumeLocalStation() {
-			this.updatePaused(false);
+			this.updateLocalPaused(false);
+			if (!this.stationPaused) this.resumeLocalPlayer();
+		},
+		pauseLocalStation() {
+			this.updateLocalPaused(true);
+			this.pauseLocalPlayer();
+		},
+		resumeLocalPlayer() {
 			if (!this.noSong) {
 				if (this.playerReady) {
 					this.player.seekTo(
@@ -781,8 +793,7 @@ export default {
 				}
 			}
 		},
-		pauseLocalStation() {
-			this.updatePaused(true);
+		pauseLocalPlayer() {
 			if (!this.noSong) {
 				this.timeBeforePause = this.getTimeElapsed();
 				if (this.playerReady) this.player.pauseVideo();
@@ -1041,7 +1052,7 @@ export default {
 						currentSong.artists = currentSong.artists.join(", ");
 					this.updateCurrentSong(currentSong);
 					this.startedAt = res.data.startedAt;
-					this.updatePaused(res.data.paused);
+					this.updateStationPaused(res.data.paused);
 					this.timePaused = res.data.timePaused;
 					this.updateUserCount(res.data.userCount);
 					this.updateUsers(res.data.users);
@@ -1081,7 +1092,8 @@ export default {
 								shift: false,
 								ctrl: true,
 								handler: () => {
-									if (this.paused) this.resumeStation();
+									if (this.stationPaused)
+										this.resumeStation();
 									else this.pauseStation();
 								}
 							}
@@ -1188,7 +1200,8 @@ export default {
 			"updateCurrentSong",
 			"updatePreviousSong",
 			"updateSongsList",
-			"updatePaused",
+			"updateStationPaused",
+			"updateLocalPaused",
 			"updateNoSong"
 		])
 	},
@@ -1222,7 +1235,7 @@ export default {
 					data.currentSong ? data.currentSong : {}
 				);
 				this.startedAt = data.startedAt;
-				this.updatePaused(data.paused);
+				this.updateStationPaused(data.paused);
 				this.timePaused = data.timePaused;
 				if (data.currentSong) {
 					this.updateNoSong(false);
@@ -1264,12 +1277,14 @@ export default {
 
 			this.socket.on("event:stations.pause", data => {
 				this.pausedAt = data.pausedAt;
-				this.pauseLocalStation();
+				this.updateStationPaused(true);
+				this.pauseLocalPlayer();
 			});
 
 			this.socket.on("event:stations.resume", data => {
 				this.timePaused = data.timePaused;
-				this.resumeLocalStation();
+				this.updateStationPaused(false);
+				if (!this.localPaused) this.resumeLocalPlayer();
 			});
 
 			this.socket.on("event:stations.remove", () => {

frontend/src/store/modules/station.js

@@ -9,7 +9,8 @@ const state = {
 	currentSong: {},
 	previousSong: null,
 	songsList: [],
-	paused: true,
+	stationPaused: true,
+	localPaused: false,
 	noSong: true
 };
 
@@ -37,8 +38,11 @@ const actions = {
 	updateSongsList: ({ commit }, songsList) => {
 		commit("updateSongsList", songsList);
 	},
-	updatePaused: ({ commit }, paused) => {
-		commit("updatePaused", paused);
+	updateStationPaused: ({ commit }, stationPaused) => {
+		commit("updateStationPaused", stationPaused);
+	},
+	updateLocalPaused: ({ commit }, localPaused) => {
+		commit("updateLocalPaused", localPaused);
 	},
 	updateNoSong: ({ commit }, noSong) => {
 		commit("updateNoSong", noSong);
@@ -77,8 +81,11 @@ const mutations = {
 	updateSongsList(state, songsList) {
 		state.songsList = songsList;
 	},
-	updatePaused(state, paused) {
-		state.paused = paused;
+	updateStationPaused(state, stationPaused) {
+		state.stationPaused = stationPaused;
+	},
+	updateLocalPaused(state, localPaused) {
+		state.localPaused = localPaused;
 	},
 	updateNoSong(state, noSong) {
 		state.noSong = noSong;