feat(Activities): added links to playlist modal and station page for relevant activity items

Signed-off-by: Jonathan <theflametrooper@gmail.com>

backend/logic/actions/stations.js

@@ -522,7 +522,7 @@ export default {
 	},
 
 	/**
-	 * Verifies that a station exists
+	 * Verifies that a station exists from its name
 	 *
 	 * @param {object} session - user session
 	 * @param {string} stationName - the station name
@@ -533,25 +533,14 @@ export default {
 			[
 				next => {
 					StationsModule.runJob("GET_STATION_BY_NAME", { stationName }, this)
-						.then(station => {
-							next(null, station);
-						})
+						.then(station => next(null, station))
 						.catch(next);
 				},
 
 				(station, next) => {
 					if (!station) return next(null, false);
-					return StationsModule.runJob(
-						"CAN_USER_VIEW_STATION",
-						{
-							station,
-							userId: session.userId
-						},
-						this
-					)
-						.then(exists => {
-							next(null, exists);
-						})
+					return StationsModule.runJob("CAN_USER_VIEW_STATION", { station, userId: session.userId }, this)
+						.then(exists => next(null, exists))
 						.catch(next);
 				}
 			],
@@ -565,11 +554,58 @@ export default {
 					);
 					return cb({ status: "failure", message: err });
 				}
+
 				this.log(
 					"SUCCESS",
 					"STATION_EXISTS_BY_NAME",
 					`Station "${stationName}" exists successfully.` /* , false */
 				);
