Updated CreatorHome Add const!!! Alot!

src/views/creators/CreatorHome.vue

@@ -15,129 +15,287 @@
 
     <!-- Titre principal -->
     <div v-if="isEditMode">
-      <textarea v-model="editableMainTitle" class="w-full p-2 border rounded-md h-24"></textarea>
+      <div class="text-2xl py-2"> Titre</div>
+      <textarea v-model="editableMainTitle" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
     </div>
     <h1 v-else-if="mainTitle" class="text-3xl font-bold text-center ">{{ mainTitle }}</h1>
 
     <!-- Image principale -->
     <div class="relative flex justify-center">
       <label v-if="isEditMode">
-        <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden" />
+        <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
         <img :src="mainImageUrl || fallbackImage"
              alt="Image principale"
-             class="rounded-md max-w-full h-auto cursor-pointer" />
+             class="rounded-md max-w-full h-auto cursor-pointer"/>
       </label>
       <img v-else-if="mainImageUrl" :src="mainImageUrl"
            alt="Image principale"
-           class="rounded-md max-w-full h-auto" />
+           class="rounded-md max-w-full h-auto"/>
       <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
-              class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white rounded-full hover:bg-red-600">
+              class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
         X
       </button>
     </div>
 
     <!-- Texte sous l'image principale -->
     <div v-if="isEditMode">
-      <textarea v-model="editableMainImageText" class="w-full p-2 border rounded-md h-24"></textarea>
+      <div class="text-2xl py-2"> Description</div>
+      <textarea v-model="editableMainImageText" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
     </div>
     <p v-else-if="mainImageText" class="text-lg text-justify">
       {{ mainImageText }}
     </p>
 
-    <!-- Sous-titre avant les deux images -->
+    <!-- Titre video principale -->
     <div v-if="isEditMode">
-      <textarea v-model="editableImagesSubtitle" class="w-full p-2 border rounded-md h-24"></textarea>
+      <div class="text-2xl py-2"> Titre Vidéo Princpiale</div>
+      <textarea v-model="editableVideoSubtitleMain" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <h2 v-else-if="videoSubtitleMain" class="text-2xl font-semibold text-center" >
+      {{ videoSubtitleMain }}
+    </h2>
+    
+    <!-- Vidéo YouTube principale -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2">URL vidéo</div>
+      <input
+          v-if="isEditMode"
+          type="text"
+          v-model="editableVideoUrlMain"
+          class="w-full p-2 border rounded-md"
+          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+      />
+    </div>
+    <div class="flex justify-center">
+      <div v-if="isEditMode"></div>
+      <div v-else-if="videoUrlMain" class="video-container">
+        <iframe
+            :src="videoUrlMain"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            class="video-frame">
+        </iframe>
+      </div>
+    </div>
+
+
+    <!-- Texte sous video principale -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2"> Description</div>
+      <textarea v-model="editableMainVideoText" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    </div>
+    <p v-else-if="mainVideoText" class="text-lg text-justify">
+      {{ mainVideoText }}
+    </p>
+    
+    
+    <!-- Sous-titre avant les deux images -->
+
+    <div v-if="isEditMode">
+      <div v-if="isEditMode" class="text-2xl py-2"> Sous-titre</div>
+      <textarea v-model="editableImagesSubtitle" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
     </div>
     <h2 v-else-if="imagesSubtitle" class="text-2xl font-semibold text-center">
       {{ imagesSubtitle }}
     </h2>
 
     <!-- Deux images côte à côte -->
-    <div class="flex justify-center space-x-4">
-      <!-- Première image -->
-      <div v-if="image1Url || isEditMode" :class="image2Url ? 'w-1/2' : 'w-full'" class="relative">
-        <label v-if="isEditMode">
-          <input type="file" @change="updateImage('image1Url', $event)" class="hidden" />
-          <img :src="image1Url || fallbackImage"
-               alt="Image 1"
-               class="rounded-md max-w-full h-auto cursor-pointer" />
-        </label>
-        <img v-else-if="image1Url" :src="image1Url"
-             alt="Image 1"
-             class="rounded-md max-w-full h-auto" />
-        <button v-if="isEditMode" @click="deleteImage('image1Url')"
-                class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white rounded-full hover:bg-red-600">
-          X
-        </button>
-      </div>
 
