{{ selected.title }}
+
import { SpinnerIcon } from '@modrinth/assets'
import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
import {
type SkinSiteBugComment,
skinSiteBugComments,
+ skinSiteBugImageFetch,
type SkinSiteBugIssue,
skinSiteBugIssue,
type SkinSiteBugIssueType,
@@ -169,6 +170,26 @@ function formatDateTime(ts: number): string {
const canSubmit = computed(() => !commentSending.value && commentDraft.value.trim().length > 0)
+const imageUrls = ref>({})
+
+function revokeImageUrls() {
+ for (const url of Object.values(imageUrls.value)) URL.revokeObjectURL(url)
+ imageUrls.value = {}
+}
+
+async function loadIssueImages(issue: SkinSiteBugIssue) {
+ revokeImageUrls()
+ const entries = await Promise.all(
+ (issue.images ?? []).map(async (image) => {
+ const blob = await skinSiteBugImageFetch(image.hash)
+ return blob ? [image.hash, URL.createObjectURL(blob)] : null
+ }),
+ )
+ const map: Record = {}
+ for (const entry of entries) if (entry) map[entry[0]] = entry[1]
+ imageUrls.value = map
+}
+
async function loadIssue() {
loading.value = true
failed.value = false
@@ -176,6 +197,7 @@ async function loadIssue() {
const result = await skinSiteBugIssue(props.issueId)
if (!result.success) throw new Error(result.errorMessage)
issue.value = result.payload
+ void loadIssueImages(result.payload)
} catch (error) {
failed.value = true
handleError(error)
@@ -241,6 +263,8 @@ onMounted(() => {
void loadIssue()
void loadComments(true)
})
+
+onUnmounted(revokeImageUrls)
![]()
+
@@ -328,13 +352,27 @@ onMounted(() => {
{{ formatMessage(messages.descriptionEmpty) }}
diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteCaptchaModal.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteCaptchaModal.vue
index bb593c5..cda6733 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteCaptchaModal.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteCaptchaModal.vue
@@ -100,16 +100,19 @@ defineExpose({ show })
-
- {{ image.hash }}
-
+ ![attachment]()
+
+ {{ image.hash }}
+
+
{{ formatMessage(messages.subtitle) }}
+ {{ formatMessage(messages.loading) }}
+
@@ -122,11 +125,9 @@ defineExpose({ show })
class="w-full accent-brand"
:disabled="loading || submitting"
/>
- (null)
const loading = ref(true)
const failed = ref(false)
+const signedIn = computed(() => skinSiteStatus.value === 'signed-in' && !!skinSiteUser.value)
+
const filtered = computed(() =>
selectedCategory.value
? items.value.filter((item) => item.category.includes(selectedCategory.value!))
@@ -76,6 +83,10 @@ function download(item: SkinSitePublicDownloadItem) {
async function load() {
loading.value = true
failed.value = false
+ if (!signedIn.value) {
+ loading.value = false
+ return
+ }
try {
const [listResult, categoryResult] = await Promise.all([
skinSitePublicDownloadList(),
@@ -138,7 +149,10 @@ onMounted(load)
-
+
diff --git a/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue b/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue
index 3e65ff9..e8538b9 100644
--- a/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue
+++ b/apps/app-frontend/src/components/ui/skin-site/SkinSiteDownloadsView.vue
@@ -3,6 +3,7 @@ import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
import { computed, onMounted, ref } from 'vue'
+import { skinSiteStatus, skinSiteUser } from '@/composables/skin-site-session'
import {
skinSitePublicDownloadCategories,
type SkinSitePublicDownloadCategory,
@@ -32,6 +33,10 @@ const messages = defineMessages({
statusLegacy: { id: 'app.skin-site.downloads.status.legacy', defaultMessage: 'Legacy' },
statusOutdated: { id: 'app.skin-site.downloads.status.outdated', defaultMessage: 'Outdated' },
statusRemoval: { id: 'app.skin-site.downloads.status.removal', defaultMessage: 'Removal' },
+ signedOut: {
+ id: 'app.skin-site.downloads.signed-out',
+ defaultMessage: 'Sign in to browse downloads.',
+ },
})
const emit = defineEmits<{ (e: 'back'): void }>()
@@ -42,6 +47,8 @@ const selectedCategory = ref
0°
- 90°
- 180°
- 270°
+ {{ degree }}°
360°
+
(null)
const texture = ref({})
@@ -93,6 +142,174 @@ watch(selectedId, (id) => {
else texture.value = {}
})
+// --- Player management ---
+const defaultUuid = ref(null)
+const busy = ref(null)
+
+async function loadDefaultPlayer() {
+ if (!signedIn.value) {
+ defaultUuid.value = null
+ return
+ }
+ try {
+ const res = await skinSiteDefaultPlayer()
+ defaultUuid.value = res.success ? (res.payload?.uuid ?? null) : null
+ } catch {
+ defaultUuid.value = null
+ }
+}
+
+const showAdd = ref(false)
+const newName = ref('')
+const renamingId = ref(null)
+const renameValue = ref('')
+const confirmingRename = ref(false)
+const confirmingDeleteId = ref(null)
+const confirmingMojangId = ref(null)
+
+function resetDialogs() {
+ showAdd.value = false
+ newName.value = ''
+ renamingId.value = null
+ renameValue.value = ''
+ confirmingRename.value = false
+ confirmingDeleteId.value = null
+ confirmingMojangId.value = null
+}
+
+async function submitAdd() {
+ const name = newName.value.trim()
+ if (!name || busy.value) return
+ busy.value = 'add'
+ try {
+ const res = await skinSiteAddPlayer(name)
+ if (!res.success) throw new Error(res.errorMessage)
+ addNotification({ type: 'success', title: formatMessage(messages.added) })
+ resetDialogs()
+ await requestSkinSitePlayers()
+ await loadDefaultPlayer()
+ } catch (error) {
+ handleError(error)
+ } finally {
+ busy.value = null
+ }
+}
+
+function startRename(player: { uuid: string; name: string }) {
+ renamingId.value = player.uuid
+ renameValue.value = player.name
+ confirmingRename.value = false
+}
+
+function requestRename() {
+ const name = renameValue.value.trim()
+ if (!renamingId.value || !name) return
+ confirmingRename.value = true
+}
+
+async function submitRename() {
+ const name = renameValue.value.trim()
+ if (!renamingId.value || !name || busy.value) return
+ if (!confirmingRename.value) {
+ confirmingRename.value = true
+ return
+ }
+ busy.value = 'rename'
+ try {
+ const res = await skinSiteRenamePlayer(renamingId.value, name)
+ if (!res.success) throw new Error(res.errorMessage)
+ addNotification({ type: 'success', title: formatMessage(messages.renamed) })
+ resetDialogs()
+ await requestSkinSitePlayers()
+ } catch (error) {
+ handleError(error)
+ } finally {
+ busy.value = null
+ }
+}
+
+function requestDelete(uuid: string) {
+ if (busy.value) return
+ confirmingDeleteId.value = uuid
+}
+
+async function submitDelete(uuid: string) {
+ if (busy.value) return
+ if (confirmingDeleteId.value !== uuid) {
+ confirmingDeleteId.value = uuid
+ return
+ }
+ busy.value = 'delete'
+ try {
+ const res = await skinSiteDeletePlayer(uuid)
+ if (!res.success) throw new Error(res.errorMessage)
+ addNotification({ type: 'success', title: formatMessage(messages.deleted) })
+ resetDialogs()
+ if (selectedId.value === uuid) selectedId.value = null
+ await requestSkinSitePlayers()
+ await loadDefaultPlayer()
+ } catch (error) {
+ handleError(error)
+ } finally {
+ busy.value = null
+ }
+}
+
+async function setDefaultPlayer(uuid: string) {
+ if (busy.value) return
+ busy.value = 'default'
+ try {
+ const res = await skinSiteSetDefaultPlayer(uuid)
+ if (!res.success) throw new Error(res.errorMessage)
+ addNotification({ type: 'success', title: formatMessage(messages.defaultSet) })
+ await loadDefaultPlayer()
+ } catch (error) {
+ handleError(error)
+ } finally {
+ busy.value = null
+ }
+}
+
+async function clearDefaultPlayer() {
+ if (busy.value) return
+ busy.value = 'default'
+ try {
+ const res = await skinSiteClearDefaultPlayer()
+ if (!res.success) throw new Error(res.errorMessage)
+ addNotification({ type: 'success', title: formatMessage(messages.defaultSet) })
+ await loadDefaultPlayer()
+ } catch (error) {
+ handleError(error)
+ } finally {
+ busy.value = null
+ }
+}
+
+function requestToggleMojang(uuid: string) {
+ if (busy.value) return
+ confirmingMojangId.value = uuid
+}
+
+async function toggleMojang(uuid: string) {
+ if (busy.value) return
+ if (confirmingMojangId.value !== uuid) {
+ confirmingMojangId.value = uuid
+ return
+ }
+ busy.value = 'mojang'
+ try {
+ const res = await skinSiteSwitchMojang(uuid)
+ if (!res.success) throw new Error(res.errorMessage)
+ addNotification({ type: 'success', title: formatMessage(messages.mojangToggled) })
+ await requestSkinSitePlayers()
+ await loadDefaultPlayer()
+ } catch (error) {
+ handleError(error)
+ } finally {
+ busy.value = null
+ }
+}
+
async function onUpload(type: SkinTextureType, event: Event) {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
@@ -135,7 +352,10 @@ async function removeTexture(type: SkinTextureType) {
}
onMounted(() => {
- if (signedIn.value) void requestSkinSitePlayers().catch(() => {})
+ if (signedIn.value) {
+ void requestSkinSitePlayers().catch(() => {})
+ void loadDefaultPlayer()
+ }
})
watch(signedIn, (value) => {
@@ -161,9 +381,79 @@ watch(signedIn, (value) => {
+ {{ formatMessage(messages.signedOut) }} +
+
-
- {{ formatMessage(messages.title) }} -
+
+
+
+
+
+
+ {{ formatMessage(messages.title) }} +
+ +{{ formatMessage(messages.noPlayers) }}
-
+
+
{{ selectedPlayer.name }}
+ + {{ formatMessage(messages.isDefault) }} + Mojang + ++ {{ formatMessage(messages.mojangConfirm) }} +