Improved upload scripts

mixins/Avatar.pixy

@@ -11,6 +11,12 @@ component AvatarNoLink(user *arn.User)
 	else
 		SVGAvatar(user)
 
+component ProfileImage(user *arn.User)
+	if user.HasAvatar()
+		img.profile-image.lazy(data-src=user.LargeAvatar(), data-webp="true", alt="Profile image")
+	else
+		SVGProfileImage(user)
+
 component SVGAvatar(user *arn.User)
 	svg.user-image(viewBox="0 0 50 50")
 		circle.head(cx="25", cy="19", r="10")
@@ -20,3 +26,8 @@ component SVGAvatar(user *arn.User)
 			text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick
 		else
 			text.svg-nick(x="25", y="44", text-anchor="middle")= user.Nick[:6]
+
+component SVGProfileImage(user *arn.User)
+	svg.profile-image(viewBox="0 0 50 50", alt="Profile image")
+		circle.head(cx="25", cy="19", r="10")
+		circle.body(cx="25", cy="50", r="20")

mixins/Input.pixy

@@ -30,7 +30,7 @@ component InputSelection(id string, value string, label string, placeholder stri
 			each option in options
 				option(value=option.Value)= option.Label
 
-component InputImage(id string, label string, src string)
+component InputImage(id string, label string)
 	.widget-section
 		label(for=id)= label + ":"
 		button.action(data-action="selectFile", data-trigger="click", data-preview-image-id=id + "-preview")

mixins/ProfileImage.pixy

@@ -1,7 +0,0 @@
-component ProfileImage(user *arn.User)
-	if user.HasAvatar()
-		img.profile-image.lazy(data-src=user.LargeAvatar(), data-webp="true", alt="Profile image")
-	else
-		svg.profile-image(viewBox="0 0 50 50", alt="Profile image")
-			circle.head(cx="25", cy="19", r="10")
-			circle.body(cx="25", cy="50", r="20")

pages/settings/settings.pixy

@@ -51,10 +51,16 @@ component SettingsPersonal(user *arn.User)
 			
 			//- File upload
 			if user.Settings().Avatar.Source == "FileSystem"
-				InputImage("avatar-input", "File", user.LargeAvatar())
+				InputImage("avatar-input", "File")
 
 				.profile-image-container.avatar-preview
-					img.profile-image.mountable(id="avatar-input-preview", src=user.LargeAvatar(), alt="Image preview")
+					if user.HasAvatar()
+						img#avatar-input-preview.profile-image.mountable(src=user.LargeAvatar(), alt="Profile image")
+					else
+						img#avatar-input-preview.profile-image.hidden(src=user.LargeAvatar(), alt="Profile image")
+
+						#avatar-input-preview-svg
+							SVGProfileImage(user)
 
 component SettingsNotifications(user *arn.User)
 	SettingsTabs

scripts/Actions/Upload.ts

@@ -21,14 +21,18 @@ function previewImage(file: File, preview: HTMLImageElement) {
 	let reader = new FileReader()
 
 	reader.onloadend = () => {
+		let svgPreview = document.getElementById("avatar-input-preview-svg") as HTMLImageElement
+
+		if(svgPreview) {
+			svgPreview.classList.add("hidden")
+		}
+
 		preview.classList.remove("hidden")
 		preview.src = reader.result
 	}
 
 	if(file) {
 		reader.readAsDataURL(file)
-	} else {
-		preview.classList.add("hidden")
 	}
 }
 
@@ -49,10 +53,7 @@ function uploadFile(file: File, endpoint: string, arn: AnimeNotifier) {
 		})
 
 		let newURL = await response.text()
-		let sidebar = document.getElementById("sidebar")
-		let userImage = sidebar.getElementsByClassName("user-image")[0] as HTMLImageElement
-		userImage.dataset.src = newURL
-		userImage["became visible"]()
+		updateSideBarAvatar(newURL)
 
 		if(response.ok) {
 			arn.statusMessage.showInfo("Successfully uploaded your new avatar.")
@@ -63,3 +64,17 @@ function uploadFile(file: File, endpoint: string, arn: AnimeNotifier) {
 
 	reader.readAsArrayBuffer(file)
 }
+
+// Update sidebar avatar
+function updateSideBarAvatar(url: string) {
+	let sidebar = document.getElementById("sidebar")
+	let userImage = sidebar.getElementsByClassName("user-image")[0] as HTMLImageElement
+	let lazyLoad = userImage["became visible"]
+
+	if(lazyLoad) {
+		userImage.dataset.src = url
+		lazyLoad()
+	} else {
+		location.reload()
+	}
+}