feat: Update banner system components

2025-04-22 15:36:38 -04:00
parent aa59d293cf
commit 3bb52e7555
3 changed files with 100 additions and 90 deletions
--- a/frontend/src/views/creators/ActualBanner.vue
+++ b/frontend/src/views/creators/ActualBanner.vue
@@ -2,13 +2,13 @@
  <div class="relative">
    <!-- Banner Container with mouse events -->
    <div
-        class="relative"
+        class="relative rounded-b-2xl overflow-y-auto"
        @mouseenter="showTint = isCurrentCreator"
        @mouseleave="showTint = false"
        @click="isCurrentCreator && openBannerEditor()"
    >
      <img
-          class="w-full aspect-[3/1] banner object-cover"
+          class="w-full aspect-[4/1] banner object-cover"
          :src="brandingStore.value?.images?.banner ?? '/images/placeholders/banner.png'"
          :alt="t('alt')"
      >
@@ -19,7 +19,7 @@
      >
        <!-- Top-right Icon -->
        <div
-            class="absolute top-4 right-4 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg"
+            class="absolute top-4 right-4 w-12 h-12 bg-hutopyPrimary rounded-full flex items-center justify-center shadow-lg"
        >
          <v-icon large>mdi-pencil</v-icon>
        </div>
@@ -28,11 +28,10 @@
  </div>

  <v-dialog v-model="isDialogOpen" max-width="800px">
-    <template #default="{ close }">
-      <banner-editor :creator="brandingStore.value"
-                     @closeRequested="() => isDialogOpen = false"
-      ></banner-editor>
-    </template>
+      <BannerEditor
+          :creator="brandingStore.value"
+          @closeRequested="() => isDialogOpen = false"
+      />
  </v-dialog>
 </template>

@@ -41,11 +40,11 @@ import BannerEditor from "@/views/creators/BannerEditor.vue";
 import {computed, ref} from "vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
-import { useI18n } from 'vue-i18n';
+import {useI18n} from 'vue-i18n';

 const authStore = useAuthStore();
 const brandingStore = useBrandingStore();
-const { t } = useI18n();
+const {t} = useI18n();

 // State
 const showTint = ref(false);
@@ -62,9 +61,6 @@ const isCurrentCreator = computed(() => {
 </script>

 <style scoped>
-.banner {
-  @apply border-b border-solid border-hTertiary;
-}
 </style>

 <i18n>
--- a/frontend/src/views/creators/BannerActions.vue
+++ b/frontend/src/views/creators/BannerActions.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useBrandingStore } from '@/stores/brandingStore.js';
-import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
+import {useBrandingStore} from '@/stores/brandingStore.js';
+import DonationButton from '@/views/creators/DonationButton.vue';
 import CreatorLogo from "@/views/creators/CreatorLogo.vue";
 import NameTitle from "@/views/creators/NameTitle.vue";
 import Linkedin from "@/views/svg/Linkedin.vue";
@@ -12,68 +11,41 @@ import Tiktok from "@/views/svg/Tiktok.vue";
 import Reddit from "@/views/svg/Reddit.vue";
 import Youtube from "@/views/svg/Youtube.vue";
 import Web from "@/views/svg/Web.vue";
-import { useI18n } from 'vue-i18n'
+import {useI18n} from 'vue-i18n'

 const brandingStore = useBrandingStore();
 const baseURL = window.location.origin;
-const { t } = useI18n();
-
-// Gèrer le breakpoint du block information.
-// Définir un point de rupture pour "moyen" (correspondant à md: de Tailwind)
-const mediumBreakpoint = 768;
-// Référence réactive pour indiquer si nous sommes sur un écran moyen ou grand
-const isMediumOrLarger = ref(window.innerWidth >= mediumBreakpoint);
-// Fonction pour mettre à jour isMediumOrLarger en fonction de la largeur de l'écran
-const updateScreenSize = () => {
-  isMediumOrLarger.value = window.innerWidth >= mediumBreakpoint;
-};
-// Ajouter un écouteur d'événements pour redimensionner la fenêtre
-onMounted(() => {
-  window.addEventListener('resize', updateScreenSize);
-  // Appeler updateScreenSize une fois au montage pour initialiser la valeur
-  updateScreenSize();
-});
-// Supprimer l'écouteur d'événements lors du démontage du composant
-onUnmounted(() => {
-  window.removeEventListener('resize', updateScreenSize);
-});
-
+const {t} = useI18n();
 </script>

 <template>
  <div class="flex flex-column w-full">
    <!-- Container principal avec le profil -->
-    <div class="relative w-full shadow-xl">
-      <div class="shadow-2xl bg-hPrimary text-hOnPrimary"
-           :style="{
-                    boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
-                }">
+    <div class="relative w-full">
+      <div class="bg-hPrimary text-hOnPrimary relative">

