feat(Station page): added tab for 'My Playlists', readded Playlists sidebar code

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

backend/logic/actions/playlists.js

@@ -15,12 +15,10 @@ import activities from "../activities";
 
 cache.runJob("SUB", {
 	channel: "playlist.create",
-	cb: playlistId => {
-		playlists.runJob("GET_PLAYLIST", { playlistId }).then(playlist => {
-			utils.runJob("SOCKETS_FROM_USER", { userId: playlist.createdBy }).then(response => {
-				response.sockets.forEach(socket => {
-					socket.emit("event:playlist.create", playlist);
-				});
+	cb: playlist => {
+		utils.runJob("SOCKETS_FROM_USER", { userId: playlist.createdBy }).then(response => {
+			response.sockets.forEach(socket => {
+				socket.emit("event:playlist.create", playlist);
 			});
 		});
 	}
@@ -232,20 +230,24 @@ const lib = {
 					);
 					return cb({ status: "failure", message: err });
 				}
+
 				cache.runJob("PUB", {
 					channel: "playlist.create",
-					value: playlist._id
+					value: playlist
 				});
+
 				activities.runJob("ADD_ACTIVITY", {
 					userId: session.userId,
 					activityType: "created_playlist",
 					payload: [playlist._id]
 				});
+
 				console.log(
 					"SUCCESS",
 					"PLAYLIST_CREATE",
 					`Successfully created private playlist for user "${session.userId}".`
 				);
+
 				return cb({
 					status: "success",
 					message: "Successfully created playlist",

frontend/src/components/modals/EditPlaylist.vue

@@ -362,7 +362,6 @@ export default {
 		},
 		removePlaylist() {
 			this.socket.emit("playlists.remove", this.playlist._id, res => {
-				console.log(123, res);
 				new Toast({ content: res.message, timeout: 3000 });
 				if (res.status === "success") {
 					this.closeModal({

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -0,0 +1,191 @@
+<template>
+	<div id="my-playlists">
+		<aside v-if="playlists.length > 0" class="menu">
+			<ul class="menu-list">
+				<li v-for="(playlist, index) in playlists" :key="index">
+					<playlist-item :playlist="playlist">
+						<div class="icons-group" slot="actions">
+							<button
+								v-if="
+									station.type === 'community' &&
+										isNotSelected(playlist._id) &&
+										!station.partyMode
+								"
+								class="button is-primary"
+								@click="selectPlaylist(playlist._id)"
+							>
+								<i class="material-icons">play_arrow</i>
+							</button>
+							<button
+								class="button is-primary"
+								@click="edit(playlist._id)"
+							>
+								<i class="material-icons">edit</i>
+							</button>
+						</div>
+					</playlist-item>
+				</li>
+			</ul>
+		</aside>
+
+		<div v-else class="has-text-centered">No Playlists found</div>
+
+		<a
+			class="button create-playlist"
+			href="#"
+			@click="openModal({ sector: 'station', modal: 'createPlaylist' })"
+			>Create Playlist</a
+		>
+	</div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import Toast from "toasters";
+import PlaylistItem from "../../../../components/ui/PlaylistItem.vue";
+import io from "../../../../io";
+
+export default {
+	components: { PlaylistItem },
+	data() {
+		return {
+			playlists: []
+		};
+	},
+	computed: {
+		...mapState("modals", {
+			modals: state => state.modals.station
+		}),
+		...mapState({
+			station: state => state.station.station
+		})
+	},
+	mounted() {
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			/** Get playlists for user */
+			this.socket.emit("playlists.indexForUser", res => {
+				if (res.status === "success") this.playlists = res.data;
+			});
+
+			this.socket.on("event:playlist.create", playlist => {
+				this.playlists.push(playlist);
+			});
+
+			this.socket.on("event:playlist.delete", playlistId => {
+				this.playlists.forEach((playlist, index) => {
+					if (playlist._id === playlistId) {
+						this.playlists.splice(index, 1);
+					}
+				});
+			});
+
+			this.socket.on("event:playlist.addSong", data => {
+				this.playlists.forEach((playlist, index) => {
+					if (playlist._id === data.playlistId) {
+						this.playlists[index].songs.push(data.song);
+					}
+				});
+			});
+
+			this.socket.on("event:playlist.removeSong", data => {
+				this.playlists.forEach((playlist, index) => {
+					if (playlist._id === data.playlistId) {
+						this.playlists[index].songs.forEach((song, index2) => {
+							if (song._id === data.songId) {
+								this.playlists[index].songs.splice(index2, 1);
+							}
+						});
+					}
+				});
+			});
+
+			this.socket.on("event:playlist.updateDisplayName", data => {
+				this.playlists.forEach((playlist, index) => {
+					if (playlist._id === data.playlistId) {
+						this.playlists[index].displayName = data.displayName;
+					}
+				});
+			});
+		});
+	},
+	methods: {
+		edit(id) {
+			this.editPlaylist(id);
+			this.openModal({ sector: "station", modal: "editPlaylist" });
+		},
+		selectPlaylist(id) {
+			this.socket.emit(
+				"stations.selectPrivatePlaylist",
+				this.station._id,
+				id,
+				res => {
+					if (res.status === "failure")
+						return new Toast({
+							content: res.message,
+							timeout: 8000
+						});
+					return new Toast({ content: res.message, timeout: 4000 });
+				}
+			);
+		},
+		isNotSelected(id) {
+			// TODO Also change this once it changes for a station
+			if (this.station && this.station.privatePlaylist === id)
+				return false;
+			return true;
+		},
+		...mapActions("modals", ["openModal"]),
+		...mapActions("user/playlists", ["editPlaylist"])
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../styles/global.scss";
+
+#my-playlists {
+	background-color: #fff;
+	border: 1px solid $light-grey-2;
+	margin-bottom: 20px;
+	padding: 10px;
+
+	.icons-group {
+		display: flex;
+		align-items: center;
+
+		button:not(:first-of-type) {
+			margin-left: 5px;
+		}
+	}
+}
+
+.night-mode {
+	#my-playlists {
+		background-color: #222 !important;
+		border: 0 !important;
+	}
+}
+
+.menu-list li {
+	align-items: center;
+}
+
+.create-playlist {
+	width: 100%;
+	height: 40px;
+	border-radius: 0;
+	background-color: rgba(3, 169, 244, 1);
+	color: $white !important;
+	border: 0;
+	&:active,
+	&:focus {
+		border: 0;
+	}
+
+	&:focus {
+		background-color: $primary-color;
+	}
+}
+</style>

frontend/src/pages/Station/components/Sidebar/Users/index.vue → frontend/src/pages/Station/components/Sidebar/Users.vue

@@ -28,7 +28,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../../../styles/global.scss";
+@import "../../../../styles/global.scss";
 
 .night-mode {
 	#users {

frontend/src/pages/Station/components/Sidebar/index.vue

@@ -15,9 +15,17 @@
 			>
 				Users
 			</button>
+			<button
+				class="button is-default"
+				:class="{ selected: tab === 'my-playlists' }"
+				@click="tab = 'my-playlists'"
+			>
+				My Playlists
+			</button>
 		</div>
 		<queue class="tab" v-if="tab === 'queue'" />
 		<users class="tab" v-if="tab === 'users'" />
+		<my-playlists class="tab" v-if="tab === 'my-playlists'" />
 	</div>
 </template>
 
@@ -25,10 +33,11 @@
 import { mapActions, mapState } from "vuex";
 
 import Queue from "./Queue/index.vue";
-import Users from "./Users/index.vue";
+import Users from "./Users.vue";
+import MyPlaylists from "./MyPlaylists.vue";
 
 export default {
-	components: { Queue, Users },
+	components: { Queue, Users, MyPlaylists },
 	data() {
 		return {
 			tab: "queue"
@@ -61,7 +70,7 @@ export default {
 		border: 0;
 		text-transform: uppercase;
 		font-size: 17px;
-		width: calc(50% - 2.5px);
+		width: calc(33.3% - 2.5px);
 		color: #222;
 		background-color: #ddd;
 

frontend/src/pages/Station/index.vue

@@ -1613,6 +1613,11 @@ export default {
 			margin-top: 20px;
 			height: 90%;
 
+			.player-container.nothing-here {
+				border: 1px solid $light-grey-2;
+				border-radius: 5px;
+			}
+
 			.player-container {
 				width: 1400px;
 				background-color: #fff;