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

<template>
	<div class="content playlists-tab">
		<create-playlist v-if="modals.createPlaylist" />

		<div v-if="playlists.length > 0">
			<h4 class="section-title">
				{{ myUserId === userId ? "My" : null }}
				Playlists
			</h4>

			<p class="section-description">
				View
				{{
					userId === myUserId
						? "and manage your personal"
						: `${username}'s`
				}}
				playlists.
			</p>

			<hr class="section-horizontal-rule" />

			<draggable
				class="menu-list scrollable-list"
				v-if="playlists.length > 0"
				v-model="playlists"
				v-bind="dragOptions"
				@start="drag = true"
				@end="drag = false"
				@change="savePlaylistOrder"
			>
				<transition-group
					type="transition"
					:name="!drag ? 'draggable-list-transition' : null"
				>
					<div
						:class="{
							item: true,
							'item-draggable': myUserId === userId
						}"
						v-for="playlist in playlists"
						:key="playlist._id"
					>
						<playlist-item
							v-if="
								playlist.privacy === 'public' ||
									(playlist.privacy === 'private' &&
										playlist.createdBy === userId)
							"
							:playlist="playlist"
						>
							<div slot="actions">
								<i
									v-if="myUserId === userId"
									@click="showPlaylist(playlist._id)"
									class="material-icons edit-icon"
									content="Edit Playlist"
									v-tippy
									>edit</i
								>
								<i
									v-else
									@click="showPlaylist(playlist._id)"
									class="material-icons view-icon"
									content="View Playlist"
									v-tippy
									>visibility</i
								>
							</div>
						</playlist-item>
					</div>
				</transition-group>
			</draggable>

			<button
				v-if="myUserId === userId"
				class="button is-primary"
				id="create-new-playlist-button"
				@click="openModal('createPlaylist')"
			>
				Create new playlist
			</button>
		</div>
		<div v-else>
			<h3>No playlists here.</h3>
		</div>
	</div>
</template>

<script>
import draggable from "vuedraggable";
import { mapActions, mapState, mapGetters } from "vuex";

import PlaylistItem from "@/components/PlaylistItem.vue";
import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
import ws from "@/ws";

export default {
	components: {
		PlaylistItem,
		draggable,
		CreatePlaylist: () => import("@/components/modals/CreatePlaylist.vue")
	},
	mixins: [SortablePlaylists],
	props: {
		userId: {
			type: String,
			default: ""
		},
		username: {
			type: String,
			default: ""
		}
	},
	computed: {
		...mapState({
			...mapState("modalVisibility", {
				modals: state => state.modals
			}),
			myUserId: state => state.user.auth.userId
		}),
		playlists: {
			get() {
				return this.$store.state.user.playlists.playlists;
			},
			set(playlists) {
				this.$store.commit("user/playlists/setPlaylists", playlists);
			}
		},
		...mapGetters({
			socket: "websockets/getSocket"
		})
	},
	mounted() {
		if (
			this.$route.query.tab === "recent-activity" ||
			this.$route.query.tab === "playlists"
		)
			this.tab = this.$route.query.tab;

		if (this.myUserId !== this.userId) {
			ws.onConnect(() =>
				this.socket.dispatch(
					"apis.joinRoom",
					`profile-${this.userId}-playlists`,
					() => {}
				)
			);
		}

		this.socket.dispatch("playlists.indexForUser", this.userId, res => {
			if (res.status === "success") this.setPlaylists(res.data.playlists);
			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
		});

		this.socket.on("event:playlist.create", res => {
			this.playlists.push(res.data.playlist);
		});

		this.socket.on("event:playlist.delete", res => {
			this.playlists.forEach((playlist, index) => {
				if (playlist._id === res.data.playlistId) {
					this.playlists.splice(index, 1);
				}
			});
		});

		this.socket.on("event:playlist.addSong", res => {
			this.playlists.forEach((playlist, index) => {
				if (playlist._id === res.data.playlistId) {
					this.playlists[index].songs.push(res.data.song);
				}
			});
		});

		this.socket.on("event:playlist.removeSong", res => {
			this.playlists.forEach((playlist, index) => {
				if (playlist._id === res.data.playlistId) {
					this.playlists[index].songs.forEach((song, index2) => {
						if (song.youtubeId === res.data.youtubeId) {
							this.playlists[index].songs.splice(index2, 1);
						}
					});
				}
			});
		});

		this.socket.on("event:playlist.updateDisplayName", res => {
			this.playlists.forEach((playlist, index) => {
				if (playlist._id === res.data.playlistId) {
					this.playlists[index].displayName = res.data.displayName;
				}
			});
		});

		this.socket.on("event:playlist.updatePrivacy", res => {
			this.playlists.forEach((playlist, index) => {
				if (playlist._id === res.data.playlist._id) {
					this.playlists[index].privacy = res.data.playlist.privacy;
				}
			});
		});

		this.socket.on("event:user.orderOfPlaylists.changed", res => {
			const sortedPlaylists = [];

			this.playlists.forEach(playlist => {
				sortedPlaylists[
					res.data.order.indexOf(playlist._id)
				] = playlist;
			});

			this.playlists = sortedPlaylists;
			this.orderOfPlaylists = this.calculatePlaylistOrder();
		});
	},
	methods: {
		showPlaylist(playlistId) {
			this.editPlaylist(playlistId);
			this.openModal("editPlaylist");
		},
		...mapActions("modalVisibility", ["openModal"]),
		...mapActions("user/playlists", ["editPlaylist", "setPlaylists"])
	}
};
</script>