fix(Station): skip votes and own song ratings would sometimes not load correctly

backend/logic/actions/stations.js

@@ -3950,5 +3950,55 @@ export default {
 				return cb({ status: "success", message: "Successfully cleared and refilled station queue." });
 			}
 		);
+	}),
+
+	/**
+	 * Gets skip votes for a station
+	 *
+	 * @param session
+	 * @param stationId - the station id
+	 * @param cb
+	 */
+
+	getSkipVotes: isLoginRequired(async function getSkipVotes(session, stationId, cb) {
+		async.waterfall(
+			[
+				next => {
+					StationsModule.runJob("GET_STATION", { stationId }, this)
+						.then(res => next(null, res.currentSong))
+						.catch(console.log);
+				},
+
+				(currentSong, next) => {
+					if (currentSong)
+						next(null, {
+							skipVotes: currentSong.skipVotes.length,
+							songId: currentSong._id
+						});
+					else next("There is no song currently playing.");
+				}
+			],
+			async (err, data) => {
+				if (err) {
+					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
+					this.log(
+						"ERROR",
+						"STATIONS_GET_SKIP_VOTES",
+						`User "${session.userId}" failed to get skip votes for ${stationId}. "${err}"`
+					);
+					return cb({ status: "error", message: err });
+				}
+
+				const { skipVotes, songId } = data;
+
+				return cb({
+					status: "success",
+					data: {
+						skipVotes,
+						songId
+					}
+				});
+			}
+		);
 	})
 };

frontend/src/pages/Station/index.vue

@@ -345,7 +345,7 @@
 									<button
 										v-else
 										class="button is-primary disabled"
-										content="Login to vote to skip songs"
+										content="Log in to vote to skip songs"
 										v-tippy="{ theme: 'info' }"
 									>
 										<i
@@ -403,10 +403,10 @@
 									<!-- Ratings (Like/Dislike) Buttons -->
 									<div
 										id="ratings"
-										v-if="ratingsLoaded"
+										v-if="ratingsLoaded && ownRatingsLoaded"
 										:class="{
-											liked: liked,
-											disliked: disliked
+											liked: currentSong.liked,
+											disliked: currentSong.disliked
 										}"
 									>
 										<!-- Like Song Button -->
@@ -419,7 +419,9 @@
 										>
 											<i
 												class="material-icons icon-with-button"
-												:class="{ liked: liked }"
+												:class="{
+													liked: currentSong.liked
+												}"
 												>thumb_up_alt</i
 											>{{ currentSong.likes }}
 										</button>
@@ -435,7 +437,8 @@
 											<i
 												class="material-icons icon-with-button"
 												:class="{
-													disliked: disliked
+													disliked:
+														currentSong.disliked
 												}"
 												>thumb_down_alt</i
 											>{{ currentSong.dislikes }}
@@ -516,7 +519,7 @@
 										<button
 											class="button is-success disabled"
 											id="like-song"
-											content="Login to like songs"
+											content="Log in to like songs"
 											v-tippy="{ theme: 'info' }"
 										>
 											<i
@@ -529,7 +532,7 @@
 										<button
 											class="button is-danger disabled"
 											id="dislike-song"
-											content="Login to dislike songs"
+											content="Log in to dislike songs"
 											v-tippy="{ theme: 'info' }"
 										>
 											<i
@@ -570,7 +573,7 @@
 										<div class="control has-addons">
 											<button
 												class="button is-primary disabled"
-												content="Login to add songs to playlist"
+												content="Log in to add songs to playlist"
 												v-tippy="{ theme: 'info' }"
 											>
 												<i class="material-icons"
@@ -674,6 +677,29 @@
 				<span
 					><b>Party playlists selected</b>: {{ partyPlaylists }}</span
 				>
+				<span><b>Skip votes loaded</b>: {{ skipVotesLoaded }}</span>
+				<span
+					><b>Skip votes</b>:
+					{{ skipVotesLoaded ? currentSong.skipVotes : "N/A" }}</span
+				>
+				<span><b>Ratings loaded</b>: {{ ratingsLoaded }}</span>
+				<span
+					><b>Ratings</b>:
+					{{
+						ratingsLoaded
+							? `${currentSong.likes} / ${currentSong.dislikes}`
+							: "N/A"
+					}}</span
+				>
+				<span><b>Own ratings loaded</b>: {{ ownRatingsLoaded }}</span>
+				<span
+					><b>Own ratings</b>:
+					{{
+						ownRatingsLoaded
+							? `${currentSong.liked} / ${currentSong.disliked}`
+							: "N/A"
+					}}</span
+				>
 			</template>
 		</floating-box>
 
