feat(home feed): merged official and community stations

frontend/components/Admin/Stations.vue

@@ -22,7 +22,7 @@
 							<span>
 								<router-link
 									:to="{
-										name: station.type,
+										name: 'station',
 										params: { id: station.name }
 									}"
 								>

frontend/components/pages/Home.vue

@@ -5,60 +5,7 @@
 			<div class="content-wrapper">
 				<div class="group">
 					<div class="group-title">
-						Official Stations
-					</div>
-					<router-link
-						v-for="(station, index) in stations.official"
-						:key="index"
-						class="card station-card"
-						:to="{ name: 'official', params: { id: station.name } }"
-						:class="{ isPrivate: station.privacy === 'private' }"
-					>
-						<div class="card-image">
-							<figure class="image is-square">
-								<img
-									:src="station.currentSong.thumbnail"
-									onerror="this.src='/assets/notes-transparent.png'"
-								/>
-							</figure>
-						</div>
-						<div class="card-content">
-							<div class="media">
-								<div class="media-left displayName">
-									<h5>{{ station.displayName }}</h5>
-								</div>
-							</div>
-
-							<div class="content">
-								{{ station.description }}
-							</div>
-
-							<div class="under-content">
-								<span class="official"
-									><i class="badge material-icons"
-										>verified_user</i
-									>Official</span
-								>
-								<i
-									v-if="station.privacy !== 'public'"
-									class="material-icons right-icon"
-									title="This station is not visible to other users."
-									>lock</i
-								>
-							</div>
-						</div>
-						<router-link
-							class="absolute-a"
-							:to="{
-								name: 'official',
-								params: { id: station.name }
-							}"
-						/>
-					</router-link>
-				</div>
-				<div class="group">
-					<div class="group-title">
-						Community Stations&nbsp;
+						Stations&nbsp;
 						<a
 							v-if="loggedIn"
 							href="#"
@@ -75,10 +22,10 @@
 						</a>
 					</div>
 					<router-link
-						v-for="(station, index) in stations.community"
+						v-for="(station, index) in filteredStations"
 						:key="index"
 						:to="{
-							name: 'community',
+							name: 'station',
 							params: { id: station.name }
 						}"
 						class="card station-card"
@@ -98,7 +45,14 @@
 						<div class="card-content">
 							<div class="media">
 								<div class="media-left displayName">
-									<h5>{{ station.displayName }}</h5>
+									<h5>
+										{{ station.displayName }}
+										<i
+											v-if="station.type === 'official'"
+											class="badge material-icons"
+											>verified_user</i
+										>
+									</h5>
 								</div>
 							</div>
 
@@ -109,7 +63,13 @@
 								<span class="hostedby"
 									>Hosted by
 									<span class="host">
+										<span
+											v-if="station.type === 'official'"
+											title="Musare"
+											>Musare</span
+										>
 										<user-id-to-username
+											v-else
 											:userId="station.owner"
 											:link="true"
 										/>
@@ -122,7 +82,10 @@
 									>lock</i
 								>
 								<i
-									v-if="isOwner(station)"
+									v-if="
+										station.type === 'community' &&
+											isOwner(station)
+									"
 									class="material-icons right-icon"
 									title="This is your station."
 									>home</i
@@ -132,7 +95,7 @@
 						<router-link
 							class="absolute-a"
 							:to="{
-								name: 'community',
+								name: 'station',
 								params: { id: station.name }
 							}"
 						/>
@@ -161,17 +124,25 @@ export default {
 			recaptcha: {
 				key: ""
 			},
-			stations: {
-				official: [],
-				community: []
-			}
+			stations: [],
+			searchQuery: ""
 		};
 	},
