From 3f93a10d4a2acb6ae6fbf567e91b8682c897741f Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 5 Nov 2024 18:44:22 -0500
Subject: [PATCH] Added thumbnail textarea in quicky and fix content display.

---
 src/views/contents/QuickyContentEditor.vue    | 10 +++
 .../contentfullscreen/FullScreenContentMd.vue | 80 ++++++++++++++-----
 2 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/src/views/contents/QuickyContentEditor.vue b/src/views/contents/QuickyContentEditor.vue
index f52462e..4801c8d 100644
--- a/src/views/contents/QuickyContentEditor.vue
+++ b/src/views/contents/QuickyContentEditor.vue
@@ -8,6 +8,7 @@ const client = useClient();
 const title = ref('');
 const message = ref('');
 const files = ref([]);
+const Thumbnail = ref([]);
 const externalUrls = ref([]);
 
 const creatorProfileStore = useCreatorProfileStore();
@@ -103,6 +104,15 @@ const cancelPost = () => {
         <v-btn icon @click="addUrl" class="mt-2">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
+        <v-file-input v-model="Thumbnail"
+                      label="Thumbnail"
+                      class="p-2 custom-file-input"
+                      variant="outlined"
+                      multiple
+                      dropzone
+                      prepend-icon=""
+                      placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
+        ></v-file-input>
 
         <v-file-input v-model="files"
                       label="Glissez vos images"
diff --git a/src/views/contents/contentfullscreen/FullScreenContentMd.vue b/src/views/contents/contentfullscreen/FullScreenContentMd.vue
index 809bc52..58b021a 100644
--- a/src/views/contents/contentfullscreen/FullScreenContentMd.vue
+++ b/src/views/contents/contentfullscreen/FullScreenContentMd.vue
@@ -1,14 +1,13 @@
 <template>
   <div class="flex h-[calc(100vh-118px)] -mt-2 w-full">
-    
-    <div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
+
+    <div ref="containerRef" class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
 
       <div class="absolute inset-0 z-0 bg-cover bg-center blur-lg pointer-events-none"
            :style="{ backgroundImage: `url(${currentImage})` }"></div>
 
       <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">
+        <v-btn @click="goBack" variant="plain" 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>
@@ -19,8 +18,13 @@
         </v-btn>
       </div>
 
-      <div class="flex items-center justify-center w-full h-full z-10">
-        <component :is="getComponent(currentImage)" :src="currentImage" class="max-w-full max-h-full object-contain"/>
+      <div class="flex items-center justify-center w-full h-full z-10 overflow-hidden relative">
+        <component
+            :is="getComponent(currentImage)"
+            :src="currentImage"
+            :style="isImage(currentImage) ? imageStyle : {}"
+            :class="isImage(currentImage) ? 'image-content' : 'video-content'"
+        />
       </div>
 
       <div v-if="multipleImages" class="absolute right-4 top-1/2 transform -translate-y-1/2 z-10">
@@ -56,17 +60,18 @@
   </div>
 </template>
 
+
 <script setup>
-import {ref, computed, onMounted, watch} from 'vue';
+import { ref, computed, onMounted, watch, onBeforeUnmount } 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 { useClient } from "@/plugins/api.js";
+import { useRoute } from 'vue-router';
 import Reaction from "@/views/contents/Reaction.vue";
-import {useMessageStore} from "@/stores/messageStore.js";
+import { useMessageStore } from "@/stores/messageStore.js";
 
 const data = ref(null);
 const currentImageIndex = ref(0);
@@ -87,9 +92,39 @@ const currentImage = computed(() => {
   return '';
 });
 
-
 const multipleImages = computed(() => data.value?.urls.length > 1);
 
+const containerRef = ref(null);
+const containerWidth = ref(0);
+const containerHeight = ref(0);
+
+function updateContainerDimensions() {
+  if (containerRef.value) {
+    containerWidth.value = containerRef.value.offsetWidth;
+    containerHeight.value = containerRef.value.offsetHeight;
+  }
+}
+
+onMounted(() => {
+  updateContainerDimensions();
+  window.addEventListener('resize', updateContainerDimensions);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateContainerDimensions);
+});
+
+const imageStyle = computed(() => {
+  return {
+    maxWidth: `${containerWidth.value}px`,
+    maxHeight: `${containerHeight.value}px`,
+    objectFit: 'contain',
+  };
+});
+
+function isImage(url) {
+  return url.match(/\.(jpeg|jpg|gif|png)$/);
+}
 
 function getComponent(url) {
   if (url.includes('youtube.com') || url.includes('youtu.be')) {
@@ -100,7 +135,6 @@ function getComponent(url) {
   return 'div';
 }
 
-
 const fetchContentData = async (contentId) => {
   try {
     const response = await client.get(`/api/contents/${contentId}`);
@@ -110,38 +144,32 @@ 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;
   }
 }
 
-
 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);
@@ -153,9 +181,9 @@ watch(contentId, async (newContentId) => {
   messageCount.value = await messageStore.fetchMessageCount(newContentId);
   messages.value = await messageStore.fetchMessages(newContentId);
 });
-
 </script>
 
+
 <style scoped>
 .fixed-width {
   width: 400px;
@@ -172,4 +200,18 @@ watch(contentId, async (newContentId) => {
 .v-btn .v-icon {
   color: white;
 }
+
+.image-content {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.video-content {
+  width: 100%;
+  height: 100%;
+}
+
 </style>