@@ -744,8 +770,6 @@ export default {
 			timePaused: 0,
 			muted: false,
 			timeElapsed: "0:00",
-			liked: false,
-			disliked: false,
 			timeBeforePause: 0,
 			systemDifference: 0,
 			attemptsToPlayVideo: 0,
@@ -784,6 +808,13 @@ export default {
 				this.currentSong.dislikes >= 0
 			);
 		},
+		ownRatingsLoaded() {
+			return (
+				!this.noSong &&
+				typeof this.currentSong.liked === "boolean" &&
+				typeof this.currentSong.disliked === "boolean"
+			);
+		},
 		...mapState("modalVisibility", {
 			modals: state => state.modals
 		}),
@@ -966,8 +997,7 @@ export default {
 		this.socket.on("event:song.ratings.updated", res => {
 			if (!this.noSong) {
 				if (res.data.youtubeId === this.currentSong.youtubeId) {
-					this.liked = res.data.liked;
-					this.disliked = res.data.disliked;
+					this.updateOwnCurrentSongRatings(res.data);
 				}
 			}
 		});
@@ -1269,6 +1299,18 @@ export default {
 					}, this.getTimeRemaining());
 				}
 
+				this.socket.dispatch(
+					"stations.getSkipVotes",
+					this.station._id,
+					res => {
+						if (res.status === "success") {
+							const { skipVotes, songId } = res.data;
+							if (!this.noSong && this.currentSong._id === songId)
+								this.updateCurrentSongSkipVotes(skipVotes);
+						}
+					}
+				);
+
 				this.socket.dispatch(
 					"songs.getSongRatings",
 					currentSong._id,
@@ -1280,29 +1322,32 @@ export default {
 					}
 				);
 
-				this.socket.dispatch(
-					"songs.getOwnSongRatings",
-					currentSong.youtubeId,
-					res => {
-						if (
-							res.status === "success" &&
-							this.currentSong.youtubeId === res.data.youtubeId
-						) {
-							this.liked = res.data.liked;
-							this.disliked = res.data.disliked;
-
+				if (this.loggedIn) {
+					this.socket.dispatch(
+						"songs.getOwnSongRatings",
+						currentSong.youtubeId,
+						res => {
+							console.log("getOwnSongRatings", res);
 							if (
-								this.autoSkipDisliked &&
-								res.data.disliked === true
+								res.status === "success" &&
+								this.currentSong.youtubeId ===
+									res.data.youtubeId
 							) {
-								this.voteSkipStation();
-								new Toast(
-									"Automatically voted to skip disliked song."
-								);
+								this.updateOwnCurrentSongRatings(res.data);
+
+								if (
+									this.autoSkipDisliked &&
+									res.data.disliked === true
+								) {
+									this.voteSkipStation();
+									new Toast(
+										"Automatically voted to skip disliked song."
+									);
+								}
 							}
 						}
-					}
-				);
+					);
+				}
 			} else {
 				if (this.playerReady) this.player.pauseVideo();
 				this.updateNoSong(true);
@@ -1711,7 +1756,7 @@ export default {
 			}
 		},
 		toggleLike() {
-			if (this.liked)
+			if (this.currentSong.liked)
 				this.socket.dispatch(
 					"songs.unlike",
 					this.currentSong.youtubeId,
@@ -1731,7 +1776,7 @@ export default {
 				);
 		},
 		toggleDislike() {
-			if (this.disliked)
+			if (this.currentSong.disliked)
 				return this.socket.dispatch(
 					"songs.undislike",
 					this.currentSong.youtubeId,
@@ -2117,6 +2162,7 @@ export default {
 			"setIncludedPlaylists",
 			"setExcludedPlaylists",
 			"updateCurrentSongRatings",
+			"updateOwnCurrentSongRatings",
 			"updateCurrentSongSkipVotes"
 		]),
 		...mapActions("modals/editSong", ["stopVideo"])

frontend/src/store/modules/station.js

@@ -73,6 +73,9 @@ const actions = {
 	updateCurrentSongRatings: ({ commit }, songRatings) => {
 		commit("updateCurrentSongRatings", songRatings);
 	},
+	updateOwnCurrentSongRatings: ({ commit }, ownSongRatings) => {
+		commit("updateOwnCurrentSongRatings", ownSongRatings);
+	},
 	updateCurrentSongSkipVotes: ({ commit }, skipVotes) => {
 		commit("updateCurrentSongSkipVotes", skipVotes);
 	}
@@ -160,6 +163,10 @@ const mutations = {
 		state.currentSong.likes = songRatings.likes;
 		state.currentSong.dislikes = songRatings.dislikes;
 	},
+	updateOwnCurrentSongRatings(state, ownSongRatings) {
+		state.currentSong.liked = ownSongRatings.liked;
+		state.currentSong.disliked = ownSongRatings.disliked;
+	},
 	updateCurrentSongSkipVotes(state, skipVotes) {
 		state.currentSong.skipVotes = skipVotes;
 	}