+
+				return cb({ status: "success", exists });
+			}
+		);
+	},
+
+	/**
+	 * Verifies that a station exists from its id
+	 *
+	 * @param {object} session - user session
+	 * @param {string} stationId - the station id
+	 * @param {Function} cb - callback
+	 */
+	existsById(session, stationId, cb) {
+		async.waterfall(
+			[
+				next => {
+					StationsModule.runJob("GET_STATION", { stationId }, this)
+						.then(station => next(null, station))
+						.catch(next);
+				},
+
+				(station, next) => {
+					if (!station) return next(null, false);
+					return StationsModule.runJob("CAN_USER_VIEW_STATION", { station, userId: session.userId }, this)
+						.then(exists => next(null, exists))
+						.catch(next);
+				}
+			],
+			async (err, exists) => {
+				if (err) {
+					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
+					this.log(
+						"ERROR",
+						"STATION_EXISTS_BY_ID",
+						`Checking if station "${stationId}" exists failed. "${err}"`
+					);
+					return cb({ status: "failure", message: err });
+				}
+
+				this.log(
+					"SUCCESS",
+					"STATION_EXISTS_BY_ID",
+					`Station "${stationId}" exists successfully.` /* , false */
+				);
+
 				return cb({ status: "success", exists });
 			}
 		);
@@ -662,30 +698,26 @@ export default {
 	 * Joins the station by its name
 	 *
 	 * @param {object} session - user session
-	 * @param {string} stationName - the station name
+	 * @param {string} stationIdentifier - the station name or station id
 	 * @param {Function} cb - callback
 	 */
-	join(session, stationName, cb) {
+	join(session, stationIdentifier, cb) {
 		async.waterfall(
 			[
 				next => {
-					StationsModule.runJob("GET_STATION_BY_NAME", { stationName }, this)
-						.then(station => {
-							next(null, station);
-						})
-						.catch(next);
+					StationsModule.runJob("GET_STATION_BY_NAME", { stationName: stationIdentifier }, this)
+						.then(station => next(null, station))
+						.catch(() =>
+							// station identifier may be using stationid instead
+							StationsModule.runJob("GET_STATION", { stationId: stationIdentifier }, this)
+								.then(station => next(null, station))
+								.catch(next)
+						);
 				},
 
 				(station, next) => {
 					if (!station) return next("Station not found.");
-					return StationsModule.runJob(
-						"CAN_USER_VIEW_STATION",
-						{
-							station,
-							userId: session.userId
-						},
-						this
-					)
+					return StationsModule.runJob("CAN_USER_VIEW_STATION", { station, userId: session.userId }, this)
 						.then(canView => {
 							if (!canView) next("Not allowed to join station.");
 							else next(null, station);
@@ -787,7 +819,7 @@ export default {
 			async (err, data) => {
 				if (err) {
 					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
-					this.log("ERROR", "STATIONS_JOIN", `Joining station "${stationName}" failed. "${err}"`);
+					this.log("ERROR", "STATIONS_JOIN", `Joining station "${stationIdentifier}" failed. "${err}"`);
 					return cb({ status: "failure", message: err });
 				}
 				this.log("SUCCESS", "STATIONS_JOIN", `Joined station "${data._id}" successfully.`);

backend/logic/stations.js

@@ -431,17 +431,8 @@ class _StationsModule extends CoreClass {
 			async.waterfall(
 				[
 					next => {
-						CacheModule.runJob(
-							"HGET",
-							{
-								table: "stations",
-								key: payload.stationId
-							},
-							this
-						)
-							.then(station => {
-								next(null, station);
-							})
+						CacheModule.runJob("HGET", { table: "stations", key: payload.stationId }, this)
+							.then(station => next(null, station))
 							.catch(next);
 					},
 

frontend/src/components/ui/ActivityItem.vue

@@ -4,16 +4,16 @@
 			<img
 				v-if="activity.payload.thumbnail"
 				:src="activity.payload.thumbnail"
-				:alt="formattedMessage()"
+				:alt="textOnlyMessage"
 			/>
 			<i class="material-icons activity-type-icon">{{ getIcon() }}</i>
 		</div>
 		<div class="left-part">
-			<p
+			<component
 				class="item-title"
-				v-html="formattedMessage()"
-				:title="formattedMessage()"
-			></p>
+				:title="textOnlyMessage"
+				:is="formattedMessage"
+			/>
 			<p class="item-description">
 				{{
 					formatDistance(parseISO(activity.createdAt), new Date(), {
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
 import { formatDistance, parseISO } from "date-fns";
 
 export default {
@@ -38,35 +39,60 @@ export default {
 			default: () => {}
 		}
 	},
-	methods: {
+	computed: {
 		formattedMessage() {
-			// const { songId, playlistId, stationId } = this.activity.payload;
-
-			// console.log(stationId);
-
-			// if (songId) {
-			// 	return this.activity.payload.message.replace(
-			// 		/<songId>(.*)<\/songId>/g,
-			// 		"$1"
-			// 	);
-			// }
-
-			// if (playlistId) {
-			// 	return this.activity.payload.message.replace(
-			// 		/<playlistId>(.*)<\/playlistId>/g,
-			// 		"$1"
-			// 	);
-			// }
-
-			// if (stationId) {
-			// 	return this.activity.payload.message.replace(
-			// 		/<stationId>(.*)<\/stationId>/g,
-			// 		"$1"
-			// 	);
-			// }
-
-			return this.activity.payload.message;
+			const { songId, playlistId, stationId } = this.activity.payload;
+			let { message } = this.activity.payload;
+
+			if (songId) {
+				message = message.replace(/<songId>(.*)<\/songId>/g, "$1");
+			}
+
+			if (playlistId) {
+				message = message.replace(
+					/<playlistId>(.*)<\/playlistId>/g,
+					`<a href='#' class='activity-item-link' @click='showPlaylist("${playlistId}")'>$1</a>`
+				);
+			}
+
+			if (stationId) {
+				message = message.replace(
+					/<stationId>(.*)<\/stationId>/g,
+					`<router-link class='activity-item-link' :to="{ name: 'station', params: { id: '${stationId}' } }">$1</router-link>`
+				);
+			}
+
+			return {
+				template: `<p>${message}</p>`,
+				methods: { showPlaylist: this.showPlaylist }
+			};
 		},
+		textOnlyMessage() {
+			const { songId, playlistId, stationId } = this.activity.payload;
+			let { message } = this.activity.payload;
+
+			if (songId) {
+				message = message.replace(/<songId>(.*)<\/songId>/g, "$1");
+			}
+
+			if (playlistId) {
+				message = message.replace(
+					/<playlistId>(.*)<\/playlistId>/g,
+					`$1`
+				);
+			}
+
+			if (stationId) {
+				message = message.replace(
+					/<stationId>(.*)<\/stationId>/g,
+					`$1`
+				);
+			}
+
+			return message;
+		}
+	},
+	methods: {
 		getIcon() {
 			const icons = {
 				/** User */
@@ -107,12 +133,28 @@ export default {
 
 			return icons[this.activity.type];
 		},
+		showPlaylist(playlistId) {
+			this.editPlaylist(playlistId);
+			this.openModal({ sector: "station", modal: "editPlaylist" });
+		},
+		...mapActions("user/playlists", ["editPlaylist"]),
 		formatDistance,
-		parseISO
+		parseISO,
+		...mapActions("modalVisibility", ["openModal"])
 	}
 };
 </script>
 
+<style lang="scss">
+.activity-item-link {
+	color: var(--primary-color) !important;
+
+	&:hover {
+		border-color: #dbdbdb !important;
+	}
+}
+</style>
+
 <style lang="scss" scoped>
 .activity-item {
 	height: 72px;

frontend/src/pages/Profile/index.vue

@@ -1,5 +1,7 @@
 <template>
 	<div v-if="isUser">
+		<edit-playlist v-if="modals.editPlaylist" />
+
 		<metadata :title="`Profile | ${user.username}`" />
 		<main-header />
 		<div class="container">
@@ -102,7 +104,9 @@ export default {
 		MainFooter,
 		ProfilePicture,
 		RecentActivity,
-		Playlists
+		Playlists,
+		EditPlaylist: () =>
+			import("../../components/modals/EditPlaylist/index.vue")
 	},
 	mixins: [TabQueryHandler],
 	data() {
@@ -116,7 +120,10 @@ export default {
 	computed: {
 		...mapState({
 			role: state => state.user.auth.role,
-			myUserId: state => state.user.auth.userId
+			myUserId: state => state.user.auth.userId,
+			...mapState("modalVisibility", {
+				modals: state => state.modals.station
+			})
 		})
 	},
 	mounted() {

frontend/src/pages/Profile/tabs/Playlists.vue

@@ -1,6 +1,5 @@
 <template>
 	<div class="content playlists-tab">
-		<edit-playlist v-if="modals.editPlaylist" />
 		<create-playlist v-if="modals.createPlaylist" />
 
 		<div v-if="playlists.length > 0">
@@ -100,9 +99,7 @@ export default {
 		PlaylistItem,
 		draggable,
 		CreatePlaylist: () =>
-			import("../../../components/modals/CreatePlaylist.vue"),
-		EditPlaylist: () =>
-			import("../../../components/modals/EditPlaylist/index.vue")
+			import("../../../components/modals/CreatePlaylist.vue")
 	},
 	mixins: [SortablePlaylists],
 	props: {

frontend/src/pages/Station/index.vue

@@ -590,7 +590,7 @@ export default {
 			return new Date().getTime() + this.systemDifference;
 		};
 
-		this.stationName = this.$route.params.id;
+		this.stationIdentifier = this.$route.params.id;
 
 		window.stationInterval = 0;
 
@@ -600,12 +600,25 @@ export default {
 			if (this.socket.connected) this.join();
 			io.onConnect(this.join);
 
-			this.socket.emit("stations.existsByName", this.stationName, res => {
-				if (res.status === "failure" || !res.exists) {
-					this.loading = false;
-					this.exists = false;
+			this.socket.emit(
+				"stations.existsByName",
+				this.stationIdentifier,
+				res => {
+					if (res.status === "failure" || !res.exists) {
+						// station identifier may be using stationid instead
+						this.socket.emit(
+							"stations.existsById",
+							this.stationIdentifier,
+							res => {
+								if (res.status === "failure" || !res.exists) {
+									this.loading = false;
+									this.exists = false;
+								}
+							}
+						);
+					}
 				}
-			});
+			);
 
 			this.socket.on("event:songs.next", data => {
 				const previousSong = this.currentSong.songId
@@ -1416,7 +1429,7 @@ export default {
 			this.$refs.playerDebugBox.resetBox();
 		},
 		join() {
-			this.socket.emit("stations.join", this.stationName, res => {
+			this.socket.emit("stations.join", this.stationIdentifier, res => {
 				if (res.status === "success") {
 					setTimeout(() => {
 						this.loading = false;
@@ -1425,6 +1438,7 @@ export default {
 					const {
 						_id,
 						displayName,
+						name,
 						description,
 						privacy,
 						locked,
@@ -1440,7 +1454,7 @@ export default {
 
 					this.joinStation({
 						_id,
-						name: this.stationName,
+						name,
 						displayName,
 						description,
 						privacy,