-      <!-- Deuxième image -->
+    <div>
-      <div v-if="image2Url || isEditMode" :class="image1Url ? 'w-1/2' : 'w-full'" class="relative">
+      <div v-if="isEditMode" class="text-2xl py-2"> Images</div>
-        <label v-if="isEditMode">
+      <div class="flex justify-center space-x-4">
-          <input type="file" @change="updateImage('image2Url', $event)" class="hidden" />
+        <!-- Première image -->
-          <img :src="image2Url || fallbackImage"
+        
+        <div v-if="image1Url || isEditMode" :class="image1Url ? 'w-1/2' : 'w-full'" class="relative">
+          <label v-if="isEditMode">
+            <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
+            <img :src="image1Url || fallbackImage"
+                 alt="Image 1"
+                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+          </label>
+          <img v-else-if="image1Url" :src="image1Url"
+               alt="Image 1"
+               class="rounded-md max-w-full h-auto"/>
+          <button v-if="isEditMode" @click="deleteImage('image1Url')"
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+            X
+          </button>
+        </div>
+
+
+        <!-- Deuxième image -->
+        <div v-if="image2Url || isEditMode" :class="image1Url ? 'w-1/2' : 'w-full'" class="relative">
+          <label v-if="isEditMode">
+            <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
+            <img :src="image2Url || fallbackImage"
+                 alt="Image 2"
+                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+          </label>
+          <img v-else-if="image2Url" :src="image2Url"
                alt="Image 2"
-               class="rounded-md max-w-full h-auto cursor-pointer" />
+               class="rounded-md max-w-full h-auto"/>
-        </label>
+          <button v-if="isEditMode" @click="deleteImage('image2Url')"
-        <img v-else-if="image2Url" :src="image2Url"
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
-             alt="Image 2"
+            X
-             class="rounded-md max-w-full h-auto" />
+          </button>
-        <button v-if="isEditMode" @click="deleteImage('image2Url')"
+        </div>
-                class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white rounded-full hover:bg-red-600">
+
-          X
+        <!-- Troisième image -->
-        </button>
+        <div v-if="image3Url || isEditMode" :class="image3Url ? 'w-1/2' : 'w-full'" class="relative">
+          <label v-if="isEditMode">
+            <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
+            <img :src="image3Url || fallbackImage"
+                 alt="Image 2"
+                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+          </label>
+          <img v-else-if="image3Url" :src="image3Url"
+               alt="Image 2"
+               class="rounded-md max-w-full h-auto"/>
+          <button v-if="isEditMode" @click="deleteImage('image3Url')"
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+            X
+          </button>
+        </div>
+
+        <!-- Quatrième image -->
+        <div v-if="image4Url || isEditMode" :class="image4Url ? 'w-1/2' : 'w-full'" class="relative">
+          <label v-if="isEditMode">
+            <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
+            <img :src="image4Url || fallbackImage"
+                 alt="Image 2"
+                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+          </label>
+          <img v-else-if="image4Url" :src="image4Url"
+               alt="Image 2"
+               class="rounded-md max-w-full h-auto"/>
+          <button v-if="isEditMode" @click="deleteImage('image4Url')"
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+            X
+          </button>
+        </div>
       </div>
     </div>
 
     <!-- Texte sous les deux images -->
     <div v-if="isEditMode">
-      <textarea v-model="editableImagesText" class="w-full p-2 border rounded-md h-24"></textarea>
+      <div class="text-2xl py-2"> Images</div>
+      <textarea v-model="editableImagesText" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
     </div>
     <p v-else-if="imagesText" class="text-lg text-justify">
       {{ imagesText }}
     </p>
 
     <!-- Sous-titre avant la vidéo -->
