Fixed .player-cannot-autoplay position

frontend/dist/index.css

@@ -123,10 +123,6 @@ h6 {
 	float: right !important;
 }
 
-.light-blue {
-	background-color: #ff4545 !important;
-}
-
 .white {
 	background-color: #FFFFFF !important;
 }
@@ -141,7 +137,6 @@ a.nav-item.is-tab {
 }
 
 .button.is-info {
-	background-color: #ff4545;
 	border-width: 0;
 	color: #fff;
 }

frontend/src/App.vue

@@ -446,11 +446,11 @@ button.delete:focus {
 	}
 
 	&.is-info {
-		background-color: $blue !important;
+		background-color: $musare-blue !important;
 
 		&:hover,
 		&:focus {
-			background-color: darken($blue, 5%) !important;
+			background-color: darken($musare-blue, 5%) !important;
 		}
 	}
 

frontend/src/pages/Home/index.vue

@@ -279,6 +279,7 @@ export default {
 			this.socket.emit("apis.joinRoom", "home", () => {});
 		},
 		filteredStations() {
+			const privacyOrder = ["public", "unlisted", "private"];
 			return this.stations
 				.filter(
 					station =>
@@ -289,7 +290,11 @@ export default {
 				.sort(
 					(a, b) =>
 						this.isFavorite(b) - this.isFavorite(a) ||
-						this.isOwner(b) - this.isOwner(a)
+						this.isOwner(b) - this.isOwner(a) ||
+						this.isPlaying(b) - this.isPlaying(a) ||
+						a.paused - b.paused ||
+						privacyOrder.indexOf(a.privacy) -
+							privacyOrder.indexOf(b.privacy)
 				);
 		},
 		isOwner(station) {
@@ -298,6 +303,9 @@ export default {
 		isFavorite(station) {
 			return this.favoriteStations.indexOf(station._id) !== -1;
 		},
+		isPlaying(station) {
+			return typeof station.currentSong.title !== "undefined";
+		},
 		favoriteStation(event, station) {
 			event.preventDefault();
 			this.socket.emit("stations.favoriteStation", station._id, res => {

frontend/src/pages/Station/components/Sidebar/index.vue

@@ -74,7 +74,7 @@ export default {
 		font-size: 17px;
 		color: #222;
 		background-color: #ddd;
-		width: -webkit-fill-available;
+		flex-grow: 1;
 
 		&:not(:first-of-type) {
 			margin-left: 5px;

frontend/src/pages/Station/index.vue

@@ -1651,9 +1651,10 @@ export default {
 					height: 100%;
 
 					.player-cannot-autoplay {
-						position: absolute;
+						position: relative;
 						width: 100%;
 						height: 100%;
+						bottom: calc(100% + 5px);
 						background: rgba(3, 169, 244, 0.95);
 						display: flex;
 						align-items: center;