-	computed: mapState({
-		modals: state => state.modals.modals.home,
-		loggedIn: state => state.user.auth.loggedIn,
-		userId: state => state.user.auth.userId
-	}),
+	computed: {
+		filteredStations() {
+			return this.stations.filter(
+				station =>
+					JSON.stringify(Object.values(station)).indexOf(
+						this.searchQuery
+					) !== -1
+			);
+		},
+		...mapState({
+			modals: state => state.modals.modals.home,
+			loggedIn: state => state.user.auth.loggedIn,
+			userId: state => state.user.auth.userId
+		})
+	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
@@ -189,19 +160,12 @@ export default {
 				if (station.currentSong && !station.currentSong.thumbnail)
 					station.currentSong.thumbnail =
 						"/assets/notes-transparent.png";
-				this.stations[station.type].push(station);
+				this.stations.push(station);
 			});
 			this.socket.on(
 				"event:userCount.updated",
 				(stationId, userCount) => {
-					this.stations.official.forEach(s => {
-						const station = s;
-						if (station._id === stationId) {
-							station.userCount = userCount;
-						}
-					});
-
-					this.stations.community.forEach(s => {
+					this.stations.forEach(s => {
 						const station = s;
 						if (station._id === stationId) {
 							station.userCount = userCount;
@@ -211,20 +175,7 @@ export default {
 			);
 			this.socket.on("event:station.nextSong", (stationId, song) => {
 				let newSong = song;
-				this.stations.official.forEach(s => {
-					const station = s;
-					if (station._id === stationId) {
-						if (!newSong)
-							newSong = {
-								thumbnail: "/assets/notes-transparent.png"
-							};
-						if (newSong && !newSong.thumbnail)
-							newSong.thumbnail = "/assets/notes-transparent.png";
-						station.currentSong = newSong;
-					}
-				});
-
-				this.stations.community.forEach(s => {
+				this.stations.forEach(s => {
 					const station = s;
 					if (station._id === stationId) {
 						if (!newSong)
@@ -242,8 +193,7 @@ export default {
 	methods: {
 		init() {
 			this.socket.emit("stations.index", data => {
-				this.stations.community = [];
-				this.stations.official = [];
+				this.stations = [];
 				if (data.status === "success")
 					data.stations.forEach(s => {
 						const station = s;
@@ -257,9 +207,7 @@ export default {
 						)
 							station.currentSong.thumbnail =
 								"/assets/notes-transparent.png";
-						if (station.type === "official")
-							this.stations.official.push(station);
-						else this.stations.community.push(station);
+						this.stations.push(station);
 					});
 			});
 			this.socket.emit("apis.joinRoom", "home", () => {});
@@ -341,13 +289,6 @@ html {
 		color: $primary-color;
 		position: relative;
 		top: -5px;
-
-		.badge {
-			position: relative;
-			padding-right: 2px;
-			color: $green;
-			top: +5px;
-		}
 	}
 
 	.hostedby {
@@ -494,5 +435,12 @@ html {
 	-webkit-line-clamp: 1;
 	line-height: 30px;
 	max-height: 30px;
+
+	.badge {
+		position: relative;
+		padding-right: 2px;
+		color: $green;
+		top: +5px;
+	}
 }
 </style>

frontend/main.js

@@ -82,21 +82,9 @@ const router = new VueRouter({
 			}
 		},
 		{
-			name: "official",
-			path: "/official/:id",
-			alias: "/:id",
-			component: () => import("./components/Station/Station.vue"),
-			meta: {
-				officialStation: true
-			}
-		},
-		{
-			name: "community",
-			path: "/community/:id",
-			component: () => import("./components/Station/Station.vue"),
-			meta: {
-				communityStation: true
-			}
+			name: "station",
+			path: "/:id",
+			component: () => import("./components/Station/Station.vue")
 		}
 	]
 });
@@ -150,29 +138,15 @@ router.beforeEach((to, from, next) => {
 		}
 	} else next();
 
-	if (from.name === "community" || from.name === "official") {
+	if (from.name === "station") {
 		document.title = "Musare";
 	}
 
-	if (to.meta.officialStation) {
-		io.getSocket(socket => {
-			socket.emit("stations.findByName", to.params.id, res => {
-				if (res.status === "success") {
-					if (res.data.type === "community")
-						next({ path: `/community/${to.params.id}` });
-					else next();
-				}
-			});
-		});
-	}
-
-	if (to.meta.communityStation) {
+	if (to.name === "station") {
 		io.getSocket(socket => {
 			socket.emit("stations.findByName", to.params.id, res => {
 				if (res.status === "success") {
-					if (res.data.type === "official")
-						next({ path: `/official/${to.params.id}` });
-					else next();
+					next();
 				}
 			});
 		});