feat(Playlists_Sidebar): removed sidebar

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

frontend/components/Modals/EditStation.vue

@@ -436,6 +436,31 @@ export default {
 					}
 				});
 			});
+			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;
+					}
+				});
+			});
 
 			return socket;
 		});

frontend/components/Sidebars/Playlist.vue

@@ -1,212 +0,0 @@
-<template>
-	<div class="sidebar" transition="slide">
-		<div class="inner-wrapper">
-			<div class="sidebar-title">Playlists</div>
-
-			<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 slot="actions">
-								<div class="icons-group">
-									<a
-										v-if="
-											isNotSelected(playlist._id) &&
-												!station.partyMode
-										"
-										href="#"
-										@click="selectPlaylist(playlist._id)"
-									>
-										<i class="material-icons">play_arrow</i>
-									</a>
-									<a href="#" v-on:click="edit(playlist._id)">
-										<i class="material-icons">edit</i>
-									</a>
-								</div>
-							</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>
-	</div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-
-import Toast from "toasters";
-import PlaylistItem from "../PlaylistItem.vue";
-
-import io from "../../io";
-
-export default {
-	data() {
-		return {
-			playlists: []
-		};
-	},
-	computed: {
-		...mapState("modals", {
-			modals: state => state.modals.station
-		}),
-		...mapState({
-			station: state => state.station.station
-		})
-	},
-	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"])
-	},
-	components: { PlaylistItem },
-	mounted() {
-		// TODO: Update when playlist is removed/created
-		io.getSocket(socket => {
-			this.socket = socket;
-			// 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;
-					}
-				});
-			});
-		});
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import "styles/global.scss";
-
-.night-mode {
-	.sidebar {
-		background-color: $night-mode-secondary;
-
-		.sidebar-title {
-			color: #fff;
-		}
-
-		* {
-			color: #ddd;
-		}
-	}
-}
-
-.icons-group a {
-	display: flex;
-	align-items: center;
-}
-
-.menu-list li {
-	align-items: center;
-}
-
-.inner-wrapper {
-	position: relative;
-}
-
-.slide-transition {
-	transition: transform 0.6s ease-in-out;
-	transform: translateX(0);
-}
-
-.slide-enter,
-.slide-leave {
-	transform: translateX(100%);
-}
-
-.sidebar-title {
-	background-color: rgb(3, 169, 244);
-	text-align: center;
-	padding: 10px;
-	color: $white;
-	font-weight: 600;
-	font-size: 20px;
-}
-
-.create-playlist {
-	width: 100%;
-	margin-top: 20px;
-	height: 40px;
-	border-radius: 0;
-	background: rgba(3, 169, 244, 1);
-	color: $white !important;
-	border: 0;
-
-	&:active,
-	&:focus {
-		border: 0;
-	}
-}
-
-.create-playlist:focus {
-	background: $primary-color;
-}
-</style>

frontend/components/Station/Station.vue

@@ -425,9 +425,6 @@
 					<transition name="slide-inner">
 						<songs-list-sidebar v-if="sidebars.songslist" />
 					</transition>
-					<transition name="slide-inner">
-						<playlist-sidebar v-if="sidebars.playlist" />
-					</transition>
 					<transition name="slide-inner">
 						<users-sidebar v-if="sidebars.users" />
 					</transition>
@@ -1392,7 +1389,6 @@ export default {
 		EditStation: () => import("../Modals/EditStation.vue"),
 		Report: () => import("../Modals/Report.vue"),
 		SongsListSidebar: () => import("../Sidebars/SongsList.vue"),
-		PlaylistSidebar: () => import("../Sidebars/Playlist.vue"),
 		UsersSidebar: () => import("../Sidebars/UsersList.vue"),
 		UserIdToUsername,
 		Z404

frontend/components/Station/StationHeader.vue

@@ -198,22 +198,6 @@
 						>Display users in the station</span
 					>
 				</a>
-				<a
-					v-if="loggedIn && station.type === 'community'"
-					class="sidebar-item"
-					href="#"
-					@click="
-						toggleSidebar({
-							sector: 'station',
-							sidebar: 'playlist'
-						})
-					"
-				>
-					<span class="icon">
-						<i class="material-icons">library_music</i>
-					</span>
-					<span class="icon-purpose">Show your playlists</span>
-				</a>
 			</div>
 		</div>
 	</div>

frontend/store/modules/sidebars.js

@@ -4,8 +4,7 @@ const state = {
 	sidebars: {
 		station: {
 			songslist: false,
-			users: false,
-			playlist: false
+			users: false
 		}
 	},
 	currentlyActive: {}