Merge branch 'polishing' of github.com:Musare/MusareNode into polishing

frontend/src/App.vue

@@ -175,7 +175,7 @@ export default {
 
 		if (localStorage.getItem("nightmode") === "true") {
 			this.changeNightmode(true);
-			this.enableNightMode();
+			this.enableNightmode();
 		}
 
 		this.socket.dispatch("users.getPreferences", res => {
@@ -190,7 +190,7 @@ export default {
 				);
 				this.changeActivityWatch(preferences.activityWatch);
 
-				if (this.nightmode) this.enablenightMode();
+				if (this.nightmode) this.enableNightmode();
 				else this.disableNightmode();
 			}
 		});
@@ -281,6 +281,18 @@ export default {
 	// color: var(--dark-grey-2);
 	// background-color: var(--light-grey-3) !important;
 
+	.input,
+	.textarea,
+	.select select {
+		background-color: var(--dark-grey);
+		border-color: var(--grey-3);
+		color: var(--white);
+
+		&::placeholder {
+			color: var(--light-grey-3);
+		}
+	}
+
 	// &:last-of-type {
 	// 	background-color: var(--light-grey) !important;
 	// }
@@ -532,6 +544,7 @@ a {
 
 .tippy-box[data-theme~="confirm"] {
 	background-color: var(--red);
+	border: 0;
 
 	.tippy-content {
 		padding: 0;
@@ -539,7 +552,7 @@ a {
 
 	a {
 		padding: 15px;
-		line-height: 25px;
+		line-height: 30px;
 		color: var(--white);
 		border-bottom: 0;
 		font-size: 15px;

frontend/src/components/FloatingBox.vue

@@ -1,7 +1,10 @@
 <template>
 	<div
 		ref="box"
-		class="box"
+		:class="{
+			'floating-box': true,
+			column
+		}"
 		:id="id"
 		v-if="shown"
 		:style="{
@@ -24,7 +27,8 @@
 <script>
 export default {
 	props: {
-		id: { type: String, default: null }
+		id: { type: String, default: null },
+		column: { type: Boolean, default: true }
 	},
 	data() {
 		return {
@@ -129,14 +133,25 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.box {
+<style lang="scss">
+.night-mode .floating-box {
+	background-color: var(--dark-grey-2) !important;
+	border: 0 !important;
+	.box-body b {
+		color: var(--light-grey-2) !important;
+	}
+}
+
+.floating-box {
 	background-color: var(--white);
+	color: var(--black);
 	position: fixed;
 	z-index: 10000000;
 	resize: both;
 	overflow: auto;
 	border: 1px solid var(--light-grey-2);
+	border-radius: 5px;
+	padding: 10px;
 	min-height: 50px !important;
 	min-width: 50px !important;
 
@@ -158,5 +173,13 @@ export default {
 			padding: 3px 6px;
 		}
 	}
+
+	&.column .box-body {
+		flex-flow: column;
+		span {
+			flex: 1;
+			display: block;
+		}
+	}
 }
 </style>

frontend/src/components/Modal.vue

@@ -105,24 +105,14 @@ p {
 	}
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 650px) {
 	.modal-card {
-		max-height: none;
-
-		.modal-card-body {
-			// padding: 0;
-		}
-
+		max-height: 100vh;
+		height: 100%;
 		.modal-card-head,
 		.modal-card-foot {
 			border-radius: 0;
 		}
 	}
 }
-
-@media screen and (max-height: 650px) {
-	.modal-card {
-		height: 100%;
-	}
-}
 </style>

frontend/src/components/ReportInfoItem.vue

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

frontend/src/components/SearchQueryItem.vue

@@ -19,35 +19,17 @@
 		</div>
 
 		<div class="universal-item-actions">
-			<tippy
-				:touch="true"
-				:interactive="true"
-				placement="left"
-				theme="songActions"
-				ref="songActions"
-				trigger="click"
-			>
-				<i
-					class="material-icons action-dropdown-icon"
-					content="Song Options"
+			<div class="icons-group">
+				<a
+					target="_blank"
+					:href="`https://www.youtube.com/watch?v=${result.id}`"
+					content="View on Youtube"
 					v-tippy
-					>more_horiz</i
 				>
-
-				<template #content>
-					<div class="icons-group">
-						<a
-							target="_blank"
-							:href="`https://www.youtube.com/watch?v=${result.id}`"
-							content="View on Youtube"
-							v-tippy
-						>
-							<div class="youtube-icon"></div>
-						</a>
-						<slot name="actions" />
-					</div>
-				</template>
-			</tippy>
+					<div class="youtube-icon"></div>
+				</a>
+				<slot name="actions" />
+			</div>
 		</div>
 	</div>
 </template>

frontend/src/components/layout/MainHeader.vue

@@ -10,6 +10,7 @@
 		</div>
 
 		<span
+			v-if="loggedIn || !hideLoggedOut"
 			class="nav-toggle"
 			:class="{ 'is-active': isMobile }"
 			tabindex="0"

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

@@ -9,18 +9,18 @@
 			<div
 				:class="{
 					'view-only': !isEditable(),
-					'edit-playlist-modal-inner-container': true
+					'custom-modal-body': true
 				}"
 			>
-				<div id="first-column">
+				<div class="first-section">
 					<div id="playlist-info-section" class="section">
 						<h3>{{ playlist.displayName }}</h3>
 						<h5>Song Count: {{ playlist.songs.length }}</h5>
 						<h5>Duration: {{ totalLength() }}</h5>
 					</div>
 
-					<div id="tabs-container">
-						<div id="tab-selection">
+					<div class="tabs-container">
+						<div class="tab-selection">
 							<button
 								class="button is-default"
 								:class="{ selected: tab === 'settings' }"
@@ -77,7 +77,7 @@
 					</div>
 				</div>
 
-				<div id="second-column">
+				<div class="second-section">
 					<div id="rearrange-songs-section" class="section">
 						<div v-if="isEditable()">
 							<h4 class="section-title">Rearrange Songs</h4>
@@ -616,6 +616,29 @@ export default {
 	strong {
 		color: var(--light-grey-2);
 	}
+
+	.edit-playlist-modal.modal .modal-card-body .custom-modal-body {
+		.first-section {
+			#playlist-info-section {
+				background-color: var(--dark-grey-3) !important;
+				border: 0;
+			}
+			.tabs-container {
+				background-color: transparent !important;
+				.tab-selection .button {
+					background: var(--dark-grey);
+					color: var(--white);
+				}
+				.tab {
+					background-color: var(--dark-grey-3) !important;
+					border: 0 !important;
+				}
+			}
+		}
+		.second-section .section {
+			border-radius: 5px;
+		}
+	}
 }
 
 .menu-list li {
@@ -640,10 +663,10 @@ export default {
 	}
 }
 
-#tabs-container {
+.tabs-container {
 	// padding: 16px;
 
-	#tab-selection {
+	.tab-selection {
 		display: flex;
 		// overflow-x: auto;
 		margin: 24px 10px 0 10px;
@@ -678,7 +701,7 @@ export default {
 }
 
 .edit-playlist-modal {
-	.edit-playlist-modal-inner-container {
+	.custom-modal-body {
 		display: flex;
 		flex-wrap: wrap;
 		height: 100%;
@@ -687,7 +710,7 @@ export default {
 		&.view-only {
 			height: auto !important;
 
-			#first-column {
+			.first-section {
 				flex-basis: 100%;
 			}
 
@@ -721,7 +744,7 @@ export default {
 		width: 150px;
 	}
 
-	#first-column {
+	.first-section {
 		flex-basis: 550px;
 		height: 100%;
 		overflow-y: auto;
@@ -752,7 +775,7 @@ export default {
 		}
 	}
 
-	#second-column {
+	.second-section {
 		flex-basis: 650px;
 		height: 100%;
 		overflow-y: auto;

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

@@ -304,6 +304,7 @@ export default {
 	.api-result .tracks .track:focus,
 	.selected-discogs-info {
 		background-color: var(--dark-grey-2) !important;
+		border: 0 !important;
 	}
 
 	.label,

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

@@ -320,9 +320,14 @@ export default {
 	strong {
 		color: var(--light-grey-2);
 	}
+
+	.tabs-container .tab-selection .button {
+		background: var(--dark-grey) !important;
+		color: var(--white) !important;
+	}
 }
 
-.tabs-container {
+.reports-tab.tabs-container {
 	.tab-selection {
 		display: flex;
 		overflow-x: auto;

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

@@ -512,7 +512,7 @@
 				</div>
 			</template>
 		</modal>
-		<floating-box id="genreHelper" ref="genreHelper">
+		<floating-box id="genreHelper" ref="genreHelper" :column="false">
 			<template #body>
 				<span>Blues</span><span>Country</span><span>Disco</span
 				><span>Funk</span><span>Hip-Hop</span><span>Jazz</span
@@ -1580,6 +1580,15 @@ export default {
 	.player-footer,
 	#tabs-container {
 		background-color: var(--dark-grey-3) !important;
+		border: 0 !important;
+		.tab {
+			border: 0 !important;
+		}
+	}
+
+	#tabs-container #tab-selection .button {
+		background: var(--dark-grey) !important;
+		color: var(--white) !important;
 	}
 }
 

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

@@ -961,6 +961,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.tabs-container .tab-selection .button {
+		background: var(--dark-grey) !important;
+		color: var(--white) !important;
+	}
+}
+
 .excluded-icon {
 	color: var(--red);
 }

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

@@ -360,6 +360,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.tabs-container .tab-selection .button {
+		background: var(--dark-grey) !important;
+		color: var(--white) !important;
+	}
+}
+
 .songs {
 	.tabs-container {
 		.tab-selection {

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

@@ -680,8 +680,29 @@ export default {
 
 <style lang="scss" scoped>
 .night-mode {
-	#about-station-container {
-		background-color: var(--dark-grey-3) !important;
+	.manage-station-modal.modal .modal-card-body .custom-modal-body {
+		.left-section {
+			#about-station-container {
+				background-color: var(--dark-grey-3) !important;
+				border: 0;
+			}
+			.section {
+				background-color: transparent !important;
+			}
+			.tab-selection .button {
+				background: var(--dark-grey);
+				color: var(--white);
+			}
+			.tab {
+				background-color: var(--dark-grey-3);
+				border: 0;
+			}
+		}
+		.right-section .section,
+		#queue {
+			border-radius: 5px;
+			background-color: transparent !important;
+		}
 	}
 }
 
@@ -705,6 +726,10 @@ export default {
 		overflow-y: auto;
 		flex-grow: 1;
 
+		.section:first-child {
+			padding: 0 15px 15px !important;
+		}
+
 		#about-station-container {
 			padding: 20px;
 			display: flex;

frontend/src/components/modals/Report.vue

@@ -449,6 +449,10 @@ export default {
 			background-color: var(--dark-grey-3) !important;
 		}
 	}
+	.columns {
+		background-color: var(--dark-grey-3) !important;
+		border-radius: 5px;
+	}
 }
 
 .report-modal-inner-container {

frontend/src/components/modals/RequestSong.vue

@@ -50,31 +50,25 @@
 								name="search-query-actions"
 								mode="out-in"
 							>
-								<a
-									class="button is-success"
+								<i
 									v-if="result.isRequested"
-									href="#"
 									key="added-to-playlist"
+									class="material-icons icon-requested"
+									content="Requested song"
+									v-tippy
+									>done</i
 								>
-									<i class="material-icons icon-with-button"
-										>done</i
-									>
-									Requested song
-								</a>
-								<a
-									class="button is-dark"
+								<i
 									v-else
 									@click.prevent="
 										addSongToQueue(result.id, index)
 									"
-									href="#"
 									key="add-to-queue"
+									class="material-icons icon-request"
+									content="Request song"
+									v-tippy
+									>add</i
 								>
-									<i class="material-icons icon-with-button"
-										>add</i
-									>
-									Request song
-								</a>
 							</transition>
 						</template>
 					</search-query-item>
@@ -241,6 +235,10 @@ export default {
 	div {
 		color: var(--dark-grey);
 	}
+
+	.icon-request {
+		color: var(--white);
+	}
 }
 
 .song-actions {
@@ -266,6 +264,14 @@ export default {
 	padding: 20px;
 }
 
+.icon-requested {
+	color: var(--green);
+}
+
+.icon-request {
+	color: var(--dark-gray-3);
+}
+
 #song-query-results {
 	padding: 10px;
 	max-height: 500px;

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

@@ -374,10 +374,6 @@ td {
 
 #keyboardShortcutsHelper {
 	.box-body {
-		b {
-			color: var(--black);
-		}
-
 		.biggest {
 			font-size: 18px;
 		}

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

@@ -404,10 +404,6 @@ td {
 
 #keyboardShortcutsHelper {
 	.box-body {
-		b {
-			color: var(--black);
-		}
-
 		.biggest {
 			font-size: 18px;
 		}

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

@@ -297,18 +297,26 @@ export default {
 		filteredSongs() {
 			return this.songs.filter(
 				song =>
-					JSON.stringify(Object.values(song)).indexOf(
-						this.searchQuery
-					) !== -1 &&
+					JSON.stringify(Object.values(song))
+						.toLowerCase()
+						.indexOf(this.searchQuery.toLowerCase()) !== -1 &&
 					(this.artistFilterSelected.length === 0 ||
 						song.artists.some(
 							artist =>
-								this.artistFilterSelected.indexOf(artist) !== -1
+								this.artistFilterSelected
+									.map(artistFilterSelected =>
+										artistFilterSelected.toLowerCase()
+									)
+									.indexOf(artist.toLowerCase()) !== -1
 						)) &&
 					(this.genreFilterSelected.length === 0 ||
 						song.genres.some(
 							genre =>
-								this.genreFilterSelected.indexOf(genre) !== -1
+								this.genreFilterSelected
+									.map(genreFilterSelected =>
+										genreFilterSelected.toLowerCase()
+									)
+									.indexOf(genre.toLowerCase()) !== -1
 						))
 			);
 		},
@@ -326,7 +334,10 @@ export default {
 				.filter(
 					artist =>
 						this.artistFilterSelected.indexOf(artist) !== -1 ||
-						artist.indexOf(this.artistFilterQuery) !== -1
+						artist
+							.toLowerCase()
+							.indexOf(this.artistFilterQuery.toLowerCase()) !==
+							-1
 				)
 				.sort(
 					(a, b) =>
@@ -348,7 +359,9 @@ export default {
 				.filter(
 					genre =>
 						this.genreFilterSelected.indexOf(genre) !== -1 ||
-						genre.indexOf(this.genreFilterQuery) !== -1
+						genre
+							.toLowerCase()
+							.indexOf(this.genreFilterQuery.toLowerCase()) !== -1
 				)
 				.sort(
 					(a, b) =>
@@ -595,10 +608,6 @@ td {
 
 #keyboardShortcutsHelper {
 	.box-body {
-		b {
-			color: var(--black);
-		}
-
 		.biggest {
 			font-size: 18px;
 		}

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

@@ -174,6 +174,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode #activity-items .activity-item {
+	background-color: var(--dark-grey-2) !important;
+	border: 0 !important;
+}
+
 #activity-items {
 	overflow: auto;
 	min-height: auto;

frontend/src/pages/Station/index.vue

@@ -2253,22 +2253,6 @@ export default {
 		}
 	}
 }
-
-#player-debug-box {
-	.box-body {
-		// flex-direction: column;
-		flex-flow: column;
-
-		span {
-			flex: 1;
-			display: block;
-		}
-
-		b {
-			color: var(--black);
-		}
-	}
-}
 </style>
 
 <style lang="scss" scoped>

musare.sh

@@ -17,26 +17,20 @@ handleServices()
     servicesArray=()
     invalidServices=false
     for x in "$@"; do
-        for validService in "${validServices[@]}"
-        do
-            if [[ ${validService} =~ (^|[[:space:]])"$x"($|[[:space:]]) ]]; then
-                for service in "${servicesArray[@]}"
-                do
-                    if ! [[ "$service" =~ (^|[[:space:]])"$x"($|[[:space:]]) ]]; then
-                        servicesArray+=("$x")
-                    fi
-                done
+        if [[ ${validServices[*]} =~ (^|[[:space:]])"$x"($|[[:space:]]) ]]; then
+            if ! [[ ${servicesArray[*]} =~ (^|[[:space:]])"$x"($|[[:space:]]) ]]; then
+                servicesArray+=("${x}")
+            fi
+        else
+            if [[ $invalidServices == false ]]; then
+                invalidServices="${x}"
             else
-                if [[ $invalidServices == false ]]; then
-                    invalidServices="${x}"
-                else
-                    invalidServices="${invalidServices} ${x}"
-                fi
+                invalidServices="${invalidServices} ${x}"
             fi
-        done
+        fi
     done
     if [[ $invalidServices == false && ${#servicesArray[@]} -gt 0 ]]; then
-        echo "1|" "${servicesArray[@]}"
+        echo "1|${servicesArray[*]}"
     elif [[ $invalidServices == false ]]; then
         echo "1|all"
     else
@@ -52,7 +46,7 @@ if [[ -x "$(command -v docker)" && -x "$(command -v docker-compose)" ]]; then
         if [[ ${servicesString:0:1} == 1 && ${servicesString:2:4} == "all" ]]; then
             docker-compose up -d
         elif [[ ${servicesString:0:1} == 1 ]]; then
-            docker-compose up -d "${servicesString:2}"
+            docker-compose up -d ${servicesString:2}
         else
             echo -e "${RED}${servicesString:2}\n${YELLOW}Usage: $(basename "$0") start [backend, frontend, mongo, redis]${NC}"
         fi
@@ -64,7 +58,7 @@ if [[ -x "$(command -v docker)" && -x "$(command -v docker-compose)" ]]; then
         if [[ ${servicesString:0:1} == 1 && ${servicesString:2:4} == "all" ]]; then
             docker-compose stop
         elif [[ ${servicesString:0:1} == 1 ]]; then
-            docker-compose stop "${servicesString:2}"
+            docker-compose stop ${servicesString:2}
         else
             echo -e "${RED}${servicesString:2}\n${YELLOW}Usage: $(basename "$0") stop [backend, frontend, mongo, redis]${NC}"
         fi
@@ -77,8 +71,8 @@ if [[ -x "$(command -v docker)" && -x "$(command -v docker-compose)" ]]; then
             docker-compose stop
             docker-compose up -d
         elif [[ ${servicesString:0:1} == 1 ]]; then
-            docker-compose stop "${servicesString:2}"
-            docker-compose up -d "${servicesString:2}"
+            docker-compose stop ${servicesString:2}
+            docker-compose up -d ${servicesString:2}
         else
             echo -e "${RED}${servicesString:2}\n${YELLOW}Usage: $(basename "$0") restart [backend, frontend, mongo, redis]${NC}"
         fi
@@ -90,7 +84,7 @@ if [[ -x "$(command -v docker)" && -x "$(command -v docker-compose)" ]]; then
         if [[ ${servicesString:0:1} == 1 && ${servicesString:2:4} == "all" ]]; then
             docker-compose build
         elif [[ ${servicesString:0:1} == 1 ]]; then
-            docker-compose build "${servicesString:2}"
+            docker-compose build ${servicesString:2}
         else
             echo -e "${RED}${servicesString:2}\n${YELLOW}Usage: $(basename "$0") build [backend, frontend, mongo, redis]${NC}"
         fi
@@ -115,11 +109,11 @@ if [[ -x "$(command -v docker)" && -x "$(command -v docker-compose)" ]]; then
                 echo -e "${RED}Cancelled reset${NC}"
             fi
         elif [[ ${servicesString:0:1} == 1 ]]; then
-            echo -e "${GREEN}Are you sure you want to reset all data for $(echo "${servicesString:2}" | tr ' ' ',')? ${YELLOW}[y,n]: ${NC}"
+            echo -e "${GREEN}Are you sure you want to reset all data for $(echo ${servicesString:2} | tr ' ' ',')? ${YELLOW}[y,n]: ${NC}"
             read -r confirm
             if [[ "${confirm}" == y* ]]; then
-                docker-compose stop "${servicesString:2}"
-                docker-compose rm -v --force "${servicesString:2}"
+                docker-compose stop ${servicesString:2}
+                docker-compose rm -v --force ${servicesString:2}
                 if [[ "${servicesString:2}" == *redis* && -d ".redis" ]]; then
                     rm -rf .redis
                 fi
@@ -141,6 +135,7 @@ if [[ -x "$(command -v docker)" && -x "$(command -v docker-compose)" ]]; then
             if [[ -z $containerId ]]; then
                 echo -e "${RED}Error: Backend offline, please start to attach.${NC}"
             else
+                echo -e "${YELLOW}Detach with CTRL+P+Q${NC}"
                 docker attach "$containerId"
             fi
         else