Profile picture initials random background color

backend/logic/actions/users.js

@@ -184,7 +184,8 @@ export default {
 						},
 						avatar: {
 							type: user.avatar.type,
-							url: user.avatar.url
+							url: user.avatar.url,
+							color: user.avatar.color
 						},
 						hasPassword: !!user.services.password,
 						services: { github: user.services.github }
@@ -1436,7 +1437,7 @@ export default {
 	 * @param {string} newType - the new type
 	 * @param {Function} cb - gets called with the result
 	 */
-	updateAvatarType: isLoginRequired(async function updateAvatarType(session, updatingUserId, newType, cb) {
+	updateAvatarType: isLoginRequired(async function updateAvatarType(session, updatingUserId, newAvatar, cb) {
 		const userModel = await DBModule.runJob(
 			"GET_MODEL",
 			{
@@ -1461,7 +1462,7 @@ export default {
 					if (!user) return next("User not found.");
 					return userModel.findOneAndUpdate(
 						{ _id: updatingUserId },
-						{ $set: { "avatar.type": newType } },
+						{ $set: { "avatar.type": newAvatar.type, "avatar.color": newAvatar.color } },
 						{ new: true, runValidators: true },
 						next
 					);
@@ -1473,7 +1474,7 @@ export default {
 					this.log(
 						"ERROR",
 						"UPDATE_AVATAR_TYPE",
-						`Couldn't update avatar type for user "${updatingUserId}" to type "${newType}". "${err}"`
+						`Couldn't update avatar type for user "${updatingUserId}" to type "${newAvatar.type}". "${err}"`
 					);
 					return cb({ status: "failure", message: err });
 				}
@@ -1481,7 +1482,7 @@ export default {
 				this.log(
 					"SUCCESS",
 					"UPDATE_AVATAR_TYPE",
-					`Updated avatar type for user "${updatingUserId}" to type "${newType}".`
+					`Updated avatar type for user "${updatingUserId}" to type "${newAvatar.type}".`
 				);
 
 				return cb({

backend/logic/db/schemas/user.js

@@ -10,7 +10,8 @@ export default {
 	},
 	avatar: {
 		type: { type: String, enum: ["gravatar", "initials"], required: true },
-		url: { type: String, required: false }
+		url: { type: String, required: false },
+		color: { type: String, enum: ["blue", "orange", "green", "purple", "teal"], required: false }
 	},
 	services: {
 		password: {

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

@@ -317,7 +317,10 @@
 		<div slot="footer">
 			<a
 				class="button is-default"
-				v-if="this.userId === this.playlist.createdBy"
+				v-if="
+					this.userId === this.playlist.createdBy ||
+						this.playlist.privacy === 'public'
+				"
 				@click="downloadPlaylist()"
 				href="#"
 			>

frontend/src/components/ui/ProfilePicture.vue

@@ -7,7 +7,7 @@
 		"
 		onerror="this.src='/assets/notes.png'; this.onerror=''"
 	/>
-	<div class="profile-picture using-initials" v-else>
+	<div class="profile-picture using-initials" :class="avatar.color" v-else>
 		{{ initials }}
 	</div>
 </template>
@@ -64,6 +64,26 @@ export default {
 		font-size: 50px;
 		user-select: none;
 		-webkit-user-select: none;
+		&.blue {
+			background-color: $musare-blue;
+			color: white;
+		}
+		&.orange {
+			background-color: $light-orange;
+			color: white;
+		}
+		&.green {
+			background-color: $green;
+			color: white;
+		}
+		&.purple {
+			background-color: $purple;
+			color: white;
+		}
+		&.teal {
+			background-color: $teal;
+			color: white;
+		}
 	}
 }
 </style>

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

@@ -1,8 +1,6 @@
 <template>
 	<div class="content profile-tab">
-		<h4 class="section-title">
-			Change Profile
-		</h4>
+		<h4 class="section-title">Change Profile</h4>
 		<p class="section-description">
 			Edit your public profile so users can find out more about you.
 		</p>
@@ -118,7 +116,21 @@ export default {
 			if (nameChanged) this.changeName();
 			if (locationChanged) this.changeLocation();
 			if (bioChanged) this.changeBio();
-			if (avatarChanged) this.changeAvatarType();
+			if (avatarChanged) {
+				if (this.modifiedUser.avatar.type === "initials") {
+					const colors = [
+						"blue",
+						"orange",
+						"green",
+						"purple",
+						"teal"
+					];
+					const color =
+						colors[Math.floor(Math.random() * colors.length)];
+					this.modifiedUser.avatar.color = color;
+				}
+				this.changeAvatarType();
+			}
 
 			if (
 				!avatarChanged &&
@@ -247,7 +259,7 @@ export default {
 			return this.socket.emit(
 				"users.updateAvatarType",
 				this.userId,
-				avatar.type,
+				avatar,
 				res => {
 					if (res.status !== "success") {
 						new Toast({ content: res.message, timeout: 8000 });