Added Add Song to Queue button for song items in playlist modal

backend/logic/actions/stations.js

@@ -2441,7 +2441,12 @@ export default {
 			"settings",
 			"admin",
 			"auth",
-			"reset_password"
+			"reset_password",
+			"backend",
+			"api",
+			"songs",
+			"playlists",
+			"playlist"
 		];
 
 		async.waterfall(

frontend/src/App.vue

@@ -481,7 +481,8 @@ a {
 
 	.edit-icon,
 	.view-icon,
-	.add-to-playlist-icon {
+	.add-to-playlist-icon,
+	.add-to-queue-icon {
 		color: var(--primary-color);
 	}
 

frontend/src/components/SongItem.vue

@@ -96,7 +96,7 @@
 							class="material-icons add-to-playlist-icon"
 							content="Add Song to Playlist"
 							v-tippy
-							>queue</i
+							>playlist_add</i
 						>
 					</add-to-playlist-dropdown>
 					<i

frontend/src/components/modals/EditPlaylist.vue

@@ -250,10 +250,22 @@
 										}"
 									>
 										<div
-											v-if="isEditable()"
 											class="song-actions"
 											slot="actions"
 										>
+											<i
+												class="material-icons add-to-queue-icon"
+												v-if="
+													station.partyMode &&
+														!station.locked
+												"
+												@click="
+													addSongToQueue(song.songId)
+												"
+												content="Add Song to Queue"
+												v-tippy
+												>queue</i
+											>
 											<i
 												v-if="
 													userId ===
@@ -272,7 +284,7 @@
 											>
 											<i
 												class="material-icons"
-												v-if="index > 0"
+												v-if="isEditable() && index > 0"
 												@click="moveSongToTop(index)"
 												content="Move to top of Playlist"
 												v-tippy
@@ -280,9 +292,10 @@
 											>
 											<i
 												v-if="
-													playlist.songs.length -
-														1 !==
-														index
+													isEditable() &&
+														playlist.songs.length -
+															1 !==
+															index
 												"
 												@click="moveSongToBottom(index)"
 												class="material-icons"
@@ -366,6 +379,9 @@ export default {
 		};
 	},
 	computed: {
+		...mapState("station", {
+			station: state => state.station
+		}),
 		...mapState("user/playlists", {
 			editing: state => state.editing
 		}),
@@ -689,6 +705,26 @@ export default {
 				);
 			}
 		},
+		addSongToQueue(songId) {
+			this.socket.dispatch(
+				"stations.addToQueue",
+				this.station._id,
+				songId,
+				data => {
+					if (data.status !== "success")
+						new Toast({
+							content: `Error: ${data.message}`,
+							timeout: 8000
+						});
+					else {
+						new Toast({
+							content: `${data.message}`,
+							timeout: 4000
+						});
+					}
+				}
+			);
+		},
 		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
 };

frontend/src/pages/Station/index.vue

@@ -343,7 +343,7 @@
 													class="button is-primary"
 												>
 													<i class="material-icons"
-														>queue</i
+														>playlist_add</i
 													>
 												</button>
 												<button
@@ -1033,6 +1033,8 @@ export default {
 		shortcutNames.forEach(shortcutName => {
 			keyboardShortcuts.unregisterShortcut(shortcutName);
 		});
+
+		this.joinStation();
 	},
 	methods: {
 		isOwnerOnly() {