From 3bb52e7555f688fa896b16117ba67a46af256c66 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Tue, 22 Apr 2025 15:36:38 -0400
Subject: [PATCH] feat: Update banner system components

---
 frontend/src/views/creators/ActualBanner.vue  | 22 ++---
 frontend/src/views/creators/BannerActions.vue | 92 ++++++-------------
 frontend/src/views/creators/BannerEditor.vue  | 76 ++++++++++++---
 3 files changed, 100 insertions(+), 90 deletions(-)

diff --git a/frontend/src/views/creators/ActualBanner.vue b/frontend/src/views/creators/ActualBanner.vue
index 915d708..959b3da 100644
--- 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>
diff --git a/frontend/src/views/creators/BannerActions.vue b/frontend/src/views/creators/BannerActions.vue
index a923512..64bbf49 100644
--- 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>
 
diff --git a/frontend/src/views/creators/BannerEditor.vue b/frontend/src/views/creators/BannerEditor.vue
index d844820..e7ac610 100644
--- 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>