85 lines
2.0 KiB
Vue
85 lines
2.0 KiB
Vue
<template>
|
|
|
|
<div class="shadow-md rounded-lg bg-gray-50">
|
|
|
|
<div class="text-lg font-bold">
|
|
{{ props.content.title }}
|
|
<span class="text-md-caption">
|
|
{{ time_ago(props.content.createdAt) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="props.content.url !== null || props.content.uri !== null"
|
|
class="h-48 object-cover bg-gray-300 rounded-md">
|
|
|
|
<v-img :src="props.content.url"
|
|
v-if="!isHttpUrl">
|
|
</v-img>
|
|
|
|
<iframe v-if="isHttpUrl"
|
|
:src="props?.content?.uri"
|
|
title="YouTube video player"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerpolicy="strict-origin-when-cross-origin"
|
|
allowfullscreen>
|
|
</iframe>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-row">
|
|
|
|
<div>
|
|
<div class="text-sm text-gray-500">{{ props.content.description }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<router-link :to="'content/' + props?.content?.id">
|
|
<div class="bg-blue-500 rounded-lg py-1 px-2">Plus ...</div>
|
|
</router-link>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
<h2 class="font-sans font-semibold">Commentaires</h2>
|
|
<message-list :subject-id="props.content.id" :messages="messages">
|
|
</message-list>
|
|
</div>
|
|
|
|
<div class="border-t-2 border-gray-300 mt-4 pt-4">
|
|
<post-message :subject-id="props.content.id" @message-posted="addMessage">
|
|
</post-message>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import {computed, reactive} from 'vue';
|
|
import {time_ago} from "@/internal_time_ago.js";
|
|
import MessageList from "@/views/messages/MessageList.vue";
|
|
import PostMessage from "@/views/messages/PostMessage.vue";
|
|
|
|
const isHttpUrl = computed(() => props.content?.uri?.startsWith('http'))
|
|
|
|
const props = defineProps({
|
|
content: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
});
|
|
|
|
const messages = reactive([]);
|
|
|
|
function addMessage(newMessage) {
|
|
messages.unshift(newMessage)
|
|
}
|
|
|
|
</script> |