Fix video in content Viewer

src/views/contents/contentfullscreen/FullScreenContentMd.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="flex h-[calc(100vh-118px)] -mt-2 w-full">
-    <!-- Homemade carousel -->
+    
     <div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
 
-      <!-- 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 text-white w-12 h-12 flex items-center justify-center">
@@ -15,7 +13,6 @@
         </v-btn>
       </div>
 
-      <!-- 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>
@@ -23,10 +20,9 @@
       </div>
 
       <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" />
+        <component :is="getComponent(currentImage)" :src="currentImage" 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>
@@ -34,39 +30,27 @@
       </div>
     </div>
 
-    <!-- Info -->
     <div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto max-h-screen">
-
       <div class="border-b-2 p-6 font-sans space-y-2">
-        
         <div class="flex flex-row align-center" v-if="data && data.createdByName">
           <img :src="data.createdByPortraitUrl" class="rounded-full w-9" alt="">
           <p class="ml-2 capitalize">{{ data.createdByName }}</p>
         </div>
-        <div v-if="data && data.title" class="font-semibold">
+        <div v-if="data && data.title" class="font-semibold">{{ data.title }}</div>
-           {{ data.title }}
+        <div v-if="data && data.description">{{ data.description }}</div>
-        </div>
-        <div v-if="data && data.description">
-          {{ data.description }}
-        </div>
-
         <div class="flex justify-around py-2">
           <Reaction v-if="data" :content="data"></Reaction>
-
           <donation-button v-if="data"></donation-button>
-
         </div>
       </div>
 
       <div class="border-b-2 p-6">
         <h2 class="font-sans font-semibold">Commentaires</h2>
-        <message-list :subject-id="contentId"
+        <message-list :subject-id="contentId" :messages="messages"></message-list>
-        ></message-list>
       </div>
 
       <div class="border-b-2 p-6">
-        <post-message :subject-id="contentId"
+        <post-message :subject-id="contentId" @message-posted="addMessage"></post-message>
-        ></post-message>
       </div>
     </div>
   </div>
@@ -77,19 +61,24 @@ import {ref, computed, onMounted, watch} from 'vue';
 import PostMessage from "@/views/messages/PostMessage.vue";
 import MessageList from "@/views/messages/MessageList.vue";
 import DonationButton from "@/views/creators/DonationButton.vue";
+import YoutubePlayer from '../YoutubePlayer.vue';
+import ImageViewer from '../ImageViewer.vue';
 import {useClient} from "@/plugins/api.js";
 import {useRoute} from 'vue-router';
 import Reaction from "@/views/contents/Reaction.vue";
+import {useMessageStore} from "@/stores/messageStore.js";
 
 const data = ref(null);
 const currentImageIndex = ref(0);
 
 const route = useRoute();
 const client = useClient();
+const messageStore = useMessageStore();
 
-const contentId = computed(() => {
+const contentId = computed(() => route.params.contentId);
-  return route.params.contentId;
+const messages = ref([]);
-});
+const messageCount = ref(0);
+const messagesVisible = ref(false);
 
 const currentImage = computed(() => {
   if (data.value && data.value.urls) {
@@ -98,13 +87,19 @@ const currentImage = computed(() => {
   return '';
 });
 
-// Calculer si on a plus d'une image
+
-const multipleImages = computed(() => {
+const multipleImages = computed(() => data.value?.urls.length > 1);
-  if (data.value && data.value.urls) {
+
-    return data.value.urls.length > 1;
+
+function getComponent(url) {
+  if (url.includes('youtube.com') || url.includes('youtu.be')) {
+    return YoutubePlayer;
+  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
+    return ImageViewer;
   }
-  return 0;
+  return 'div';
-});
+}
+
 
 const fetchContentData = async (contentId) => {
   try {
@@ -115,28 +110,48 @@ const fetchContentData = async (contentId) => {
   }
 };
 
+
 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);
+function toggleComments() {
+  messagesVisible.value = !messagesVisible.value;
+}
+
+
+function addMessage(newMessage) {
+  messages.value.unshift(newMessage);
+  messagesVisible.value = true;
+  messageCount.value++;
+}
+
+
+onMounted(async () => {
+  await fetchContentData(contentId.value);
+  messageCount.value = await messageStore.fetchMessageCount(contentId.value);
+  messages.value = await messageStore.fetchMessages(contentId.value);
 });
 
-watch(contentId, (newContentId) => {
+watch(contentId, async (newContentId) => {
-  fetchContentData(newContentId);
+  await fetchContentData(newContentId);
+  messageCount.value = await messageStore.fetchMessageCount(newContentId);
+  messages.value = await messageStore.fetchMessages(newContentId);
 });
 
 </script>