Fix arrows

src/views/contents/ContentPage.vue

@@ -1,37 +1,44 @@
 <template>
-  <div class="flex h-[calc(100vh-120px)]">
-    <!-- Section Carousel (gauche) -->
+  <div class="flex h-[calc(100vh-118px)] -mt-2">
+
+    <!-- Homemade carousel -->
     <div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
-      <!-- Bouton "X" positionné dans le coin supérieur gauche -->
-      <div class="absolute top-8 left-0">
+
+      <!-- Blur image BG (désactivation des interactions) -->
+      <div class="absolute inset-0 z-0 bg-cover bg-center blur-lg pointer-events-none"
+           :style="{ backgroundImage: `url(${currentImage})` }"></div>
+
+      <!-- back Btn -->
+      <div class="absolute top-8 left-4 z-20">
         <v-btn @click="goBack" variant="plain"
-               class="rounded-full bg-gray-800 text-white w-12 h-12 flex items-center justify-center">
+               class="rounded-full text-white w-12 h-12 flex items-center justify-center">
           <v-icon class="text-black bg-white rounded-full" size="36">mdi-close</v-icon>
         </v-btn>
       </div>
 
-      <v-carousel
-          v-if="data?.urls && data.urls.length > 0"
-          hide-delimiters
-          :show-arrows="data.urls.length > 1"
-          :show-indicators="data.urls.length > 1"
-          class="w-full h-full flex items-center justify-center"
-      >
-        <v-carousel-item
-            v-for="url in data.urls"
-            :key="url"
-            class="flex items-center justify-center"
-        >
-          <component :is="getComponent(url)" :src="url" class="max-h-full max-w-full object-contain"></component>
-        </v-carousel-item>
-      </v-carousel>
+      <!-- Left arrow collée à gauche -->
+      <div v-if="multipleImages" class="absolute left-0 top-1/2 transform -translate-y-1/2 z-20">
+        <v-btn @click="previousImage" variant="plain" class="rounded-full bg-gray-800 text-white w-12 h-12">
+          <v-icon size="36">mdi-chevron-left</v-icon>
+        </v-btn>
       </div>
 
-    <!-- Section Détails (droite) -->
+      <div class="flex items-center justify-center w-full h-full z-10">
+        <img :src="currentImage" alt="Image" class="max-w-full max-h-full object-contain" />
+      </div>
+
+      <!-- right arrow -->
+      <div v-if="multipleImages" class="absolute right-4 top-1/2 transform -translate-y-1/2 z-10">
+        <v-btn @click="nextImage" variant="plain" class="rounded-full bg-gray-800 text-white w-12 h-12">
+          <v-icon size="36">mdi-chevron-right</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Info -->
     <div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto max-h-screen">
-      <!-- Détails du contenu -->
+
       <div class="border-b-2 p-6 font-sans space-y-2">
-        <!-- Accéder à createdByName -->
         <div v-if="data && data.createdByName">
           Créé par: {{ data.createdByName }}
         </div>
@@ -43,13 +50,13 @@
         </div>
       </div>
 
-      <!-- Section Commentaires -->
+
       <div class="border-b-2 p-6">
         <h2 class="font-sans font-semibold">Commentaires</h2>
         <MessageList :content-id="contentId"></MessageList>
       </div>
 
-      <!-- Poster un nouveau message -->
+
       <div class="border-b-2 p-6">
         <PostMessage :content-id="contentId"></PostMessage>
       </div>
@@ -57,16 +64,18 @@
   </div>
 </template>
 
+
+
+
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue';
 import PostMessage from "@/views/messages/PostMessage.vue";
 import MessageList from "@/views/messages/MessageList.vue";
-import YoutubePlayer from './YoutubePlayer.vue';
-import ImageViewer from './ImageViewer.vue';
 import { useClient } from "@/plugins/api.js";
 import { useRoute } from 'vue-router';
 
 const data = ref();
+const currentImageIndex = ref(0);
 
 const route = useRoute();
 const client = useClient();
@@ -75,6 +84,15 @@ const contentId = computed(() => {
   return route.params.contentId;
 });
 
+const currentImage = computed(() => {
+  return data.value?.urls[currentImageIndex.value] || '';
+});
+
+// Calculer si on a plus d'une image
+const multipleImages = computed(() => {
+  return data.value?.urls.length > 1;
+});
+
 const fetchContentData = async (contentId) => {
   try {
     const response = await client.get(`/api/contents/${contentId}`);
@@ -88,6 +106,18 @@ function goBack() {
   window.history.go(-1);
 }
 
+function nextImage() {
+  if (data.value?.urls.length > 0) {
+    currentImageIndex.value = (currentImageIndex.value + 1) % data.value.urls.length;
+  }
+}
+
+function previousImage() {
+  if (data.value?.urls.length > 0) {
+    currentImageIndex.value = (currentImageIndex.value - 1 + data.value.urls.length) % data.value.urls.length;
+  }
+}
+
 onMounted(() => {
   fetchContentData(contentId.value);
 });
@@ -95,35 +125,23 @@ onMounted(() => {
 watch(contentId, (newContentId) => {
   fetchContentData(newContentId);
 });
-
-function getComponent(url) {
-  if (url.includes('youtube.com') || url.includes('youtu.be')) {
-    return YoutubePlayer;
-  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
-    return ImageViewer;
-  }
-}
 </script>
 
+
 <style scoped>
 .fixed-width {
   width: 400px;
 }
 
-.custom-border {
-  border-color: #EAEBEC;
+.v-btn {
+  transition: background-color 0.2s ease;
 }
 
-.v-carousel-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.v-btn:hover {
+  background-color: #555;
 }
 
-.v-carousel-item img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
+.v-btn .v-icon {
+  color: white;
 }
-
 </style>