Merge remote-tracking branch 'upstream/polishing' into kris

backend/index.js

@@ -412,6 +412,18 @@ class ModuleManager {
 			console.error.apply(null, _arguments);
 		}
 	}
+
+	/**
+	 * Locks down all modules
+	 */
+	_lockdown() {
+		this.lockdown = true;
+		Object.keys(this.modules).every(moduleKey => {
+			const module = this.modules[moduleKey];
+			module.setStatus("LOCKDOWN");
+			return true;
+		});
+	}
 }
 
 const moduleManager = new ModuleManager();

backend/logic/actions/playlists.js

@@ -899,11 +899,12 @@ export default {
 					)
 						.then(response => {
 							const { song } = response;
-							const { _id, title, thumbnail, duration, status } = song;
+							const { _id, title, artists, thumbnail, duration, status } = song;
 							next(null, {
 								_id,
 								youtubeId,
 								title,
+								artists,
 								thumbnail,
 								duration,
 								status

backend/logic/actions/reports.js

@@ -144,22 +144,22 @@ export default {
 						.exec(next);
 				},
 
-				(reports, next) => {
-					const data = [];
-					for (let i = 0; i < reports.length; i += 1) {
-						data.push(reports[i]._id);
+				(_reports, next) => {
+					const reports = [];
+					for (let i = 0; i < _reports.length; i += 1) {
+						data.push(_reports[i]._id);
 					}
-					next(null, data);
+					next(null, reports);
 				}
 			],
-			async (err, data) => {
+			async (err, reports) => {
 				if (err) {
 					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
 					this.log("ERROR", "GET_REPORTS_FOR_SONG", `Indexing reports for song "${songId}" failed. "${err}"`);
 					return cb({ status: "error", message: err });
 				}
 				this.log("SUCCESS", "GET_REPORTS_FOR_SONG", `Indexing reports for song "${songId}" successful.`);
-				return cb({ status: "success", data });
+				return cb({ status: "success", data: { reports } });
 			}
 		);
 	}),

backend/logic/ws.js

@@ -467,7 +467,11 @@ class _WSModule extends CoreClass {
 
 						return CacheModule.runJob(
 							"HSET",
-							{ table: "sessions", key: SID, value: session },
+							{
+								table: "sessions",
+								key: SID,
+								value: session
+							},
 							this
 						).then(session => next(null, session));
 					},

backend/package-lock.json

@@ -26,7 +26,7 @@
         "retry-axios": "^2.4.0",
         "sha256": "^0.2.0",
         "underscore": "^1.12.1",
-        "ws": "^7.4.3"
+        "ws": "^7.4.6"
       },
       "devDependencies": {
         "eslint": "^7.16.0",
@@ -3480,9 +3480,9 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "node_modules/ws": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.3.tgz",
-      "integrity": "sha512-hr6vCR76GsossIRsr8OLR9acVVm1jyfEWvhbNjtgPOrfvAlKzvyeg/P6r8RuDjRyrcQoPQT7K0DGEPc7Ae6jzA==",
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
       "engines": {
         "node": ">=8.3.0"
       },
@@ -6316,9 +6316,9 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "ws": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.3.tgz",
-      "integrity": "sha512-hr6vCR76GsossIRsr8OLR9acVVm1jyfEWvhbNjtgPOrfvAlKzvyeg/P6r8RuDjRyrcQoPQT7K0DGEPc7Ae6jzA==",
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
       "requires": {}
     },
     "yallist": {

backend/package.json

@@ -32,7 +32,7 @@
     "retry-axios": "^2.4.0",
     "sha256": "^0.2.0",
     "underscore": "^1.12.1",
-    "ws": "^7.4.3"
+    "ws": "^7.4.6"
   },
   "devDependencies": {
     "eslint": "^7.16.0",

frontend/dist/config/template.json

@@ -22,6 +22,7 @@
 	"messages": {
 		"accountRemoval": "Your account will be deactivated instantly and your data will shortly be deleted by an admin."
 	},
+	"manageStationVersion": "kris or owen",
 	"skipConfigVersionCheck": false,
 	"configVersion": 4
 }

frontend/package-lock.json

@@ -3847,15 +3847,27 @@
       }
     },
     "browserslist": {
-      "version": "4.16.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
-      "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
+      "version": "4.16.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
       "requires": {
-        "caniuse-lite": "^1.0.30001181",
-        "colorette": "^1.2.1",
-        "electron-to-chromium": "^1.3.649",
+        "caniuse-lite": "^1.0.30001219",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.723",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.70"
+        "node-releases": "^1.1.71"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30001230",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
+          "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ=="
+        },
+        "electron-to-chromium": {
+          "version": "1.3.738",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.738.tgz",
+          "integrity": "sha512-vCMf4gDOpEylPSLPLSwAEsz+R3ShP02Y3cAKMZvTqule3XcPp7tgc/0ESI7IS6ZeyBlGClE50N53fIOkcIVnpw=="
+        }
       }
     },
     "buffer-from": {
@@ -3948,11 +3960,6 @@
         }
       }
     },
-    "caniuse-lite": {
-      "version": "1.0.30001204",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz",
-      "integrity": "sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ=="
-    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -5207,9 +5214,9 @@
       "dev": true
     },
     "dns-packet": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
-      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
+      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
       "dev": true,
       "requires": {
         "ip": "^1.1.0",
@@ -5322,11 +5329,6 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
       "dev": true
     },
