Browse Source

feat(EditStation_Modal): improved design and added playlist selection

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 4 năm trước cách đây
mục cha
commit
f1ff5ac2de

+ 14 - 1
frontend/App.vue

@@ -233,7 +233,11 @@ h6,
 	font-family: "Hind", Helvetica, Arial, sans-serif;
 }
 
-p {
+p,
+button,
+input,
+select,
+textarea {
 	font-family: "Karla", Helvetica, Arial, sans-serif;
 }
 
@@ -416,4 +420,13 @@ button.delete:focus {
 	margin-right: 3px;
 	font-size: 18px;
 }
+
+.modal-section-title {
+	font-size: 26px;
+	margin: 0px;
+}
+
+.modal-section-description {
+	margin-bottom: 5px;
+}
 </style>

+ 0 - 19
frontend/components/Modals/AddSongToQueue.vue

@@ -363,30 +363,11 @@ tr td {
 }
 
 .night-mode {
-	.modal-section {
-		color: #000;
-	}
-
 	div {
 		color: #4d4d4d;
 	}
 }
 
-.modal-section {
-	margin-top: 20px;
-	padding: 10px 20px;
-	background-color: #f5f5f5;
-}
-
-.modal-section-title {
-	font-size: 26px;
-	margin: 0px;
-}
-
-.modal-section-description {
-	margin-bottom: 5px;
-}
-
 #playlist-to-queue-selection {
 	margin-top: 0;
 

+ 112 - 8
frontend/components/Modals/EditStation.vue

@@ -1,6 +1,7 @@
 <template>
 	<modal title="Edit Station" class="edit-station-modal">
 		<template v-slot:body>
+			<!--  Station Preferences -->
 			<div class="section left-section">
 				<div class="col col-2">
 					<div>
@@ -153,7 +154,58 @@
 						</div>
 					</div>
 				</div>
+
+				<!--  Choose a playlist -->
+				<div v-if="!editing.partyMode">
+					<hr style="margin: 10px 0 20px 0;" />
+
+					<h4 class="modal-section-title">Choose a playlist</h4>
+					<p class="modal-section-description">
+						Choose one of your playlists to add to the queue.
+					</p>
+
+					<br />
+
+					<div id="playlists">
+						<div
+							class="playlist"
+							v-for="(playlist, index) in playlists"
+							:key="index"
+						>
+							<playlist-item :playlist="playlist">
+								<div slot="actions">
+									<!-- <a
+										class="button is-danger"
+										href="#"
+										@click="
+											togglePlaylistSelection(
+												playlist._id
+											)
+										"
+										v-if="isPlaylistSelected(playlist._id)"
+									>
+										<i
+											class="material-icons icon-with-button"
+											>stop</i
+										>
+										Stop playing
+									</a> -->
+									<a
+										class="button is-success"
+										href="#"
+										@click="selectPlaylist(playlist._id)"
+										><i
+											class="material-icons icon-with-button"
+											>play_arrow</i
+										>Play in queue
+									</a>
+								</div>
+							</playlist-item>
+						</div>
+					</div>
+				</div>
 			</div>
+
 			<!--  Buttons changing the privacy settings -->
 			<div class="section right-section">
 				<div>
@@ -341,7 +393,10 @@
 import { mapState, mapActions } from "vuex";
 
 import Toast from "toasters";
+
+import PlaylistItem from "../PlaylistItem.vue";
 import Modal from "./Modal.vue";
+
 import io from "../../io";
 import validation from "../../validation";
 
@@ -366,6 +421,22 @@ export default {
 	mounted() {
 		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);
+					}
+				});
+			});
+
 			return socket;
 		});
 	},
@@ -429,11 +500,33 @@ export default {
 					style: "orange",
 					iconName: "link"
 				}
-			}
+			},
+			playlists: []
 		};
 	},
 	props: ["store"],
 	methods: {
+		isPlaylistSelected(id) {
+			// TODO Also change this once it changes for a station
+			if (this.station && this.station.privatePlaylist === id)
+				return true;
+			return false;
+		},
+		selectPlaylist(playlistId) {
+			this.socket.emit(
+				"stations.selectPrivatePlaylist",
+				this.station._id,
+				playlistId,
+				res => {
+					if (res.status === "failure")
+						return new Toast({
+							content: res.message,
+							timeout: 8000
+						});
+					return new Toast({ content: res.message, timeout: 4000 });
+				}
+			);
+		},
 		update() {
 			if (this.station.name !== this.editing.name) this.updateName();
 			if (this.station.displayName !== this.editing.displayName)
@@ -867,7 +960,7 @@ export default {
 		},
 		...mapActions("modals", ["closeModal"])
 	},
-	components: { Modal }
+	components: { Modal, PlaylistItem }
 };
 </script>
 
@@ -902,7 +995,7 @@ export default {
 
 	.modal-card {
 		width: 800px;
-		height: 550px;
+		font-size: 16px;
 
 		.modal-card-body {
 			padding: 16px;
@@ -910,10 +1003,6 @@ export default {
 		}
 	}
 }
-</style>
-
-<style lang="scss" scoped>
-@import "styles/global.scss";
 
 .section {
 	border: 1px solid #a3e0ff;
@@ -931,6 +1020,7 @@ export default {
 	.control {
 		input {
 			width: 100%;
+			height: 36px;
 		}
 
 		.add-button {
@@ -1052,6 +1142,7 @@ export default {
 
 .right-section {
 	width: 157px;
+	min-height: 375px;
 	margin-left: 16px;
 	display: grid;
 	gap: 16px;
@@ -1066,7 +1157,7 @@ export default {
 		width: 100%;
 		height: 36px;
 		border: 0;
-		border-radius: 10px;
+		border-radius: 3px;
 		font-size: 18px;
 		color: white;
 		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
@@ -1129,4 +1220,17 @@ export default {
 .slide-down-enter {
 	transform: translateY(-10px);
 }
+
+#playlists {
+	height: 168px;
+	overflow: auto;
+}
+
+.modal-card {
+	overflow: auto;
+}
+
+.modal-card-body {
+	overflow: unset;
+}
 </style>

+ 35 - 30
frontend/components/Sidebars/Playlist.vue

@@ -6,23 +6,25 @@
 			<aside v-if="playlists.length > 0" class="menu">
 				<ul class="menu-list">
 					<li v-for="(playlist, index) in playlists" :key="index">
-						<span>{{ playlist.displayName }}</span>
-						<!--Will play playlist in community station Kris-->
-						<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>
+						<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>
@@ -45,6 +47,8 @@
 import { mapState, mapActions } from "vuex";
 
 import Toast from "toasters";
+import PlaylistItem from "../PlaylistItem.vue";
+
 import io from "../../io";
 
 export default {
@@ -90,23 +94,24 @@ export default {
 		...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.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) {

+ 2 - 2
frontend/components/Station/Station.vue

@@ -50,9 +50,9 @@
 							href="#"
 							class="no-song"
 							@click="
-								toggleSidebar({
+								openModal({
 									sector: 'station',
-									sidebar: 'playlist'
+									modal: 'editStation'
 								})
 							"
 							>Play a private playlist</a