-        <!-- Desktop version (visible only on écrans moyens et grands) -->
-        <div v-if="isMediumOrLarger" class="flex flex-row py-4 pr-4 items-center social-info">
-          <name-title></name-title>
-          <creator-logo />
-          <donation-button-banner
-              v-if="brandingStore.value?.acceptDonation"
-              :creator-id="brandingStore.value?.id"
-              :creator-name="brandingStore.value?.name"
-              :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
-              :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
-          ></donation-button-banner>
+        <!-- Portrait that overlaps both sections -->
+        <div class="absolute left-4 -bottom-2 z-10">
+          <creator-logo/>
        </div>

-        <!-- Mobile version (visible only on les petits écrans) -->
-        <div v-else class="flex flex-row py-4 pr-4 items-center social-info">
-          <div><creator-logo /></div>
-          <div class="name-button">
-            <name-title></name-title>
-            <donation-button-banner
-                v-if="brandingStore.value?.acceptDonation"
-                :creator-id="brandingStore.value?.id"
-                :creator-name="brandingStore.value?.name"
-                :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
-                :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
-            ></donation-button-banner>
+        <!-- Desktop version (visible only on écrans moyens et grands) -->
+        <div class="social-info">
+          <div class="w-36">
+          </div>
+          <div class="flex-grow flex flex-row">
+            <div class="flex-grow">
+              <name-title></name-title>
+            </div>
+            <div class="hidden sm:flex pr-6">
+              <DonationButton
+                  v-if="brandingStore.value?.acceptDonation"
+                  :creator-id="brandingStore.value?.id"
+                  :creator-name="brandingStore.value?.name"
+                  :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
+                  :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
+              />
+            </div>
          </div>
        </div>

@@ -82,7 +54,7 @@ onUnmounted(() => {

    <!-- Section pour les icônes de réseaux sociaux -->
    <div
-        class="rounded-b-2xl h-12 flex w-full items-center justify-center bg-hSecondary text-hOnSecondary"
+        class="h-12 flex w-full items-center justify-center bg-hSecondary text-hOnSecondary relative"
    >
      <div class="flex flex-row gap-10">

@@ -157,14 +129,10 @@ onUnmounted(() => {
 }

 .social-info {
-  @apply flex justify-center items-center w-full;
+  @apply flex flex-row;
+  @apply py-4 w-full;
+  @apply justify-center ;
  @apply max-h-52;
-@apply px-1;
-  @apply gap-8;
-
-  .name-button {
-    @apply flex flex-col gap-y-4;
-  }
 }
 </style>

--- a/frontend/src/views/creators/BannerEditor.vue
+++ b/frontend/src/views/creators/BannerEditor.vue
@@ -33,9 +33,9 @@
        <Cropper
          ref="cropper"
          :src="fileUrl"
-          :aspect-ratio="3"
+          :aspect-ratio="4"
          :stencil-props="{
-            aspectRatio: 3,
+            aspectRatio: 4,
            class: 'banner-stencil'
          }"
        />
@@ -55,13 +55,20 @@

    <div class="card-actions">
      <button class="secondary"
-              @click="cancel">
+              @click="cancel"
+              :disabled="isUploading">
        {{ t('cancel') }}
      </button>
      <button class="primary"
              @click="showCropper ? applyCrop() : publish()"
-              :disabled="!selectedFile">
-        {{ showCropper ? t('apply') : t('save') }}
+              :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>
@@ -89,9 +96,8 @@ const fallbackUrl = '/images/hutopymedia/banners/hutopyul.png'
 const errorMessage = ref('')
 const showCropper = ref(false)
 const cropper = ref(null)
-
-const TARGET_WIDTH = 960
-const TARGET_HEIGHT = 320
+const isUploading = ref(false)
+const uploadProgress = ref(0)

 // Get translations for this component
 const { t } = useI18n()
@@ -151,15 +157,22 @@ const applyCrop = () => {

 const client = useClient()
 const publish = async () => {
-  if (!selectedFile.value) return
+  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
+        formData,
+        {
+          onUploadProgress: (progressEvent) => {
+            uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          }
+        }
    )

    props.creator.images.banner = `${response.data.blobUrl}?t=${Date.now()}`
@@ -167,6 +180,9 @@ const publish = async () => {
  } catch (error) {
    console.error(error)
    errorMessage.value = t('errors.imageUpload')
+  } finally {
+    isUploading.value = false
+    uploadProgress.value = 0
  }
 }

@@ -202,8 +218,8 @@ const cancel = () => {
 }

 .preview-image {
-  @apply w-[960px];
-  @apply h-[320px];
+  @apply w-full;
+  @apply aspect-[4/1];
  @apply object-cover;
 }

@@ -275,21 +291,51 @@ const cancel = () => {
 :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"
+    "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"
+    "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"
+    "clickToEdit": "Haga clic para editar",
+    "uploading": "Subiendo"
  }
 }
 </i18n>