From b575bbc224294086848ad64b79d078af8c0df2da Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 9 Aug 2024 02:20:36 -0400
Subject: [PATCH] Update UI - You can watch the image in fullscreen in content
 page

---
 src/views/contents/ContentCard.vue |  29 +++---
 src/views/contents/ContentPage.vue | 136 ++++++++++++++++++++---------
 2 files changed, 113 insertions(+), 52 deletions(-)

diff --git a/src/views/contents/ContentCard.vue b/src/views/contents/ContentCard.vue
index 4bb10ea..c3dfbb8 100644
--- a/src/views/contents/ContentCard.vue
+++ b/src/views/contents/ContentCard.vue
@@ -45,13 +45,17 @@
         </div>
       </v-card-title>
 
-      <router-link :to="'content/' + props?.content?.id">
-      </router-link>
-      <v-carousel hide-delimiters v-if="hasUrls" :show-arrows="props.content.urls.length > 1" :show-indicators="props.content.urls.length > 1">
+      <v-carousel
+          hide-delimiters
+          v-if="hasUrls"
+          :show-arrows="props.content.urls.length > 1"
+          :show-indicators="props.content.urls.length > 1"
+      >
         <v-carousel-item
             v-for="url in props.content.urls"
             :key="url"
             class="image-container"
+            @click="redirectToContent"
         >
           <component :is="getComponent(url)" :src="url"></component>
         </v-carousel-item>
@@ -70,18 +74,17 @@
             :class="{'comment-active': hasComments}"
             variant="plain"
             icon
-            @click="toggleComments"
-        >
+            @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
         </v-btn>
       </div>
-   
+
       <div :class="{'hidden': !commentsVisible}">
         <h2 class="font-sans font-semibold mt-2">Commentaires</h2>
         <message-list :subject-id="props.content.id" :messages="messages"></message-list>
       </div>
-
-      <div  class="py-2">
+      
+      <div class="py-2">
         <post-message :subject-id="props.content.id" @message-posted="addMessage"></post-message>
       </div>
     </div>
@@ -89,7 +92,7 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import { time_ago } from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
@@ -105,13 +108,14 @@ const props = defineProps({
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const commentsVisible = ref(false);
-const messages = ref([]); 
+const messages = ref([]);
 
 // Propriété calculée pour vérifier s'il y a des commentaires
 const hasComments = computed(() => messages.value.length > 0);
 
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
+  commentsVisible.value = true;
 }
 
 function toggleComments() {
@@ -145,6 +149,10 @@ function deleteContent() {
 function reportContent() {
   console.log('Reporter le contenu');
 }
+
+function redirectToContent() {
+  window.location.href = `/content/${props.content.id}`;
+}
 </script>
 
 <style>
@@ -153,6 +161,7 @@ function reportContent() {
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .image-container img {
diff --git a/src/views/contents/ContentPage.vue b/src/views/contents/ContentPage.vue
index 5c7e6db..26ac269 100644
--- a/src/views/contents/ContentPage.vue
+++ b/src/views/contents/ContentPage.vue
@@ -1,51 +1,76 @@
 <template>
+  <div class="flex h-screen">
 
-  <div class="flex flex-column w-full">
-
-    <div class="border-b-2 p-6 font-sans space-y-2">
-      <div v-if="data && data.uri">
-        Uri: {{ data?.uri }}
-      </div>
-      <div v-if="data && data.title" class="font-semibold">
-        Title: {{ data?.title }}
-      </div>
-      <div v-if="data && data.description">
-        Description: {{ data?.description }}
-      </div>
-      <div v-if="data && data.createdAt">
-        Date: {{ data?.createdAt }}
-      </div>
-      <div v-if="data && data.createdBy">
-        Creator: {{ data?.createdBy }}
-      </div>
+    <!-- Carousel section (left) -->
+    <div class="flex-1 flex items-center justify-center bg-neutral-500">
+      <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>
     </div>
 
-    <div class="border-b-2 p-6">
-      <PostMessage :content-id="contentId">
-      </PostMessage>
-    </div>
+    <!-- Content details section (right) -->
+    <div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto h-full">
 
-    <div class="border-b-2 p-6">
-      <h2 class="font-sans font-semibold">Commentaires</h2>
-      <MessageList :content-id="contentId">
-      </MessageList>
-    </div>
+      <!-- Content details -->
+      <div class="border-b-2 p-6 font-sans space-y-2">
+        <div v-if="data && data.uri">
+          Uri: {{ data?.uri }}
+        </div>
+        <div v-if="data && data.title" class="font-semibold">
+          Title: {{ data?.title }}
+        </div>
+        <div v-if="data && data.description">
+          Description: {{ data?.description }}
+        </div>
+        <div v-if="data && data.createdAt">
+          Date: {{ data?.createdAt }}
+        </div>
+        <div v-if="data && data.createdBy">
+          Creator: {{ data?.createdBy }}
+        </div>
+      </div>
 
+      <!-- Comments Section -->
+      <div class="border-b-2 p-6">
+        <h2 class="font-sans font-semibold">Commentaires</h2>
+        <MessageList :content-id="contentId"></MessageList>
+      </div>
+
+      <!-- Post a new message -->
+      <div class="border-b-2 p-6">
+        <PostMessage :content-id="contentId"></PostMessage>
+      </div>
+
+    </div>
   </div>
-
 </template>
 
-<script setup async>
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
 import PostMessage from "@/views/messages/PostMessage.vue";
 import MessageList from "@/views/messages/MessageList.vue";
-import {useClient} from "@/plugins/api.js";
-import {onMounted, watch, ref, computed} from 'vue';
-import {useRoute} from 'vue-router';
+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 data = ref();
 
-const route = useRoute()
-const client = useClient()
+const route = useRoute();
+const client = useClient();
 
 const contentId = computed(() => {
   return route.params.contentId;
@@ -53,12 +78,12 @@ const contentId = computed(() => {
 
 const fetchContentData = async (contentId) => {
   try {
-    const response = await client.get(`/api/contents/${contentId}`)
-    data.value = response.data
+    const response = await client.get(`/api/contents/${contentId}`);
+    data.value = response.data;
   } catch (error) {
-    console.error(`Error fetching content: ${error}`)
+    console.error(`Error fetching content: ${error}`);
   }
-}
+};
 
 onMounted(() => {
   fetchContentData(contentId.value);
@@ -68,7 +93,34 @@ 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-carousel-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.v-carousel-item img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+</style>