+  
     <div v-if="isEditMode">
-      <textarea v-model="editableVideoSubtitle" class="w-full p-2 border rounded-md h-24"></textarea>
+      <div class="text-2xl py-2"> Titre Video</div>
+      <textarea v-model="editableVideoSubtitle" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
     </div>
     <h2 v-else-if="videoSubtitle" class="text-2xl font-semibold text-center">
       {{ videoSubtitle }}
     </h2>
 
     <!-- Vidéo YouTube -->
+    <div v-if="isEditMode">
+      <div class="text-2xl py-2">URL vidéo</div>
+      <input
+          v-if="isEditMode"
+          type="text"
+          v-model="editableVideoUrl"
+          class="w-full p-2 border rounded-md"
+          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+      />
+    </div>
     <div class="flex justify-center">
-      <div v-if="isEditMode">
+      <div v-if="isEditMode"></div>
-        <input type="text" v-model="editableVideoUrl" class="w-full p-2 border rounded-md" />
+      <iframe
-      </div>
+          v-else-if="videoUrl"
-      <iframe v-else-if="videoUrl" width="560" height="315"
+          :src="videoUrl"
-              :src="videoUrl"
+          title="YouTube video player"
-              title="YouTube video player"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              frameborder="0"
+          allowfullscreen
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          class="rounded-md"
-              allowfullscreen
+          style="width: 600px; height: 337px;"
-              class="rounded-md"></iframe>
+      ></iframe>
     </div>
 
+
+
     <!-- Texte sous la vidéo -->
+    <div v-if="isEditMode" class="text-2xl"> Description</div>
     <div v-if="isEditMode">
-      <textarea v-model="editableVideoText" class="w-full p-2 border rounded-md h-24"></textarea>
+      <textarea v-model="editableVideoText" class="w-full p-2 border rounded-md h-24"
+                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
     </div>
     <p v-else-if="videoText" class="text-lg text-justify">
       {{ videoText }}
     </p>
+
+    <!-- Informations de contact -->
+    <div class="flex flex-col space-y-6 mt-8">
+      <div v-if="isEditMode" class="flex flex-col space-y-2">
+        <!-- Édition du téléphone -->
+        <div>
+          <label class="text-lg">Numéro de téléphone</label>
+          <input
+              v-model="editablePhoneNumber"
+              type="text"
+              class="w-full p-2 border rounded-md"
+              :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+          />
+        </div>
+        <!-- Édition de l'email -->
+        <div>
+          <label class="text-lg">Adresse email</label>
+          <input
+              v-model="editableEmail"
+              type="text"
+              class="w-full p-2 border rounded-md"
+              :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+          />
+        </div>
+      </div>
+      <div v-else class="flex justify-center items-center space-x-64">
+        <!-- Affichage du téléphone -->
+        <div class="flex items-center space-x-2">
+          <i class="mdi mdi-phone-outline text-2xl"></i>
+          <span>{{ phoneNumber }}</span>
+        </div>
+        <!-- Affichage de l'email -->
+        <div class="flex items-center space-x-2">
+          <i class="mdi mdi-email-outline text-2xl"></i>
+          <span>{{ email }}</span>
+        </div>
+      </div>
+    </div>
+
+
   </div>
+
+
+  
+  
 </template>
 
 <script setup>
 import {ref, onMounted, computed} from "vue";
-import { useBrandingStore } from "@/stores/brandingStore.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
 
+const phoneNumber = ref("+1 (555) 123-4567"); // Remplacez par le numéro de téléphone
+const email = ref("contact@exemple.com"); // Remplacez par l'email
 
 const brandingStore = useBrandingStore();
 const isEditMode = ref(false);
-const isLoggedIn = true; // Simulez la connexion.
+const isLoggedIn = true;
 
 const authStore = useAuthStore();
 const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value);
