Removed playlist selection from EditStation and other tweaks

frontend/src/components/modals/EditStation.vue

@@ -160,57 +160,6 @@
 							</div>
 						</div>
 					</div>
-
-					<!--  Choose a playlist -->
-					<div
-						v-if="
-							station.type === 'community' &&
-								!station.partyMode &&
-								playlists.length > 0
-						"
-					>
-						<hr style="margin: 10px 0 20px 0" />
-
-						<h4 class="section-title">Choose a playlist</h4>
-						<p class="section-description">
-							Choose one of your playlists to add to the queue.
-						</p>
-
-						<br />
-
-						<div id="playlists">
-							<playlist-item
-								:playlist="playlist"
-								v-for="(playlist, index) in playlists"
-								:key="index"
-							>
-								<div slot="actions">
-									<a
-										class="button is-danger"
-										href="#"
-										@click="deselectPlaylist()"
-										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)"
-										v-else
-										><i
-											class="material-icons icon-with-button"
-											>play_arrow</i
-										>Play in queue
-									</a>
-								</div>
-							</playlist-item>
-						</div>
-					</div>
 				</div>
 
 				<!--  Buttons changing the privacy settings -->
@@ -479,14 +428,13 @@ import { mapState, mapActions } from "vuex";
 
 import Toast from "toasters";
 
-import PlaylistItem from "../ui/PlaylistItem.vue";
 import Modal from "../Modal.vue";
 
 import io from "../../io";
 import validation from "../../validation";
 
 export default {
-	components: { Modal, PlaylistItem },
+	components: { Modal },
 	props: {
 		stationId: { type: String, default: "" },
 		sector: { type: String, default: "admin" }
@@ -552,8 +500,7 @@ export default {
 					style: "orange",
 					iconName: "link"
 				}
-			},
-			playlists: []
+			}
 		};
 	},
 	computed: {
@@ -597,88 +544,10 @@ export default {
 				}
 			});
 
-			this.socket.emit("playlists.indexMyPlaylists", true, 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.songId === 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;
 		});
 	},
 	methods: {
-		isPlaylistSelected(id) {
-			// TODO Also change this once it changes for a station
-			if (
-				this.originalStation &&
-				this.originalStation.privatePlaylist === id
-			)
-				return true;
-			return false;
-		},
-		selectPlaylist(playlistId) {
-			this.socket.emit(
-				"stations.selectPrivatePlaylist",
-				this.originalStation._id,
-				playlistId,
-				res => {
-					if (res.status === "failure")
-						return new Toast({
-							content: res.message,
-							timeout: 8000
-						});
-					return new Toast({ content: res.message, timeout: 4000 });
-				}
-			);
-		},
-		deselectPlaylist() {
-			this.socket.emit(
-				"stations.deselectPrivatePlaylist",
-				this.originalStation._id,
-				res => {
-					if (res.status === "failure")
-						return new Toast({
-							content: res.message,
-							timeout: 8000
-						});
-					return new Toast({ content: res.message, timeout: 4000 });
-				}
-			);
-		},
 		update() {
 			if (this.originalStation.name !== this.station.name)
 				this.updateName();
@@ -1378,6 +1247,14 @@ export default {
 			background-color: $yellow;
 		}
 
+		&.purple {
+			background-color: $purple;
+		}
+
+		&.teal {
+			background-color: $teal;
+		}
+
 		i {
 			font-size: 20px;
 			margin-right: 4px;
@@ -1406,18 +1283,6 @@ export default {
 	transform: translateY(-10px);
 }
 
-#playlists {
-	overflow: auto;
-
-	.playlist:not(:last-of-type) {
-		margin-bottom: 10px;
-	}
-
-	.button {
-		width: 148px;
-	}
-}
-
 .modal-card {
 	overflow: auto;
 }

frontend/src/pages/Admin/ViewReport.vue

@@ -67,7 +67,7 @@
 			</a>
 			<a
 				class="button is-primary"
-				:href="`/admin/songs?songId=${report.song.songId}`"
+				:href="`/admin/songs?songId=${report.song._id}`"
 				target="_blank"
 			>
 				<span>Go to song</span>

frontend/src/pages/Admin/tabs/Songs.vue

@@ -329,15 +329,19 @@ export default {
 		});
 
 		if (this.$route.query.songId) {
-			this.socket.emit("songs.getSong", this.$route.query.songId, res => {
-				if (res.status === "success") {
-					this.edit(res.data.song);
-				} else
-					new Toast({
-						content: "Song with that ID not found",
-						timeout: 3000
-					});
-			});
+			this.socket.emit(
+				"songs.getSongFromMusareId",
+				this.$route.query.songId,
+				res => {
+					if (res.status === "success") {
+						this.edit(res.data.song);
+					} else
+						new Toast({
+							content: "Song with that ID not found",
+							timeout: 3000
+						});
+				}
+			);
 		}
 	},
 	methods: {

frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -123,8 +123,7 @@ export default {
 
 	.thumbnail {
 		min-width: 130px;
-		max-height: 130px;
-		height: 100%;
+		height: 130px;
 		position: relative;
 		margin-top: -15px;
 		margin-bottom: -15px;

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -12,10 +12,15 @@
 					:style="
 						song.artists.length < 1 ? { fontSize: '16px' } : null
 					"
+					:title="song.title"
 				>
 					{{ song.title }}
 				</h4>
-				<h5 id="song-artists" v-if="song.artists">
+				<h5
+					id="song-artists"
+					v-if="song.artists"
+					:title="song.artists.join(', ')"
+				>
 					{{ song.artists.join(", ") }}
 				</h5>
 				<p

frontend/src/pages/Station/index.vue

@@ -1932,7 +1932,7 @@ export default {
 	justify-content: center;
 }
 
-@media (max-width: 1300px) {
+@media (max-width: 950px) {
 	#station-outer-container {
 		padding: 10px;
 		height: unset;