-    "electron-to-chromium": {
-      "version": "1.3.693",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.693.tgz",
-      "integrity": "sha512-vUdsE8yyeu30RecppQtI+XTz2++LWLVEIYmzeCaCRLSdtKZ2eXqdJcrs85KwLiPOPVc6PELgWyXBsfqIvzGZag=="
-    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",

frontend/src/App.vue

@@ -2,7 +2,11 @@
 	<div class="upper-container">
 		<banned v-if="banned" />
 		<div v-else class="upper-container">
-			<router-view :key="$route.fullPath" class="main-container" />
+			<router-view
+				:key="$route.fullPath"
+				class="main-container"
+				:class="{ 'main-container-modal-active': aModalIsOpen }"
+			/>
 			<what-is-new v-show="modals.whatIsNew" />
 			<login-modal v-if="modals.login" />
 			<register-modal v-if="modals.register" />
@@ -47,7 +51,10 @@ export default {
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
-		})
+		}),
+		aModalIsOpen() {
+			return Object.keys(this.currentlyActive).length > 0;
+		}
 	},
 	watch: {
 		socketConnected(connected) {
@@ -324,6 +331,11 @@ textarea {
 	}
 }
 
+.main-container.main-container-modal-active {
+	height: 100% !important;
+	overflow: hidden;
+}
+
 a {
 	color: var(--primary-color);
 	text-decoration: none;

frontend/src/components/Modal.vue

@@ -89,25 +89,18 @@ p {
 }
 
 .modal-card-foot {
-	*:not(:last-child) {
-		margin-right: 10px;
-	}
+	overflow: auto;
 
 	& > div {
 		display: flex;
 		flex-grow: 1;
-		div:not(:first-of-type) {
-			margin-left: 10px;
-		}
+		column-gap: 16px;
 	}
 
 	.right {
 		margin-left: auto;
 		justify-content: flex-end;
-
-		*:not(:last-child) {
-			margin-right: 5px;
-		}
+		column-gap: 16px;
 	}
 }
 </style>

frontend/src/components/PlaylistItem.vue

@@ -1,6 +1,9 @@
 <template>
 	<div class="playlist-item universal-item">
-		<div class="left-part">
+		<slot name="item-icon">
+			<span></span>
+		</slot>
+		<div class="item-title-description">
 			<p class="item-title">
 				{{ playlist.displayName }}
 				<i
@@ -22,9 +25,9 @@
 					/>
 					•</span
 				>
-				{{ totalLength(playlist) }} •
-				{{ playlist.songs.length }}
-				{{ playlist.songs.length === 1 ? "song" : "songs" }}
+				<span :title="playlistLength">
+					{{ playlistLength }}
+				</span>
 			</p>
 		</div>
 		<div class="universal-item-actions">
@@ -48,6 +51,13 @@ export default {
 			utils
 		};
 	},
+	computed: {
+		playlistLength() {
+			return `${this.totalLength(this.playlist)} • ${
+				this.playlist.songs.length
+			} ${this.playlist.songs.length === 1 ? "song" : "songs"}`;
+		}
+	},
 	methods: {
 		totalLength(playlist) {
 			let length = 0;
@@ -75,28 +85,31 @@ export default {
 .playlist-item {
 	width: 100%;
 	height: 72px;
+	column-gap: 7.5px;
 
-	.item-title {
-		color: var(--dark-grey-2);
-		font-size: 20px;
-		line-height: 23px;
-		margin-bottom: 0;
-		display: flex;
-		align-items: center;
+	.item-title-description {
+		flex: 1;
+		overflow: hidden;
 
-		.private-playlist-icon {
-			color: var(--dark-pink);
-			font-size: 18px;
-			margin-left: 5px;
-		}
-	}
+		.item-title {
+			color: var(--dark-grey-2);
+			font-size: 20px;
+			line-height: 23px;
+			margin-bottom: 0;
+			display: flex;
+			align-items: center;
 
-	.left-part {
-		flex: 1;
-		padding: 12px;
+			.private-playlist-icon {
+				color: var(--dark-pink);
+				font-size: 18px;
+				margin-left: 5px;
+			}
+		}
 	}
 
 	.universal-item-actions {
+		margin-left: none;
+
 		div {
 			display: flex;
 			align-items: center;
@@ -107,10 +120,6 @@ export default {
 				width: 100%;
 				font-size: 17px;
 				height: 36px;
-
-				&:not(:last-of-type) {
-					margin-right: 5px;
-				}
 			}
 		}
 	}

frontend/src/components/ProfilePicture.vue

@@ -8,7 +8,7 @@
 		onerror="this.src='/assets/notes.png'; this.onerror=''"
 	/>
 	<div class="profile-picture using-initials" :class="avatar.color" v-else>
-		{{ initials }}
+		<span>{{ initials }}</span>
 	</div>
 </template>
 
@@ -32,6 +32,8 @@ export default {
 	computed: {
 		initials() {
 			return this.name
+				.replaceAll(/[^A-Za-z ]+/g, "")
+				.replaceAll(/ +/g, " ")
 				.split(" ")
 				.map(word => word.charAt(0))
 				.splice(0, 2)
@@ -60,9 +62,13 @@ export default {
 		background-color: #ddd;
 		font-family: "Inter", sans-serif;
 		font-weight: 400;
-		font-size: 50px;
 		user-select: none;
 		-webkit-user-select: none;
+
+		span {
+			font-size: 40px; // 2/5th of .profile-picture height/width
+		}
+
 		&.blue {
 			background-color: var(--primary-color);
 			color: var(--white);

frontend/src/components/modals/EditPlaylist/Tabs/Settings.vue

@@ -0,0 +1,137 @@
+<template>
+	<div class="settings-tab section">
+		<div v-if="isEditable()">
+			<h4 class="section-title">Edit Details</h4>
+
+			<p class="section-description">
+				Change the display name and privacy of the playlist.
+			</p>
+
+			<hr class="section-horizontal-rule" />
+
+			<label class="label"> Change display name </label>
+
+			<div class="control is-grouped input-with-button">
+				<p class="control is-expanded">
+					<input
+						v-model="playlist.displayName"
+						class="input"
+						type="text"
+						placeholder="Playlist Display Name"
+						@keyup.enter="renamePlaylist()"
+					/>
+				</p>
+				<p class="control">
+					<a
+						class="button is-info"
+						@click.prevent="renamePlaylist()"
+						href="#"
+						>Rename</a
+					>
+				</p>
+			</div>
+		</div>
+
+		<div
+			v-if="
+				userId === playlist.createdBy ||
+					(playlist.type === 'genre' && isAdmin())
+			"
+		>
+			<label class="label"> Change privacy </label>
+			<div class="control is-grouped input-with-button">
+				<div class="control is-expanded select">
+					<select v-model="playlist.privacy">
+						<option value="private">Private</option>
+						<option value="public">Public</option>
+					</select>
+				</div>
+				<p class="control">
+					<a
+						class="button is-info"
+						@click.prevent="updatePrivacy()"
+						href="#"
+						>Update Privacy</a
+					>
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters /* , mapActions */ } from "vuex";
+import Toast from "toasters";
+
+import validation from "@/validation";
+
+export default {
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState("modals/editPlaylist", {
+			playlist: state => state.playlist
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		}),
+		...mapState({
+			userId: state => state.user.auth.userId,
+			userRole: state => state.user.auth.role
+		})
+	},
+	mounted() {},
+	methods: {
+		isEditable() {
+			return (
+				this.playlist.isUserModifiable &&
+				(this.userId === this.playlist.createdBy ||
+					this.userRole === "admin")
+			);
+		},
+		renamePlaylist() {
+			const { displayName } = this.playlist;
+			if (!validation.isLength(displayName, 2, 32))
+				return new Toast(
+					"Display name must have between 2 and 32 characters."
+				);
+			if (!validation.regex.ascii.test(displayName))
+				return new Toast(
+					"Invalid display name format. Only ASCII characters are allowed."
+				);
+
+			return this.socket.dispatch(
+				"playlists.updateDisplayName",
+				this.playlist._id,
+				this.playlist.displayName,
+				res => {
+					new Toast(res.message);
+				}
+			);
+		},
+		updatePrivacy() {
+			const { privacy } = this.playlist;
+			if (privacy === "public" || privacy === "private") {
+				this.socket.dispatch(
+					"playlists.updatePrivacy",
+					this.playlist._id,
+					privacy,
+					res => {
+						new Toast(res.message);
+					}
+				);
+			}
+		}
+		// 	...mapActions("modals/editSong", ["selectDiscogsInfo"])
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 1300px) {
+	.section {
+		max-width: 100% !important;
+	}
+}
+</style>

frontend/src/components/modals/EditPlaylist/Tabs/Youtube.vue

@@ -0,0 +1,239 @@
+<template>
+	<div class="youtube-tab section">
+		<h4 class="section-title">Import from YouTube</h4>
+
+		<p class="section-description">
+			Import a playlist or song by searching or using a link from YouTube.
+		</p>
+
+		<hr class="section-horizontal-rule" />
+
+		<label class="label">
+			Search for a playlist from YouTube
+		</label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input
+					class="input"
+					type="text"
+					placeholder="Enter YouTube Playlist URL here..."
+					v-model="search.playlist.query"
+					@keyup.enter="importPlaylist()"
+				/>
+			</p>
+			<p class="control has-addons">
+				<span class="select" id="playlist-import-type">
+					<select v-model="search.playlist.isImportingOnlyMusic">
+						<option :value="false">Import all</option>
+						<option :value="true">
+							Import only music
+						</option>
+					</select>
+				</span>
+				<a
+					class="button is-info"
+					@click.prevent="importPlaylist()"
+					href="#"
+					><i class="material-icons icon-with-button">publish</i
+					>Import</a
+				>
+			</p>
+		</div>
+
+		<label class="label">
+			Search for a song from YouTube
+		</label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input
+					class="input"
+					type="text"
+					placeholder="Enter your YouTube query here..."
+					v-model="search.songs.query"
+					autofocus
+					@keyup.enter="searchForSongs()"
+				/>
+			</p>
+			<p class="control">
+				<a
+					class="button is-info"
+					@click.prevent="searchForSongs()"
+					href="#"
+					><i class="material-icons icon-with-button">search</i
+					>Search</a
+				>
+			</p>
+		</div>
+
+		<div v-if="search.songs.results.length > 0" id="song-query-results">
+			<search-query-item
+				v-for="(result, index) in search.songs.results"
+				:key="result.id"
+				:result="result"
+			>
+				<div slot="actions">
+					<transition name="search-query-actions" mode="out-in">
+						<a
+							class="button is-success"
+							v-if="result.isAddedToQueue"
+							href="#"
+							key="added-to-playlist"
+						>
+							<i class="material-icons icon-with-button">done</i>
+							Added to playlist
+						</a>
+						<a
+							class="button is-dark"
+							v-else
+							@click.prevent="addSongToPlaylist(result.id, index)"
+							href="#"
+							key="add-to-playlist"
+						>
+							<i class="material-icons icon-with-button">add</i>
+							Add to playlist
+						</a>
+					</transition>
+				</div>
+			</search-query-item>
+
+			<a
+				class="button is-primary load-more-button"
+				@click.prevent="loadMoreSongs()"
+				href="#"
+			>
+				Load more...
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters /* , mapActions */ } from "vuex";
+import Toast from "toasters";
+
+import SearchYoutube from "@/mixins/SearchYoutube.vue";
+
+import SearchQueryItem from "../../../SearchQueryItem.vue";
+
+export default {
+	components: { SearchQueryItem },
+	mixins: [SearchYoutube],
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState("modals/editPlaylist", {
+			playlist: state => state.playlist
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	watch: {
+		"search.songs.results": function checkIfSongInPlaylist(songs) {
+			songs.forEach((searchItem, index) =>
+				this.playlist.songs.find(song => {
+					if (song.youtubeId === searchItem.id)
+						this.search.songs.results[index].isAddedToQueue = true;
+
+					return song.youtubeId === searchItem.id;
+				})
+			);
+		},
+		"playlist.songs": function checkIfSongInPlaylist() {
+			this.search.songs.results.forEach((searchItem, index) =>
+				this.playlist.songs.find(song => {
+					this.search.songs.results[index].isAddedToQueue = false;
+					if (song.youtubeId === searchItem.id)
+						this.search.songs.results[index].isAddedToQueue = true;
+
+					return song.youtubeId === searchItem.id;
+				})
+			);
+		}
+	},
+	mounted() {},
+	methods: {
+		importPlaylist() {
+			let isImportingPlaylist = true;
+
+			// import query is blank
+			if (!this.search.playlist.query)
+				return new Toast("Please enter a YouTube playlist URL.");
+
+			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
+			const splitQuery = regex.exec(this.search.playlist.query);
+
+			if (!splitQuery) {
+				return new Toast({
+					content: "Please enter a valid YouTube playlist URL.",
+					timeout: 4000
+				});
+			}
+
+			// don't give starting import message instantly in case of instant error
+			setTimeout(() => {
+				if (isImportingPlaylist) {
+					new Toast(
+						"Starting to import your playlist. This can take some time to do."
+					);
+				}
+			}, 750);
+
+			return this.socket.dispatch(
+				"playlists.addSetToPlaylist",
+				this.search.playlist.query,
+				this.playlist._id,
+				this.search.playlist.isImportingOnlyMusic,
+				res => {
+					new Toast({ content: res.message, timeout: 20000 });
+					if (res.status === "success") {
+						isImportingPlaylist = false;
+						if (this.search.playlist.isImportingOnlyMusic) {
+							new Toast({
+								content: `${res.data.stats.songsInPlaylistTotal} of the ${res.data.stats.videosInPlaylistTotal} videos in the playlist were songs.`,
+								timeout: 20000
+							});
+						}
+					}
+				}
+			);
+		}
+		// ...mapActions("modals/editSong", ["selectDiscogsInfo"])
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.youtube-tab {
+	#import-from-youtube-section {
+		#playlist-import-type select {
+			border-radius: 0;
+		}
+
+		#song-query-results {
+			padding: 10px;
+			margin-top: 10px;
+			border: 1px solid var(--light-grey-3);
+			border-radius: 3px;
+			max-width: 565px;
+
+			.search-query-item:not(:last-of-type) {
+				margin-bottom: 10px;
+			}
+		}
+
+		.load-more-button {
+			width: 100%;
+			margin-top: 10px;
+		}
+	}
+}
+
+@media screen and (max-width: 1300px) {
+	.youtube-tab #song-query-results,
+	.section {
+		max-width: 100% !important;
+	}
+}
+</style>

frontend/src/components/modals/EditPlaylist.vue → frontend/src/components/modals/EditPlaylist/index.vue

@@ -19,204 +19,52 @@
 					<h5>Duration: {{ totalLength() }}</h5>
 				</div>
 
-				<div
-					id="playlist-settings-section"
-					v-if="
-						userId === playlist.createdBy ||
-							isEditable() ||
-							(playlist.type === 'genre' && isAdmin())
-					"
-					class="section"
-				>
-					<div v-if="isEditable()">
-						<h4 class="section-title">Edit Details</h4>
-
-						<p class="section-description">
-							Change the display name and privacy of the playlist.
-						</p>
-
-						<hr class="section-horizontal-rule" />
-
-						<label class="label"> Change display name </label>
-
-						<div class="control is-grouped input-with-button">
-							<p class="control is-expanded">
-								<input
-									v-model="playlist.displayName"
-									class="input"
-									type="text"
-									placeholder="Playlist Display Name"
-									@keyup.enter="renamePlaylist()"
-								/>
-							</p>
-							<p class="control">
-								<a
-									class="button is-info"
-									@click.prevent="renamePlaylist()"
-									href="#"
-									>Rename</a
-								>
-							</p>
-						</div>
+				<div id="tabs-container">
+					<div id="tab-selection">
+						<button
+							class="button is-default"
+							:class="{ selected: tab === 'settings' }"
+							ref="settings-tab"
+							@click="showTab('settings')"
+							v-if="
+								userId === playlist.createdBy ||
+									isEditable() ||
+									(playlist.type === 'genre' && isAdmin())
+							"
+						>
+							Settings
+						</button>
+						<button
+							class="button is-default"
+							:class="{ selected: tab === 'youtube' }"
+							ref="youtube-tab"
+							@click="showTab('youtube')"
+							v-if="isEditable()"
+						>
+							YouTube
+						</button>
 					</div>
-
-					<div
+					<settings
+						class="tab"
+						v-show="tab === 'settings'"
 						v-if="
 							userId === playlist.createdBy ||
+								isEditable() ||
 								(playlist.type === 'genre' && isAdmin())
 						"
-					>
-						<label class="label"> Change privacy </label>
-						<div class="control is-grouped input-with-button">
-							<div class="control is-expanded select">
-								<select v-model="playlist.privacy">
-									<option value="private">Private</option>
-									<option value="public">Public</option>
-								</select>
-							</div>
-							<p class="control">
-								<a
-									class="button is-info"
-									@click.prevent="updatePrivacy()"
-									href="#"
-									>Update Privacy</a
-								>
-							</p>
-						</div>
-					</div>
+					/>
+					<youtube
+						class="tab"
+						v-show="tab === 'youtube'"
+						v-if="isEditable()"
+					/>
 				</div>
 
+				<!--
+
 				<div
 					id="import-from-youtube-section"
-					class="section"
-					v-if="isEditable()"
-				>
-					<h4 class="section-title">Import from YouTube</h4>
-
-					<p class="section-description">
-						Import a playlist or song by searching or using a link
-						from YouTube.
-					</p>
-
-					<hr class="section-horizontal-rule" />
-
-					<label class="label">
-						Search for a playlist from YouTube
-					</label>
-					<div class="control is-grouped input-with-button">
-						<p class="control is-expanded">
-							<input
-								class="input"
-								type="text"
-								placeholder="Enter YouTube Playlist URL here..."
-								v-model="search.playlist.query"
-								@keyup.enter="importPlaylist()"
-							/>
-						</p>
-						<p class="control has-addons">
-							<span class="select" id="playlist-import-type">
-								<select
-									v-model="
-										search.playlist.isImportingOnlyMusic
-									"
-								>
-									<option :value="false">Import all</option>
-									<option :value="true">
-										Import only music
-									</option>
-								</select>
-							</span>
-							<a
-								class="button is-info"
-								@click.prevent="importPlaylist()"
-								href="#"
-								><i class="material-icons icon-with-button"
-									>publish</i
-								>Import</a
-							>
-						</p>
-					</div>
-
-					<label class="label">
-						Search for a song from YouTube
-					</label>
-					<div class="control is-grouped input-with-button">
-						<p class="control is-expanded">
-							<input
-								class="input"
-								type="text"
-								placeholder="Enter your YouTube query here..."
-								v-model="search.songs.query"
-								autofocus
-								@keyup.enter="searchForSongs()"
-							/>
-						</p>
-						<p class="control">
-							<a
-								class="button is-info"
-								@click.prevent="searchForSongs()"
-								href="#"
-								><i class="material-icons icon-with-button"
-									>search</i
-								>Search</a
-							>
-						</p>
-					</div>
-
-					<div
-						v-if="search.songs.results.length > 0"
-						id="song-query-results"
-					>
-						<search-query-item
-							v-for="(result, index) in search.songs.results"
-							:key="result.id"
-							:result="result"
-						>
-							<div slot="actions">
-								<transition
-									name="search-query-actions"
-									mode="out-in"
-								>
-									<a
-										class="button is-success"
-										v-if="result.isAddedToQueue"
-										href="#"
-										key="added-to-playlist"
-									>
-										<i
-											class="material-icons icon-with-button"
-											>done</i
-										>
-										Added to playlist
-									</a>
-									<a
-										class="button is-dark"
-										v-else
-										@click.prevent="
-											addSongToPlaylist(result.id, index)
-										"
-										href="#"
-										key="add-to-playlist"
-									>
-										<i
-											class="material-icons icon-with-button"
-											>add</i
-										>
-										Add to playlist
-									</a>
-								</transition>
-							</div>
-						</search-query-item>
-
-						<a
-							class="button is-primary load-more-button"
-							@click.prevent="loadMoreSongs()"
-							href="#"
-						>
-							Load more...
-						</a>
-					</div>
-				</div>
+					 -->
 			</div>
 
 			<div id="second-column">
@@ -235,8 +83,8 @@
 						<draggable
 							class="menu-list scrollable-list"
 							tag="ul"
-							v-if="playlist.songs.length > 0"
-							v-model="playlist.songs"
+							v-if="playlistSongs.length > 0"
+							v-model="playlistSongs"
 							v-bind="dragOptions"
 							@start="drag = true"
 							@end="drag = false"
@@ -249,7 +97,7 @@
 								"
 							>
 								<li
-									v-for="(song, index) in playlist.songs"
+									v-for="(song, index) in playlistSongs"
 									:key="`key-${song._id}`"
 								>
 									<song-item
@@ -300,7 +148,9 @@
 											<i
 												class="material-icons"
 												v-if="isEditable() && index > 0"
-												@click="moveSongToTop(index)"
+												@click="
+													moveSongToTop(song, index)
+												"
 												content="Move to top of Playlist"
 												v-tippy
 												>vertical_align_top</i
@@ -308,11 +158,16 @@
 											<i
 												v-if="
 													isEditable() &&
-														playlist.songs.length -
+														playlistSongs.length -
 															1 !==
 															index
 												"
-												@click="moveSongToBottom(index)"
+												@click="
+													moveSongToBottom(
+														song,
+														index
+													)
+												"
 												class="material-icons"
 												content="Move to bottom of Playlist"
 												v-tippy
@@ -386,25 +241,22 @@ import { mapState, mapGetters, mapActions } from "vuex";
 import draggable from "vuedraggable";
 import Toast from "toasters";
 
-import SearchYoutube from "@/mixins/SearchYoutube.vue";
-
-import validation from "@/validation";
 import Confirm from "@/components/Confirm.vue";
-import Modal from "../Modal.vue";
-import SearchQueryItem from "../SearchQueryItem.vue";
-import SongItem from "../SongItem.vue";
+import Modal from "../../Modal.vue";
+import SongItem from "../../SongItem.vue";
+
+import Settings from "./Tabs/Settings.vue";
+import Youtube from "./Tabs/Youtube.vue";
 
-import utils from "../../../js/utils";
+import utils from "../../../../js/utils";
 
 export default {
-	components: { Modal, draggable, Confirm, SearchQueryItem, SongItem },
-	mixins: [SearchYoutube],
+	components: { Modal, draggable, Confirm, SongItem, Settings, Youtube },
 	data() {
 		return {
 			utils,
 			drag: false,
-			apiDomain: "",
-			playlist: { songs: [] }
+			apiDomain: ""
 		};
 	},
 	computed: {
@@ -414,6 +266,21 @@ export default {
 		...mapState("user/playlists", {
 			editing: state => state.editing
 		}),
+		...mapState("modals/editPlaylist", {
+			tab: state => state.tab,
+			playlist: state => state.playlist
+		}),
+		playlistSongs: {
+			get() {
+				return this.$store.state.modals.editPlaylist.playlist.songs;
+			},
+			set(value) {
+				this.$store.commit(
+					"modals/editPlaylist/updatePlaylistSongs",
+					value
+				);
+			}
+		},
 		...mapState({
 			userId: state => state.user.auth.userId,
 			userRole: state => state.user.auth.role
@@ -430,24 +297,12 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	watch: {
-		"search.songs.results": function checkIfSongInPlaylist(songs) {
-			songs.forEach((searchItem, index) =>
-				this.playlist.songs.find(song => {
-					if (song.youtubeId === searchItem.id)
-						this.search.songs.results[index].isAddedToQueue = true;
-
-					return song.youtubeId === searchItem.id;
-				})
-			);
-		}
-	},
 	mounted() {
 		this.socket.dispatch("playlists.getPlaylist", this.editing, res => {
 			if (res.status === "success") {
-				this.playlist = res.data.playlist;
-				this.playlist.songs.sort((a, b) => a.position - b.position);
-				this.playlist.oldId = res.data.playlist._id;
+				// this.playlist = res.data.playlist;
+				// this.playlist.songs.sort((a, b) => a.position - b.position);
+				this.setPlaylist(res.data.playlist);
 			} else new Toast(res.message);
 		});
 
@@ -455,7 +310,7 @@ export default {
 			"event:playlist.song.added",
 			res => {
 				if (this.playlist._id === res.data.playlistId)
-					this.playlist.songs.push(res.data.song);
+					this.addSong(res.data.song);
 			},
 			{ modal: "editPlaylist" }
 		);
@@ -465,19 +320,16 @@ export default {
 			res => {
 				if (this.playlist._id === res.data.playlistId) {
 					// remove song from array of playlists
-					this.playlist.songs.forEach((song, index) => {
-						if (song.youtubeId === res.data.youtubeId)
-							this.playlist.songs.splice(index, 1);
-					});
-
-					// if this song is in search results, mark it available to add to the playlist again
-					this.search.songs.results.forEach((searchItem, index) => {
-						if (res.data.youtubeId === searchItem.id) {
-							this.search.songs.results[
-								index
-							].isAddedToQueue = false;
-						}
-					});
+					this.removeSong(res.data.youtubeId);
+
+					// // if this song is in search results, mark it available to add to the playlist again
+					// this.search.songs.results.forEach((searchItem, index) => {
+					// 	if (res.data.youtubeId === searchItem.id) {
+					// 		this.search.songs.results[
+					// 			index
+					// 		].isAddedToQueue = false;
+					// 	}
+					// });
 				}
 			},
 			{ modal: "editPlaylist" }
@@ -486,8 +338,13 @@ export default {
 		this.socket.on(
 			"event:playlist.displayName.updated",
 			res => {
-				if (this.playlist._id === res.data.playlistId)
-					this.playlist.displayName = res.data.displayName;
+				if (this.playlist._id === res.data.playlistId) {
+					const playlist = {
+						displayName: res.data.displayName,
+						...this.playlist
+					};
+					this.setPlaylist(playlist);
+				}
 			},
 			{ modal: "editPlaylist" }
 		);
@@ -499,18 +356,7 @@ export default {
 					const { song, playlistId } = res.data;
 
 					if (this.playlist._id === playlistId) {
-						if (
-							this.playlist.songs[song.newIndex] &&
-							this.playlist.songs[song.newIndex].youtubeId ===
-								song.youtubeId
-						)
-							return;
-
-						this.playlist.songs.splice(
-							song.newIndex,
-							0,
-							this.playlist.songs.splice(song.oldIndex, 1)[0]
-						);
+						this.repositionedSong(song);
 					}
 				}
 			},
@@ -518,51 +364,6 @@ export default {
 		);
 	},
 	methods: {
-		importPlaylist() {
-			let isImportingPlaylist = true;
-
-			// import query is blank
-			if (!this.search.playlist.query)
-				return new Toast("Please enter a YouTube playlist URL.");
-
-			const regex = new RegExp(`[\\?&]list=([^&#]*)`);
-			const splitQuery = regex.exec(this.search.playlist.query);
-
-			if (!splitQuery) {
-				return new Toast({
-					content: "Please enter a valid YouTube playlist URL.",
-					timeout: 4000
-				});
-			}
-
-			// don't give starting import message instantly in case of instant error
-			setTimeout(() => {
-				if (isImportingPlaylist) {
-					new Toast(
-						"Starting to import your playlist. This can take some time to do."
-					);
-				}
-			}, 750);
-
-			return this.socket.dispatch(
-				"playlists.addSetToPlaylist",
-				this.search.playlist.query,
-				this.playlist._id,
-				this.search.playlist.isImportingOnlyMusic,
-				res => {
-					new Toast({ content: res.message, timeout: 20000 });
-					if (res.status === "success") {
-						isImportingPlaylist = false;
-						if (this.search.playlist.isImportingOnlyMusic) {
-							new Toast({
-								content: `${res.data.stats.songsInPlaylistTotal} of the ${res.data.stats.videosInPlaylistTotal} videos in the playlist were songs.`,
-								timeout: 20000
-							});
-						}
-					}
-				}
-			);
-		},
 		isEditable() {
 			return (
 				this.playlist.isUserModifiable &&
@@ -586,7 +387,7 @@ export default {
 				},
 				res => {
 					if (res.status !== "success")
-						this.repositionSongInList({
+						this.repositionedSong({
 							...moved.element,
 							newIndex: moved.oldIndex,
 							oldIndex: moved.newIndex
@@ -595,7 +396,7 @@ export default {
 			);
 		},
 		moveSongToTop(song, index) {
-			this.repositionSongInPlaylist({
+			this.repositionSong({
 				moved: {
 					element: song,
 					oldIndex: index,
@@ -604,11 +405,11 @@ export default {
 			});
 		},
 		moveSongToBottom(song, index) {
-			this.repositionSongInPlaylist({
+			this.repositionSong({
 				moved: {
 					element: song,
 					oldIndex: index,
-					newIndex: this.songsList.length
+					newIndex: this.playlistSongs.length
 				}
 			});
 		},
@@ -626,26 +427,15 @@ export default {
 				res => {
 					new Toast(res.message);
 					if (res.status === "success") {
-						this.playlist.songs = res.data.playlist.songs.sort(
-							(a, b) => a.position - b.position
+						this.updatePlaylistSongs(
+							res.data.playlist.songs.sort(
+								(a, b) => a.position - b.position
+							)
 						);
 					}
 				}
 			);
 		},
-		addSongToPlaylist(id, index) {
-			this.socket.dispatch(
-				"playlists.addSongToPlaylist",
-				false,
-				id,
-				this.playlist._id,
-				res => {
-					new Toast(res.message);
-					if (res.status === "success")
-						this.search.songs.results[index].isAddedToQueue = true;
-				}
-			);
-		},
 		removeSongFromPlaylist(id) {
 			if (this.playlist.displayName === "Liked Songs")
 				return this.socket.dispatch("songs.unlike", id, res => {
@@ -666,26 +456,6 @@ export default {
 				}
 			);
 		},
-		renamePlaylist() {
-			const { displayName } = this.playlist;
-			if (!validation.isLength(displayName, 2, 32))
-				return new Toast(
-					"Display name must have between 2 and 32 characters."
-				);
-			if (!validation.regex.ascii.test(displayName))
-				return new Toast(
-					"Invalid display name format. Only ASCII characters are allowed."
-				);
-
-			return this.socket.dispatch(
-				"playlists.updateDisplayName",
-				this.playlist._id,
-				this.playlist.displayName,
-				res => {
-					new Toast(res.message);
-				}
-			);
-		},
 		removePlaylist() {
 			this.socket.dispatch("playlists.remove", this.playlist._id, res => {
 				new Toast(res.message);
@@ -722,19 +492,6 @@ export default {
 					() => new Toast("Failed to export and download playlist.")
 				);
 		},
-		updatePrivacy() {
-			const { privacy } = this.playlist;
-			if (privacy === "public" || privacy === "private") {
-				this.socket.dispatch(
-					"playlists.updatePrivacy",
-					this.playlist._id,
-					privacy,
-					res => {
-						new Toast(res.message);
-					}
-				);
-			}
-		},
 		addSongToQueue(youtubeId) {
 			this.socket.dispatch(
 				"stations.addToQueue",
@@ -779,6 +536,18 @@ export default {
 				}
 			);
 		},
+		...mapActions({
+			showTab(dispatch, payload) {
+				this.$refs[`${payload}-tab`].scrollIntoView();
+				return dispatch("modals/editPlaylist/showTab", payload);
+			}
+		}),
+		...mapActions("modals/editPlaylist", [
+			"setPlaylist",
+			"addSong",
+			"removeSong",
+			"repositionedSong"
+		]),
 		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
 };
@@ -831,13 +600,48 @@ export default {
 	.edit-playlist-modal .edit-playlist-modal-inner-container {
 		height: auto !important;
 
-		#import-from-youtube-section #song-query-results,
-		.section {
+		/deep/ .section {
 			max-width: 100% !important;
 		}
 	}
 }
 
+#tabs-container {
+	// padding: 16px;
+
+	#tab-selection {
+		display: flex;
+		overflow-x: auto;
+		margin: 24px 10px 0 10px;
+
+		.button {
+			border-radius: 5px 5px 0 0;
+			border: 0;
+			text-transform: uppercase;
+			font-size: 14px;
+			color: var(--dark-grey-3);
+			background-color: var(--light-grey-2);
+			flex-grow: 1;
+			height: 32px;
+
+			&:not(:first-of-type) {
+				margin-left: 5px;
+			}
+		}
+
+		.selected {
+			background-color: var(--primary-color) !important;
+			color: var(--white) !important;
+			font-weight: 600;
+		}
+	}
+	.tab {
+		border: 1px solid var(--light-grey-3);
+		// padding: 15px;
+		border-radius: 0 0 5px 5px;
+	}
+}
+
 .edit-playlist-modal {
 	.edit-playlist-modal-inner-container {
 		display: flex;
@@ -851,7 +655,7 @@ export default {
 				flex-basis: 100%;
 			}
 
-			.section {
+			/deep/ .section {
 				max-width: 100% !important;
 			}
 		}
@@ -863,7 +667,7 @@ export default {
 		justify-content: center;
 	}
 
-	.section {
+	/deep/ .section {
 		padding: 15px !important;
 		margin: 0 10px;
 		max-width: 600px;
@@ -887,7 +691,7 @@ export default {
 		overflow-y: auto;
 		flex-grow: 1;
 
-		.section {
+		/deep/ .section {
 			width: auto;
 		}
 
@@ -910,29 +714,6 @@ export default {
 				margin: 0;
 			}
 		}
-
-		#import-from-youtube-section {
-			#playlist-import-type select {
-				border-radius: 0;
-			}
-
-			#song-query-results {
-				padding: 10px;
-				margin-top: 10px;
-				border: 1px solid var(--light-grey-3);
-				border-radius: 3px;
-				max-width: 565px;
-
-				.search-query-item:not(:last-of-type) {
-					margin-bottom: 10px;
-				}
-			}
-
-			.load-more-button {
-				width: 100%;
-				margin-top: 10px;
-			}
-		}
 	}
 
 	#second-column {

frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -0,0 +1,447 @@
+<template>
+	<div class="discogs-tab">
+		<div class="selected-discogs-info" v-if="!song.discogs">
+			<p class="selected-discogs-info-none">None</p>
+		</div>
+		<div class="selected-discogs-info" v-if="song.discogs">
+			<div class="top-container">
+				<img :src="song.discogs.album.albumArt" />
+				<div class="right-container">
+					<p class="album-title">
+						{{ song.discogs.album.title }}
+					</p>
+					<div class="bottom-row">
+						<p class="type-year">
+							<span>{{ song.discogs.album.type }}</span>
+							•
+							<span>{{ song.discogs.album.year }}</span>
+						</p>
+					</div>
+				</div>
+			</div>
+			<div class="bottom-container">
+				<p class="bottom-container-field">
+					Artists:
+					<span>{{ song.discogs.album.artists.join(", ") }}</span>
+				</p>
+				<p class="bottom-container-field">
+					Genres:
+					<span>{{ song.discogs.album.genres.join(", ") }}</span>
+				</p>
+				<p class="bottom-container-field">
+					Data quality:
+					<span>{{ song.discogs.dataQuality }}</span>
+				</p>
+				<p class="bottom-container-field">
+					Track:
+					<span
+						>{{ song.discogs.track.position }}.
+						{{ song.discogs.track.title }}</span
+					>
+				</p>
+			</div>
+		</div>
+		<p class="control is-expanded">
+			<label class="label">Search query</label>
+			<input
+				class="input"
+				type="text"
+				ref="discogs-input"
+				v-model="discogsQuery"
+				@keyup.enter="searchDiscogsForPage(1)"
+				@change="onDiscogsQueryChange"
+				v-focus
+			/>
+		</p>
+		<button
+			class="button is-info is-fullwidth"
+			@click="searchDiscogsForPage(1)"
+		>
+			Search
+		</button>
+		<label class="label" v-if="discogs.apiResults.length > 0"
+			>API results</label
+		>
+		<div class="api-results-container" v-if="discogs.apiResults.length > 0">
+			<div
+				class="api-result"
+				v-for="(result, index) in discogs.apiResults"
+				:key="result.album.id"
+				tabindex="0"
+				@keydown.space.prevent
+				@keyup.enter="toggleAPIResult(index)"
+			>
+				<div class="top-container">
+					<img :src="result.album.albumArt" />
+					<div class="right-container">
+						<p class="album-title">
+							{{ result.album.title }}
+						</p>
+						<div class="bottom-row">
+							<img
+								src="/assets/arrow_up.svg"
+								v-if="result.expanded"
+								@click="toggleAPIResult(index)"
+							/>
+							<img
+								src="/assets/arrow_down.svg"
+								v-if="!result.expanded"
+								@click="toggleAPIResult(index)"
+							/>
+							<p class="type-year">
+								<span>{{ result.album.type }}</span>
+								•
+								<span>{{ result.album.year }}</span>
+							</p>
+						</div>
+					</div>
+				</div>
+				<div class="bottom-container" v-if="result.expanded">
+					<p class="bottom-container-field">
+						Artists:
+						<span>{{ result.album.artists.join(", ") }}</span>
+					</p>
+					<p class="bottom-container-field">
+						Genres:
+						<span>{{ result.album.genres.join(", ") }}</span>
+					</p>
+					<p class="bottom-container-field">
+						Data quality:
+						<span>{{ result.dataQuality }}</span>
+					</p>
+					<button
+						class="button is-primary"
+						@click="importAlbum(result)"
+					>
+						Import album
+					</button>
+					<div class="tracks">
+						<div
+							class="track"
+							tabindex="0"
+							v-for="(track, trackIndex) in result.tracks"
+							:key="`${track.position}-${track.title}`"
+							@click="selectTrack(index, trackIndex)"
+							@keyup.enter="selectTrack(index, trackIndex)"
+						>
+							<span>{{ track.position }}.</span>
+							<p>{{ track.title }}</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<button
+			v-if="
+				discogs.apiResults.length > 0 &&
+					!discogs.disableLoadMore &&
+					discogs.page < discogs.pages
+			"
+			class="button is-fullwidth is-info discogs-load-more"
+			@click="loadNextDiscogsPage()"
+		>
+			Load more...
+		</button>
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters, mapActions } from "vuex";
+
+import Toast from "toasters";
+
+import keyboardShortcuts from "@/keyboardShortcuts";
+
+export default {
+	data() {
+		return {
+			discogs: {
+				apiResults: [],
+				page: 1,
+				pages: 1,
+				disableLoadMore: false
+			},
+			discogsQuery: ""
+		};
+	},
+	computed: {
+		...mapState("modals/editSong", {
+			song: state => state.song
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	mounted() {
+		this.discogsQuery = this.song.title;
+
+		keyboardShortcuts.registerShortcut("editSong.focusDiscogs", {
+			keyCode: 35,
+			preventDefault: true,
+			handler: () => {
+				this.$refs["discogs-input"].focus();
+			}
+		});
+	},
+	methods: {
+		toggleAPIResult(index) {
+			const apiResult = this.discogs.apiResults[index];
+			if (apiResult.expanded === true) apiResult.expanded = false;
+			else if (apiResult.gotMoreInfo === true) apiResult.expanded = true;
+			else {
+				fetch(apiResult.album.resourceUrl)
+					.then(response => {
+						return response.json();
+					})
+					.then(data => {
+						apiResult.album.artists = [];
+						apiResult.album.artistIds = [];
+						const artistRegex = new RegExp(" \\([0-9]+\\)$");
+
+						apiResult.dataQuality = data.data_quality;
+						data.artists.forEach(artist => {
+							apiResult.album.artists.push(
+								artist.name.replace(artistRegex, "")
+							);
+							apiResult.album.artistIds.push(artist.id);
+						});
+						apiResult.tracks = data.tracklist.map(track => {
+							return {
+								position: track.position,
+								title: track.title
+							};
+						});
+						apiResult.expanded = true;
+						apiResult.gotMoreInfo = true;
+					});
+			}
+		},
+		searchDiscogsForPage(page) {
+			const query = this.discogsQuery;
+
+			this.socket.dispatch("apis.searchDiscogs", query, page, res => {
+				if (res.status === "success") {
+					if (page === 1)
+						new Toast(
+							`Successfully searched. Got ${res.data.results.length} results.`
+						);
+					else
+						new Toast(
+							`Successfully got ${res.data.results.length} more results.`
+						);
+
+					if (page === 1) {
+						this.discogs.apiResults = [];
+					}
+
+					this.discogs.pages = res.data.pages;
+
+					this.discogs.apiResults = this.discogs.apiResults.concat(
+						res.data.results.map(result => {
+							const type =
+								result.type.charAt(0).toUpperCase() +
+								result.type.slice(1);
+
+							return {
+								expanded: false,
+								gotMoreInfo: false,
+								album: {
+									id: result.id,
+									title: result.title,
+									type,
+									year: result.year,
+									genres: result.genre,
+									albumArt: result.cover_image,
+									resourceUrl: result.resource_url
+								}
+							};
+						})
+					);
+
+					this.discogs.page = page;
+					this.discogs.disableLoadMore = false;
+				} else new Toast(res.message);
+			});
+		},
+		loadNextDiscogsPage() {
+			this.discogs.disableLoadMore = true;
+			this.searchDiscogsForPage(this.discogs.page + 1);
+		},
+		onDiscogsQueryChange() {
+			this.discogs.page = 1;
+			this.discogs.pages = 1;
+			this.discogs.apiResults = [];
+			this.discogs.disableLoadMore = false;
+		},
+		selectTrack(apiResultIndex, trackIndex) {
+			const apiResult = JSON.parse(
+				JSON.stringify(this.discogs.apiResults[apiResultIndex])
+			);
+			apiResult.track = apiResult.tracks[trackIndex];
+			delete apiResult.tracks;
+			delete apiResult.expanded;
+			delete apiResult.gotMoreInfo;
+
+			this.selectDiscogsInfo(apiResult);
+		},
+		...mapActions("modals/editSong", ["selectDiscogsInfo"])
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.discogs-tab {
+	// width: 376px;
+	// background-color: var(--light-grey);
+	// border: 1px rgba(163, 224, 255, 0.75) solid;
+	// border-radius: 5px;
+	// padding: 16px;
+	// overflow: auto;
+	// height: 100%;
+
+	> label {
+		margin-top: 12px;
+	}
+
+	.top-container {
+		display: flex;
+
+		img {
+			height: 85px;
+			width: 85px;
+		}
+
+		.right-container {
+			padding: 8px;
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+
+			.album-title {
+				flex: 1;
+				font-weight: 600;
+			}
+
+			.bottom-row {
+				display: flex;
+				flex-flow: row;
+				line-height: 15px;
+
+				img {
+					height: 15px;
+					align-self: end;
+					flex: 1;
+					user-select: none;
+					-moz-user-select: none;
+					-ms-user-select: none;
+					-webkit-user-select: none;
+					cursor: pointer;
+				}
+
+				p {
+					text-align: right;
+				}
+
+				.type-year {
+					font-size: 13px;
+					align-self: end;
+				}
+			}
+		}
+	}
+
+	.bottom-container {
+		padding: 12px;
+
+		.bottom-container-field {
+			line-height: 16px;
+			margin-bottom: 8px;
+			font-weight: 600;
+
+			span {
+				font-weight: 400;
+			}
+		}
+
+		.bottom-container-field:last-of-type {
+			margin-bottom: 0;
+		}
+	}
+
+	.selected-discogs-info {
+		background-color: var(--white);
+		border: 1px solid var(--purple);
+		border-radius: 5px;
+		margin-bottom: 16px;
+
+		.selected-discogs-info-none {
+			font-size: 18px;
+			text-align: center;
+		}
+
+		.bottom-row > p {
+			flex: 1;
+		}
+	}
+
+	.api-result {
+		background-color: var(--white);
+		border: 0.5px solid var(--primary-color);
+		border-radius: 5px;
+		margin-bottom: 16px;
+	}
+
+	button {
+		background-color: var(--primary-color) !important;
+
+		&:focus,
+		&:hover {
+			filter: contrast(0.75);
+		}
+	}
+
+	.tracks {
+		margin-top: 12px;
+
+		.track:first-child {
+			margin-top: 0;
+			border-radius: 3px 3px 0 0;
+		}
+
+		.track:last-child {
+			border-radius: 0 0 3px 3px;
+		}
+
+		.track {
+			border: 0.5px solid var(--black);
+			margin-top: -1px;
+			line-height: 16px;
+			display: flex;
+			cursor: pointer;
+
+			span {
+				font-weight: 600;
+				display: inline-block;
+				margin-top: 7px;
+				margin-bottom: 7px;
+				margin-left: 7px;
+			}
+
+			p {
+				display: inline-block;
+				margin: 7px;
+				flex: 1;
+			}
+		}
+
+		.track:hover,
+		.track:focus {
+			background-color: var(--light-grey);
+		}
+	}
+
+	.discogs-load-more {
+		margin-bottom: 8px;
+	}
+}
+</style>

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -0,0 +1,31 @@
+<template>
+	<div class="reports-tab">
+		Reports will display here
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters /* , mapActions */ } from "vuex";
+
+// import Toast from "toasters";
+
+export default {
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState("modals/editSong", {
+			reports: state => state.reports
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	mounted() {}
+	// methods: {
+	// 	...mapActions("modals/editSong", ["selectDiscogsInfo"])
+	// }
+};
+</script>
+
+<style lang="scss" scoped></style>

frontend/src/components/modals/EditSong.vue → frontend/src/components/modals/EditSong/index.vue

@@ -6,8 +6,12 @@
 					<div class="top-section">
 						<div class="player-section">
 							<div id="editSongPlayer"></div>
+							<div v-show="youtubeError" class="player-error">
+								<h2>{{ youtubeErrorMessage }}</h2>
+							</div>
 							<canvas
 								ref="durationCanvas"
+								v-show="!youtubeError"
 								height="20"
 								width="530"
 							></canvas>
@@ -90,7 +94,7 @@
 										type="text"
 										ref="title-input"
 										v-model="song.title"
-										@keyup.ctrl.alt.d="
+										@keyup.shift.enter="
 											getAlbumData('title')
 										"
 									/>
@@ -109,6 +113,7 @@
 										class="input"
 										type="text"
 										v-model.number="song.duration"
+										@keyup.shift.enter="fillDuration()"
 									/>
 									<button
 										class="button duration-fill-button"
@@ -137,7 +142,7 @@
 										class="input"
 										type="text"
 										v-model="song.thumbnail"
-										@keyup.ctrl.alt.d="
+										@keyup.shift.enter="
 											getAlbumData('albumArt')
 										"
 									/>
@@ -162,8 +167,8 @@
 										@blur="blurArtistInput()"
 										@focus="focusArtistInput()"
 										@keydown="keydownArtistInput()"
-										@keyup.enter="addTag('artists')"
-										@keyup.ctrl.alt.d="
+										@keyup.exact.enter="addTag('artists')"
+										@keyup.shift.enter="
 											getAlbumData('artists')
 										"
 									/>
@@ -236,8 +241,8 @@
 										@blur="blurGenreInput()"
 										@focus="focusGenreInput()"
 										@keydown="keydownGenreInput()"
-										@keyup.enter="addTag('genres')"
-										@keyup.ctrl.alt.d="
+										@keyup.exact.enter="addTag('genres')"
+										@keyup.shift.enter="
 											getAlbumData('genres')
 										"
 									/>
@@ -302,180 +307,27 @@
 					</div>
 				</div>
 				<div class="right-section" v-if="songDataLoaded">
-					<div class="api-section">
-						<div class="selected-discogs-info" v-if="!song.discogs">
-							<p class="selected-discogs-info-none">None</p>
-						</div>
-						<div class="selected-discogs-info" v-if="song.discogs">
-							<div class="top-container">
-								<img :src="song.discogs.album.albumArt" />
-								<div class="right-container">
-									<p class="album-title">
-										{{ song.discogs.album.title }}
-									</p>
-									<div class="bottom-row">
-										<p class="type-year">
-											<span>{{
-												song.discogs.album.type
-											}}</span>
-											•
-											<span>{{
-												song.discogs.album.year
-											}}</span>
-										</p>
-									</div>
-								</div>
-							</div>
-							<div class="bottom-container">
-								<p class="bottom-container-field">
-									Artists:
-									<span>{{
-										song.discogs.album.artists.join(", ")
-									}}</span>
-								</p>
-								<p class="bottom-container-field">
-									Genres:
-									<span>{{
-										song.discogs.album.genres.join(", ")
-									}}</span>
-								</p>
-								<p class="bottom-container-field">
-									Data quality:
-									<span>{{ song.discogs.dataQuality }}</span>
-								</p>
-								<p class="bottom-container-field">
-									Track:
-									<span
-										>{{ song.discogs.track.position }}.
-										{{ song.discogs.track.title }}</span
-									>
-								</p>
-							</div>
-						</div>
-						<p class="control is-expanded">
-							<label class="label">Search query</label>
-							<input
-								class="input"
-								type="text"
-								ref="discogs-input"
-								v-model="discogsQuery"
-								@keyup.enter="searchDiscogsForPage(1)"
-								@change="onDiscogsQueryChange"
-								v-focus
-							/>
-						</p>
-						<button
-							class="button is-info is-fullwidth"
-							@click="searchDiscogsForPage(1)"
-						>
-							Search
-						</button>
-						<label
-							class="label"
-							v-if="discogs.apiResults.length > 0"
-							>API results</label
-						>
-						<div
-							class="api-results-container"
-							v-if="discogs.apiResults.length > 0"
-						>
-							<div
-								class="api-result"
-								v-for="(result, index) in discogs.apiResults"
-								:key="result.album.id"
-								tabindex="0"
-								@keydown.space.prevent
-								@keyup.enter="toggleAPIResult(index)"
+					<div id="tabs-container">
+						<div id="tab-selection">
+							<button
+								class="button is-default"
+								:class="{ selected: tab === 'discogs' }"
+								ref="discogs-tab"
+								@click="showTab('discogs')"
 							>
-								<div class="top-container">
-									<img :src="result.album.albumArt" />
-									<div class="right-container">
-										<p class="album-title">
-											{{ result.album.title }}
-										</p>
-										<div class="bottom-row">
-											<img
-												src="/assets/arrow_up.svg"
-												v-if="result.expanded"
-												@click="toggleAPIResult(index)"
-											/>
-											<img
-												src="/assets/arrow_down.svg"
-												v-if="!result.expanded"
-												@click="toggleAPIResult(index)"
-											/>
-											<p class="type-year">
-												<span>{{
-													result.album.type
-												}}</span>
-												•
-												<span>{{
-													result.album.year
-												}}</span>
-											</p>
-										</div>
-									</div>
-								</div>
-								<div
-									class="bottom-container"
-									v-if="result.expanded"
-								>
-									<p class="bottom-container-field">
-										Artists:
-										<span>{{
-											result.album.artists.join(", ")
-										}}</span>
-									</p>
-									<p class="bottom-container-field">
-										Genres:
-										<span>{{
-											result.album.genres.join(", ")
-										}}</span>
-									</p>
-									<p class="bottom-container-field">
-										Data quality:
-										<span>{{ result.dataQuality }}</span>
-									</p>
-									<button
-										class="button is-primary"
-										@click="importAlbum(result)"
-									>
-										Import album
-									</button>
-									<div class="tracks">
-										<div
-											class="track"
-											tabindex="0"
-											v-for="(track,
-											trackIndex) in result.tracks"
-											:key="
-												`${track.position}-${track.title}`
-											"
-											@click="
-												selectTrack(index, trackIndex)
-											"
-											@keyup.enter="
-												selectTrack(index, trackIndex)
-											"
-										>
-											<span>{{ track.position }}.</span>
-											<p>{{ track.title }}</p>
-										</div>
-									</div>
-								</div>
-							</div>
+								Discogs
+							</button>
+							<button
+								class="button is-default"
+								:class="{ selected: tab === 'reports' }"
+								ref="reports-tab"
+								@click="showTab('reports')"
+							>
+								Reports ({{ reports.length }})
+							</button>
 						</div>
-						<button
-							v-if="
-								discogs.apiResults.length > 0 &&
-									!discogs.disableLoadMore &&
-									discogs.page < discogs.pages
-							"
-							class="button is-fullwidth is-info discogs-load-more"
-							@click="loadNextDiscogsPage()"
-						>
-							Load more...
-						</button>
+						<discogs class="tab" v-show="tab === 'discogs'" />
+						<reports class="tab" v-show="tab === 'reports'" />
 					</div>
 				</div>
 			</div>
@@ -578,13 +430,17 @@ import Toast from "toasters";
 import aw from "@/aw";
 import validation from "@/validation";
 import keyboardShortcuts from "@/keyboardShortcuts";
+
 import Confirm from "@/components/Confirm.vue";
-import Modal from "../Modal.vue";
-import FloatingBox from "../FloatingBox.vue";
-import SaveButton from "../SaveButton.vue";
+import Modal from "../../Modal.vue";
+import FloatingBox from "../../FloatingBox.vue";
+import SaveButton from "../../SaveButton.vue";
+
+import Discogs from "./Tabs/Discogs.vue";
+import Reports from "./Tabs/Reports.vue";
 
 export default {
-	components: { Modal, FloatingBox, SaveButton, Confirm },
+	components: { Modal, FloatingBox, SaveButton, Confirm, Discogs, Reports },
 	props: {
 		youtubeId: { type: String, default: null },
 		songId: { type: String, default: null },
@@ -595,18 +451,13 @@ export default {
 	data() {
 		return {
 			songDataLoaded: false,
+			youtubeError: false,
+			youtubeErrorMessage: "",
 			focusedElementBefore: null,
-			discogsQuery: "",
 			youtubeVideoDuration: "0.000",
 			youtubeVideoCurrentTime: 0,
 			youtubeVideoNote: "",
 			useHTTPS: false,
-			discogs: {
-				apiResults: [],
-				page: 1,
-				pages: 1,
-				disableLoadMore: false
-			},
 			volumeSliderValue: 0,
 			skipToLast10SecsPressed: false,
 			artistInputValue: "",
@@ -658,8 +509,11 @@ export default {
 	},
 	computed: {
 		...mapState("modals/editSong", {
+			tab: state => state.tab,
 			video: state => state.video,
-			song: state => state.song
+			song: state => state.song,
+			originalSong: state => state.originalSong,
+			reports: state => state.reports
 		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals
@@ -702,8 +556,6 @@ export default {
 					this.editSong({ ...song, discogs: this.song.discogs });
 				else this.editSong(song);
 
-				console.log(song);
-
 				this.songDataLoaded = true;
 
 				this.socket.dispatch(
@@ -713,16 +565,17 @@ export default {
 
 				// this.edit(res.data.song);
 
-				this.discogsQuery = this.song.title;
-
 				this.interval = setInterval(() => {
 					if (
 						this.song.duration !== -1 &&
 						this.video.paused === false &&
 						this.playerReady &&
-						this.video.player.getCurrentTime() -
+						(this.video.player.getCurrentTime() -
 							this.song.skipDuration >
-							this.song.duration
+							this.song.duration ||
+							(this.video.player.getCurrentTime() > 0 &&
+								this.video.player.getCurrentTime() >=
+									this.video.player.getDuration()))
 					) {
 						this.video.paused = true;
 						this.video.player.stopVideo();
@@ -737,134 +590,148 @@ export default {
 					if (this.video.paused === false) this.drawCanvas();
 				}, 200);
 
-				this.video.player = new window.YT.Player("editSongPlayer", {
-					height: 298,
-					width: 530,
-					videoId: this.song.youtubeId,
-					host: "https://www.youtube-nocookie.com",
-					playerVars: {
-						controls: 0,
-						iv_load_policy: 3,
-						rel: 0,
-						showinfo: 0,
-						autoplay: 1
-					},
-					startSeconds: this.song.skipDuration,
-					events: {
-						onReady: () => {
-							let volume = parseInt(
-								localStorage.getItem("volume")
-							);
-							volume = typeof volume === "number" ? volume : 20;
-							this.video.player.seekTo(this.song.skipDuration);
-							this.video.player.setVolume(volume);
-							if (volume > 0) this.video.player.unMute();
-
-							const duration = this.video.player.getDuration();
-
-							this.youtubeVideoDuration = duration.toFixed(3);
-							this.youtubeVideoNote = "(~)";
-							this.playerReady = true;
-
-							this.drawCanvas();
+				if (window.YT && window.YT.Player) {
+					this.video.player = new window.YT.Player("editSongPlayer", {
+						height: 298,
+						width: 530,
+						videoId: this.song.youtubeId,
+						host: "https://www.youtube-nocookie.com",
+						playerVars: {
+							controls: 0,
+							iv_load_policy: 3,
+							rel: 0,
+							showinfo: 0,
+							autoplay: 0
 						},
-						onStateChange: event => {
-							this.drawCanvas();
-
-							let skipToLast10SecsPressed = false;
-							if (
-								event.data === 1 &&
-								this.skipToLast10SecsPressed
-							) {
-								this.skipToLast10SecsPressed = false;
-								skipToLast10SecsPressed = true;
-							}
+						startSeconds: this.song.skipDuration,
+						events: {
+							onReady: () => {
+								let volume = parseInt(
+									localStorage.getItem("volume")
+								);
+								volume =
+									typeof volume === "number" ? volume : 20;
+								this.video.player.setVolume(volume);
+								if (volume > 0) this.video.player.unMute();
 
-							if (event.data === 1 && !skipToLast10SecsPressed) {
-								if (!this.video.autoPlayed) {
-									this.video.autoPlayed = true;
-									return this.video.player.stopVideo();
-								}
+								const duration = this.video.player.getDuration();
 
-								this.video.paused = false;
-								let youtubeDuration = this.video.player.getDuration();
-								const newYoutubeVideoDuration = youtubeDuration.toFixed(
-									3
-								);
+								this.youtubeVideoDuration = duration.toFixed(3);
+								this.youtubeVideoNote = "(~)";
+								this.playerReady = true;
 
-								const songDurationNumber = Number(
-									this.song.duration
-								);
-								const songDurationNumber2 =
-									Number(this.song.duration) + 1;
-								const songDurationNumber3 =
-									Number(this.song.duration) - 1;
-								const fixedSongDuration = songDurationNumber.toFixed(
-									3
-								);
-								const fixedSongDuration2 = songDurationNumber2.toFixed(
-									3
-								);
-								const fixedSongDuration3 = songDurationNumber3.toFixed(
-									3
-								);
+								this.drawCanvas();
+							},
+							onStateChange: event => {
+								this.drawCanvas();
 
+								let skipToLast10SecsPressed = false;
 								if (
-									this.youtubeVideoDuration !==
-										newYoutubeVideoDuration &&
-									(fixedSongDuration ===
-										this.youtubeVideoDuration ||
-										fixedSongDuration2 ===
-											this.youtubeVideoDuration ||
-										fixedSongDuration3 ===
-											this.youtubeVideoDuration)
-								)
-									this.song.duration = newYoutubeVideoDuration;
-
-								this.youtubeVideoDuration = newYoutubeVideoDuration;
-								this.youtubeVideoNote = "";
+									event.data === 1 &&
+									this.skipToLast10SecsPressed
+								) {
+									this.skipToLast10SecsPressed = false;
+									skipToLast10SecsPressed = true;
+								}
 
-								if (this.song.duration === -1)
-									this.song.duration = youtubeDuration;
+								if (
+									event.data === 1 &&
+									!skipToLast10SecsPressed
+								) {
+									this.video.paused = false;
+									let youtubeDuration = this.video.player.getDuration();
+									const newYoutubeVideoDuration = youtubeDuration.toFixed(
+										3
+									);
 
-								youtubeDuration -= this.song.skipDuration;
-								if (this.song.duration > youtubeDuration + 1) {
-									this.video.player.stopVideo();
-									this.video.paused = true;
-									return new Toast(
-										"Video can't play. Specified duration is bigger than the YouTube song duration."
+									const songDurationNumber = Number(
+										this.song.duration
 									);
-								}
-								if (this.song.duration <= 0) {
-									this.video.player.stopVideo();
-									this.video.paused = true;
-									return new Toast(
-										"Video can't play. Specified duration has to be more than 0 seconds."
+									const songDurationNumber2 =
+										Number(this.song.duration) + 1;
+									const songDurationNumber3 =
+										Number(this.song.duration) - 1;
+									const fixedSongDuration = songDurationNumber.toFixed(
+										3
+									);
+									const fixedSongDuration2 = songDurationNumber2.toFixed(
+										3
+									);
+									const fixedSongDuration3 = songDurationNumber3.toFixed(
+										3
 									);
-								}
 
-								if (
-									this.video.player.getCurrentTime() <
-									this.song.skipDuration
-								) {
-									return this.video.player.seekTo(
+									if (
+										this.youtubeVideoDuration !==
+											newYoutubeVideoDuration &&
+										(fixedSongDuration ===
+											this.youtubeVideoDuration ||
+											fixedSongDuration2 ===
+												this.youtubeVideoDuration ||
+											fixedSongDuration3 ===
+												this.youtubeVideoDuration)
+									)
+										this.song.duration = newYoutubeVideoDuration;
+
+									this.youtubeVideoDuration = newYoutubeVideoDuration;
+									this.youtubeVideoNote = "";
+
+									if (this.song.duration === -1)
+										this.song.duration = youtubeDuration;
+
+									youtubeDuration -= this.song.skipDuration;
+									if (
+										this.song.duration >
+										youtubeDuration + 1
+									) {
+										this.video.player.stopVideo();
+										this.video.paused = true;
+										return new Toast(
+											"Video can't play. Specified duration is bigger than the YouTube song duration."
+										);
+									}
+									if (this.song.duration <= 0) {
+										this.video.player.stopVideo();
+										this.video.paused = true;
+										return new Toast(
+											"Video can't play. Specified duration has to be more than 0 seconds."
+										);
+									}
+
+									if (
+										this.video.player.getCurrentTime() <
 										this.song.skipDuration
-									);
+									) {
+										return this.video.player.seekTo(
+											this.song.skipDuration
+										);
+									}
+								} else if (event.data === 2) {
+									this.video.paused = true;
 								}
-							} else if (event.data === 2) {
-								this.video.paused = true;
-							}
 
-							return false;
+								return false;
+							}
 						}
-					}
-				});
+					});
+				} else {
+					this.youtubeError = true;
+					this.youtubeErrorMessage = "Player could not be loaded.";
+				}
 			} else {
 				new Toast("Song with that ID not found");
 				this.closeModal("editSong");
 			}
 		});
 
+		this.socket.dispatch(
+			"reports.getReportsForSong",
+			this.song._id,
+			res => {
+				this.updateReports(res.data.reports);
+			}
+		);
+
 		let volume = parseFloat(localStorage.getItem("volume"));
 		volume =
 			typeof volume === "number" && !Number.isNaN(volume) ? volume : 20;
@@ -985,9 +852,28 @@ export default {
 			}
 		});
 
-		keyboardShortcuts.registerShortcut("editSong.close", {
-			keyCode: 88,
+		keyboardShortcuts.registerShortcut("editSong.saveClose", {
+			keyCode: 83,
 			ctrl: true,
+			alt: true,
+			preventDefault: true,
+			handler: () => {
+				this.save(this.song, true);
+			}
+		});
+
+		keyboardShortcuts.registerShortcut("editSong.saveVerifyClose", {
+			keyCode: 86,
+			ctrl: true,
+			alt: true,
+			preventDefault: true,
+			handler: () => {
+				// alert("not implemented yet");
+			}
+		});
+
+		keyboardShortcuts.registerShortcut("editSong.close", {
+			keyCode: 115,
 			preventDefault: true,
 			handler: () => {
 				this.closeModal("editSong");
@@ -1005,14 +891,6 @@ export default {
 			}
 		});
 
-		keyboardShortcuts.registerShortcut("editSong.focusDiscogs", {
-			keyCode: 35,
-			preventDefault: true,
-			handler: () => {
-				this.$refs["discogs-input"].focus();
-			}
-		});
-
 		keyboardShortcuts.registerShortcut("editSong.useAllDiscogs", {
 			keyCode: 68,
 			alt: true,
@@ -1026,35 +904,26 @@ export default {
 			}
 		});
 
-		keyboardShortcuts.registerShortcut("editSong.resetDuration", {
-			keyCode: 82,
-			alt: true,
-			ctrl: true,
-			preventDefault: true,
-			handler: () => {
-				this.fillDuration();
-			}
-		});
-
 		/*
 		
 		editSong.pauseResume - Num 5 - Pause/resume song
 		editSong.stopVideo - Ctrl - Num 5 - Stop
 		editSong.skipToLast10Secs - Num 6 - Skip to last 10 seconds
 
-		editSong.volumeDown5 - Num 2 - Volume down by 10
-		editSong.volumeDown1 - Ctrl - Num 2 - Volume down by 1
-		editSong.volumeUp5 - Num 8 - Volume up by 10
-		editSong.volumeUp1 - Ctrl - Num 8 - Volume up by 1
+		editSong.lowerVolumeLarge - Num 2 - Volume down by 10
+		editSong.lowerVolumeSmall - Ctrl - Num 2 - Volume down by 1
+		editSong.increaseVolumeLarge - Num 8 - Volume up by 10
+		editSong.increaseVolumeSmall - Ctrl - Num 8 - Volume up by 1
 
 		editSong.focusTitle - Home - Focus the title input
 		editSong.focusDicogs - End - Focus the discogs input
 
 		editSong.save - Ctrl - S - Saves song
-		editSong.close - Ctrl - X - Closes modal
+		editSong.save - Ctrl - Alt - S - Saves song and closes the modal
+		editSong.save - Ctrl - Alt - V - Saves song, verifies songs and then closes the modal
+		editSong.close - F4 - Closes modal without saving
 
 		editSong.useAllDiscogs - Ctrl - Alt - D - Sets all fields to the Discogs data
-		editSong.resetDuration - Ctrl - Alt - R - Resets the duration
 
 		Inside Discogs inputs: Ctrl - D - Sets this field to the Discogs data
 
@@ -1076,16 +945,17 @@ export default {
 			"editSong.pauseResume",
 			"editSong.stopVideo",
 			"editSong.skipToLast10Secs",
-			"editSong.volumeDown5",
-			"editSong.volumeDown1",
-			"editSong.volumeUp5",
-			"editSong.volumeUp1",
+			"editSong.lowerVolumeLarge",
+			"editSong.lowerVolumeSmall",
+			"editSong.increaseVolumeLarge",
+			"editSong.increaseVolumeSmall",
 			"editSong.focusTitle",
 			"editSong.focusDicogs",
 			"editSong.save",
+			"editSong.saveClose",
+			"editSong.saveVerifyClose",
 			"editSong.close",
-			"editSong.useAllDiscogs",
-			"editSong.resetDuration"
+			"editSong.useAllDiscogs"
 		];
 
 		shortcutNames.forEach(shortcutName => {
@@ -1104,7 +974,7 @@ export default {
 			let saveButtonRef = this.$refs.saveButton;
 			if (close) saveButtonRef = this.$refs.saveAndCloseButton;
 
-			if (this.youtubeVideoDuration === "0.000") {
+			if (!this.youtubeError && this.youtubeVideoDuration === "0.000") {
 				saveButtonRef.handleFailedSave();
 				return new Toast("The video appears to not be working.");
 			}
@@ -1119,32 +989,45 @@ export default {
 				return new Toast("Please fill in all fields");
 			}
 
-			const thumbnailHeight = this.$refs.thumbnailElement.naturalHeight;
-			const thumbnailWidth = this.$refs.thumbnailElement.naturalWidth;
-
-			if (thumbnailHeight < 80 || thumbnailWidth < 80) {
-				saveButtonRef.handleFailedSave();
-				return new Toast(
-					"Thumbnail width and height must be at least 80px."
-				);
-			}
-
-			if (thumbnailHeight > 4000 || thumbnailWidth > 4000) {
+			// const thumbnailHeight = this.$refs.thumbnailElement.naturalHeight;
+			// const thumbnailWidth = this.$refs.thumbnailElement.naturalWidth;
+
+			// if (thumbnailHeight < 80 || thumbnailWidth < 80) {
+			// 	saveButtonRef.handleFailedSave();
+			// 	return new Toast(
+			// 		"Thumbnail width and height must be at least 80px."
+			// 	);
+			// }
+
+			// if (thumbnailHeight > 4000 || thumbnailWidth > 4000) {
+			// 	saveButtonRef.handleFailedSave();
+			// 	return new Toast(
+			// 		"Thumbnail width and height must be less than 4000px."
+			// 	);
+			// }
+
+			// if (thumbnailHeight - thumbnailWidth > 5) {
+			// 	saveButtonRef.handleFailedSave();
+			// 	return new Toast("Thumbnail cannot be taller than it is wide.");
+			// }
+
+			// Youtube Id
+			if (
+				this.youtubeError &&
+				this.originalSong.youtubeId !== song.youtubeId
+			) {
 				saveButtonRef.handleFailedSave();
 				return new Toast(
-					"Thumbnail width and height must be less than 4000px."
+					"You're not allowed to change the YouTube id while the player is not working"
 				);
 			}
 
-			if (thumbnailHeight - thumbnailWidth > 5) {
-				saveButtonRef.handleFailedSave();
-				return new Toast("Thumbnail cannot be taller than it is wide.");
-			}
-
 			// Duration
 			if (
 				Number(song.skipDuration) + Number(song.duration) >
-				this.youtubeVideoDuration
+					this.youtubeVideoDuration &&
+				(!this.youtubeError ||
+					this.originalSong.duration !== song.duration)
 			) {
 				saveButtonRef.handleFailedSave();
 				return new Toast(
@@ -1246,42 +1129,6 @@ export default {
 				if (close) this.closeModal("editSong");
 			});
 		},
-		toggleAPIResult(index) {
-			const apiResult = this.discogs.apiResults[index];
-			if (apiResult.expanded === true) apiResult.expanded = false;
-			else if (apiResult.gotMoreInfo === true) apiResult.expanded = true;
-			else {
-				fetch(apiResult.album.resourceUrl)
-					.then(response => {
-						return response.json();
-					})
-					.then(data => {
-						apiResult.album.artists = [];
-						apiResult.album.artistIds = [];
-						const artistRegex = new RegExp(" \\([0-9]+\\)$");
-
-						apiResult.dataQuality = data.data_quality;
-						data.artists.forEach(artist => {
-							apiResult.album.artists.push(
-								artist.name.replace(artistRegex, "")
-							);
-							apiResult.album.artistIds.push(artist.id);
-						});
-						apiResult.tracks = data.tracklist.map(track => {
-							return {
-								position: track.position,
-								title: track.title
-							};
-						});
-						apiResult.expanded = true;
-						apiResult.gotMoreInfo = true;
-					});
-			}
-		},
-		fillDuration() {
-			this.song.duration =
-				this.youtubeVideoDuration - this.song.skipDuration;
-		},
 		getAlbumData(type) {
 			if (!this.song.discogs) return;
 			if (type === "title")
@@ -1309,73 +1156,9 @@ export default {
 					)
 				});
 		},
-		searchDiscogsForPage(page) {
-			const query = this.discogsQuery;
-
-			this.socket.dispatch("apis.searchDiscogs", query, page, res => {
-				if (res.status === "success") {
-					if (page === 1)
-						new Toast(
-							`Successfully searched. Got ${res.data.results.length} results.`
-						);
-					else
-						new Toast(
-							`Successfully got ${res.data.results.length} more results.`
-						);
-
-					if (page === 1) {
-						this.discogs.apiResults = [];
-					}
-
-					this.discogs.pages = res.data.pages;
-
-					this.discogs.apiResults = this.discogs.apiResults.concat(
-						res.data.results.map(result => {
-							const type =
-								result.type.charAt(0).toUpperCase() +
-								result.type.slice(1);
-
-							return {
-								expanded: false,
-								gotMoreInfo: false,
-								album: {
-									id: result.id,
-									title: result.title,
-									type,
-									year: result.year,
-									genres: result.genre,
-									albumArt: result.cover_image,
-									resourceUrl: result.resource_url
-								}
-							};
-						})
-					);
-
-					this.discogs.page = page;
-					this.discogs.disableLoadMore = false;
-				} else new Toast(res.message);
-			});
-		},
-		loadNextDiscogsPage() {
-			this.discogs.disableLoadMore = true;
-			this.searchDiscogsForPage(this.discogs.page + 1);
-		},
-		onDiscogsQueryChange() {
-			this.discogs.page = 1;
-			this.discogs.pages = 1;
-			this.discogs.apiResults = [];
-			this.discogs.disableLoadMore = false;
-		},
-		selectTrack(apiResultIndex, trackIndex) {
-			const apiResult = JSON.parse(
-				JSON.stringify(this.discogs.apiResults[apiResultIndex])
-			);
-			apiResult.track = apiResult.tracks[trackIndex];
-			delete apiResult.tracks;
-			delete apiResult.expanded;
-			delete apiResult.gotMoreInfo;
-
-			this.selectDiscogsInfo(apiResult);
+		fillDuration() {
+			this.song.duration =
+				this.youtubeVideoDuration - this.song.skipDuration;
 		},
 		blurArtistInput() {
 			this.artistInputFocussed = false;
@@ -1617,6 +1400,12 @@ export default {
 		// 	});
 		// },
 		...mapActions("modals/importAlbum", ["selectDiscogsAlbum"]),
+		...mapActions({
+			showTab(dispatch, payload) {
+				this.$refs[`${payload}-tab`].scrollIntoView();
+				return dispatch("modals/editSong/showTab", payload);
+			}
+		}),
 		...mapActions("modals/editSong", [
 			"stopVideo",
 			"loadVideoById",
@@ -1624,7 +1413,7 @@ export default {
 			"getCurrentTime",
 			"editSong",
 			"updateSongField",
-			"selectDiscogsInfo"
+			"updateReports"
 		]),
 		...mapActions("modalVisibility", ["closeModal", "openModal"])
 	}
@@ -1647,9 +1436,6 @@ export default {
 		}
 
 		.modal-card-foot {
-			div div {
-				margin-right: 5px;
-			}
 			.right {
 				display: flex;
 				margin-left: auto;
@@ -1699,6 +1485,23 @@ export default {
 			display: flex;
 			flex-direction: column;
 
+			.player-error {
+				height: 318px;
+				width: 530px;
+				display: block;
+				border: 1px rgba(163, 224, 255, 0.75) solid;
+				border-radius: 5px 5px 0px 0px;
+				display: flex;
+				align-items: center;
+
+				* {
+					margin: 0;
+					flex: 1;
+					font-size: 30px;
+					text-align: center;
+				}
+			}
+
 			.player-footer {
 				background-color: var(--light-grey);
 				border: 1px rgba(163, 224, 255, 0.75) solid;
@@ -1956,160 +1759,201 @@ export default {
 	display: flex;
 	flex-wrap: wrap;
 
-	.api-section {
+	#tabs-container {
 		width: 376px;
 		background-color: var(--light-grey);
 		border: 1px rgba(163, 224, 255, 0.75) solid;
 		border-radius: 5px;
-		padding: 16px;
+		// padding: 16px;
 		overflow: auto;
 		height: 100%;
 
-		> label {
-			margin-top: 12px;
-		}
-
-		.top-container {
+		#tab-selection {
 			display: flex;
+			overflow-x: auto;
 
-			img {
-				height: 85px;
-				width: 85px;
-			}
-
-			.right-container {
-				padding: 8px;
-				display: flex;
-				flex-direction: column;
-				flex: 1;
-
-				.album-title {
-					flex: 1;
-					font-weight: 600;
-				}
-
-				.bottom-row {
-					display: flex;
-					flex-flow: row;
-					line-height: 15px;
-
-					img {
-						height: 15px;
-						align-self: end;
-						flex: 1;
-						user-select: none;
-						-moz-user-select: none;
-						-ms-user-select: none;
-						-webkit-user-select: none;
-						cursor: pointer;
-					}
-
-					p {
-						text-align: right;
-					}
+			.button {
+				border-radius: 5px 5px 0 0;
+				border: 0;
+				text-transform: uppercase;
+				font-size: 14px;
+				color: var(--dark-grey-3);
+				background-color: var(--light-grey-2);
+				flex-grow: 1;
+				height: 32px;
 
-					.type-year {
-						font-size: 13px;
-						align-self: end;
-					}
+				&:not(:first-of-type) {
+					margin-left: 5px;
 				}
 			}
-		}
 
-		.bottom-container {
-			padding: 12px;
-
-			.bottom-container-field {
-				line-height: 16px;
-				margin-bottom: 8px;
+			.selected {
+				background-color: var(--primary-color) !important;
+				color: var(--white) !important;
 				font-weight: 600;
-
-				span {
-					font-weight: 400;
-				}
-			}
-
-			.bottom-container-field:last-of-type {
-				margin-bottom: 0;
-			}
-		}
-
-		.selected-discogs-info {
-			background-color: var(--white);
-			border: 1px solid var(--purple);
-			border-radius: 5px;
-			margin-bottom: 16px;
-
-			.selected-discogs-info-none {
-				font-size: 18px;
-				text-align: center;
-			}
-
-			.bottom-row > p {
-				flex: 1;
-			}
-		}
-
-		.api-result {
-			background-color: var(--white);
-			border: 0.5px solid var(--primary-color);
-			border-radius: 5px;
-			margin-bottom: 16px;
-		}
-
-		button {
-			background-color: var(--primary-color) !important;
-
-			&:focus,
-			&:hover {
-				filter: contrast(0.75);
-			}
-		}
-
-		.tracks {
-			margin-top: 12px;
-
-			.track:first-child {
-				margin-top: 0;
-				border-radius: 3px 3px 0 0;
-			}
-
-			.track:last-child {
-				border-radius: 0 0 3px 3px;
-			}
-
-			.track {
-				border: 0.5px solid var(--black);
-				margin-top: -1px;
-				line-height: 16px;
-				display: flex;
-				cursor: pointer;
-
-				span {
-					font-weight: 600;
-					display: inline-block;
-					margin-top: 7px;
-					margin-bottom: 7px;
-					margin-left: 7px;
-				}
-
-				p {
-					display: inline-block;
-					margin: 7px;
-					flex: 1;
-				}
-			}
-
-			.track:hover,
-			.track:focus {
-				background-color: var(--light-grey);
 			}
 		}
-
-		.discogs-load-more {
-			margin-bottom: 8px;
+		.tab {
+			// border: 1px solid var(--light-grey-3);
+			padding: 15px;
+			// border-radius: 0 0 5px 5px;
 		}
 	}
+
+	// .api-section {
+	// 	width: 376px;
+	// 	background-color: var(--light-grey);
+	// 	border: 1px rgba(163, 224, 255, 0.75) solid;
+	// 	border-radius: 5px;
+	// 	padding: 16px;
+	// 	overflow: auto;
+	// 	height: 100%;
+
+	// 	> label {
+	// 		margin-top: 12px;
+	// 	}
+
+	// 	.top-container {
+	// 		display: flex;
+
+	// 		img {
+	// 			height: 85px;
+	// 			width: 85px;
+	// 		}
+
+	// 		.right-container {
+	// 			padding: 8px;
+	// 			display: flex;
+	// 			flex-direction: column;
+	// 			flex: 1;
+
+	// 			.album-title {
+	// 				flex: 1;
+	// 				font-weight: 600;
+	// 			}
+
+	// 			.bottom-row {
+	// 				display: flex;
+	// 				flex-flow: row;
+	// 				line-height: 15px;
+
+	// 				img {
+	// 					height: 15px;
+	// 					align-self: end;
+	// 					flex: 1;
+	// 					user-select: none;
+	// 					-moz-user-select: none;
+	// 					-ms-user-select: none;
+	// 					-webkit-user-select: none;
+	// 					cursor: pointer;
+	// 				}
+
+	// 				p {
+	// 					text-align: right;
+	// 				}
+
+	// 				.type-year {
+	// 					font-size: 13px;
+	// 					align-self: end;
+	// 				}
+	// 			}
+	// 		}
+	// 	}
+
+	// 	.bottom-container {
+	// 		padding: 12px;
+
+	// 		.bottom-container-field {
+	// 			line-height: 16px;
+	// 			margin-bottom: 8px;
+	// 			font-weight: 600;
+
+	// 			span {
+	// 				font-weight: 400;
+	// 			}
+	// 		}
+
+	// 		.bottom-container-field:last-of-type {
+	// 			margin-bottom: 0;
+	// 		}
+	// 	}
+
+	// 	.selected-discogs-info {
+	// 		background-color: var(--white);
+	// 		border: 1px solid var(--purple);
+	// 		border-radius: 5px;
+	// 		margin-bottom: 16px;
+
+	// 		.selected-discogs-info-none {
+	// 			font-size: 18px;
+	// 			text-align: center;
+	// 		}
+
+	// 		.bottom-row > p {
+	// 			flex: 1;
+	// 		}
+	// 	}
+
+	// 	.api-result {
+	// 		background-color: var(--white);
+	// 		border: 0.5px solid var(--primary-color);
+	// 		border-radius: 5px;
+	// 		margin-bottom: 16px;
+	// 	}
+
+	// 	button {
+	// 		background-color: var(--primary-color) !important;
+
+	// 		&:focus,
+	// 		&:hover {
+	// 			filter: contrast(0.75);
+	// 		}
+	// 	}
+
+	// 	.tracks {
+	// 		margin-top: 12px;
+
+	// 		.track:first-child {
+	// 			margin-top: 0;
+	// 			border-radius: 3px 3px 0 0;
+	// 		}
+
+	// 		.track:last-child {
+	// 			border-radius: 0 0 3px 3px;
+	// 		}
+
+	// 		.track {
+	// 			border: 0.5px solid var(--black);
+	// 			margin-top: -1px;
+	// 			line-height: 16px;
+	// 			display: flex;
+	// 			cursor: pointer;
+
+	// 			span {
+	// 				font-weight: 600;
+	// 				display: inline-block;
+	// 				margin-top: 7px;
+	// 				margin-bottom: 7px;
+	// 				margin-left: 7px;
+	// 			}
+
+	// 			p {
+	// 				display: inline-block;
+	// 				margin: 7px;
+	// 				flex: 1;
+	// 			}
+	// 		}
+
+	// 		.track:hover,
+	// 		.track:focus {
+	// 			background-color: var(--light-grey);
+	// 		}
+	// 	}
+
+	// 	.discogs-load-more {
+	// 		margin-bottom: 8px;
+	// 	}
+	// }
 }
 
 .modal-card-foot .is-primary {

frontend/src/components/modals/ManageStationKris/Tabs/Playlists.vue

@@ -0,0 +1,1012 @@
+<template>
+	<div class="station-playlists">
+		<div class="tabs-container">
+			<div class="tab-selection">
+				<button
+					class="button is-default"
+					ref="search-tab"
+					:class="{ selected: tab === 'search' }"
+					@click="showTab('search')"
+				>
+					Search
+				</button>
+				<button
+					v-if="station.type === 'community'"
+					class="button is-default"
+					ref="my-playlists-tab"
+					:class="{ selected: tab === 'my-playlists' }"
+					@click="showTab('my-playlists')"
+				>
+					My Playlists
+				</button>
+				<button
+					class="button is-default"
+					ref="party-tab"
+					:class="{ selected: tab === 'party' }"
+					v-if="isPartyMode()"
+					@click="showTab('party')"
+				>
+					Party
+				</button>
+				<button
+					class="button is-default"
+					ref="included-tab"
+					:class="{ selected: tab === 'included' }"
+					v-if="isPlaylistMode()"
+					@click="showTab('included')"
+				>
+					Included
+				</button>
+				<button
+					class="button is-default"
+					ref="excluded-tab"
+					:class="{ selected: tab === 'excluded' }"
+					@click="showTab('excluded')"
+				>
+					Excluded
+				</button>
+			</div>
+			<div class="tab" v-show="tab === 'search'">
+				<label class="label"> Search for a public playlist </label>
+				<div class="control is-grouped input-with-button">
+					<p class="control is-expanded">
+						<input
+							class="input"
+							type="text"
+							placeholder="Enter your playlist query here..."
+							v-model="search.query"
+							@keyup.enter="searchForPlaylists(1)"
+						/>
+					</p>
+					<p class="control">
+						<a class="button is-info" @click="searchForPlaylists(1)"
+							><i class="material-icons icon-with-button"
+								>search</i
+							>Search</a
+						>
+					</p>
+				</div>
+				<div v-if="search.results.length > 0">
+					<playlist-item
+						v-for="playlist in search.results"
+						:key="`searchKey-${playlist._id}`"
+						:playlist="playlist"
+						:show-owner="true"
+					>
+						<i
+							class="material-icons"
+							slot="item-icon"
+							v-if="
+								isAllowedToParty() && isSelected(playlist._id)
+							"
+							content="This playlist is currently selected"
+							v-tippy
+						>
+							radio
+						</i>
+						<i
+							class="material-icons"
+							slot="item-icon"
+							v-else-if="
+								isOwnerOrAdmin() &&
+									isPlaylistMode() &&
+									isIncluded(playlist._id)
+							"
+							content="This playlist is currently included"
+							v-tippy
+						>
+							play_arrow
+						</i>
+						<i
+							class="material-icons excluded-icon"
+							slot="item-icon"
+							v-else-if="
+								isOwnerOrAdmin() && isExcluded(playlist._id)
+							"
+							content="This playlist is currently excluded"
+							v-tippy
+						>
+							block
+						</i>
+						<i
+							class="material-icons"
+							slot="item-icon"
+							v-else
+							:content="
+								isPartyMode()
+									? 'This playlist is currently not selected or excluded'
+									: 'This playlist is currently not included or excluded'
+							"
+							v-tippy
+						>
+							play_disabled
+						</i>
+						<div class="icons-group" slot="actions">
+							<i
+								v-if="isExcluded(playlist._id)"
+								class="material-icons stop-icon"
+								content="This playlist is blacklisted in this station"
+								v-tippy="{ theme: 'info' }"
+								>play_disabled</i
+							>
+							<confirm
+								v-if="isPartyMode() && isSelected(playlist._id)"
+								@confirm="deselectPartyPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() &&
+										isPlaylistMode() &&
+										isIncluded(playlist._id)
+								"
+								@confirm="removeIncludedPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<i
+								v-if="
+									isPartyMode() &&
+										!isSelected(playlist._id) &&
+										!isExcluded(playlist._id)
+								"
+								@click="selectPartyPlaylist(playlist)"
+								class="material-icons play-icon"
+								content="Request songs from this playlist"
+								v-tippy
+								>play_arrow</i
+							>
+							<i
+								v-if="
+									isOwnerOrAdmin() &&
+										isPlaylistMode() &&
+										!isIncluded(playlist._id) &&
+										!isExcluded(playlist._id)
+								"
+								@click="includePlaylist(playlist)"
+								class="material-icons play-icon"
+								:content="'Play songs from this playlist'"
+								v-tippy
+								>play_arrow</i
+							>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() &&
+										!isExcluded(playlist._id)
+								"
+								@confirm="blacklistPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Blacklist Playlist"
+									v-tippy
+									>block</i
+								>
+							</confirm>
+							<confirm
+								v-if="
+									isOwnerOrAdmin() && isExcluded(playlist._id)
+								"
+								@confirm="removeExcludedPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop blacklisting songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<i
+								v-if="playlist.createdBy === myUserId"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-if="
+									playlist.createdBy !== myUserId &&
+										(playlist.privacy === 'public' ||
+											isAdmin())
+								"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
+						</div>
+					</playlist-item>
+					<button
+						v-if="resultsLeftCount > 0"
+						class="button is-primary load-more-button"
+						@click="searchForPlaylists(search.page + 1)"
+					>
+						Load {{ nextPageResultsCount }} more results
+					</button>
+				</div>
+			</div>
+			<div
+				v-if="station.type === 'community'"
+				class="tab"
+				v-show="tab === 'my-playlists'"
+			>
+				<button
+					class="button is-primary"
+					id="create-new-playlist-button"
+					@click="openModal('createPlaylist')"
+				>
+					Create new playlist
+				</button>
+				<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"
+					>
+						<playlist-item
+							class="item-draggable"
+							v-for="playlist in playlists"
+							:key="playlist._id"
+							:playlist="playlist"
+						>
+							<i
+								class="material-icons"
+								slot="item-icon"
+								v-if="
+									isAllowedToParty() &&
+										isSelected(playlist._id)
+								"
+								content="This playlist is currently selected"
+								v-tippy
+							>
+								radio
+							</i>
+							<i
+								class="material-icons"
+								slot="item-icon"
+								v-else-if="
+									isOwnerOrAdmin() &&
+										isPlaylistMode() &&
+										isIncluded(playlist._id)
+								"
+								content="This playlist is currently included"
+								v-tippy
+							>
+								play_arrow
+							</i>
+							<i
+								class="material-icons excluded-icon"
+								slot="item-icon"
+								v-else-if="
+									isOwnerOrAdmin() && isExcluded(playlist._id)
+								"
+								content="This playlist is currently excluded"
+								v-tippy
+							>
+								block
+							</i>
+							<i
+								class="material-icons"
+								slot="item-icon"
+								v-else
+								:content="
+									isPartyMode()
+										? 'This playlist is currently not selected or excluded'
+										: 'This playlist is currently not included or excluded'
+								"
+								v-tippy
+							>
+								play_disabled
+							</i>
+							<div slot="actions">
+								<!-- <i
+									v-if="isExcluded(playlist._id)"
+									class="material-icons stop-icon"
+									content="This playlist is blacklisted in this station"
+									v-tippy="{ theme: 'info' }"
+									>play_disabled</i
+								> -->
+								<i
+									v-if="
+										isPartyMode() &&
+											!isSelected(playlist._id)
+									"
+									@click="selectPartyPlaylist(playlist)"
+									class="material-icons play-icon"
+									content="Request songs from this playlist"
+									v-tippy
+									>play_arrow</i
+								>
+								<i
+									v-if="
+										isPlaylistMode() &&
+											isOwnerOrAdmin() &&
+											!isSelected(playlist._id)
+									"
+									@click="includePlaylist(playlist)"
+									class="material-icons play-icon"
+									content="Play songs from this playlist"
+									v-tippy
+									>play_arrow</i
+								>
+								<confirm
+									v-if="
+										isPartyMode() &&
+											isSelected(playlist._id)
+									"
+									@confirm="
+										deselectPartyPlaylist(playlist._id)
+									"
+								>
+									<i
+										class="material-icons stop-icon"
+										content="Stop requesting songs from this playlist"
+										v-tippy
+										>stop</i
+									>
+								</confirm>
+								<confirm
+									v-if="
+										isPlaylistMode() &&
+											isOwnerOrAdmin() &&
+											isIncluded(playlist._id)
+									"
+									@confirm="
+										removeIncludedPlaylist(playlist._id)
+									"
+								>
+									<i
+										class="material-icons stop-icon"
+										content="Stop playing songs from this playlist"
+										v-tippy
+										>stop</i
+									>
+								</confirm>
+								<confirm
+									v-if="
+										isOwnerOrAdmin() &&
+											!isExcluded(playlist._id)
+									"
+									@confirm="blacklistPlaylist(playlist._id)"
+								>
+									<i
+										class="material-icons stop-icon"
+										content="Blacklist Playlist"
+										v-tippy
+										>block</i
+									>
+								</confirm>
+								<confirm
+									v-if="
+										isOwnerOrAdmin() &&
+											isExcluded(playlist._id)
+									"
+									@confirm="
+										removeExcludedPlaylist(playlist._id)
+									"
+								>
+									<i
+										class="material-icons stop-icon"
+										content="Stop blacklisting songs from this playlist"
+										v-tippy
+									>
+										stop
+									</i>
+								</confirm>
+								<i
+									@click="showPlaylist(playlist._id)"
+									class="material-icons edit-icon"
+									content="Edit Playlist"
+									v-tippy
+									>edit</i
+								>
+							</div>
+						</playlist-item>
+					</transition-group>
+				</draggable>
+				<p v-else class="has-text-centered scrollable-list">
+					You don't have any playlists!
+				</p>
+			</div>
+			<div class="tab" v-show="tab === 'party'" v-if="isPartyMode()">
+				<div v-if="partyPlaylists.length > 0">
+					<playlist-item
+						v-for="playlist in partyPlaylists"
+						:key="`key-${playlist._id}`"
+						:playlist="playlist"
+						:show-owner="true"
+					>
+						<i
+							class="material-icons"
+							slot="item-icon"
+							content="This playlist is currently selected"
+							v-tippy
+						>
+							radio
+						</i>
+						<div class="icons-group" slot="actions">
+							<confirm
+								v-if="isOwnerOrAdmin()"
+								@confirm="deselectPartyPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<confirm
+								v-if="isOwnerOrAdmin()"
+								@confirm="blacklistPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Blacklist Playlist"
+									v-tippy
+									>block</i
+								>
+							</confirm>
+							<i
+								v-if="playlist.createdBy === myUserId"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-if="
+									playlist.createdBy !== myUserId &&
+										(playlist.privacy === 'public' ||
+											isAdmin())
+								"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
+						</div>
+					</playlist-item>
+				</div>
+				<p v-else class="has-text-centered scrollable-list">
+					No playlists currently being played.
+				</p>
+			</div>
+			<div
+				class="tab"
+				v-show="tab === 'included'"
+				v-if="isPlaylistMode()"
+			>
+				<div v-if="includedPlaylists.length > 0">
+					<playlist-item
+						v-for="playlist in includedPlaylists"
+						:key="`key-${playlist._id}`"
+						:playlist="playlist"
+						:show-owner="true"
+					>
+						<i
+							class="material-icons"
+							slot="item-icon"
+							content="This playlist is currently included"
+							v-tippy
+						>
+							play_arrow
+						</i>
+						<div class="icons-group" slot="actions">
+							<confirm
+								v-if="isOwnerOrAdmin()"
+								@confirm="removeIncludedPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop playing songs from this playlist"
+									v-tippy
+								>
+									stop
+								</i>
+							</confirm>
+							<confirm
+								v-if="isOwnerOrAdmin()"
+								@confirm="blacklistPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Blacklist Playlist"
+									v-tippy
+									>block</i
+								>
+							</confirm>
+							<i
+								v-if="playlist.createdBy === myUserId"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="Edit Playlist"
+								v-tippy
+								>edit</i
+							>
+							<i
+								v-if="
+									playlist.createdBy !== myUserId &&
+										(playlist.privacy === 'public' ||
+											isAdmin())
+								"
+								@click="showPlaylist(playlist._id)"
+								class="material-icons edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
+						</div>
+					</playlist-item>
+				</div>
+				<p v-else class="has-text-centered scrollable-list">
+					No playlists currently included.
+				</p>
+			</div>
+			<div
+				class="tab"
+				v-show="tab === 'excluded'"
+				v-if="isOwnerOrAdmin()"
+			>
+				<div v-if="excludedPlaylists.length > 0">
+					<playlist-item
+						:playlist="playlist"
+						v-for="playlist in excludedPlaylists"
+						:key="`key-${playlist._id}`"
+					>
+						<i
+							class="material-icons excluded-icon"
+							slot="item-icon"
+							content="This playlist is currently excluded"
+							v-tippy
+						>
+							block
+						</i>
+						<div class="icons-group" slot="actions">
+							<confirm
+								@confirm="removeExcludedPlaylist(playlist._id)"
+							>
+								<i
+									class="material-icons stop-icon"
+									content="Stop blacklisting songs from this playlist
+							"
+									v-tippy
+									>stop</i
+								>
+							</confirm>
+							<i
+								v-if="playlist.createdBy === 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 edit-icon"
+								content="View Playlist"
+								v-tippy
+								>visibility</i
+							>
+						</div>
+					</playlist-item>
+				</div>
+				<p v-else class="has-text-centered scrollable-list">
+					No playlists currently excluded.
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import { mapActions, mapState, mapGetters } from "vuex";
+
+import Toast from "toasters";
+import PlaylistItem from "@/components/PlaylistItem.vue";
+import Confirm from "@/components/Confirm.vue";
+
+import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
+
+export default {
+	components: {
+		PlaylistItem,
+		Confirm
+	},
+	mixins: [SortablePlaylists],
+	data() {
+		return {
+			tab: "included",
+			search: {
+				query: "",
+				searchedQuery: "",
+				page: 0,
+				count: 0,
+				resultsLeft: 0,
+				results: []
+			}
+		};
+	},
+	computed: {
+		resultsLeftCount() {
+			return this.search.count - this.search.results.length;
+		},
+		nextPageResultsCount() {
+			return Math.min(this.search.pageSize, this.resultsLeftCount);
+		},
+		...mapState({
+			loggedIn: state => state.user.auth.loggedIn,
+			role: state => state.user.auth.role,
+			userId: state => state.user.auth.userId,
+			partyPlaylists: state => state.station.partyPlaylists
+		}),
+		...mapState("modals/manageStation", {
+			parentTab: state => state.tab,
+			originalStation: state => state.originalStation,
+			station: state => state.station,
+			includedPlaylists: state => state.includedPlaylists,
+			excludedPlaylists: state => state.excludedPlaylists,
+			songsList: state => state.songsList
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	watch: {
+		// eslint-disable-next-line func-names
+		parentTab(value) {
+			if (value === "playlists") {
+				if (this.tab === "included" && this.isPartyMode()) {
+					this.showTab("party");
+				} else if (this.tab === "party" && this.isPlaylistMode()) {
+					this.showTab("included");
+				}
+			}
+		}
+	},
+	mounted() {
+		if (this.station.type === "community" && this.station.partyMode)
+			this.showTab("search");
+
+		this.socket.dispatch("playlists.indexMyPlaylists", true, res => {
+			if (res.status === "success") this.setPlaylists(res.data.playlists);
+			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
+		});
+
+		this.socket.dispatch(
+			`stations.getStationIncludedPlaylistsById`,
+			this.station._id,
+			res => {
+				if (res.status === "success") {
+					this.station.includedPlaylists = res.data.playlists;
+					this.originalStation.includedPlaylists = res.data.playlists;
+				}
+			}
+		);
+
+		this.socket.dispatch(
+			`stations.getStationExcludedPlaylistsById`,
+			this.station._id,
+			res => {
+				if (res.status === "success") {
+					this.station.excludedPlaylists = res.data.playlists;
+					this.originalStation.excludedPlaylists = res.data.playlists;
+				}
+			}
+		);
+	},
+	methods: {
+		showTab(tab) {
+			this.$refs[`${tab}-tab`].scrollIntoView();
+			this.tab = tab;
+		},
+		isOwner() {
+			return (
+				this.loggedIn &&
+				this.station &&
+				this.userId === this.station.owner
+			);
+		},
+		isAdmin() {
+			return this.loggedIn && this.role === "admin";
+		},
+		isOwnerOrAdmin() {
+			return this.isOwner() || this.isAdmin();
+		},
+		isPartyMode() {
+			return (
+				this.station &&
+				this.station.type === "community" &&
+				this.station.partyMode
+			);
+		},
+		isAllowedToParty() {
+			return (
+				this.station &&
+				this.isPartyMode() &&
+				(!this.station.locked || this.isOwnerOrAdmin()) &&
+				this.loggedIn
+			);
+		},
+		isPlaylistMode() {
+			return this.station && !this.isPartyMode();
+		},
+		showPlaylist(playlistId) {
+			this.editPlaylist(playlistId);
+			this.openModal("editPlaylist");
+		},
+		selectPartyPlaylist(playlist) {
+			if (!this.isSelected(playlist.id)) {
+				this.partyPlaylists.push(playlist);
+				this.addPartyPlaylistSongToQueue();
+				new Toast(
+					"Successfully selected playlist to auto request songs."
+				);
+			} else {
+				new Toast("Error: Playlist already selected.");
+			}
+		},
+		includePlaylist(playlist) {
+			this.socket.dispatch(
+				"stations.includePlaylist",
+				this.station._id,
+				playlist._id,
+				res => {
+					new Toast(res.message);
+				}
+			);
+		},
+		deselectPartyPlaylist(id) {
+			return new Promise(resolve => {
+				let selected = false;
+				this.partyPlaylists.forEach((playlist, index) => {
+					if (playlist._id === id) {
+						selected = true;
+						this.partyPlaylists.splice(index, 1);
+					}
+				});
+				if (selected) {
+					new Toast("Successfully deselected playlist.");
+					resolve();
+				} else {
+					new Toast("Playlist not selected.");
+					resolve();
+				}
+			});
+		},
+		removeIncludedPlaylist(id) {
+			return new Promise(resolve => {
+				this.socket.dispatch(
+					"stations.removeIncludedPlaylist",
+					this.station._id,
+					id,
+					res => {
+						new Toast(res.message);
+						resolve();
+					}
+				);
+			});
+		},
+		removeExcludedPlaylist(id) {
+			return new Promise(resolve => {
+				this.socket.dispatch(
+					"stations.removeExcludedPlaylist",
+					this.station._id,
+					id,
+					res => {
+						new Toast(res.message);
+						resolve();
+					}
+				);
+			});
+		},
+		isSelected(id) {
+			let selected = false;
+			this.partyPlaylists.forEach(playlist => {
+				if (playlist._id === id) selected = true;
+			});
+			return selected;
+		},
+		isIncluded(id) {
+			let included = false;
+			this.includedPlaylists.forEach(playlist => {
+				if (playlist._id === id) included = true;
+			});
+			return included;
+		},
+		isExcluded(id) {
+			let selected = false;
+			this.excludedPlaylists.forEach(playlist => {
+				if (playlist._id === id) selected = true;
+			});
+			return selected;
+		},
+		searchForPlaylists(page) {
+			if (
+				this.search.page >= page ||
+				this.search.searchedQuery !== this.search.query
+			) {
+				this.search.results = [];
+				this.search.page = 0;
+				this.search.count = 0;
+				this.search.resultsLeft = 0;
+				this.search.pageSize = 0;
+			}
+
+			const { query } = this.search;
+			const action =
+				this.station.type === "official"
+					? "playlists.searchOfficial"
+					: "playlists.searchCommunity";
+
+			this.search.searchedQuery = this.search.query;
+			this.socket.dispatch(action, query, page, res => {
+				const { data } = res;
+				const { count, pageSize, playlists } = data;
+				if (res.status === "success") {
+					this.search.results = [
+						...this.search.results,
+						...playlists
+					];
+					this.search.page = page;
+					this.search.count = count;
+					this.search.resultsLeft =
+						count - this.search.results.length;
+					this.search.pageSize = pageSize;
+				} else if (res.status === "error") {
+					this.search.results = [];
+					this.search.page = 0;
+					this.search.count = 0;
+					this.search.resultsLeft = 0;
+					this.search.pageSize = 0;
+					new Toast(res.message);
+				}
+			});
+		},
+		async blacklistPlaylist(id) {
+			if (this.isIncluded(id)) await this.removeIncludedPlaylist(id);
+
+			this.socket.dispatch(
+				"stations.excludePlaylist",
+				this.station._id,
+				id,
+				res => {
+					new Toast(res.message);
+				}
+			);
+		},
+		addPartyPlaylistSongToQueue() {
+			let isInQueue = false;
+			if (
+				this.station.type === "community" &&
+				this.station.partyMode === true
+			) {
+				this.songsList.forEach(queueSong => {
+					if (queueSong.requestedBy === this.userId) isInQueue = true;
+				});
+				if (!isInQueue && this.partyPlaylists) {
+					const selectedPlaylist = this.partyPlaylists[
+						Math.floor(Math.random() * this.partyPlaylists.length)
+					];
+					if (
+						selectedPlaylist._id &&
+						selectedPlaylist.songs.length > 0
+					) {
+						const selectedSong =
+							selectedPlaylist.songs[
+								Math.floor(
+									Math.random() *
+										selectedPlaylist.songs.length
+								)
+							];
+						if (selectedSong.youtubeId) {
+							this.socket.dispatch(
+								"stations.addToQueue",
+								this.station._id,
+								selectedSong.youtubeId,
+								data => {
+									if (data.status !== "success")
+										new Toast("Error auto queueing song");
+								}
+							);
+						}
+					}
+				}
+			}
+		},
+		...mapActions("station", ["updatePartyPlaylists"]),
+		...mapActions("modalVisibility", ["openModal"]),
+		...mapActions("user/playlists", ["editPlaylist", "setPlaylists"])
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.excluded-icon {
+	color: var(--red);
+}
+
+.included-icon {
+	color: var(--green);
+}
+
+.selected-icon {
+	color: var(--purple);
+}
+
+.station-playlists {
+	.tabs-container {
+		.tab-selection {
+			display: flex;
+			overflow-x: auto;
+			.button {
+				border-radius: 0;
+				border: 0;
+				text-transform: uppercase;
+				font-size: 14px;
+				color: var(--dark-grey-3);
+				background-color: var(--light-grey-2);
+				flex-grow: 1;
+				height: 32px;
+
+				&:not(:first-of-type) {
+					margin-left: 5px;
+				}
+			}
+
+			.selected {
+				background-color: var(--primary-color) !important;
+				color: var(--white) !important;
+				font-weight: 600;
+			}
+		}
+		.tab {
+			padding: 15px 0;
+			border-radius: 0;
+			.playlist-item:not(:last-of-type),
+			.item.item-draggable:not(:last-of-type) {
+				margin-bottom: 10px;
+			}
+			.load-more-button {
+				width: 100%;
+				margin-top: 10px;
+			}
+		}
+	}
+}
+.draggable-list-transition-move {
+	transition: transform 0.5s;
+}
+
+.draggable-list-ghost {
+	opacity: 0.5;
+	filter: brightness(95%);
+}
+</style>

frontend/src/components/modals/ManageStationKris/Tabs/Songs.vue

@@ -0,0 +1,477 @@
+<template>
+	<div class="songs">
+		<div class="tabs-container">
+			<div class="tab-selection">
+				<button
+					class="button is-default"
+					:class="{ selected: tab === 'search' }"
+					v-if="isAllowedToParty()"
+					@click="showTab('search')"
+				>
+					Search
+				</button>
+				<button
+					class="button is-default"
+					:class="{ selected: tab === 'included' }"
+					v-if="isOwnerOrAdmin() && isPlaylistMode()"
+					@click="showTab('included')"
+				>
+					Included
+				</button>
+				<button
+					class="button is-default"
+					:class="{ selected: tab === 'excluded' }"
+					v-if="isOwnerOrAdmin()"
+					@click="showTab('excluded')"
+				>
+					Excluded
+				</button>
+			</div>
+			<div
+				class="tab"
+				v-show="tab === 'search'"
+				v-if="
+					station.type === 'community' &&
+						station.partyMode &&
+						(isOwnerOrAdmin() || !station.locked)
+				"
+			>
+				<div class="musare-songs">
+					<label class="label"> Search for a song on Musare </label>
+					<div class="control is-grouped input-with-button">
+						<p class="control is-expanded">
+							<input
+								class="input"
+								type="text"
+								placeholder="Enter your song query here..."
+								v-model="musareSearch.query"
+								@keyup.enter="searchForMusareSongs(1)"
+							/>
+						</p>
+						<p class="control">
+							<a
+								class="button is-info"
+								@click="searchForMusareSongs(1)"
+								><i class="material-icons icon-with-button"
+									>search</i
+								>Search</a
+							>
+						</p>
+					</div>
+					<div v-if="musareSearch.results.length > 0">
+						<song-item
+							v-for="song in musareSearch.results"
+							:key="song._id"
+							:song="song"
+						>
+							<div class="song-actions" slot="actions">
+								<i
+									class="material-icons add-to-queue-icon"
+									v-if="station.partyMode && !station.locked"
+									@click="addSongToQueue(song.youtubeId)"
+									content="Add Song to Queue"
+									v-tippy
+									>queue</i
+								>
+							</div>
+						</song-item>
+						<button
+							v-if="resultsLeftCount > 0"
+							class="button is-primary load-more-button"
+							@click="searchForMusareSongs(musareSearch.page + 1)"
+						>
+							Load {{ nextPageResultsCount }} more results
+						</button>
+					</div>
+				</div>
+				<div class="youtube-search">
+					<label class="label"> Search for a song on YouTube </label>
+					<div class="control is-grouped input-with-button">
+						<p class="control is-expanded">
+							<input
+								class="input"
+								type="text"
+								placeholder="Enter your YouTube query here..."
+								v-model="search.songs.query"
+								autofocus
+								@keyup.enter="searchForSongs()"
+							/>
+						</p>
+						<p class="control">
+							<a
+								class="button is-info"
+								@click.prevent="searchForSongs()"
+								><i class="material-icons icon-with-button"
+									>search</i
+								>Search</a
+							>
+						</p>
+					</div>
+
+					<div
+						v-if="search.songs.results.length > 0"
+						id="song-query-results"
+					>
+						<search-query-item
+							v-for="(result, index) in search.songs.results"
+							:key="result.id"
+							:result="result"
+						>
+							<div slot="actions">
+								<transition
+									name="search-query-actions"
+									mode="out-in"
+								>
+									<a
+										class="button is-success"
+										v-if="result.isAddedToQueue"
+										key="added-to-queue"
+									>
+										<i
+											class="material-icons icon-with-button"
+											>done</i
+										>
+										Added to queue
+									</a>
+									<a
+										class="button is-dark"
+										v-else
+										@click.prevent="
+											addSongToQueue(result.id, index)
+										"
+										key="add-to-queue"
+									>
+										<i
+											class="material-icons icon-with-button"
+											>add</i
+										>
+										Add to queue
+									</a>
+								</transition>
+							</div>
+						</search-query-item>
+
+						<a
+							class="button is-primary load-more-button"
+							@click.prevent="loadMoreSongs()"
+						>
+							Load more...
+						</a>
+					</div>
+				</div>
+			</div>
+			<div
+				class="tab"
+				v-show="tab === 'included'"
+				v-if="
+					isOwnerOrAdmin() &&
+						!(station.type === 'community' && station.partyMode)
+				"
+			>
+				<div v-if="stationPlaylist.songs.length > 0">
+					<div id="playlist-info-section">
+						<h5>Song Count: {{ stationPlaylist.songs.length }}</h5>
+						<h5>Duration: {{ totalLength(stationPlaylist) }}</h5>
+					</div>
+					<song-item
+						v-for="song in stationPlaylist.songs"
+						:key="song._id"
+						:song="song"
+					>
+					</song-item>
+				</div>
+				<p v-else class="has-text-centered scrollable-list">
+					No songs currently included. To include songs, include a
+					playlist.
+				</p>
+			</div>
+			<div
+				class="tab"
+				v-show="tab === 'excluded'"
+				v-if="isOwnerOrAdmin()"
+			>
+				<div v-if="excludedSongs.length > 0">
+					<div id="playlist-info-section" class="section">
+						<h5>Song Count: {{ excludedSongs.length }}</h5>
+					</div>
+					<song-item
+						v-for="song in excludedSongs"
+						:key="song._id"
+						:song="song"
+					>
+					</song-item>
+				</div>
+				<p v-else class="has-text-centered scrollable-list">
+					No songs currently excluded. To excluded songs, exclude a
+					playlist.
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+
+import Toast from "toasters";
+import SearchYoutube from "@/mixins/SearchYoutube.vue";
+
+import SongItem from "@/components/SongItem.vue";
+import SearchQueryItem from "../../../SearchQueryItem.vue";
+
+import utils from "../../../../../js/utils";
+
+export default {
+	components: {
+		SongItem,
+		SearchQueryItem
+	},
+	mixins: [SearchYoutube],
+	data() {
+		return {
+			utils,
+			tab: "search",
+			musareSearch: {
+				query: "",
+				searchedQuery: "",
+				page: 0,
+				count: 0,
+				resultsLeft: 0,
+				results: []
+			}
+		};
+	},
+	computed: {
+		resultsLeftCount() {
+			return this.musareSearch.count - this.musareSearch.results.length;
+		},
+		nextPageResultsCount() {
+			return Math.min(this.musareSearch.pageSize, this.resultsLeftCount);
+		},
+		excludedSongs() {
+			return this.excludedPlaylists
+				.map(playlist => playlist.songs)
+				.flat()
+				.filter((song, index, self) => self.indexOf(song) === index);
+		},
+		excludedSongIds() {
+			return this.excludedSongs.map(excludedSong => excludedSong._id);
+		},
+		...mapState({
+			loggedIn: state => state.user.auth.loggedIn,
+			userId: state => state.user.auth.userId,
+			role: state => state.user.auth.role
+		}),
+		...mapState("modals/manageStation", {
+			parentTab: state => state.tab,
+			station: state => state.station,
+			originalStation: state => state.originalStation,
+			excludedPlaylists: state => state.excludedPlaylists,
+			stationPlaylist: state => state.stationPlaylist
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	watch: {
+		// eslint-disable-next-line func-names
+		parentTab(value) {
+			if (value === "songs") {
+				if (this.tab === "search" && this.isPlaylistMode()) {
+					this.showTab("included");
+				} else if (this.tab === "included" && this.isPartyMode()) {
+					this.showTab("search");
+				}
+			}
+		}
+	},
+	methods: {
+		showTab(tab) {
+			this.tab = tab;
+		},
+		isOwner() {
+			return (
+				this.loggedIn &&
+				this.station &&
+				this.userId === this.station.owner
+			);
+		},
+		isAdmin() {
+			return this.loggedIn && this.role === "admin";
+		},
+		isOwnerOrAdmin() {
+			return this.isOwner() || this.isAdmin();
+		},
+		isPartyMode() {
+			return (
+				this.station &&
+				this.station.type === "community" &&
+				this.station.partyMode
+			);
+		},
+		isAllowedToParty() {
+			return (
+				this.station &&
+				this.isPartyMode() &&
+				(!this.station.locked || this.isOwnerOrAdmin()) &&
+				this.loggedIn
+			);
+		},
+		isPlaylistMode() {
+			return this.station && !this.isPartyMode();
+		},
+		totalLength(playlist) {
+			let length = 0;
+			playlist.songs.forEach(song => {
+				length += song.duration;
+			});
+			return this.utils.formatTimeLong(length);
+		},
+		addSongToQueue(youtubeId, index) {
+			if (this.station.type === "community") {
+				this.socket.dispatch(
+					"stations.addToQueue",
+					this.station._id,
+					youtubeId,
+					res => {
+						if (res.status !== "success")
+							new Toast(`Error: ${res.message}`);
+						else {
+							if (index)
+								this.search.songs.results[
+									index
+								].isAddedToQueue = true;
+
+							new Toast(res.message);
+						}
+					}
+				);
+			} else {
+				this.socket.dispatch("songs.request", youtubeId, res => {
+					if (res.status !== "success")
+						new Toast(`Error: ${res.message}`);
+					else {
+						this.search.songs.results[index].isAddedToQueue = true;
+
+						new Toast(res.message);
+					}
+				});
+			}
+		},
+		searchForMusareSongs(page) {
+			if (
+				this.musareSearch.page >= page ||
+				this.musareSearch.searchedQuery !== this.musareSearch.query
+			) {
+				this.musareSearch.results = [];
+				this.musareSearch.page = 0;
+				this.musareSearch.count = 0;
+				this.musareSearch.resultsLeft = 0;
+				this.musareSearch.pageSize = 0;
+			}
+
+			this.musareSearch.searchedQuery = this.musareSearch.query;
+			this.socket.dispatch(
+				"songs.searchOfficial",
+				this.musareSearch.query,
+				page,
+				res => {
+					const { data } = res;
+					const { count, pageSize, songs } = data;
+					if (res.status === "success") {
+						this.musareSearch.results = [
+							...this.musareSearch.results,
+							...songs
+						];
+						this.musareSearch.page = page;
+						this.musareSearch.count = count;
+						this.musareSearch.resultsLeft =
+							count - this.musareSearch.results.length;
+						this.musareSearch.pageSize = pageSize;
+					} else if (res.status === "error") {
+						this.musareSearch.results = [];
+						this.musareSearch.page = 0;
+						this.musareSearch.count = 0;
+						this.musareSearch.resultsLeft = 0;
+						this.musareSearch.pageSize = 0;
+						new Toast(res.message);
+					}
+				}
+			);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.songs {
+	.tabs-container {
+		.tab-selection {
+			display: flex;
+			overflow-x: auto;
+			.button {
+				border-radius: 0;
+				border: 0;
+				text-transform: uppercase;
+				font-size: 14px;
+				color: var(--dark-grey-3);
+				background-color: var(--light-grey-2);
+				flex-grow: 1;
+				height: 32px;
+
+				&:not(:first-of-type) {
+					margin-left: 5px;
+				}
+			}
+
+			.selected {
+				background-color: var(--primary-color) !important;
+				color: var(--white) !important;
+				font-weight: 600;
+			}
+		}
+		.tab {
+			padding: 15px 0;
+			border-radius: 0;
+			.playlist-item:not(:last-of-type),
+			.item.item-draggable:not(:last-of-type) {
+				margin-bottom: 10px;
+			}
+			.load-more-button {
+				width: 100%;
+				margin-top: 10px;
+			}
+		}
+	}
+
+	.musare-songs,
+	.universal-item:not(:last-of-type) {
+		margin-bottom: 10px;
+	}
+	.load-more-button {
+		width: 100%;
+		margin-top: 10px;
+	}
+
+	#playlist-info-section {
+		border: 1px solid var(--light-grey-3);
+		border-radius: 3px;
+		padding: 15px !important;
+		margin-bottom: 16px;
+
+		h3 {
+			font-weight: 600;
+			font-size: 30px;
+		}
+
+		h5 {
+			font-size: 18px;
+		}
+
+		h3,
+		h5 {
+			margin: 0;
+		}
+	}
+}
+</style>

frontend/src/components/modals/ManageStationKris/index.vue

@@ -0,0 +1,836 @@
+<template>
+	<modal
+		v-if="station"
+		:title="
+			!isOwnerOrAdmin() && station.partyMode
+				? 'Add Song to Queue'
+				: 'Manage Station'
+		"
+		:style="`--primary-color: var(--${station.theme})`"
+		class="manage-station-modal"
+	>
+		<template #body>
+			<div class="custom-modal-body" v-if="station && station._id">
+				<div class="left-section">
+					<div class="section">
+						<div id="about-station-container">
+							<div id="station-info">
+								<div id="station-name">
+									<h1>{{ station.displayName }}</h1>
+									<i
+										v-if="station.type === 'official'"
+										class="material-icons verified-station"
+										content="Verified Station"
+										v-tippy
+									>
+										check_circle
+									</i>
+									<i
+										class="material-icons stationMode"
+										:content="
+											station.partyMode
+												? 'Station in Party mode'
+												: 'Station in Playlist mode'
+										"
+										v-tippy
+										>{{
+											station.partyMode
+												? "emoji_people"
+												: "playlist_play"
+										}}</i
+									>
+								</div>
+								<p>{{ station.description }}</p>
+							</div>
+
+							<div id="admin-buttons" v-if="isOwnerOrAdmin()">
+								<!-- (Admin) Pause/Resume Button -->
+								<button
+									class="button is-danger"
+									v-if="stationPaused"
+									@click="resumeStation()"
+								>
+									<i class="material-icons icon-with-button"
+										>play_arrow</i
+									>
+									<span class="optional-desktop-only-text">
+										Resume Station
+									</span>
+								</button>
+								<button
+									class="button is-danger"
+									@click="pauseStation()"
+									v-else
+								>
+									<i class="material-icons icon-with-button"
+										>pause</i
+									>
+									<span class="optional-desktop-only-text">
+										Pause Station
+									</span>
+								</button>
+
+								<!-- (Admin) Skip Button -->
+								<button
+									class="button is-danger"
+									@click="skipStation()"
+								>
+									<i class="material-icons icon-with-button"
+										>skip_next</i
+									>
+									<span class="optional-desktop-only-text">
+										Force Skip
+									</span>
+								</button>
+
+								<!-- Station Settings Button -->
+								<!-- <button
+									class="button is-primary"
+									@click="openModal('manageStation')"
+								>
+									<i class="material-icons icon-with-button"
+										>settings</i
+									>
+									<span class="optional-desktop-only-text">
+										Manage Station
+									</span>
+								</button> -->
+								<router-link
+									v-if="sector !== 'station' && station.name"
+									:to="{
+										name: 'station',
+										params: { id: station.name }
+									}"
+									class="button is-primary"
+								>
+									Go To Station
+								</router-link>
+							</div>
+						</div>
+						<div class="tab-selection">
+							<button
+								v-if="isOwnerOrAdmin()"
+								class="button is-default"
+								:class="{ selected: tab === 'settings' }"
+								ref="settings-tab"
+								@click="showTab('settings')"
+							>
+								Settings
+							</button>
+							<button
+								v-if="isAllowedToParty() || isOwnerOrAdmin()"
+								class="button is-default"
+								:class="{ selected: tab === 'playlists' }"
+								ref="playlists-tab"
+								@click="showTab('playlists')"
+							>
+								Playlists
+							</button>
+							<button
+								v-if="isAllowedToParty() || isOwnerOrAdmin()"
+								class="button is-default"
+								:class="{ selected: tab === 'songs' }"
+								ref="songs-tab"
+								@click="showTab('songs')"
+							>
+								Songs
+							</button>
+						</div>
+						<settings
+							v-if="isOwnerOrAdmin()"
+							class="tab"
+							v-show="tab === 'settings'"
+						/>
+						<playlists
+							v-if="isAllowedToParty() || isOwnerOrAdmin()"
+							class="tab"
+							v-show="tab === 'playlists'"
+						/>
+						<songs
+							v-if="isAllowedToParty() || isOwnerOrAdmin()"
+							class="tab"
+							v-show="tab === 'songs'"
+						/>
+					</div>
+				</div>
+				<div class="right-section">
+					<div class="section">
+						<div class="queue-title">
+							<h4 class="section-title">Queue</h4>
+						</div>
+						<hr class="section-horizontal-rule" />
+						<song-item
+							v-if="currentSong._id"
+							:song="currentSong"
+							:requested-by="
+								station.type === 'community' &&
+									station.partyMode === true
+							"
+							header="Currently Playing.."
+							class="currently-playing"
+						/>
+						<queue sector="manageStation" />
+					</div>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<!-- <router-link
+				v-if="sector !== 'station' && station.name"
+				:to="{
+					name: 'station',
+					params: { id: station.name }
+				}"
+				class="button is-primary"
+			>
+				Go To Station
+			</router-link> -->
+			<button
+				class="button is-primary tab-actionable-button"
+				v-if="loggedIn && station.type === 'official'"
+				@click="openModal('requestSong')"
+			>
+				<i class="material-icons icon-with-button">queue</i>
+				<span class="optional-desktop-only-text"> Request Song </span>
+			</button>
+			<div v-if="isOwnerOrAdmin()" class="right">
+				<confirm @confirm="clearAndRefillStationQueue()">
+					<a class="button is-danger">
+						Clear and refill station queue
+					</a>
+				</confirm>
+				<confirm
+					v-if="station && station.type === 'community'"
+					@confirm="removeStation()"
+				>
+					<button class="button is-danger">Delete station</button>
+				</confirm>
+			</div>
+		</template>
+	</modal>
+</template>
+
+<script>
+import { mapState, mapGetters, mapActions } from "vuex";
+
+import Toast from "toasters";
+
+import Confirm from "@/components/Confirm.vue";
+import Queue from "@/components/Queue.vue";
+import SongItem from "@/components/SongItem.vue";
+import Modal from "../../Modal.vue";
+
+import Settings from "./Tabs/Settings.vue";
+import Playlists from "./Tabs/Playlists.vue";
+import Songs from "./Tabs/Songs.vue";
+
+export default {
+	components: {
+		Modal,
+		Confirm,
+		Queue,
+		SongItem,
+		Settings,
+		Playlists,
+		Songs
+	},
+	props: {
+		stationId: { type: String, default: "" },
+		sector: { type: String, default: "admin" }
+	},
+	computed: {
+		...mapState({
+			loggedIn: state => state.user.auth.loggedIn,
+			userId: state => state.user.auth.userId,
+			role: state => state.user.auth.role
+		}),
+		...mapState("modals/manageStation", {
+			tab: state => state.tab,
+			station: state => state.station,
+			originalStation: state => state.originalStation,
+			songsList: state => state.songsList,
+			stationPlaylist: state => state.stationPlaylist,
+			includedPlaylists: state => state.includedPlaylists,
+			excludedPlaylists: state => state.excludedPlaylists,
+			stationPaused: state => state.stationPaused,
+			currentSong: state => state.currentSong
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	mounted() {
+		this.socket.dispatch(`stations.getStationById`, this.stationId, res => {
+			if (res.status === "success") {
+				const { station } = res.data;
+				this.editStation(station);
+
+				if (!this.isOwnerOrAdmin() && this.station.partyMode)
+					this.showTab("songs");
+
+				const currentSong = res.data.station.currentSong
+					? res.data.station.currentSong
+					: {};
+
+				this.updateCurrentSong(currentSong);
+
+				this.updateStationPaused(res.data.station.paused);
+
+				this.socket.dispatch(
+					"stations.getStationIncludedPlaylistsById",
+					this.stationId,
+					res => {
+						if (res.status === "success")
+							this.setIncludedPlaylists(res.data.playlists);
+					}
+				);
+
+				this.socket.dispatch(
+					"stations.getStationExcludedPlaylistsById",
+					this.stationId,
+					res => {
+						if (res.status === "success")
+							this.setExcludedPlaylists(res.data.playlists);
+					}
+				);
+
+				if (this.isOwnerOrAdmin()) {
+					this.socket.dispatch(
+						"playlists.getPlaylistForStation",
+						this.station._id,
+						true,
+						res => {
+							if (res.status === "success") {
+								this.updateStationPlaylist(res.data.playlist);
+							}
+						}
+					);
+				}
+
+				this.socket.dispatch(
+					"stations.getQueue",
+					this.stationId,
+					res => {
+						if (res.status === "success")
+							this.updateSongsList(res.data.queue);
+					}
+				);
+
+				this.socket.dispatch(
+					"apis.joinRoom",
+					`manage-station.${this.stationId}`
+				);
+
+				this.socket.on(
+					"event:station.name.updated",
+					res => {
+						this.station.name = res.data.name;
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.displayName.updated",
+					res => {
+						this.station.displayName = res.data.displayName;
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.description.updated",
+					res => {
+						this.station.description = res.data.description;
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.partyMode.updated",
+					res => {
+						if (this.station.type === "community")
+							this.station.partyMode = res.data.partyMode;
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.playMode.updated",
+					res => {
+						this.station.playMode = res.data.playMode;
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.theme.updated",
+					res => {
+						const { theme } = res.data;
+						this.station.theme = theme;
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.privacy.updated",
+					res => {
+						this.station.privacy = res.data.privacy;
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.queue.lock.toggled",
+					res => {
+						this.station.locked = res.data.locked;
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.includedPlaylist",
+					res => {
+						const { playlist } = res.data;
+						const playlistIndex = this.includedPlaylists
+							.map(includedPlaylist => includedPlaylist._id)
+							.indexOf(playlist._id);
+						if (playlistIndex === -1)
+							this.includedPlaylists.push(playlist);
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.excludedPlaylist",
+					res => {
+						const { playlist } = res.data;
+						const playlistIndex = this.excludedPlaylists
+							.map(excludedPlaylist => excludedPlaylist._id)
+							.indexOf(playlist._id);
+						if (playlistIndex === -1)
+							this.excludedPlaylists.push(playlist);
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.removedIncludedPlaylist",
+					res => {
+						const { playlistId } = res.data;
+						const playlistIndex = this.includedPlaylists
+							.map(playlist => playlist._id)
+							.indexOf(playlistId);
+						if (playlistIndex >= 0)
+							this.includedPlaylists.splice(playlistIndex, 1);
+					},
+					{ modal: "manageStation" }
+				);
+
+				this.socket.on(
+					"event:station.removedExcludedPlaylist",
+					res => {
+						const { playlistId } = res.data;
+						const playlistIndex = this.excludedPlaylists
+							.map(playlist => playlist._id)
+							.indexOf(playlistId);
+						if (playlistIndex >= 0)
+							this.excludedPlaylists.splice(playlistIndex, 1);
+					},
+					{ modal: "manageStation" }
+				);
+			} else {
+				new Toast(`Station with that ID not found`);
+				this.closeModal("manageStation");
+			}
+		});
+
+		this.socket.on(
+			"event:station.queue.updated",
+			res => this.updateSongsList(res.data.queue),
+			{ modal: "manageStation" }
+		);
+
+		this.socket.on(
+			"event:station.queue.song.repositioned",
+			res => this.repositionSongInList(res.data.song),
+			{ modal: "manageStation" }
+		);
+
+		this.socket.on(
+			"event:station.pause",
+			() => this.updateStationPaused(true),
+			{ modal: "manageStation" }
+		);
+
+		this.socket.on(
+			"event:station.resume",
+			() => this.updateStationPaused(false),
+			{ modal: "manageStation" }
+		);
+
+		this.socket.on(
+			"event:station.nextSong",
+			res => {
+				const { currentSong } = res.data;
+				this.updateCurrentSong(currentSong || {});
+			},
+			{ modal: "manageStation" }
+		);
+
+		if (this.isOwnerOrAdmin()) {
+			this.socket.on(
+				"event:playlist.song.added",
+				res => {
+					if (this.stationPlaylist._id === res.data.playlistId)
+						this.stationPlaylist.songs.push(res.data.song);
+				},
+				{
+					modal: "manageStation"
+				}
+			);
+
+			this.socket.on(
+				"event:playlist.song.removed",
+				res => {
+					if (this.stationPlaylist._id === res.data.playlistId) {
+						// remove song from array of playlists
+						this.stationPlaylist.songs.forEach((song, index) => {
+							if (song.youtubeId === res.data.youtubeId)
+								this.stationPlaylist.songs.splice(index, 1);
+						});
+					}
+				},
+				{
+					modal: "manageStation"
+				}
+			);
+
+			this.socket.on(
+				"event:playlist.songs.repositioned",
+				res => {
+					if (this.stationPlaylist._id === res.data.playlistId) {
+						// for each song that has a new position
+						res.data.songsBeingChanged.forEach(changedSong => {
+							this.stationPlaylist.songs.forEach(
+								(song, index) => {
+									// find song locally
+									if (
+										song.youtubeId === changedSong.youtubeId
+									) {
+										// change song position attribute
+										this.stationPlaylist.songs[
+											index
+										].position = changedSong.position;
+
+										// reposition in array if needed
+										if (index !== changedSong.position - 1)
+											this.stationPlaylist.songs.splice(
+												changedSong.position - 1,
+												0,
+												this.stationPlaylist.songs.splice(
+													index,
+													1
+												)[0]
+											);
+									}
+								}
+							);
+						});
+					}
+				},
+				{
+					modal: "manageStation"
+				}
+			);
+		}
+	},
+	beforeDestroy() {
+		this.socket.dispatch(
+			"apis.leaveRoom",
+			`manage-station.${this.stationId}`,
+			() => {}
+		);
+
+		this.repositionSongInList([]);
+		this.clearStation();
+		this.showTab("settings");
+	},
+	methods: {
+		isOwner() {
+			return (
+				this.loggedIn &&
+				this.station &&
+				this.userId === this.station.owner
+			);
+		},
+		isAdmin() {
+			return this.loggedIn && this.role === "admin";
+		},
+		isOwnerOrAdmin() {
+			return this.isOwner() || this.isAdmin();
+		},
+		isPartyMode() {
+			return (
+				this.station &&
+				this.station.type === "community" &&
+				this.station.partyMode
+			);
+		},
+		isAllowedToParty() {
+			return (
+				this.station &&
+				this.isPartyMode() &&
+				(!this.station.locked || this.isOwnerOrAdmin()) &&
+				this.loggedIn
+			);
+		},
+		isPlaylistMode() {
+			return this.station && !this.isPartyMode();
+		},
+		removeStation() {
+			this.socket.dispatch("stations.remove", this.station._id, res => {
+				new Toast(res.message);
+				if (res.status === "success") {
+					this.closeModal("manageStation");
+				}
+			});
+		},
+		resumeStation() {
+			this.socket.dispatch("stations.resume", this.station._id, res => {
+				if (res.status !== "success")
+					new Toast(`Error: ${res.message}`);
+				else new Toast("Successfully resumed the station.");
+			});
+		},
+		pauseStation() {
+			this.socket.dispatch("stations.pause", this.station._id, res => {
+				if (res.status !== "success")
+					new Toast(`Error: ${res.message}`);
+				else new Toast("Successfully paused the station.");
+			});
+		},
+		skipStation() {
+			this.socket.dispatch(
+				"stations.forceSkip",
+				this.station._id,
+				res => {
+					if (res.status !== "success")
+						new Toast(`Error: ${res.message}`);
+					else
+						new Toast(
+							"Successfully skipped the station's current song."
+						);
+				}
+			);
+		},
+		clearAndRefillStationQueue() {
+			this.socket.dispatch(
+				"stations.clearAndRefillStationQueue",
+				this.station._id,
+				res => {
+					if (res.status !== "success")
+						new Toast({
+							content: `Error: ${res.message}`,
+							timeout: 8000
+						});
+					else new Toast({ content: res.message, timeout: 4000 });
+				}
+			);
+		},
+		...mapActions("modals/manageStation", [
+			"editStation",
+			"setIncludedPlaylists",
+			"setExcludedPlaylists",
+			"clearStation",
+			"updateSongsList",
+			"updateStationPlaylist",
+			"repositionSongInList",
+			"updateStationPaused",
+			"updateCurrentSong"
+		]),
+		...mapActions({
+			showTab(dispatch, payload) {
+				this.$refs[`${payload}-tab`].scrollIntoView();
+				return dispatch("modals/manageStation/showTab", payload);
+			}
+		}),
+		...mapActions("modalVisibility", ["openModal", "closeModal"]),
+		...mapActions("user/playlists", ["editPlaylist"])
+	}
+};
+</script>
+
+<style lang="scss">
+.manage-station-modal.modal {
+	z-index: 1800;
+	.modal-card {
+		width: 1300px;
+		height: 100%;
+		overflow: auto;
+		.tab > button {
+			width: 100%;
+			margin-bottom: 10px;
+		}
+		.currently-playing.song-item {
+			.song-info {
+				width: calc(100% - 150px);
+			}
+			.thumbnail {
+				min-width: 130px;
+				width: 130px;
+				height: 130px;
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.manage-station-modal.modal .modal-card-body .custom-modal-body {
+	display: flex;
+	flex-wrap: wrap;
+	height: 100%;
+
+	.section {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		width: auto;
+		padding: 15px !important;
+		margin: 0 10px;
+	}
+
+	.left-section {
+		flex-basis: 50%;
+		height: 100%;
+		overflow-y: auto;
+		flex-grow: 1;
+
+		#about-station-container {
+			padding: 20px;
+			display: flex;
+			flex-direction: column;
+			flex-grow: unset;
+			border-radius: 5px;
+			margin: 0 0 20px 0;
+			background-color: var(--white);
+			border: 1px solid var(--light-grey-3);
+
+			#station-info {
+				#station-name {
+					flex-direction: row !important;
+					display: flex;
+					flex-direction: row;
+					max-width: 100%;
+
+					h1 {
+						margin: 0;
+						font-size: 36px;
+						line-height: 0.8;
+					}
+
+					i {
+						margin-left: 10px;
+						font-size: 30px;
+						color: var(--yellow);
+						&.stationMode {
+							padding-left: 10px;
+							margin-left: auto;
+							color: var(--primary-color);
+						}
+					}
+
+					.verified-station {
+						color: var(--primary-color);
+					}
+				}
+
+				p {
+					max-width: 700px;
+					margin-bottom: 10px;
+				}
+			}
+
+			#admin-buttons {
+				display: flex;
+
+				.button {
+					margin: 3px;
+				}
+			}
+		}
+
+		.tab-selection {
+			display: flex;
+			overflow-x: auto;
+
+			.button {
+				border-radius: 5px 5px 0 0;
+				border: 0;
+				text-transform: uppercase;
+				font-size: 14px;
+				color: var(--dark-grey-3);
+				background-color: var(--light-grey-2);
+				flex-grow: 1;
+				height: 32px;
+
+				&:not(:first-of-type) {
+					margin-left: 5px;
+				}
+			}
+
+			.selected {
+				background-color: var(--primary-color) !important;
+				color: var(--white) !important;
+				font-weight: 600;
+			}
+		}
+		.tab {
+			border: 1px solid var(--light-grey-3);
+			padding: 15px;
+			border-radius: 0 0 5px 5px;
+		}
+	}
+	.right-section {
+		flex-basis: 50%;
+		height: 100%;
+		overflow-y: auto;
+		flex-grow: 1;
+		.section {
+			.queue-title {
+				display: flex;
+				line-height: 30px;
+				.material-icons {
+					margin-left: 5px;
+					margin-bottom: 5px;
+					font-size: 28px;
+					cursor: pointer;
+					&:first-of-type {
+						margin-left: auto;
+					}
+					&.skip-station {
+						color: var(--red);
+					}
+					&.resume-station,
+					&.pause-station {
+						color: var(--primary-color);
+					}
+				}
+			}
+			.currently-playing {
+				margin-bottom: 10px;
+			}
+		}
+	}
+}
+
+@media screen and (max-width: 1100px) {
+	.manage-station-modal.modal .modal-card-body .custom-modal-body {
+		.left-section,
+		.right-section {
+			flex-basis: unset;
+			height: auto;
+		}
+	}
+}
+</style>

frontend/src/components/modals/ManageStationOwen/Tabs/Settings.vue

@@ -0,0 +1,595 @@
+<template>
+	<div class="station-settings">
+		<label class="label">Name</label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input class="input" type="text" v-model="station.name" />
+			</p>
+			<p class="control">
+				<a class="button is-info" @click.prevent="updateName()">Save</a>
+			</p>
+		</div>
+		<label class="label">Display Name</label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input
+					class="input"
+					type="text"
+					v-model="station.displayName"
+				/>
+			</p>
+			<p class="control">
+				<a class="button is-info" @click.prevent="updateDisplayName()"
+					>Save</a
+				>
+			</p>
+		</div>
+		<label class="label">Description</label>
+		<div class="control is-grouped input-with-button">
+			<p class="control is-expanded">
+				<input
+					class="input"
+					type="text"
+					v-model="station.description"
+				/>
+			</p>
+			<p class="control">
+				<a class="button is-info" @click.prevent="updateDescription()"
+					>Save</a
+				>
+			</p>
+		</div>
+		<div class="settings-buttons">
+			<div class="small-section">
+				<label class="label">Theme</label>
+				<tippy
+					class="button-wrapper"
+					theme="addToPlaylist"
+					interactive="true"
+					touch="true"
+					placement="bottom"
+					trigger="click"
+					append-to="parent"
+				>
+					<template #trigger>
+						<button :class="station.theme">
+							<i class="material-icons">palette</i>
+							{{ station.theme }}
+						</button>
+					</template>
+					<button
+						class="blue"
+						v-if="station.theme !== 'blue'"
+						@click="updateTheme('blue')"
+					>
+						<i class="material-icons">palette</i>
+						Blue
+					</button>
+					<button
+						class="purple"
+						v-if="station.theme !== 'purple'"
+						@click="updateTheme('purple')"
+					>
+						<i class="material-icons">palette</i>
+						Purple
+					</button>
+					<button
+						class="teal"
+						v-if="station.theme !== 'teal'"
+						@click="updateTheme('teal')"
+					>
+						<i class="material-icons">palette</i>
+						Teal
+					</button>
+					<button
+						class="orange"
+						v-if="station.theme !== 'orange'"
+						@click="updateTheme('orange')"
+					>
+						<i class="material-icons">palette</i>
+						Orange
+					</button>
+				</tippy>
+			</div>
+			<div class="small-section">
+				<label class="label">Privacy</label>
+				<tippy
+					class="button-wrapper"
+					theme="addToPlaylist"
+					interactive="true"
+					touch="true"
+					placement="bottom"
+					trigger="click"
+					append-to="parent"
+				>
+					<template #trigger>
+						<button :class="privacyButtons[station.privacy].style">
+							<i class="material-icons">{{
+								privacyButtons[station.privacy].iconName
+							}}</i>
+							{{ station.privacy }}
+						</button>
+					</template>
+					<button
+						class="green"
+						v-if="station.privacy !== 'public'"
+						@click="updatePrivacy('public')"
+					>
+						<i class="material-icons">{{
+							privacyButtons["public"].iconName
+						}}</i>
+						Public
+					</button>
+					<button
+						class="orange"
+						v-if="station.privacy !== 'unlisted'"
+						@click="updatePrivacy('unlisted')"
+					>
+						<i class="material-icons">{{
+							privacyButtons["unlisted"].iconName
+						}}</i>
+						Unlisted
+					</button>
+					<button
+						class="red"
+						v-if="station.privacy !== 'private'"
+						@click="updatePrivacy('private')"
+					>
+						<i class="material-icons">{{
+							privacyButtons["private"].iconName
+						}}</i>
+						Private
+					</button>
+				</tippy>
+			</div>
+			<div class="small-section">
+				<label class="label">Station Mode</label>
+				<tippy
+					v-if="station.type === 'community'"
+					class="button-wrapper"
+					theme="addToPlaylist"
+					touch="true"
+					interactive="true"
+					placement="bottom"
+					trigger="click"
+					append-to="parent"
+				>
+					<template #trigger>
+						<button
+							:class="{
+								blue: !station.partyMode,
+								yellow: station.partyMode
+							}"
+						>
+							<i class="material-icons">{{
+								station.partyMode
+									? "emoji_people"
+									: "playlist_play"
+							}}</i>
+							{{ station.partyMode ? "Party" : "Playlist" }}
+						</button>
+					</template>
+					<button
+						class="blue"
+						v-if="station.partyMode"
+						@click="updatePartyMode(false)"
+					>
+						<i class="material-icons">playlist_play</i>
+						Playlist
+					</button>
+					<button
+						class="yellow"
+						v-if="!station.partyMode"
+						@click="updatePartyMode(true)"
+					>
+						<i class="material-icons">emoji_people</i>
+						Party
+					</button>
+				</tippy>
+				<div v-else class="button-wrapper">
+					<button
+						class="blue"
+						content="Can not be changed on official stations."
+						v-tippy="{ theme: 'info' }"
+					>
+						<i class="material-icons">playlist_play</i>
+						Playlist
+					</button>
+				</div>
+			</div>
+			<div v-if="!station.partyMode" class="small-section">
+				<label class="label">Play Mode</label>
+				<tippy
+					v-if="station.type === 'community'"
+					class="button-wrapper"
+					theme="addToPlaylist"
+					touch="true"
+					interactive="true"
+					placement="bottom"
+					trigger="click"
+					append-to="parent"
+				>
+					<template #trigger>
+						<button class="blue">
+							<i class="material-icons">{{
+								station.playMode === "random"
+									? "shuffle"
+									: "format_list_numbered"
+							}}</i>
+							{{
+								station.playMode === "random"
+									? "Random"
+									: "Sequential"
+							}}
+						</button>
+					</template>
+					<button
+						class="blue"
+						v-if="station.playMode === 'sequential'"
+						@click="updatePlayMode('random')"
+					>
+						<i class="material-icons">shuffle</i>
+						Random
+					</button>
+					<button
+						class="blue"
+						v-if="station.playMode === 'random'"
+						@click="updatePlayMode('sequential')"
+					>
+						<i class="material-icons">format_list_numbered</i>
+						Sequential
+					</button>
+				</tippy>
+				<div v-else class="button-wrapper">
+					<button
+						class="blue"
+						content="Can not be changed on official stations."
+						v-tippy="{ theme: 'info' }"
+					>
+						<i class="material-icons">shuffle</i>
+						Random
+					</button>
+				</div>
+			</div>
+			<div
+				v-if="
+					station.type === 'community' && station.partyMode === true
+				"
+				class="small-section"
+			>
+				<label class="label">Queue lock</label>
+				<tippy
+					class="button-wrapper"
+					theme="addToPlaylist"
+					interactive="true"
+					touch="true"
+					placement="bottom"
+					trigger="click"
+					append-to="parent"
+				>
+					<template #trigger>
+						<button
+							:class="{
+								green: station.locked,
+								red: !station.locked
+							}"
+						>
+							<i class="material-icons">{{
+								station.locked ? "lock" : "lock_open"
+							}}</i>
+							{{ station.locked ? "Locked" : "Unlocked" }}
+						</button>
+					</template>
+					<button
+						class="green"
+						v-if="!station.locked"
+						@click="updateQueueLock(true)"
+					>
+						<i class="material-icons">lock</i>
+						Locked
+					</button>
+					<button
+						class="red"
+						v-if="station.locked"
+						@click="updateQueueLock(false)"
+					>
+						<i class="material-icons">lock_open</i>
+						Unlocked
+					</button>
+				</tippy>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+
+import Toast from "toasters";
+
+import validation from "@/validation";
+
+export default {
+	data() {
+		return {
+			privacyButtons: {
+				public: {
+					style: "green",
+					iconName: "public"
+				},
+				private: {
+					style: "red",
+					iconName: "lock"
+				},
+				unlisted: {
+					style: "orange",
+					iconName: "link"
+				}
+			}
+		};
+	},
+	computed: {
+		...mapState("modals/manageStation", {
+			station: state => state.station,
+			originalStation: state => state.originalStation
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	methods: {
+		updateName() {
+			if (this.originalStation.name !== this.station.name) {
+				const { name } = this.station;
+				if (!validation.isLength(name, 2, 16)) {
+					new Toast("Name must have between 2 and 16 characters.");
+				} else if (!validation.regex.az09_.test(name)) {
+					new Toast(
+						"Invalid name format. Allowed characters: a-z, 0-9 and _."
+					);
+				} else {
+					this.socket.dispatch(
+						"stations.updateName",
+						this.station._id,
+						name,
+						res => {
+							new Toast(res.message);
+
+							if (res.status === "success") {
+								this.station.name = name;
+								this.originalStation.name = name;
+							}
+						}
+					);
+				}
+			} else {
+				new Toast("Please make a change before saving.");
+			}
+		},
+		updateDisplayName() {
+			if (this.originalStation.displayName !== this.station.displayName) {
+				const { displayName } = this.station;
+				if (!validation.isLength(displayName, 2, 32)) {
+					new Toast(
+						"Display name must have between 2 and 32 characters."
+					);
+				} else if (!validation.regex.ascii.test(displayName)) {
+					new Toast(
+						"Invalid display name format. Only ASCII characters are allowed."
+					);
+				} else {
+					this.socket.dispatch(
+						"stations.updateDisplayName",
+						this.station._id,
+						displayName,
+						res => {
+							new Toast(res.message);
+
+							if (res.status === "success") {
+								this.station.displayName = displayName;
+								this.originalStation.displayName = displayName;
+							}
+						}
+					);
+				}
+			} else {
+				new Toast("Please make a change before saving.");
+			}
+		},
+		updateDescription() {
+			if (this.originalStation.description !== this.station.description) {
+				const { description } = this.station;
+				const characters = description.split("").filter(character => {
+					return character.charCodeAt(0) === 21328;
+				});
+				if (!validation.isLength(description, 2, 200)) {
+					new Toast(
+						"Description must have between 2 and 200 characters."
+					);
+				} else if (characters.length !== 0) {
+					new Toast("Invalid description format.");
+				} else {
+					this.socket.dispatch(
+						"stations.updateDescription",
+						this.station._id,
+						description,
+						res => {
+							new Toast(res.message);
+
+							if (res.status === "success") {
+								this.station.description = description;
+								this.originalStation.description = description;
+							}
+						}
+					);
+				}
+			} else {
+				new Toast("Please make a change before saving.");
+			}
+		},
+		updateTheme(theme) {
+			if (this.station.theme !== theme) {
+				this.socket.dispatch(
+					"stations.updateTheme",
+					this.station._id,
+					theme,
+					res => {
+						new Toast(res.message);
+
+						if (res.status === "success") {
+							this.station.theme = theme;
+							this.originalStation.theme = theme;
+						}
+					}
+				);
+			}
+		},
+		updatePrivacy(privacy) {
+			if (this.station.privacy !== privacy) {
+				this.socket.dispatch(
+					"stations.updatePrivacy",
+					this.station._id,
+					privacy,
+					res => {
+						new Toast(res.message);
+
+						if (res.status === "success") {
+							this.station.privacy = privacy;
+							this.originalStation.privacy = privacy;
+						}
+					}
+				);
+			}
+		},
+		updatePartyMode(partyMode) {
+			if (this.station.partyMode !== partyMode) {
+				this.socket.dispatch(
+					"stations.updatePartyMode",
+					this.station._id,
+					partyMode,
+					res => {
+						new Toast(res.message);
+
+						if (res.status === "success") {
+							this.station.partyMode = partyMode;
+							this.originalStation.partyMode = partyMode;
+						}
+					}
+				);
+			}
+		},
+		updatePlayMode(playMode) {
+			if (this.station.playMode !== playMode) {
+				this.socket.dispatch(
+					"stations.updatePlayMode",
+					this.station._id,
+					playMode,
+					res => {
+						new Toast(res.message);
+
+						if (res.status === "success") {
+							this.station.playMode = playMode;
+							this.originalStation.playMode = playMode;
+						}
+					}
+				);
+			}
+		},
+		updateQueueLock(locked) {
+			if (this.station.locked !== locked) {
+				this.socket.dispatch(
+					"stations.toggleLock",
+					this.station._id,
+					res => {
+						if (res.status === "success") {
+							if (this.originalStation) {
+								this.station.locked = res.data.locked;
+								this.originalStation.locked = res.data.locked;
+							}
+
+							new Toast(
+								`Toggled queue lock successfully to ${res.data.locked}`
+							);
+						} else {
+							new Toast("Failed to toggle queue lock.");
+						}
+					}
+				);
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.station-settings {
+	.settings-buttons {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		.small-section {
+			width: calc(50% - 10px);
+			min-width: 150px;
+			margin: 5px auto;
+		}
+	}
+	.button-wrapper {
+		display: flex;
+		flex-direction: column;
+
+		button {
+			width: 100%;
+			height: 36px;
+			border: 0;
+			border-radius: 3px;
+			font-size: 18px;
+			color: var(--white);
+			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
+			display: block;
+			text-align: center;
+			justify-content: center;
+			display: inline-flex;
+			-ms-flex-align: center;
+			align-items: center;
+			-moz-user-select: none;
+			user-select: none;
+			cursor: pointer;
+			padding: 0;
+			text-transform: capitalize;
+
+			&.red {
+				background-color: var(--red);
+			}
+
+			&.green {
+				background-color: var(--green);
+			}
+
+			&.blue {
+				background-color: var(--blue);
+			}
+
+			&.orange {
+				background-color: var(--orange);
+			}
+
+			&.yellow {
+				background-color: var(--yellow);
+			}
+
+			&.purple {
+				background-color: var(--purple);
+			}
+
+			&.teal {
+				background-color: var(--teal);
+			}
+
+			i {
+				font-size: 20px;
+				margin-right: 4px;
+			}
+		}
+	}
+}
+</style>

frontend/src/main.js

@@ -8,7 +8,7 @@ import store from "./store";
 
 import App from "./App.vue";
 
-const REQUIRED_CONFIG_VERSION = 4;
+const REQUIRED_CONFIG_VERSION = 5;
 
 const handleMetadata = attrs => {
 	document.title = `Musare | ${attrs.title}`;

frontend/src/mixins/SearchYoutube.vue

@@ -77,6 +77,19 @@ export default {
 					} else if (res.status === "error") new Toast(res.message);
 				}
 			);
+		},
+		addSongToPlaylist(id, index) {
+			this.socket.dispatch(
+				"playlists.addSongToPlaylist",
+				false,
+				id,
+				this.playlist._id,
+				res => {
+					new Toast(res.message);
+					if (res.status === "success")
+						this.search.songs.results[index].isAddedToQueue = true;
+				}
+			);
 		}
 	}
 };

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

@@ -185,7 +185,7 @@ import ws from "@/ws";
 
 export default {
 	components: {
-		EditSong: () => import("@/components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong"),
 		ImportAlbum: () => import("@/components/modals/ImportAlbum.vue"),
 		UserIdToUsername,
 		FloatingBox

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

@@ -101,10 +101,10 @@ import utils from "../../../../js/utils";
 
 export default {
 	components: {
-		EditPlaylist: () => import("@/components/modals/EditPlaylist.vue"),
+		EditPlaylist: () => import("@/components/modals/EditPlaylist"),
 		UserIdToUsername,
 		Report: () => import("@/components/modals/Report.vue"),
-		EditSong: () => import("@/components/modals/EditSong.vue")
+		EditSong: () => import("@/components/modals/EditSong")
 	},
 	data() {
 		return {

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

@@ -180,8 +180,13 @@
 		<request-song v-if="modals.requestSong" />
 		<edit-playlist v-if="modals.editPlaylist" />
 		<create-playlist v-if="modals.createPlaylist" />
-		<manage-station
-			v-if="modals.manageStation"
+		<manage-station-owen
+			v-if="modals.manageStation && manageStationVersion === 'owen'"
+			:station-id="editingStationId"
+			sector="admin"
+		/>
+		<manage-station-kris
+			v-if="modals.manageStation && manageStationVersion === 'kris'"
 			:station-id="editingStationId"
 			sector="admin"
 		/>
@@ -201,18 +206,21 @@ import ws from "@/ws";
 export default {
 	components: {
 		RequestSong: () => import("@/components/modals/RequestSong.vue"),
-		EditPlaylist: () => import("@/components/modals/EditPlaylist.vue"),
+		EditPlaylist: () => import("@/components/modals/EditPlaylist"),
 		CreatePlaylist: () => import("@/components/modals/CreatePlaylist.vue"),
-		ManageStation: () =>
-			import("@/components/modals/ManageStation/index.vue"),
+		ManageStationOwen: () =>
+			import("@/components/modals/ManageStationOwen/index.vue"),
+		ManageStationKris: () =>
+			import("@/components/modals/ManageStationKris/index.vue"),
 		Report: () => import("@/components/modals/Report.vue"),
-		EditSong: () => import("@/components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong"),
 		UserIdToUsername,
 		Confirm
 	},
 	data() {
 		return {
 			editingStationId: "",
+			manageStationVersion: "",
 			newStation: {
 				genres: [],
 				blacklistedGenres: []
@@ -231,6 +239,10 @@ export default {
 		})
 	},
 	mounted() {
+		lofig.get("manageStationVersion", manageStationVersion => {
+			this.manageStationVersion = manageStationVersion;
+		});
+
 		if (this.socket.readyState === 1) this.init();
 		ws.onConnect(() => this.init());
 

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

@@ -197,7 +197,7 @@ import ws from "@/ws";
 
 export default {
 	components: {
-		EditSong: () => import("@/components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong"),
 		ImportAlbum: () => import("@/components/modals/ImportAlbum.vue"),
 		UserIdToUsername,
 		FloatingBox,

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

@@ -209,7 +209,10 @@ body {
 .profile-picture {
 	max-width: 50px !important;
 	max-height: 50px !important;
-	font-size: 25px !important;
+}
+
+/deep/ .profile-picture.using-initials span {
+	font-size: 20px; // 2/5th of .profile-picture height/width
 }
 
 td {

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

@@ -161,6 +161,20 @@
 			<template #body>
 				<div>
 					<div>
+						<span class="biggest"
+							><b>Keyboard shortcuts helper</b></span
+						>
+						<span
+							><b>Ctrl + /</b> - Toggles this keyboard shortcuts
+							helper</span
+						>
+						<span
+							><b>Ctrl + Shift + /</b> - Resets the position of
+							this keyboard shortcuts helper</span
+						>
+						<hr />
+					</div>
+					<!-- <div>
 						<span class="biggest"><b>Songs page</b></span>
 						<span
 							><b>Arrow keys up/down</b> - Moves between
@@ -169,15 +183,20 @@
 						<span><b>E</b> - Edit selected song</span>
 						<span><b>A</b> - Add selected song</span>
 						<span><b>X</b> - Delete selected song</span>
-					</div>
-					<hr />
+						<hr />
+					</div> -->
 					<div>
 						<span class="biggest"><b>Edit song modal</b></span>
 						<span class="bigger"><b>Navigation</b></span>
 						<span><b>Home</b> - Edit</span>
 						<span><b>End</b> - Edit</span>
 						<hr />
+					</div>
+					<div>
 						<span class="bigger"><b>Player controls</b></span>
+						<span class="bigger"
+							><i>Don't forget to turn off numlock!</i></span
+						>
 						<span><b>Numpad up/down</b> - Volume up/down 10%</span>
 						<span
 							><b>Ctrl + Numpad up/down</b> - Volume up/down
@@ -189,26 +208,33 @@
 							><b>Numpad Right</b> - Skip to last 10 seconds</span
 						>
 						<hr />
+					</div>
+					<div>
 						<span class="bigger"><b>Form control</b></span>
 						<span
-							><b>Ctrl + D</b> - Executes purple button in that
+							><b>Enter</b> - Executes blue button in that
 							input</span
 						>
 						<span
-							><b>Ctrl + Alt + D</b> - Fill in all Discogs
-							fields</span
-						>
-						<span
-							><b>Ctrl + R</b> - Executes red button in that
-							input</span
+							><b>Shift + Enter</b> - Executes purple/red button
+							in that input</span
 						>
 						<span
-							><b>Ctrl + Alt + R</b> - Reset duration field</span
+							><b>Ctrl + Alt + D</b> - Fill in all Discogs
+							fields</span
 						>
 						<hr />
+					</div>
+					<div>
 						<span class="bigger"><b>Modal control</b></span>
 						<span><b>Ctrl + S</b> - Save</span>
-						<span><b>Ctrl + X</b> - Exit</span>
+						<span><b>Ctrl + Alt + S</b> - Save and close</span>
+						<span
+							><b>Ctrl + Alt + V</b> - Save, verify and
+							close</span
+						>
+						<span><b>F4</b> - Close without saving</span>
+						<hr />
 					</div>
 				</div>
 			</template>
@@ -221,6 +247,8 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
+import keyboardShortcuts from "@/keyboardShortcuts";
+
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import FloatingBox from "@/components/FloatingBox.vue";
 import Confirm from "@/components/Confirm.vue";
@@ -231,7 +259,7 @@ import ws from "@/ws";
 
 export default {
 	components: {
-		EditSong: () => import("@/components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong"),
 		ImportAlbum: () => import("@/components/modals/ImportAlbum.vue"),
 		UserIdToUsername,
 		FloatingBox,
@@ -351,6 +379,41 @@ export default {
 				}
 			);
 		}
+
+		keyboardShortcuts.registerShortcut(
+			"verifiedSongs.toggleKeyboardShortcutsHelper",
+			{
+				keyCode: 191, // '/' key
+				ctrl: true,
+				preventDefault: true,
+				handler: () => {
+					this.toggleKeyboardShortcutsHelper();
+				}
+			}
+		);
+
+		keyboardShortcuts.registerShortcut(
+			"verifiedSongs.resetKeyboardShortcutsHelper",
+			{
+				keyCode: 191, // '/' key
+				ctrl: true,
+				shift: true,
+				preventDefault: true,
+				handler: () => {
+					this.resetKeyboardShortcutsHelper();
+				}
+			}
+		);
+	},
+	beforeDestroy() {
+		const shortcutNames = [
+			"verifiedSongs.toggleKeyboardShortcutsHelper",
+			"verifiedSongs.resetKeyboardShortcutsHelper"
+		];
+
+		shortcutNames.forEach(shortcutName => {
+			keyboardShortcuts.unregisterShortcut(shortcutName);
+		});
 	},
 	methods: {
 		edit(song) {

frontend/src/pages/Home.vue

@@ -808,6 +808,11 @@ html {
 		color: var(--light-grey-2);
 	}
 
+	.card-image i {
+		user-select: none;
+		-webkit-user-select: none;
+	}
+
 	.card-image.thumbnail {
 		background-color: var(--dark-grey-2);
 	}

frontend/src/pages/Profile/index.vue

@@ -124,9 +124,9 @@ export default {
 		ProfilePicture,
 		RecentActivity,
 		Playlists,
-		EditPlaylist: () => import("@/components/modals/EditPlaylist.vue"),
+		EditPlaylist: () => import("@/components/modals/EditPlaylist"),
 		Report: () => import("@/components/modals/Report.vue"),
-		EditSong: () => import("@/components/modals/EditSong.vue")
+		EditSong: () => import("@/components/modals/EditSong")
 	},
 	mixins: [TabQueryHandler],
 	data() {

frontend/src/pages/Settings/Tabs/Profile.vue

@@ -138,6 +138,9 @@ export default {
 			}
 		},
 		changeName() {
+			this.modifiedUser.name = this.modifiedUser.name
+				.replaceAll(/ +/g, " ")
+				.trim();
 			const { name } = this.modifiedUser;
 
 			if (!validation.isLength(name, 1, 64))
@@ -147,6 +150,10 @@ export default {
 				return new Toast(
 					"Invalid name format. Only letters, spaces, apostrophes and hyphens are allowed."
 				);
+			if (name.replaceAll(/[ .'-]/g, "").length === 0)
+				return new Toast(
+					"Invalid name format. Only letters, spaces, apostrophes and hyphens are allowed, and there has to be at least one letter."
+				);
 
 			this.$refs.saveButton.status = "disabled";
 
@@ -289,7 +296,10 @@ export default {
 			margin-right: 10px;
 			width: 50px;
 			height: 50px;
-			font-size: 25px;
+		}
+
+		/deep/ .profile-picture.using-initials span {
+			font-size: 20px; // 2/5th of .profile-picture height/width
 		}
 	}
 }

frontend/src/pages/Station/Sidebar/Users.vue

@@ -167,7 +167,12 @@ export default {
 					margin-right: 10px;
 					width: 35px;
 					height: 35px;
-					font-size: 15px;
+				}
+
+				/deep/ .profile-picture.using-initials span {
+					font-size: calc(
+						35px / 5 * 2
+					); // 2/5th of .profile-picture height/width
 				}
 			}
 		}

frontend/src/pages/Station/index.vue

@@ -558,8 +558,17 @@
 				<request-song v-if="modals.requestSong" />
 				<edit-playlist v-if="modals.editPlaylist" />
 				<create-playlist v-if="modals.createPlaylist" />
-				<manage-station
-					v-if="modals.manageStation"
+				<manage-station-owen
+					v-if="
+						modals.manageStation && manageStationVersion === 'owen'
+					"
+					:station-id="station._id"
+					sector="station"
+				/>
+				<manage-station-kris
+					v-if="
+						modals.manageStation && manageStationVersion === 'kris'
+					"
 					:station-id="station._id"
 					sector="station"
 				/>
@@ -637,22 +646,25 @@ export default {
 		MainHeader,
 		MainFooter,
 		RequestSong: () => import("@/components/modals/RequestSong.vue"),
-		EditPlaylist: () => import("@/components/modals/EditPlaylist.vue"),
+		EditPlaylist: () => import("@/components/modals/EditPlaylist"),
 		CreatePlaylist: () => import("@/components/modals/CreatePlaylist.vue"),
-		ManageStation: () =>
-			import("@/components/modals/ManageStation/index.vue"),
+		ManageStationOwen: () =>
+			import("@/components/modals/ManageStationOwen/index.vue"),
+		ManageStationKris: () =>
+			import("@/components/modals/ManageStationKris/index.vue"),
 		Report: () => import("@/components/modals/Report.vue"),
 		Z404,
 		FloatingBox,
 		StationSidebar,
 		AddToPlaylistDropdown,
-		EditSong: () => import("@/components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong"),
 		SongItem
 	},
 	data() {
 		return {
 			utils,
 			isIOS: navigator.platform.match(/iPhone|iPod|iPad/),
+			manageStationVersion: "",
 			title: "Station",
 			loading: true,
 			exists: true,
@@ -689,6 +701,9 @@ export default {
 		...mapState("modalVisibility", {
 			modals: state => state.modals
 		}),
+		...mapState("modals/editSong", {
+			video: state => state.video
+		}),
 		...mapState("station", {
 			station: state => state.station,
 			currentSong: state => state.currentSong,
@@ -713,14 +728,19 @@ export default {
 		})
 	},
 	async mounted() {
+		lofig.get("manageStationVersion", manageStationVersion => {
+			this.manageStationVersion = manageStationVersion;
+		});
+
 		this.editSongModalWatcher = this.$store.watch(
-			state => state.modalVisibility.modals.editSong,
-			newValue => {
-				if (newValue === true) {
+			state => state.modals.editSong.video.paused,
+			paused => {
+				if (paused && !this.beforeEditSongModalLocalPaused) {
+					this.resumeLocalStation();
+				} else if (!paused) {
 					this.beforeEditSongModalLocalPaused = this.localPaused;
 					this.pauseLocalStation();
-				} else if (!this.beforeEditSongModalLocalPaused)
-					this.resumeLocalStation();
+				}
 			}
 		);
 
@@ -801,11 +821,26 @@ export default {
 			this.updateStationPaused(false);
 			if (!this.localPaused) this.resumeLocalPlayer();
 
-			if (this.currentSong)
-				window.stationNextSongTimeout = setTimeout(
-					this.skipSong,
-					this.getTimeRemaining()
-				);
+			if (this.currentSong) {
+				if (this.nextSong)
+					this.setNextCurrentSong({
+						currentSong: this.nextSong,
+						startedAt: Date.now() + this.getTimeRemaining(),
+						paused: false,
+						timePaused: 0
+					});
+				else
+					this.setNextCurrentSong({
+						currentSong: null,
+						startedAt: 0,
+						paused: false,
+						timePaused: 0,
+						pausedAt: 0
+					});
+				window.stationNextSongTimeout = setTimeout(() => {
+					this.skipSong("window.stationNextSongTimeout 2");
+				}, this.getTimeRemaining());
+			}
 		});
 
 		this.socket.on("event:station.deleted", () => {
@@ -869,6 +904,22 @@ export default {
 
 			this.updateNextSong(nextSong);
 
+			if (nextSong)
+				this.setNextCurrentSong({
+					currentSong: nextSong,
+					startedAt: Date.now() + this.getTimeRemaining(),
+					paused: false,
+					timePaused: 0
+				});
+			else
+				this.setNextCurrentSong({
+					currentSong: null,
+					startedAt: 0,
+					paused: false,
+					timePaused: 0,
+					pausedAt: 0
+				});
+
 			this.addPartyPlaylistSongToQueue();
 		});
 
@@ -882,6 +933,13 @@ export default {
 					: null;
 
 			this.updateNextSong(nextSong);
+
+			this.setNextCurrentSong({
+				currentSong: nextSong,
+				startedAt: Date.now() + this.getTimeRemaining(),
+				paused: false,
+				timePaused: 0
+			});
 		});
 
 		this.socket.on("event:station.voteSkipSong", () => {
@@ -1025,16 +1083,32 @@ export default {
 				}
 			);
 		},
-		setNextCurrentSong(nextCurrentSong) {
+		setNextCurrentSong(nextCurrentSong, skipSkipCheck = false) {
 			this.nextCurrentSong = nextCurrentSong;
-			if (this.getTimeRemaining() <= 0) {
+			if (this.getTimeRemaining() <= 0 && !skipSkipCheck) {
 				this.skipSong();
 			}
 		},
 		skipSong() {
-			console.log("SKIP_SONG_FN", this.nextCurrentSong);
 			if (this.nextCurrentSong && this.nextCurrentSong.currentSong) {
+				const songsList = this.songsList.concat([]);
+				if (
+					songsList.length > 0 &&
+					songsList[0].youtubeId ===
+						this.nextCurrentSong.currentSong.youtubeId
+				) {
+					songsList.splice(0, 1);
+					this.updateSongsList(songsList);
+				}
 				this.setCurrentSong(this.nextCurrentSong);
+			} else {
+				this.setCurrentSong({
+					currentSong: null,
+					startedAt: 0,
+					paused: this.stationPaused,
+					timePaused: 0,
+					pausedAt: 0
+				});
 			}
 		},
 		setCurrentSong(data) {
@@ -1054,13 +1128,16 @@ export default {
 					? this.songsList[0]
 					: null;
 			this.updateNextSong(nextSong);
-			this.nextCurrentSong = {
-				currentSong: null,
-				startedAt: 0,
-				paused,
-				timePaused: 0,
-				pausedAt: 0
-			};
+			this.setNextCurrentSong(
+				{
+					currentSong: null,
+					startedAt: 0,
+					paused,
+					timePaused: 0,
+					pausedAt: 0
+				},
+				true
+			);
 
 			clearTimeout(window.stationNextSongTimeout);
 
@@ -1076,10 +1153,30 @@ export default {
 				else this.playVideo();
 
 				if (!this.stationPaused) {
-					window.stationNextSongTimeout = setTimeout(
-						this.skipSong,
-						this.getTimeRemaining()
-					);
+					if (this.nextSong)
+						this.setNextCurrentSong(
+							{
+								currentSong: this.nextSong,
+								startedAt: Date.now() + this.getTimeRemaining(),
+								paused: false,
+								timePaused: 0
+							},
+							true
+						);
+					else
+						this.setNextCurrentSong(
+							{
+								currentSong: null,
+								startedAt: 0,
+								paused: false,
+								timePaused: 0,
+								pausedAt: 0
+							},
+							true
+						);
+					window.stationNextSongTimeout = setTimeout(() => {
+						this.skipSong("window.stationNextSongTimeout 1");
+					}, this.getTimeRemaining());
 				}
 
 				this.socket.dispatch(
@@ -1110,6 +1207,8 @@ export default {
 				this.updateNoSong(true);
 			}
 
+			console.log(666);
+
 			this.calculateTimeElapsed();
 			this.resizeSeekerbar();
 		},
@@ -1686,6 +1785,13 @@ export default {
 										: null;
 								}
 								this.updateNextSong(nextSong);
+								this.setNextCurrentSong({
+									currentSong: nextSong,
+									startedAt:
+										Date.now() + this.getTimeRemaining(),
+									paused: false,
+									timePaused: 0
+								});
 							}
 						});
 

frontend/src/pages/Team.vue

@@ -344,8 +344,14 @@ h2 {
 				margin-right: 10px;
 				width: 45px;
 				height: 45px;
-				font-size: 20px;
 			}
+
+			/deep/ .profile-picture.using-initials span {
+				font-size: calc(
+					45px / 5 * 2
+				); // 2/5th of .profile-picture height/width
+			}
+
 			div {
 				display: flex;
 				flex-direction: column;

frontend/src/store/index.js

@@ -12,6 +12,7 @@ import admin from "./modules/admin";
 
 import editSongModal from "./modules/modals/editSong";
 import importAlbumModal from "./modules/modals/importAlbum";
+import editPlaylistModal from "./modules/modals/editPlaylist";
 import manageStationModal from "./modules/modals/manageStation";
 import editUserModal from "./modules/modals/editUser";
 import viewPunishmentModal from "./modules/modals/viewPunishment";
@@ -33,6 +34,7 @@ export default new Vuex.Store({
 			modules: {
 				editSong: editSongModal,
 				importAlbum: importAlbumModal,
+				editPlaylist: editPlaylistModal,
 				manageStation: manageStationModal,
 				editUser: editUserModal,
 				viewPunishment: viewPunishmentModal,

frontend/src/store/modules/modals/editPlaylist.js

@@ -0,0 +1,56 @@
+/* eslint no-param-reassign: 0 */
+
+// import Vue from "vue";
+// import admin from "@/api/admin/index";
+
+export default {
+	namespaced: true,
+	state: {
+		tab: "settings",
+		playlist: { songs: [] }
+	},
+	getters: {},
+	actions: {
+		showTab: ({ commit }, tab) => commit("showTab", tab),
+		setPlaylist: ({ commit }, playlist) => commit("setPlaylist", playlist),
+		addSong: ({ commit }, song) => commit("addSong", song),
+		removeSong: ({ commit }, youtubeId) => commit("removeSong", youtubeId),
+		updatePlaylistSongs: ({ commit }, playlistSongs) =>
+			commit("updatePlaylistSongs", playlistSongs),
+		repositionedSong: ({ commit }, song) => commit("repositionedSong", song)
+	},
+	mutations: {
+		showTab(state, tab) {
+			state.tab = tab;
+		},
+		setPlaylist(state, playlist) {
+			state.playlist = { ...playlist };
+			state.playlist.songs.sort((a, b) => a.position - b.position);
+		},
+		addSong(state, song) {
+			state.playlist.songs.push(song);
+		},
+		removeSong(state, youtubeId) {
+			state.playlist.songs.forEach((song, index) => {
+				if (song.youtubeId === youtubeId)
+					state.playlist.songs.splice(index, 1);
+			});
+		},
+		updatePlaylistSongs(state, playlistSongs) {
+			state.playlist.songs = playlistSongs;
+		},
+		repositionedSong(state, song) {
+			if (
+				state.playlist.songs[song.newIndex] &&
+				state.playlist.songs[song.newIndex].youtubeId === song.youtubeId
+			)
+				return;
+
+			state.playlist.songs.splice(
+				song.newIndex,
+				0,
+				state.playlist.songs.splice(song.oldIndex, 1)[0]
+			);
+		}
+	}
+};

frontend/src/store/modules/modals/editSong.js

@@ -13,10 +13,14 @@ export default {
 			autoPlayed: false,
 			currentTime: 0
 		},
-		song: {}
+		song: {},
+		originalSong: {},
+		reports: [],
+		tab: "discogs"
 	},
 	getters: {},
 	actions: {
+		showTab: ({ commit }, tab) => commit("showTab", tab),
 		editSong: ({ commit }, song) => commit("editSong", song),
 		stopVideo: ({ commit }) => commit("stopVideo"),
 		loadVideoById: ({ commit }, id, skipDuration) =>
@@ -30,11 +34,16 @@ export default {
 		},
 		updateSongField: ({ commit }, data) => commit("updateSongField", data),
 		selectDiscogsInfo: ({ commit }, discogsInfo) =>
-			commit("selectDiscogsInfo", discogsInfo)
+			commit("selectDiscogsInfo", discogsInfo),
+		updateReports: ({ commit }, reports) => commit("updateReports", reports)
 	},
 	mutations: {
+		showTab(state, tab) {
+			state.tab = tab;
+		},
 		editSong(state, song) {
 			if (song.discogs === undefined) song.discogs = null;
+			state.originalSong = JSON.parse(JSON.stringify(song));
 			state.song = { ...song };
 		},
 		stopVideo(state) {
@@ -69,6 +78,9 @@ export default {
 		},
 		selectDiscogsInfo(state, discogsInfo) {
 			state.song.discogs = discogsInfo;
+		},
+		updateReports(state, reports) {
+			state.reports = reports;
 		}
 	}
 };

frontend/src/store/modules/modals/manageStation.js

@@ -6,6 +6,7 @@ export default {
 		tab: "settings",
 		originalStation: {},
 		station: {},
+		stationPlaylist: { songs: [] },
 		includedPlaylists: [],
 		excludedPlaylists: [],
 		songsList: [],
@@ -23,6 +24,8 @@ export default {
 		clearStation: ({ commit }) => commit("clearStation"),
 		updateSongsList: ({ commit }, songsList) =>
 			commit("updateSongsList", songsList),
+		updateStationPlaylist: ({ commit }, stationPlaylist) =>
+			commit("updateStationPlaylist", stationPlaylist),
 		repositionSongInList: ({ commit }, song) =>
 			commit("repositionSongInList", song),
 		updateStationPaused: ({ commit }, stationPaused) =>
@@ -55,6 +58,9 @@ export default {
 		updateSongsList(state, songsList) {
 			state.songsList = songsList;
 		},
+		updateStationPlaylist(state, stationPlaylist) {
+			state.stationPlaylist = stationPlaylist;
+		},
 		repositionSongInList(state, song) {
 			if (
 				state.songsList[song.newIndex] &&

frontend/webpack.common.js

@@ -50,7 +50,16 @@ module.exports = {
 			{
 				test: /\.scss$/,
 				exclude: /node_modules/,
-				use: ["vue-style-loader", "css-loader", "sass-loader"]
+				use: [
+					"vue-style-loader",
+					{
+						loader: "css-loader",
+						options: {
+							url: false,
+						}
+					},
+					"sass-loader"
+				]
 			}
 		]
 	}

musare.sh

@@ -68,9 +68,11 @@ if [[ -x "$(command -v docker)" && -x "$(command -v docker-compose)" ]]; then
         echo -e "${CYAN}Musare | Restart Services${NC}"
         services=$(handleServices "${@:2}")
         if [[ ${services:0:1} == 1 && ${services:2:4} == "all" ]]; then
-            docker-compose restart
+            docker-compose stop
+            docker-compose up -d
         elif [[ ${services:0:1} == 1 ]]; then
-            docker-compose restart ${services:2}
+            docker-compose stop ${services:2}
+            docker-compose up -d ${services:2}
         else
             echo -e "${RED}${services:2}\n${YELLOW}Usage: $(basename $0) restart [backend, frontend, mongo, redis]${NC}"
         fi
@@ -170,10 +172,28 @@ if [[ -x "$(command -v docker)" && -x "$(command -v docker-compose)" ]]; then
         if [[ $(git rev-parse HEAD) == $(git rev-parse @{u}) ]]; then
             echo -e "${GREEN}Already up to date${NC}"
         else
-            git pull
-            docker-compose build
-            docker-compose stop
-            docker-compose up -d
+            dbChange=$(git log --name-only --oneline HEAD..origin/$(git rev-parse --abbrev-ref HEAD) | grep "backend/logic/db/schemas")
+            fcChange=$(git log --name-only --oneline HEAD..origin/$(git rev-parse --abbrev-ref HEAD) | grep "frontend/dist/config/template.json")
+            bcChange=$(git log --name-only --oneline HEAD..origin/$(git rev-parse --abbrev-ref HEAD) | grep "backend/config/template.json")
+            if [[ ( $2 == "auto" && -z $dbChange && -z $fcChange && -z $bcChange ) || -z $2 ]]; then
+                echo -e "${CYAN}Updating...${NC}"
+                git pull
+                docker-compose build
+                docker-compose stop
+                docker-compose up -d
+                echo -e "${GREEN}Updated!${NC}"
+                if [[ -n $dbChange ]]; then
+                    echo -e "${RED}Database schema has changed, please run migration!${NC}"
+                fi
+                if [[ -n $fcChange ]]; then
+                    echo -e "${RED}Frontend config has changed, please update!${NC}"
+                fi
+                if [[ -n $bcChange ]]; then
+                    echo -e "${RED}Backend config has changed, please update!${NC}"
+                fi
+            elif [[ $2 == "auto" ]]; then
+                echo -e "${RED}Auto Update Failed! Database and/or config has changed!${NC}"
+            fi
         fi
         ;;