didirus/AstralRinth
5
10
Fork 33
Code Issues 2 Pull Requests Packages Projects Releases 12 Wiki Activity

fix(skins): better offline handling (#6344)

Browse Source
This commit is contained in:
Calum H.
2026-06-10 14:28:10 +01:00
committed by GitHub
parent b828fa17de
commit 180cef6eaa
5 changed files with 237 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue
+6 -2
View File
@@ -82,6 +82,7 @@ const props = defineProps<{
isSkinSelected: (skin: Skin) => boolean
isSkinActive: (skin: Skin) => boolean
isAddSkinButtonDragActive: boolean
readOnly?: boolean
}>()
const emit = defineEmits<{
@@ -362,7 +363,8 @@ defineExpose({ getAddSkinButtonElement })
ref="addSkinButton"
class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
dropzone
:drag-active="isAddSkinButtonDragActive"
:disabled="readOnly"
:drag-active="!readOnly && isAddSkinButtonDragActive"
@click="emit('add-skin')"
@dragenter="emit('add-skin-dragenter', $event)"
@dragover="emit('add-skin-dragover', $event)"
@@ -384,9 +386,10 @@ defineExpose({ getAddSkinButtonElement })
:backward-image-src="getBakedSkinTextures(skin)?.backwards"
:selected="isSkinSelected(skin)"
:active="isSkinActive(skin)"
:disabled="readOnly"
@select="emit('select', skin)"
>
<template #overlay-buttons>
<template v-if="!readOnly" #overlay-buttons>
<ButtonStyled color="brand">
<button
:aria-label="formatMessage(messages.editSkinButton)"
@@ -423,6 +426,7 @@ defineExpose({ getAddSkinButtonElement })
:selected="isSkinSelected(skin)"
:active="isSkinActive(skin)"
:tooltip="skin.name"
:disabled="readOnly"
@select="emit('select', skin)"
>
<template #overlay-buttons>
apps/app-frontend/src/pages/Skins.vue
+117 -8
View File
@@ -30,7 +30,7 @@ import type AccountsCard from '@/components/ui/AccountsCard.vue'
import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
import VirtualSkinSectionList from '@/components/ui/skin/VirtualSkinSectionList.vue'
import { trackEvent } from '@/helpers/analytics'
import { get_default_user, login as login_flow, users } from '@/helpers/auth'
import { check_reachable, 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 type { Cape, Skin, SkinTextureUrl } from '@/helpers/skins.ts'
@@ -181,6 +181,7 @@ const client = injectModrinthClient()
const themeStore = useTheming()
const skins = ref<Skin[]>([])
const capes = ref<Cape[]>([])
const offline = ref(!navigator.onLine)
const accountsCard = inject('accountsCard') as Ref<typeof AccountsCard>
const currentUser = ref(undefined)
@@ -200,6 +201,16 @@ const savedSkins = computed(() => {
return []
}
})
const authServerQuery = useQuery({
queryKey: ['authServerReachability'],
queryFn: async () => {
await check_reachable()
return true
},
refetchInterval: 5 * 60 * 1000,
retry: false,
refetchOnWindowFocus: false,
})
const { data: modrinthUser } = useQuery({
queryKey: computed(() => ['authenticated-user', 'campaigns', auth.user.value?.id]),
queryFn: () => client.labrinth.users_v3.getAuthenticated(),
@@ -249,8 +260,18 @@ const currentCape = computed(() => {
})
const skinTexture = computedAsync(async () => {
if (selectedSkin.value?.texture) {
return await get_normalized_skin_texture(selectedSkin.value)
const skin = selectedSkin.value
if (skin?.texture) {
try {
return await get_normalized_skin_texture(skin)
} catch (error) {
if (skin.texture.startsWith('data:image/')) {
return skin.texture
}
handleError(error as Error)
return ''
}
} else {
return ''
}
@@ -258,6 +279,9 @@ const skinTexture = computedAsync(async () => {
const capeTexture = computed(() => currentCape.value?.texture)
const skinVariant = computed(() => selectedSkin.value?.variant)
const skinNametag = computed(() => (themeStore.hideNametagSkinsPage ? undefined : username.value))
const isSkinManagementReadOnly = computed(
() => offline.value || (authServerQuery.isError.value && !authServerQuery.isLoading.value),
)
const hasPendingSkinChange = computed(
() => !skinsMatch(selectedSkin.value, originalSelectedSkin.value),
)
@@ -274,11 +298,15 @@ const deleteSkinModal = ref()
const skinToDelete = ref<Skin | null>(null)
function confirmDeleteSkin(skin: Skin) {
if (isSkinManagementReadOnly.value) return
skinToDelete.value = skin
deleteSkinModal.value?.show()
}
async function deleteSkin() {
if (isSkinManagementReadOnly.value) return
const deletedSkin = skinToDelete.value
if (!deletedSkin) return
@@ -304,7 +332,23 @@ async function loadCapes() {
async function loadSkins() {
try {
skins.value = (await get_available_skins()) ?? []
const loadedSkins = (await get_available_skins()) ?? []
const loadedEquippedSkin = loadedSkins.find((s) => s.is_equipped)
const locallyKnownEquippedSkin =
originalSelectedSkin.value &&
(loadedSkins.find((skin) => skinsMatch(skin, originalSelectedSkin.value)) ??
(originalSelectedSkin.value.texture.startsWith('data:image/')
? originalSelectedSkin.value
: undefined))
const shouldPreserveKnownEquippedSkin =
isSkinManagementReadOnly.value &&
locallyKnownEquippedSkin &&
!skinsMatch(loadedEquippedSkin, locallyKnownEquippedSkin)
skins.value =
shouldPreserveKnownEquippedSkin && locallyKnownEquippedSkin
? mergeEquippedSkin(loadedSkins, locallyKnownEquippedSkin)
: loadedSkins
generateSkinPreviews(skins.value, capes.value)
selectedSkin.value = skins.value.find((s) => s.is_equipped) ?? null
originalSelectedSkin.value = selectedSkin.value
@@ -315,6 +359,28 @@ async function loadSkins() {
}
}
function mergeEquippedSkin(list: Skin[], equippedSkin: Skin) {
let foundEquippedSkin = false
const mergedSkins = list.map((skin) => {
const isEquipped = skinsMatch(skin, equippedSkin)
foundEquippedSkin ||= isEquipped
return {
...skin,
is_equipped: isEquipped,
}
})
if (!foundEquippedSkin) {
mergedSkins.unshift({
...equippedSkin,
is_equipped: true,
})
}
return mergedSkins
}
function skinsMatch(a?: Skin | null, b?: Skin | null) {
return (
a?.source === b?.source &&
@@ -385,6 +451,8 @@ function getDefaultSkinSectionSortIndex(section: string) {
}
function changeSkin(newSkin: Skin) {
if (isSkinManagementReadOnly.value) return
selectedSkin.value = newSkin
}
@@ -517,7 +585,13 @@ function schedulePendingSkinRefresh() {
async function applySelectedSkin() {
const skinToApply = selectedSkin.value
if (!skinToApply || !hasPendingSkinChange.value || isApplyingSkin.value) return
if (
!skinToApply ||
!hasPendingSkinChange.value ||
isApplyingSkin.value ||
isSkinManagementReadOnly.value
)
return
isApplyingSkin.value = true
try {
@@ -586,10 +660,14 @@ async function login() {
}
function openAddSkinFileBrowser() {
if (isSkinManagementReadOnly.value) return
addSkinFileInput.value?.click()
}
async function onAddSkinFileInputChange(e: Event) {
if (isSkinManagementReadOnly.value) return
const files = (e.target as HTMLInputElement).files
const file = files?.[0]
@@ -632,6 +710,8 @@ function isPositionOverAddSkinButton(position: { x: number; y: number }) {
}
async function handleAddSkinNativeDragDrop(event: { payload: DragDropEvent }) {
if (isSkinManagementReadOnly.value) return
const payload = event.payload
if (payload.type === 'leave') {
@@ -680,6 +760,8 @@ async function handleAddSkinNativeDragDrop(event: { payload: DragDropEvent }) {
}
function onAddSkinDragOver(event: DragEvent) {
if (isSkinManagementReadOnly.value) return
if (!isSkinFileDrag(event)) {
return
}
@@ -688,10 +770,14 @@ function onAddSkinDragOver(event: DragEvent) {
}
function onAddSkinDragLeave() {
if (isSkinManagementReadOnly.value) return
isAddSkinButtonDragActive.value = false
}
async function onAddSkinDrop(event: DragEvent) {
if (isSkinManagementReadOnly.value) return
isAddSkinButtonDragActive.value = false
const file = Array.from(event.dataTransfer?.files ?? []).find(
@@ -721,6 +807,8 @@ async function setupAddSkinDragDropListener() {
}
async function processSkinFileBuffer(buffer: Uint8Array | ArrayBuffer) {
if (isSkinManagementReadOnly.value) return
const fakeEvent = new MouseEvent('click')
const originalSkinTexUrl = `data:image/png;base64,` + arrayBufferToBase64(buffer)
try {
@@ -740,13 +828,24 @@ watch(
() => {},
)
watch(isSkinManagementReadOnly, (readOnly) => {
if (readOnly) {
isDraggingSkinFile.value = false
isAddSkinButtonDragActive.value = false
}
})
onMounted(() => {
window.addEventListener('offline', onOffline)
window.addEventListener('online', onOnline)
userCheckInterval = window.setInterval(checkUserChanges, 250)
void setupAddSkinDragDropListener()
})
onUnmounted(() => {
isUnmounted = true
window.removeEventListener('offline', onOffline)
window.removeEventListener('online', onOnline)
if (userCheckInterval !== null) {
window.clearInterval(userCheckInterval)
@@ -763,6 +862,15 @@ onUnmounted(() => {
}
})
function onOffline() {
offline.value = true
}
function onOnline() {
offline.value = false
void authServerQuery.refetch()
}
async function checkUserChanges() {
try {
const defaultId = await get_default_user()
@@ -834,7 +942,7 @@ await loadSkins()
>
<button
class="flex h-10 min-w-0 cursor-pointer items-center justify-center gap-2 rounded-[14px] border-0 bg-surface-4 px-4 py-2.5 text-base font-semibold leading-5 text-contrast shadow-md transition-[filter,transform] duration-200 enabled:hover:brightness-[--hover-brightness] enabled:focus-visible:brightness-[--hover-brightness] enabled:active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-5 [&>svg]:shrink-0"
:disabled="isApplyingSkin"
:disabled="isApplyingSkin || isSkinManagementReadOnly"
@click="resetSelectedSkin"
>
<RotateCounterClockwiseIcon />
@@ -842,7 +950,7 @@ await loadSkins()
</button>
<button
class="flex h-10 min-w-0 cursor-pointer items-center justify-center gap-2 rounded-[14px] border-0 bg-brand px-4 py-2.5 text-base font-semibold leading-5 text-[rgba(0,0,0,0.9)] shadow-md transition-[filter,transform] duration-200 enabled:hover:brightness-[--hover-brightness] enabled:focus-visible:brightness-[--hover-brightness] enabled:active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-5 [&>svg]:shrink-0"
:disabled="isApplyingSkin"
:disabled="isApplyingSkin || isSkinManagementReadOnly"
@click="applySelectedSkin"
>
<SpinnerIcon v-if="isApplyingSkin" class="animate-spin" />
@@ -853,7 +961,7 @@ await loadSkins()
<button
v-else
class="flex h-10 min-w-0 cursor-pointer items-center justify-center gap-2 rounded-[14px] border-0 bg-surface-4 px-4 py-2.5 text-base font-semibold leading-5 shadow-md transition-[filter,transform] duration-200 enabled:hover:brightness-[--hover-brightness] enabled:focus-visible:brightness-[--hover-brightness] enabled:active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-5 [&>svg]:shrink-0"
:disabled="!selectedSkin"
:disabled="!selectedSkin || isSkinManagementReadOnly"
@click="(e: MouseEvent) => selectedSkin && editSkinModal?.show(e, selectedSkin)"
>
<EditIcon />
@@ -873,6 +981,7 @@ await loadSkins()
:is-skin-selected="isSkinSelected"
:is-skin-active="isSkinActive"
:is-add-skin-button-drag-active="isAddSkinButtonDragActive"
:read-only="isSkinManagementReadOnly"
@select="changeSkin"
@edit="(skin, event) => editSkinModal?.show(event, skin)"
@delete="confirmDeleteSkin"
packages/app-lib/src/api/minecraft_skins.rs
+72 -45
View File
@@ -268,12 +268,11 @@ pub async fn get_available_capes() -> crate::Result<Vec<Cape>> {
.await?
.ok_or(ErrorKind::NoCredentialsError)?;
let profile = selected_credentials
.online_profile_fresh()
.await
.ok_or_else(|| ErrorKind::OnlineMinecraftProfileUnavailable {
user_name: selected_credentials.offline_profile.name.clone(),
})?;
let Some(profile) = selected_credentials.online_profile_fresh().await
else {
return Ok(Vec::new());
};
let pending_skin_change = pending_effective_skin_change(profile.id).await;
let pending_cape_id = pending_skin_change
.as_ref()
@@ -309,16 +308,22 @@ pub async fn get_available_skins() -> crate::Result<Vec<Skin>> {
.await?
.ok_or(ErrorKind::NoCredentialsError)?;
let profile = selected_credentials
.online_profile_fresh()
.await
.ok_or_else(|| ErrorKind::OnlineMinecraftProfileUnavailable {
user_name: selected_credentials.offline_profile.name.clone(),
})?;
let online_profile = selected_credentials.online_profile_fresh().await;
let profile_id = online_profile
.as_ref()
.map_or(selected_credentials.offline_profile.id, |profile| {
profile.id
});
let current_skin = profile.current_skin()?;
let current_cape_id = profile.current_cape().map(|cape| cape.id);
let pending_skin_change = pending_effective_skin_change(profile.id).await;
let current_skin = online_profile
.as_ref()
.map(|profile| profile.current_skin())
.transpose()?;
let current_cape_id = online_profile
.as_ref()
.and_then(|profile| profile.current_cape())
.map(|cape| cape.id);
let pending_skin_change = pending_effective_skin_change(profile_id).await;
let pending_unequip = pending_skin_change
.as_ref()
.is_some_and(PendingEffectiveSkinChange::is_unequip);
@@ -326,16 +331,15 @@ pub async fn get_available_skins() -> crate::Result<Vec<Skin>> {
.as_ref()
.and_then(PendingEffectiveSkinChange::skin);
let fallback_default_skin = assets::DEFAULT_SKINS.first();
let fallback_default_skin = get_fallback_default_skin()?;
let current_skin_texture_key = pending_skin.as_ref().map_or_else(
|| {
if pending_unequip {
fallback_default_skin.map_or_else(
|| current_skin.texture_key(),
|skin| Arc::clone(&skin.texture_key),
)
} else {
Arc::clone(&fallback_default_skin.texture_key)
} else if let Some(current_skin) = current_skin {
current_skin.texture_key()
} else {
Arc::clone(&fallback_default_skin.texture_key)
}
},
|skin| skin.texture_key.clone(),
@@ -343,10 +347,11 @@ pub async fn get_available_skins() -> crate::Result<Vec<Skin>> {
let current_skin_variant = pending_skin.as_ref().map_or_else(
|| {
if pending_unequip {
fallback_default_skin
.map_or(current_skin.variant, |skin| skin.variant)
} else {
fallback_default_skin.variant
} else if let Some(current_skin) = current_skin {
current_skin.variant
} else {
fallback_default_skin.variant
}
},
|skin| skin.variant,
@@ -354,8 +359,10 @@ pub async fn get_available_skins() -> crate::Result<Vec<Skin>> {
let current_cape_id = pending_skin.as_ref().map_or(
if pending_unequip {
None
} else {
} else if current_skin.is_some() {
current_cape_id
} else {
None
},
|skin| skin.cape_id,
);
@@ -364,38 +371,39 @@ pub async fn get_available_skins() -> crate::Result<Vec<Skin>> {
let mut custom_skins = Vec::new();
let mut saved_default_skins = Vec::new();
for mut custom_skin in CustomMinecraftSkin::get_all(profile.id, &state.pool)
for mut custom_skin in CustomMinecraftSkin::get_all(profile_id, &state.pool)
.await?
.collect::<Vec<_>>()
.await
{
let is_saved_default_skin =
is_bundled_skin(&custom_skin.texture_key, custom_skin.variant);
let current_skin_sync = if pending_skin.is_some() {
SavedSkinSync {
is_current_skin: custom_skin.texture_key
== current_skin_texture_key.as_ref()
&& custom_skin.variant == current_skin_variant
&& custom_skin.cape_id == current_cape_id,
settings_changed: false,
}
} else {
sync_saved_skin_with_current_profile(
&mut custom_skin,
&current_skin_texture_key,
current_skin_variant,
current_cape_id,
)
};
let current_skin_sync =
if pending_skin.is_some() || current_skin.is_none() {
SavedSkinSync {
is_current_skin: custom_skin.texture_key
== current_skin_texture_key.as_ref()
&& custom_skin.variant == current_skin_variant
&& custom_skin.cape_id == current_cape_id,
settings_changed: false,
}
} else {
sync_saved_skin_with_current_profile(
&mut custom_skin,
&current_skin_texture_key,
current_skin_variant,
current_cape_id,
)
};
let synced_texture_blob = if current_skin_sync.settings_changed {
let texture_blob = custom_skin.texture_blob(&state.pool).await?;
if is_saved_default_skin && custom_skin.cape_id.is_none() {
custom_skin.remove(profile.id, &state.pool).await?;
custom_skin.remove(profile_id, &state.pool).await?;
} else {
CustomMinecraftSkin::add(
profile.id,
profile_id,
&custom_skin.texture_key,
&texture_blob,
custom_skin.variant,
@@ -483,7 +491,7 @@ pub async fn get_available_skins() -> crate::Result<Vec<Skin>> {
if let Some(mut skin) = pending_skin {
skin.is_equipped = true;
available_skins.push(skin);
} else {
} else if let Some(current_skin) = current_skin {
available_skins.push(Skin {
texture_key: current_skin_texture_key,
name: current_skin.name.as_deref().map(Arc::from),
@@ -1247,6 +1255,25 @@ fn is_bundled_skin(texture_key: &str, variant: MinecraftSkinVariant) -> bool {
})
}
fn get_fallback_default_skin() -> crate::Result<&'static Skin> {
assets::DEFAULT_SKINS
.iter()
.find(|skin| {
skin.name.as_deref() == Some("Steve")
&& skin.variant == MinecraftSkinVariant::Classic
})
.or_else(|| {
assets::DEFAULT_SKINS
.iter()
.find(|skin| skin.name.as_deref() == Some("Steve"))
})
.or_else(|| assets::DEFAULT_SKINS.first())
.ok_or_else(|| {
ErrorKind::OtherError("No bundled default skins found".into())
.as_error()
})
}
fn local_skin_texture_key(texture_blob: &[u8]) -> Arc<str> {
Arc::from(format!("local-{:x}", sha2::Sha256::digest(texture_blob)))
}
packages/ui/src/components/skin/SkinButton.vue
+30 -9
View File
@@ -13,12 +13,14 @@ const props = withDefaults(
selected: boolean
active?: boolean
tooltip?: string
disabled?: boolean
}>(),
{
forwardImageSrc: undefined,
backwardImageSrc: undefined,
active: false,
tooltip: undefined,
disabled: false,
},
)
@@ -52,13 +54,18 @@ watch(
class="skin-button group relative flex items-end justify-center overflow-hidden border border-solid transition-[border-color,box-shadow] duration-200"
:class="[
selected ? 'skin-button--selected' : '',
{ 'skin-button--with-actions': $slots['overlay-buttons'] },
active ? 'skin-button--active' : '',
{
'skin-button--with-actions': $slots['overlay-buttons'] && !disabled,
'skin-button--disabled': disabled,
},
]"
>
<button
class="absolute inset-0 z-10 cursor-pointer border-none bg-transparent p-0 focus-visible:outline-none"
:aria-label="tooltip ? `Select ${tooltip}` : 'Select skin'"
:aria-pressed="selected"
:disabled="disabled"
@click="emit('select')"
></button>
@@ -98,7 +105,7 @@ watch(
</span>
<span
v-if="$slots['overlay-buttons']"
v-if="$slots['overlay-buttons'] && !disabled"
class="pointer-events-none absolute inset-x-0 bottom-3 z-30 flex translate-y-2 items-center justify-start gap-1.5 px-3 opacity-0 transition-all duration-200 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-hover:translate-y-0 group-hover:opacity-100"
>
<slot name="overlay-buttons" />
@@ -156,8 +163,8 @@ watch(
outline-offset: 2px;
}
.skin-button:hover,
.skin-button:focus-within,
.skin-button:not(.skin-button--disabled):hover,
.skin-button:not(.skin-button--disabled):focus-within,
.skin-button--with-actions:hover,
.skin-button--with-actions:focus-within {
border-color: var(--surface-5);
@@ -167,13 +174,27 @@ watch(
0 1px 4px rgba(0, 0, 0, 0.15);
}
.skin-button--selected,
.skin-button--selected:hover,
.skin-button--selected:focus-within {
.skin-button.skin-button--selected,
.skin-button.skin-button--selected:hover,
.skin-button.skin-button--selected:focus-within,
.skin-button.skin-button--selected.skin-button--with-actions:hover,
.skin-button.skin-button--selected.skin-button--with-actions:focus-within,
.skin-button.skin-button--active:hover,
.skin-button.skin-button--active:focus-within,
.skin-button.skin-button--active.skin-button--with-actions:hover,
.skin-button.skin-button--active.skin-button--with-actions:focus-within {
border-color: var(--color-brand);
background: var(--color-brand-highlight);
}
.skin-button--disabled {
opacity: 0.65;
}
.skin-button--disabled button {
cursor: not-allowed;
}
.skin-button__image-parent {
width: 100%;
height: 95%;
@@ -185,7 +206,7 @@ watch(
backface-visibility: hidden;
}
.skin-button:hover .skin-button__image-parent {
.skin-button:not(.skin-button--disabled):hover .skin-button__image-parent {
transform: rotateY(180deg) translateZ(0);
}
@@ -208,7 +229,7 @@ watch(
transition: filter 200ms ease-in-out;
}
.group:hover .skin-button__image-parent img {
.group:not(.skin-button--disabled):hover .skin-button__image-parent img {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
</style>
packages/ui/src/components/skin/SkinLikeTextButton.vue
+12 -1
View File
@@ -7,12 +7,14 @@ const props = withDefaults(
tooltip?: string
dragActive?: boolean
dropzone?: boolean
disabled?: boolean
}>(),
{
selected: false,
tooltip: undefined,
dragActive: false,
dropzone: false,
disabled: false,
},
)
@@ -28,6 +30,10 @@ function handleDragEvent(
eventName: 'dragenter' | 'dragover' | 'dragleave' | 'drop',
event: DragEvent,
) {
if (props.disabled) {
return
}
if (props.dropzone) {
event.preventDefault()
if (event.dataTransfer) {
@@ -53,7 +59,10 @@ defineExpose({ getRootElement })
:class="[
isHighlighted
? 'border-brand bg-brand-highlight'
: 'border-surface-5 bg-surface-2 hover:bg-surface-3',
: disabled
? 'border-surface-5 bg-surface-2'
: 'border-surface-5 bg-surface-2 hover:bg-surface-3',
disabled ? 'opacity-[0.65]' : '',
]"
@dragenter="handleDragEvent('dragenter', $event)"
@dragover="handleDragEvent('dragover', $event)"
@@ -64,6 +73,8 @@ defineExpose({ getRootElement })
type="button"
:aria-label="tooltip ?? undefined"
class="absolute inset-0 z-0 cursor-pointer border-none bg-transparent p-0"
:class="{ 'cursor-not-allowed': disabled }"
:disabled="disabled"
@click="(e) => emit('click', e)"
></button>