Improved queue locking.

backend/logic/actions/stations.js

@@ -121,6 +121,10 @@ cache.sub('station.updateUserCount', stationId => {
 	})
 });
 
+cache.sub('station.queueLockToggled', data => {
+	utils.emitToRoom(`station.${data.stationId}`, "event:queueLockToggled", data.locked)
+});
+
 cache.sub('station.updatePartyMode', data => {
 	utils.emitToRoom(`station.${data.stationId}`, "event:partyMode.updated", data.partyMode);
 });
@@ -407,13 +411,16 @@ module.exports = {
 	 *
 	 * @param session
 	 * @param stationId - the station id
-	 * @param locked - the old locked status
 	 * @param cb
 	 */
-	toggleLock: hooks.adminRequired((session, stationId, oldLocked, cb) => {
+	toggleLock: hooks.ownerRequired((session, stationId, cb) => {
 		async.waterfall([
 			(next) => {
-				db.models.station.update({ _id: stationId }, { $set: { locked: !oldLocked } }, next);
+				stations.getStation(stationId, next);
+			},
+
+			(station, next) => {
+				db.models.station.update({ _id: stationId }, { $set: { locked: !station.locked} }, next);
 			},
 
 			(res, next) => {
@@ -422,11 +429,12 @@ module.exports = {
 		], (err, station) => {
 			if (err) {
 				err = utils.getError(err);
-				logger.error("STATIONS_UPDATE_LOCKED_STATUS", `Updating station "${stationId}" locked status to "${!oldLocked}" failed. "${err}"`);
+				logger.error("STATIONS_UPDATE_LOCKED_STATUS", `Toggling the queue lock for station "${stationId}" failed. "${err}"`);
 				return cb({ status: 'failure', message: err });
 			} else {
-				logger.success("STATIONS_UPDATE_LOCKED_STATUS", `Updated station "${stationId}" locked status to "${!oldLocked}" successfully.`);
-				return cb({ status: 'success', data: !oldLocked });
+				logger.success("STATIONS_UPDATE_LOCKED_STATUS", `Toggled the queue lock for station "${stationId}" successfully to "${station.locked}".`);
+				cache.pub('station.queueLockToggled', {stationId, locked: station.locked});
+				return cb({ status: 'success', data: station.locked });
 			}
 		});
 	}),

frontend/components/Modals/EditStation.vue

@@ -24,12 +24,22 @@
 						</select>
 					</span>
 				</p>
+				<br><br>
 				<p class='control'>
 					<label class="checkbox party-mode-inner">
 						<input type="checkbox" v-model="editing.partyMode">
 						&nbsp;Party mode
 					</label>
 				</p>
+				<small>With party mode enabled, people can add songs to a queue that plays. With party mode disabled you can play a private playlist on loop.</small><br>
+				<div v-if="$parent.station.partyMode">
+					<br>
+					<br>
+					<label class='label'>Queue lock</label>
+					<small v-if="$parent.station.partyMode">With the queue locked, only owners (you) can add songs to the queue.</small><br>
+					<button class='button is-danger' v-if='!$parent.station.locked' @click="$parent.toggleLock()">Lock the queue</button>
+					<button class='button is-success' v-if='$parent.station.locked' @click="$parent.toggleLock()">Unlock the queue</button>
+				</div>
 			</div>
 			<div slot='footer'>
 				<button class='button is-success' @click='update()'>Update Settings</button>

frontend/components/Sidebars/SongsList.vue

@@ -39,7 +39,11 @@
 					{{ $parent.$parent.formatTime(song.duration) }}
 				</div>
 			</article>
-			<a class='button add-to-queue' href='#' @click='$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue' v-if="$parent.type === 'community' && $parent.$parent.loggedIn">Add Song to Queue</a>
+			<div v-if="$parent.type === 'community' && $parent.$parent.loggedIn">
+				<button class='button add-to-queue' @click='$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue' v-if="($parent.station.locked && isOwnerOnly()) || !$parent.station.locked || ($parent.station.locked && isAdminOnly() && dismissedWarning)">Add Song to Queue</button>
+				<button class='button add-to-queue add-to-queue-warning' @click='dismissedWarning = true' v-if="$parent.station.locked && isAdminOnly() && !isOwnerOnly() && !dismissedWarning">THIS STATION'S QUEUE IS LOCKED.</button>
+				<button class='button add-to-queue add-to-queue-disabled' v-if="$parent.station.locked && !isAdminOnly() && !isOwnerOnly()">THIS STATION'S QUEUE IS LOCKED.</button>
+			</div>
 		</div>
 	</div>
 </template>
@@ -50,7 +54,15 @@
 	export default {
 		data: function () {
 			return {
-
+				dismissedWarning: false
+			}
+		},
+		methods: {
+			isOwnerOnly: function () {
+				return this.$parent.$parent.loggedIn && this.$parent.$parent.userId === this.$parent.station.owner;
+			},
+			isAdminOnly: function() {
+				return this.$parent.$parent.loggedIn && this.$parent.$parent.role === 'admin';
 			}
 		},
 		ready: function () {
@@ -119,6 +131,17 @@
 		border: 0;
 		&:active, &:focus { border: 0; }
 	}
+
+	.add-to-queue.add-to-queue-warning {
+		background-color: red;
+	}
+
+	.add-to-queue.add-to-queue-disabled {
+		background-color: gray;
+	}
+	.add-to-queue.add-to-queue-disabled:focus {
+		background-color: gray;
+	}
 	
 	.add-to-queue:focus { background: #029ce3; }
 

frontend/components/Station/CommunityHeader.vue

@@ -81,18 +81,6 @@
 					</span>
 					<span class="icon-purpose">Pause station</span>
 				</a>
-				<a class="sidebar-item" href="#" v-if='$parent.station.locked && $parent.$parent.role === "admin"' @click='$parent.toggleLock()'>
-					<span class='icon'>
-						<i class='material-icons'>lock_open</i>
-					</span>
-					<span class="icon-purpose">Unlock station queue</span>
-				</a>
-				<a class="sidebar-item" href="#" @click='$parent.toggleLock()' v-if='!$parent.station.locked && $parent.$parent.role === "admin"'>
-					<span class='icon'>
-						<i class='material-icons'>lock</i>
-					</span>
-					<span class="icon-purpose">Lock Station queue</span>
-				</a>
 				<hr>
 			</div>
 			<div v-if="$parent.$parent.loggedIn && !$parent.noSong">

frontend/components/Station/Station.vue

@@ -17,7 +17,7 @@
 	<div class='station' v-show="ready">
 		<div v-show="noSong" class="no-song">
 			<h1>No song is currently playing</h1>
-			<h4 v-if='type === "community" && station.partyMode'>
+			<h4 v-if='type === "community" && station.partyMode && (!station.locked || (station.locked && $parent.loggedIn && $parent.userId === station.owner))'>
 				<a href='#' class='no-song' @click='modals.addSongToQueue = true'>Add a song to the queue</a>
 			</h4>
 			<h4 v-if='type === "community" && !station.partyMode && $parent.userId === station.owner && !station.privatePlaylist'>
@@ -323,11 +323,10 @@
 			},
 			toggleLock: function () {
 				let _this = this;
-				socket.emit('stations.toggleLock', this.station._id, this.station.locked, res => {
-					console.log(res);
+				socket.emit('stations.toggleLock', this.station._id, res => {
 					if (res.status === 'success') {
-						_this.station.locked = res.data;
-					}
+						Toast.methods.addToast('Successfully toggled the queue lock.', 4000);
+					} else Toast.methods.addToast(res.message, 8000);
 				});
 			},
 			changeVolume: function() {
@@ -675,6 +674,10 @@
 				_this.socket.on('event:userCount.updated', userCount => {
 					_this.userCount = userCount;
 				});
+
+				_this.socket.on('event:queueLockToggled', locked => {
+					_this.station.locked = locked;
+				});
 			});