social-media/frontend/src/views/contents/contentfullscreen/FullScreenContentMd.vue

<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>