josedario87
80d0042c7e
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m4s
- Agregar botón "Crear Webhook de Debug" en WebhookReceiverSection - Detectar si ya existe un webhook apuntando al receptor de debug - Permitir eliminar el webhook de debug - Incluir todos los eventos disponibles al crear el webhook - También incluye mejoras previas de manejo de media y mensajes
57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<template>
|
|
<div class="relative inline-block">
|
|
<!-- Sticker image -->
|
|
<img
|
|
v-if="!error"
|
|
:src="stickerUrl"
|
|
:alt="'Sticker'"
|
|
class="max-w-[180px] max-h-[180px] object-contain"
|
|
:class="{ 'animate-pulse bg-[var(--wa-bg-light)] rounded-lg': loading }"
|
|
@load="loading = false"
|
|
@error="onError"
|
|
/>
|
|
|
|
<!-- Error state -->
|
|
<div
|
|
v-if="error"
|
|
class="w-[120px] h-[120px] flex flex-col items-center justify-center bg-[var(--wa-bg-light)] rounded-lg"
|
|
>
|
|
<UIcon name="i-lucide-image-off" class="w-8 h-8 text-[var(--wa-text-muted)]" />
|
|
<span class="text-xs text-[var(--wa-text-muted)] mt-1">Sticker</span>
|
|
</div>
|
|
|
|
<!-- Loading placeholder -->
|
|
<div
|
|
v-if="loading && !error"
|
|
class="w-[120px] h-[120px] flex items-center justify-center bg-[var(--wa-bg-light)] rounded-lg"
|
|
>
|
|
<UIcon name="i-lucide-loader-2" class="w-6 h-6 text-[var(--wa-text-muted)] animate-spin" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MediaInfo } from '~/types/message'
|
|
|
|
interface Props {
|
|
media: MediaInfo
|
|
instanceId: string
|
|
messageId: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const loading = ref(true)
|
|
const error = ref(false)
|
|
|
|
const stickerUrl = computed(() => {
|
|
if (props.media.url) return props.media.url
|
|
return `/api/media/${props.instanceId}/${props.messageId}`
|
|
})
|
|
|
|
const onError = () => {
|
|
loading.value = false
|
|
error.value = true
|
|
}
|
|
</script>
|