feat: added option to use initials for avatar

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/components/ui/ProfilePicture.vue

@@ -0,0 +1,70 @@
+<template>
+	<img
+		class="profile-picture using-gravatar"
+		v-if="avatar.type === 'gravatar'"
+		:src="
+			avatar.url ? `${avatar.url}?d=${notes}&s=250` : '/assets/notes.png'
+		"
+		onerror="this.src='/assets/notes.png'; this.onerror=''"
+	/>
+	<div class="profile-picture using-initials" v-else>
+		{{ initials }}
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		avatar: {
+			type: Object,
+			default: () => {}
+		},
+		name: {
+			type: String,
+			default: ": )"
+		}
+	},
+	data() {
+		return {
+			notes: ""
+		};
+	},
+	computed: {
+		initials() {
+			return this.name
+				.split(" ")
+				.map(word => word.charAt(0))
+				.join("")
+				.toUpperCase();
+		}
+	},
+	mounted() {
+		lofig.get("frontendDomain").then(frontendDomain => {
+			this.notes = encodeURI(`${frontendDomain}/assets/notes.png`);
+		});
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/global.scss";
+
+.profile-picture {
+	width: 100px;
+	height: 100px;
+	border-radius: 100%;
+	border: 0.5px solid $light-grey-2;
+
+	&.using-initials {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #ddd;
+		font-family: "Inter", sans-serif;
+		font-weight: 400;
+		font-size: 50px;
+		user-select: none;
+		-webkit-user-select: none;
+	}
+}
+</style>

frontend/src/pages/Profile.vue

@@ -7,15 +7,7 @@
 		<div class="container">
 			<div class="info-section">
 				<div class="picture-name-row">
-					<img
-						class="profile-picture"
-						:src="
-							user.avatar.url && user.avatar.type === 'gravatar'
-								? `${user.avatar.url}?d=${notes}&s=250`
-								: '/assets/notes.png'
-						"
-						onerror="this.src='/assets/notes.png'; this.onerror=''"
-					/>
+					<profile-picture :avatar="user.avatar" :name="user.name" />
 					<div>
 						<div class="name-role-row">
 							<p class="name">{{ user.name }}</p>
@@ -245,6 +237,7 @@ import draggable from "vuedraggable";
 
 import TabQueryHandler from "../mixins/TabQueryHandler.vue";
 
+import ProfilePicture from "../components/ui/ProfilePicture.vue";
 import PlaylistItem from "../components/ui/PlaylistItem.vue";
 import SortablePlaylists from "../mixins/SortablePlaylists.vue";
 import MainHeader from "../components/layout/MainHeader.vue";
@@ -257,6 +250,7 @@ export default {
 		MainHeader,
 		MainFooter,
 		PlaylistItem,
+		ProfilePicture,
 		CreatePlaylist: () => import("../components/modals/CreatePlaylist.vue"),
 		EditPlaylist: () =>
 			import("../components/modals/EditPlaylist/index.vue"),
@@ -266,7 +260,6 @@ export default {
 	data() {
 		return {
 			user: {},
-			notes: "",
 			isUser: false,
 			tab: "recent-activity",
 			playlists: [],
@@ -295,11 +288,6 @@ export default {
 		)
 			this.tab = this.$route.query.tab;
 
-		lofig.get("frontendDomain").then(frontendDomain => {
-			this.frontendDomain = frontendDomain;
-			this.notes = encodeURI(`${this.frontendDomain}/assets/notes.png`);
-		});
-
 		io.getSocket(socket => {
 			this.socket = socket;
 
@@ -648,14 +636,10 @@ export default {
 		align-items: center;
 		justify-content: center;
 		margin-bottom: 24px;
-	}
 
-	.profile-picture {
-		width: 100px;
-		height: 100px;
-		border-radius: 100%;
-		border: 0.5px solid $light-grey-2;
-		margin-right: 32px;
+		.profile-picture {
+			margin-right: 32px;
+		}
 	}
 
 	.name-role-row {

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

@@ -15,17 +15,10 @@
 		>
 			<label>Avatar</label>
 			<div id="avatar-selection-inner-container">
-				<div class="profile-picture">
-					<img
-						:src="
-							modifiedUser.avatar.url &&
-							modifiedUser.avatar.type === 'gravatar'
-								? `${modifiedUser.avatar.url}?d=${notesUri}&s=250`
-								: '/assets/notes.png'
-						"
-						onerror="this.src='/assets/notes.png'; this.onerror=''"
-					/>
-				</div>
+				<profile-picture
+					:avatar="modifiedUser.avatar"
+					:name="modifiedUser.name"
+				/>
 				<div class="select">
 					<select v-model="modifiedUser.avatar.type">
 						<option value="gravatar">Using Gravatar</option>
@@ -96,25 +89,18 @@ import Toast from "toasters";
 import validation from "../../../validation";
 import io from "../../../io";
 
+import ProfilePicture from "../../../components/ui/ProfilePicture.vue";
 import SaveButton from "../mixins/SaveButton.vue";
 
 export default {
+	components: { ProfilePicture },
 	mixins: [SaveButton],
-	data() {
-		return {
-			notesUri: ""
-		};
-	},
 	computed: mapState({
 		userId: state => state.user.auth.userId,
 		originalUser: state => state.settings.originalUser,
 		modifiedUser: state => state.settings.modifiedUser
 	}),
 	mounted() {
-		lofig.get("frontendDomain").then(frontendDomain => {
-			this.notesUri = encodeURI(`${frontendDomain}/assets/notes.png`);
-		});
-
 		io.getSocket(socket => {
 			this.socket = socket;
 		});
@@ -313,17 +299,10 @@ export default {
 		margin-top: 5px;
 
 		.profile-picture {
-			line-height: 1;
-			cursor: pointer;
-
-			img {
-				background-color: #fff;
-				width: 50px;
-				height: 50px;
-				border-radius: 100%;
-				border: 2px solid $light-grey;
-				margin-right: 10px;
-			}
+			margin-right: 10px;
+			width: 50px;
+			height: 50px;
+			font-size: 25px;
 		}
 	}
 }