Fix normalized skins uploading to Mojang (#4646)

* Fix normalized skins uploading to Mojang

* Run app-frontend > fix

Author: Jerozgen

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -130,6 +130,7 @@ import {
 	remove_custom_skin,
 	type Skin,
 	type SkinModel,
+	type SkinTextureUrl,
 	unequip_skin,
 } from '@/helpers/skins.ts'
 
@@ -142,7 +143,7 @@ const currentSkin = ref<Skin | null>(null)
 const shouldRestoreModal = ref(false)
 const isSaving = ref(false)
 
-const uploadedTextureUrl = ref<string | null>(null)
+const uploadedTextureUrl = ref<SkinTextureUrl | null>(null)
 const previewSkin = ref<string>('')
 
 const variant = ref<SkinModel>('CLASSIC')
@@ -188,7 +189,7 @@ function getSortedCapeExcluding(excludeId: string): Cape | undefined {
 
 async function loadPreviewSkin() {
 	if (uploadedTextureUrl.value) {
-		previewSkin.value = uploadedTextureUrl.value
+		previewSkin.value = uploadedTextureUrl.value.normalized
 	} else if (currentSkin.value) {
 		try {
 			previewSkin.value = await get_normalized_skin_texture(currentSkin.value)
@@ -253,11 +254,11 @@ async function show(e: MouseEvent, skin?: Skin) {
 	modal.value?.show(e)
 }
 
-async function showNew(e: MouseEvent, skinTextureUrl: string) {
+async function showNew(e: MouseEvent, skinTextureUrl: SkinTextureUrl) {
 	mode.value = 'new'
 	currentSkin.value = null
 	uploadedTextureUrl.value = skinTextureUrl
-	variant.value = await determineModelType(skinTextureUrl)
+	variant.value = await determineModelType(skinTextureUrl.original)
 	selectedCape.value = undefined
 	visibleCapeList.value = []
 	initVisibleCapeList()
@@ -267,7 +268,7 @@ async function showNew(e: MouseEvent, skinTextureUrl: string) {
 	modal.value?.show(e)
 }
 
-async function restoreWithNewTexture(skinTextureUrl: string) {
+async function restoreWithNewTexture(skinTextureUrl: SkinTextureUrl) {
 	uploadedTextureUrl.value = skinTextureUrl
 	await loadPreviewSkin()
 
@@ -361,7 +362,7 @@ async function save() {
 		let textureUrl: string
 
 		if (uploadedTextureUrl.value) {
-			textureUrl = uploadedTextureUrl.value
+			textureUrl = uploadedTextureUrl.value.original
 		} else {
 			textureUrl = currentSkin.value!.texture
 		}

apps/app-frontend/src/helpers/skins.ts

@@ -22,6 +22,11 @@ export interface Skin {
 	is_equipped: boolean
 }
 
+export interface SkinTextureUrl {
+	original: string
+	normalized: string
+}
+
 export const DEFAULT_MODEL_SORTING = ['Steve', 'Alex'] as string[]
 
 export const DEFAULT_MODELS: Record<string, SkinModel> = {

apps/app-frontend/src/pages/Skins.vue

@@ -31,7 +31,7 @@ import { get_default_user, login as login_flow, users } from '@/helpers/auth'
 import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
 import { generateSkinPreviews, skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
 import { get as getSettings } from '@/helpers/settings.ts'
-import type { Cape, Skin } from '@/helpers/skins.ts'
+import type { Cape, Skin, SkinTextureUrl } from '@/helpers/skins.ts'
 import {
 	equip_skin,
 	filterDefaultSkins,
@@ -245,16 +245,18 @@ function openUploadSkinModal(e: MouseEvent) {
 
 function onSkinFileUploaded(buffer: ArrayBuffer) {
 	const fakeEvent = new MouseEvent('click')
-	normalize_skin_texture(`data:image/png;base64,` + arrayBufferToBase64(buffer)).then(
-		(skinTextureNormalized: Uint8Array) => {
-			const skinTexUrl = `data:image/png;base64,` + arrayBufferToBase64(skinTextureNormalized)
-			if (editSkinModal.value && editSkinModal.value.shouldRestoreModal) {
-				editSkinModal.value.restoreWithNewTexture(skinTexUrl)
-			} else {
-				editSkinModal.value?.showNew(fakeEvent, skinTexUrl)
-			}
-		},
-	)
+	const originalSkinTexUrl = `data:image/png;base64,` + arrayBufferToBase64(buffer)
+	normalize_skin_texture(originalSkinTexUrl).then((skinTextureNormalized: Uint8Array) => {
+		const skinTexUrl: SkinTextureUrl = {
+			original: originalSkinTexUrl,
+			normalized: `data:image/png;base64,` + arrayBufferToBase64(skinTextureNormalized),
+		}
+		if (editSkinModal.value && editSkinModal.value.shouldRestoreModal) {
+			editSkinModal.value.restoreWithNewTexture(skinTexUrl)
+		} else {
+			editSkinModal.value?.showNew(fakeEvent, skinTexUrl)
+		}
+	})
 }
 
 function onUploadCanceled() {