Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

git-subtree-dir: frontend git-subtree-mainline: 205a3bd14b git-subtree-split: c070c0315d
2025-01-15 15:24:17 -05:00
parent 205a3bd14b c070c0315d
commit ab911955ed
318 changed files with 29301 additions and 0 deletions
--- a/frontend/src/views/contents/contentfullscreen/FullScreenContentMd.vue
+++ b/frontend/src/views/contents/contentfullscreen/FullScreenContentMd.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="flex h-[calc(100vh-118px)] -mt-2 w-full">
+
+    <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-icon class="text-black bg-white rounded-full" size="36">mdi-close</v-icon>
+        </v-btn>
+      </div>
+
+      <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>
+
+      <div class="flex items-center justify-center w-full h-full z-10 overflow-hidden relative">
+        <img
+            :src="currentImage"
+            :style="imageStyle"
+            class="image-content"
+            v-if="isImage(currentImage)"
+            alt="Image"
+        />
+        <component
+            v-else
+            :is="getComponent(currentImage)"
+            :src="currentImage"
+            class="video-content"
+        />
+      </div>
+
+
+      <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>
+
+    <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">{{ data.title }}</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" :messages="messages"></message-list>
+      </div>
+
+      <div class="border-b-2 p-6">
+        <post-message :subject-id="contentId" @message-posted="addMessage"></post-message>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+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 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(() => route.params.contentId);
+const messages = ref([]);
+const messageCount = ref(0);
+const messagesVisible = ref(false);
+
+const currentImage = computed(() => {
+  if (data.value && data.value.urls) {
+    return data.value.urls[currentImageIndex.value] || '';
+  }
+  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')) {
+    return YoutubePlayer;
+  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
+    return ImageViewer;
+  }
+  return 'div';
+}
+
+const fetchContentData = async (contentId) => {
+  try {
+    const response = await client.get(`/api/contents/${contentId}`);
+    data.value = response.data;
+  } catch (error) {
+    console.error(`Error fetching content: ${error}`);
+  }
+};
+
+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);
+  messages.value = await messageStore.fetchMessages(contentId.value);
+});
+
+watch(contentId, async (newContentId) => {
+  await fetchContentData(newContentId);
+  messageCount.value = await messageStore.fetchMessageCount(newContentId);
+  messages.value = await messageStore.fetchMessages(newContentId);
+});
+</script>
+
+
+<style scoped>
+.fixed-width {
+  width: 400px;
+}
+
+.v-btn {
+  transition: background-color 0.2s ease;
+}
+
+.v-btn:hover {
+  background-color: #555;
+}
+
+.v-btn .v-icon {
+  color: white;
+}
+
+</style>