@@ -150,34 +308,52 @@ const demoData = {
   mainTitle: "Votre référence d'Arma Reforger",
   mainImageUrl: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
   mainImageText: "Je suis la référence incontournable sur le jeu Arma Reforger grâce à ma maîtrise approfondie de ses mécanismes et à ma passion pour son univers. Mon expertise repose sur des heures d’exploration, de stratégie et de collaboration avec une communauté active. Je partage des astuces exclusives, des guides détaillés et des analyses poussées pour aider les joueurs à exceller. Mon site propose un contenu unique, des mises à jour en temps réel et des ressources complètes pour tous les niveaux. En tant que passionné, je suis déterminé à offrir le meilleur contenu pour faire de chaque visite une expérience enrichissante et inspirante.",
-  imagesSubtitle: "Participez à Mes Sessions de Jeu en Direct",
+  mainvideoUrl: "https://www.youtube.com/embed/byx2t6TqM2Y?si=GRy_Sn3Mm7nJvUGH",
+  mainVideoText: "Youpidou. Mon expertise repose sur des heures d’exploration, de stratégie et de collaboration avec une communauté active. Je partage des astuces exclusives, des guides détaillés et des analyses poussées pour aider les joueurs à exceller. Mon site propose un contenu unique, des mises à jour en temps réel et des ressources complètes pour tous les niveaux. En tant que passionné, je suis déterminé à offrir le meilleur contenu pour faire de chaque visite une expérience enrichissante et inspirante.",
+  imagesSubtitle2: "Participez à Mes Sessions de Jeu en Direct",
   image1Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
   image2Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
+  image3Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
+  image4Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
   imagesText: "Me supporter et regarder mes sessions de jeu en direct, c'est bien plus qu'un simple divertissement. En tant que joueur passionné, je partage des stratégies, des astuces et une approche unique qui enrichissent l’expérience de la communauté. Votre soutien me permet de créer du contenu de qualité, d’améliorer mes équipements et d’explorer de nouvelles façons de vous divertir. En rejoignant mes sessions, vous participez à une aventure interactive où vos idées et commentaires influencent le déroulement. Ensemble, nous bâtissons une communauté dynamique et inspirante, où chaque spectateur joue un rôle clé dans cette expérience immersive.",
   videoSubtitle: "Exemple d'une Séance de Jeu Typique",
+  videoSubtitleMain: "Main video",
+ 
+  videoUrlMain: "https://www.youtube.com/embed/8l8CRkZkt30?si=8w2lHQ2mwoHTpf9-",
   videoUrl: "https://www.youtube.com/embed/byx2t6TqM2Y?si=GRy_Sn3Mm7nJvUGH",
+
   videoText: "Supporter cette page, c’est permettre de créer un contenu de qualité, basé sur des recherches approfondies et une expérimentation continue. Votre soutien aide à transformer cette passion en métier, tout en garantissant des vidéos, guides et sessions enrichissants. Le créateur, motivé par l’envie de fournir un contenu toujours meilleur, apprécie chaque geste qui rend cette aventure possible."
 };
 
 // Variables réactives pour les données
+const editablePhoneNumber = ref("");
+const editableEmail = ref("");
 const mainTitle = ref("");
 const mainImageUrl = ref("");
 const mainImageText = ref("");
+const mainVideoText = ref("");
 const imagesSubtitle = ref("");
 const image1Url = ref("");
 const image2Url = ref("");
+const image3Url = ref("");
+const image4Url = ref("");
 const imagesText = ref("");
 const videoSubtitle = ref("");
+const videoSubtitleMain = ref("");
+const videoUrlMain = ref("");
 const videoUrl = ref("");
 const videoText = ref("");
 
 // Editable fields
 const editableMainTitle = ref("");
 const editableMainImageText = ref("");
+const editableMainVideoText = ref("");
 const editableImagesSubtitle = ref("");
 const editableImagesText = ref("");
 const editableVideoSubtitle = ref("");
