342 lines
7.8 KiB
Vue
342 lines
7.8 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-title">
|
|
{{ t('title') }}
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<p class="card-text">
|
|
{{ t('description') }}
|
|
</p>
|
|
|
|
<div class="file-input-container">
|
|
<input
|
|
type="file"
|
|
ref="fileInput"
|
|
accept="image/*"
|
|
class="hidden"
|
|
@change="onFileSelected"
|
|
/>
|
|
<button
|
|
class="choose-file-button"
|
|
@click="triggerFileInput"
|
|
>
|
|
{{ t('chooseImage') }}
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="errorMessage" class="error-message">
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<div v-if="showCropper" class="cropper-wrapper">
|
|
<Cropper
|
|
ref="cropper"
|
|
:src="fileUrl"
|
|
:aspect-ratio="4"
|
|
:stencil-props="{
|
|
aspectRatio: 4,
|
|
class: 'banner-stencil'
|
|
}"
|
|
/>
|
|
</div>
|
|
|
|
<div v-else class="image-preview-container" @click="startEditing">
|
|
<img
|
|
:src="fileUrl || fallbackUrl"
|
|
:alt="t('preview')"
|
|
class="preview-image"
|
|
/>
|
|
<div class="edit-overlay">
|
|
<span class="edit-text">{{ t('clickToEdit') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-actions">
|
|
<button class="secondary"
|
|
@click="cancel"
|
|
:disabled="isUploading">
|
|
{{ t('cancel') }}
|
|
</button>
|
|
<button class="primary"
|
|
@click="showCropper ? applyCrop() : publish()"
|
|
:disabled="!selectedFile || isUploading">
|
|
<template v-if="isUploading">
|
|
<span class="loading-spinner"></span>
|
|
{{ t('uploading') }} ({{ uploadProgress }}%)
|
|
</template>
|
|
<template v-else>
|
|
{{ showCropper ? t('apply') : t('save') }}
|
|
</template>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue'
|
|
import {useClient} from '@/plugins/api.js'
|
|
import { Cropper } from 'vue-advanced-cropper'
|
|
import 'vue-advanced-cropper/dist/style.css'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const props = defineProps({
|
|
creator: {
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['closeRequested'])
|
|
|
|
const fileInput = ref(null)
|
|
const selectedFile = ref(null)
|
|
const fileUrl = ref(props.creator?.images?.banner)
|
|
const fallbackUrl = '/images/hutopymedia/banners/hutopyul.png'
|
|
const errorMessage = ref('')
|
|
const showCropper = ref(false)
|
|
const cropper = ref(null)
|
|
const isUploading = ref(false)
|
|
const uploadProgress = ref(0)
|
|
|
|
// Get translations for this component
|
|
const { t } = useI18n()
|
|
|
|
const triggerFileInput = () => {
|
|
fileInput.value.click()
|
|
}
|
|
|
|
const onFileSelected = (event) => {
|
|
const file = event.target.files[0]
|
|
if (file) {
|
|
selectedFile.value = file
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
fileUrl.value = e.target.result
|
|
showCropper.value = true
|
|
}
|
|
reader.readAsDataURL(file)
|
|
} else {
|
|
selectedFile.value = null
|
|
fileUrl.value = null
|
|
showCropper.value = false
|
|
}
|
|
}
|
|
|
|
const startEditing = () => {
|
|
if (fileUrl.value && fileUrl.value !== fallbackUrl) {
|
|
// Use our API client to get the image
|
|
client.get(fileUrl.value, { responseType: 'blob' })
|
|
.then(response => {
|
|
const blob = response.data
|
|
selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' })
|
|
// Create a local URL for the cropper
|
|
fileUrl.value = URL.createObjectURL(blob)
|
|
showCropper.value = true
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading image for editing:', error)
|
|
errorMessage.value = t('errors.imageLoad')
|
|
})
|
|
}
|
|
}
|
|
|
|
const applyCrop = () => {
|
|
if (!cropper.value) return
|
|
|
|
const canvas = cropper.value.getResult().canvas
|
|
canvas.toBlob((blob) => {
|
|
const croppedFile = new File([blob], selectedFile.value.name, {
|
|
type: selectedFile.value.type
|
|
})
|
|
selectedFile.value = croppedFile
|
|
fileUrl.value = canvas.toDataURL()
|
|
showCropper.value = false
|
|
}, selectedFile.value.type)
|
|
}
|
|
|
|
const client = useClient()
|
|
const publish = async () => {
|
|
if (!selectedFile.value || isUploading.value) return
|
|
|
|
try {
|
|
isUploading.value = true
|
|
uploadProgress.value = 0
|
|
const formData = new FormData()
|
|
formData.append('file', selectedFile.value)
|
|
|
|
const response = await client.post(
|
|
`/api/creators/${props.creator.id}/banner`,
|
|
formData,
|
|
{
|
|
onUploadProgress: (progressEvent) => {
|
|
uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
|
|
}
|
|
}
|
|
)
|
|
|
|
props.creator.images.banner = `${response.data.blobUrl}?t=${Date.now()}`
|
|
emits('closeRequested')
|
|
} catch (error) {
|
|
console.error(error)
|
|
errorMessage.value = t('errors.imageUpload')
|
|
} finally {
|
|
isUploading.value = false
|
|
uploadProgress.value = 0
|
|
}
|
|
}
|
|
|
|
const cancel = () => {
|
|
showCropper.value = false
|
|
// Reset to original state if we were editing
|
|
if (props.creator?.images?.banner) {
|
|
fileUrl.value = props.creator.images.banner
|
|
selectedFile.value = null
|
|
} else {
|
|
fileUrl.value = fallbackUrl
|
|
selectedFile.value = null
|
|
}
|
|
emits('closeRequested')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card-text {
|
|
@apply font-sans text-lg;
|
|
}
|
|
|
|
.image-preview-container {
|
|
@apply mb-5;
|
|
@apply w-full;
|
|
@apply flex;
|
|
@apply justify-center;
|
|
@apply items-center;
|
|
@apply overflow-hidden;
|
|
@apply rounded-lg;
|
|
@apply relative;
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.preview-image {
|
|
@apply w-full;
|
|
@apply aspect-[4/1];
|
|
@apply object-cover;
|
|
}
|
|
|
|
.edit-overlay {
|
|
@apply absolute;
|
|
@apply inset-0;
|
|
@apply flex;
|
|
@apply items-center;
|
|
@apply justify-center;
|
|
@apply bg-black;
|
|
@apply bg-opacity-0;
|
|
@apply transition-opacity;
|
|
@apply duration-200;
|
|
}
|
|
|
|
.image-preview-container:hover .edit-overlay {
|
|
@apply bg-opacity-30;
|
|
}
|
|
|
|
.edit-text {
|
|
@apply text-white;
|
|
@apply font-medium;
|
|
@apply opacity-0;
|
|
@apply transition-opacity;
|
|
@apply duration-200;
|
|
}
|
|
|
|
.image-preview-container:hover .edit-text {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
.cropper-wrapper {
|
|
@apply mb-5;
|
|
@apply w-full;
|
|
@apply h-[400px];
|
|
@apply flex;
|
|
@apply justify-center;
|
|
@apply items-center;
|
|
@apply overflow-hidden;
|
|
}
|
|
|
|
.file-input-container {
|
|
@apply flex;
|
|
@apply justify-center;
|
|
@apply items-center;
|
|
@apply w-full;
|
|
}
|
|
|
|
.choose-file-button {
|
|
@apply px-4;
|
|
@apply py-2;
|
|
@apply primary;
|
|
@apply rounded-lg;
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.error-message {
|
|
@apply text-red-500;
|
|
@apply mt-2;
|
|
@apply text-center;
|
|
@apply font-medium;
|
|
}
|
|
|
|
:deep(.banner-stencil) {
|
|
@apply border-2;
|
|
@apply border-white;
|
|
}
|
|
|
|
:deep(.cropper) {
|
|
@apply max-h-full;
|
|
}
|
|
|
|
.loading-spinner {
|
|
@apply inline-block;
|
|
@apply w-4;
|
|
@apply h-4;
|
|
@apply mr-2;
|
|
@apply border-2;
|
|
@apply border-white;
|
|
@apply border-t-transparent;
|
|
@apply rounded-full;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"title": "Banner Editor",
|
|
"description": "Upload or edit your profile banner image. The recommended size is 1024x256 pixels (4:1 ratio).",
|
|
"chooseImage": "Choose an image",
|
|
"clickToEdit": "Click to edit",
|
|
"uploading": "Uploading"
|
|
},
|
|
"fr": {
|
|
"title": "Éditeur de bannière",
|
|
"description": "Téléchargez ou modifiez votre image de bannière de profil. La taille recommandée est de 1024x256 pixels (ratio 4:1).",
|
|
"chooseImage": "Choisir une image",
|
|
"clickToEdit": "Cliquez pour modifier",
|
|
"uploading": "Téléchargement"
|
|
},
|
|
"es": {
|
|
"title": "Editor de banner",
|
|
"description": "Sube o edita tu imagen de banner de perfil. El tamaño recomendado es de 1024x256 píxeles (ratio 4:1).",
|
|
"chooseImage": "Elegir una imagen",
|
|
"clickToEdit": "Haga clic para editar",
|
|
"uploading": "Subiendo"
|
|
}
|
|
}
|
|
</i18n>
|