social-media/src/views/contents/ContentCard.vue

<template>
  <div class="shadow-md rounded-2xl bg-gray-50 border custom-border">
    <div>
      <v-card-title>
        <div class="flex flex-row justify-between items-center">
          <div class="flex items-center">
            <img
                :src="props.content.createdByPortraitUrl"
                alt="Profile Image"
                class="rounded-full"
                width="32px"
                height="32px">
            <div class="capitalize px-2">
              {{ props.content.createdByName }}
            </div>
            <span class="text-subtitle-2 mt-1">
              {{ time_ago(props.content.createdAt) }}
            </span>
          </div>

          <v-menu>
            <template v-slot:activator="{ props }">
              <v-btn variant="plain" v-bind="props">
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </template>
            <v-list>
              <v-list-item @click="editContent">
                <v-list-item-title>Modifier le contenu</v-list-item-title>
              </v-list-item>
              <v-list-item @click="deleteContent">
                <v-list-item-title>Effacer le contenu</v-list-item-title>
              </v-list-item>
              <v-list-item @click="reportContent">
                <v-list-item-title>Reporter le contenu</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>
        <div class="uppercase">
          {{ props.content.title }}
        </div>
        <div>
          {{ props.content.description }}
        </div>
      </v-card-title>

      <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>
      </v-carousel>
    </div>

    <div class="px-4">
      <div class="flex justify-around py-2">
        <v-btn variant="plain" icon @click="likeContent">
          <v-icon>mdi-thumb-up-outline</v-icon>
        </v-btn>
        <v-btn variant="plain" icon @click="dislikeContent">
          <v-icon>mdi-thumb-down-outline</v-icon>
        </v-btn>
        <v-btn
            :class="{'comment-active': hasMessages}"
            variant="plain"
            icon
            @click="toggleComments">
          <v-icon>mdi-comment-outline</v-icon>
        </v-btn>

        <donation-button :color-border="colorMenu"
                         :color-accent="colorAccent"
                         :creator-id="creatorId"
                         :creator-name="creatorName"
                         :creator-logo="creatorLogo"
                         iconColorClass="text-black"
        ></donation-button>
        
      </div>

      <div :class="{'hidden': !messagesVisible}">
        <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">
        <post-message :subject-id="props.content.id" @message-posted="addMessage"></post-message>
      </div>
    </div>
  </div>
</template>

<script setup>
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";
import DonationButton from "@/views/creators/DonationButton.vue";
import YoutubePlayer from './YoutubePlayer.vue';
import ImageViewer from './ImageViewer.vue';

const props = defineProps({
  content: {
    type: Object,
    required: true,
  }
});

const creatorId = computed(() => props.content.createdBy)
const creatorName = computed(() => props.content.createdByName)
const creatorLogo = computed(() => props.content.createdByPortraitUrl)
const colorMenu = computed(() => props.content.colorMenu)
const colorAccent = computed(() => props.content.colorAccent)

const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
const messagesVisible = ref(false);
const messages = ref([]);
const hasMessages = computed(() => messages.value.length > 0)

function addMessage(newMessage) {
  messages.value.unshift(newMessage);
  messagesVisible.value = true;
}

function toggleComments() {
  messagesVisible.value = !messagesVisible.value;
}

function likeContent() {
  console.log('Content liked');
}

function dislikeContent() {
  console.log('Content disliked');
}

function getComponent(url) {
  if (url.includes('youtube.com') || url.includes('youtu.be')) {
    return YoutubePlayer;
  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
    return ImageViewer;
  }
}

function editContent() {
  console.log('Modifier le contenu');
}

function deleteContent() {
  console.log('Effacer le contenu');
}

function reportContent() {
  console.log('Reporter le contenu');
}

function redirectToContent() {
  window.location.href = `/content/${props.content.id}`;
}
</script>

<style>
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-border {
  border-color: #EAEBEC;
}

.hidden {
  display: none;
}

.comment-active .v-icon {
  color: #D63DAB;
}
</style>