+const editableVideoSubtitleMain = ref("");
 const editableVideoText = ref("");
+const editableVideoUrlMain = ref("");
 const editableVideoUrl = ref("");
 
 // Activer/désactiver le mode édition
@@ -185,19 +361,29 @@ function toggleEditMode() {
   if (isEditMode.value) {
     mainTitle.value = editableMainTitle.value;
     mainImageText.value = editableMainImageText.value;
+    mainVideoText.value = editableMainVideoText.value;
     imagesSubtitle.value = editableImagesSubtitle.value;
     imagesText.value = editableImagesText.value;
     videoSubtitle.value = editableVideoSubtitle.value;
+    videoSubtitleMain.value = editableVideoSubtitleMain.value;
     videoText.value = editableVideoText.value;
+    videoUrlMain.value = editableVideoUrlMain.value;
     videoUrl.value = editableVideoUrl.value;
+    phoneNumber.value = editablePhoneNumber.value;
+    email.value = editableEmail.value;
   } else {
     editableMainTitle.value = mainTitle.value;
     editableMainImageText.value = mainImageText.value;
+    editableMainVideoText.value = mainVideoText.value;
     editableImagesSubtitle.value = imagesSubtitle.value;
     editableImagesText.value = imagesText.value;
     editableVideoSubtitle.value = videoSubtitle.value;
+    editableVideoSubtitleMain.value = videoSubtitleMain.value;
     editableVideoText.value = videoText.value;
+    editableVideoUrlMain.value = videoUrlMain.value;
     editableVideoUrl.value = videoUrl.value;
+    editablePhoneNumber.value = phoneNumber.value;
+    editableEmail.value = email.value;
   }
   isEditMode.value = !isEditMode.value;
 }
@@ -207,6 +393,8 @@ function deleteImage(field) {
   if (field === "mainImageUrl") mainImageUrl.value = null;
   else if (field === "image1Url") image1Url.value = null;
   else if (field === "image2Url") image2Url.value = null;
+  else if (field === "image3Url") image3Url.value = null;
+  else if (field === "image4Url") image4Url.value = null;
 }
 
 // Mettre à jour une image
@@ -216,8 +404,10 @@ function updateImage(field, event) {
     const reader = new FileReader();
     reader.onload = () => {
       if (field === "mainImageUrl") mainImageUrl.value = reader.result;
-      if (field === "image1Url") image1Url.value = reader.result;
+      else if (field === "image1Url") image1Url.value = reader.result;
-      if (field === "image2Url") image2Url.value = reader.result;
+      else if (field === "image2Url") image2Url.value = reader.result;
+      else if (field === "image3Url") image3Url.value = reader.result; // Correction ici
+      else if (field === "image4Url") image4Url.value = reader.result;
     };
     reader.readAsDataURL(file);
   }
@@ -228,15 +418,36 @@ onMounted(() => {
   mainTitle.value = demoData.mainTitle;
   mainImageUrl.value = demoData.mainImageUrl;
   mainImageText.value = demoData.mainImageText;
+  mainVideoText.value = demoData.mainVideoText;
   imagesSubtitle.value = demoData.imagesSubtitle;
   image1Url.value = demoData.image1Url;
   image2Url.value = demoData.image2Url;
+  image3Url.value = demoData.image3Url;
+  image4Url.value = demoData.image4Url;
   imagesText.value = demoData.imagesText;
   videoSubtitle.value = demoData.videoSubtitle;
+  videoSubtitleMain.value = demoData.videoSubtitleMain;
   videoUrl.value = demoData.videoUrl;
+  videoUrlMain.value = demoData.videoUrlMain;
   videoText.value = demoData.videoText;
 });
 </script>
 
 <style scoped>
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; /* Ratio 16:9 (9/16 = 0.5625) */
+}
+
+.video-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0.5rem; /* Pour les bords arrondis */
+}
+
 </style>