102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<script setup>
|
|
|
|
import {computed, reactive, onMounted} 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 YoutubePlayer from './YoutubePlayer.vue';
|
|
import ImageViewer from './ImageViewer.vue';
|
|
// import VimeoPlayer from '@/components/VimeoPlayer.vue';
|
|
// import AudioPlayer from '@/components/AudioPlayer.vue';
|
|
// import BlogViewer from '@/components/BlogViewer.vue';
|
|
|
|
const props = defineProps({
|
|
content: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
});
|
|
|
|
const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
|
|
|
|
|
|
const messages = reactive([]);
|
|
|
|
function addMessage(newMessage) {
|
|
messages.unshift(newMessage)
|
|
}
|
|
|
|
function getComponent(url) {
|
|
if (url.includes('youtube.com') || url.includes('youtu.be')) {
|
|
return YoutubePlayer;
|
|
// } else if (url.includes('vimeo.com')) {
|
|
// return VimeoPlayer;
|
|
} else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
|
|
return ImageViewer;
|
|
// } else if (url.match(/\.(mp3|wav|ogg)$/)) {
|
|
// return 'AudioPlayer';
|
|
// } else {
|
|
// return 'BlogViewer';
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="shadow-md rounded-lg bg-gray-50">
|
|
|
|
<v-card
|
|
outlined
|
|
tile
|
|
>
|
|
<v-card-title>
|
|
{{ props.content.title }}
|
|
<span class="text-subtitle-2">
|
|
{{ time_ago(props.content.createdAt) }}
|
|
</span>
|
|
</v-card-title>
|
|
|
|
<v-carousel v-if="hasUrls">
|
|
|
|
<v-carousel-item
|
|
v-for="url in props.content.urls"
|
|
:key="url"
|
|
>
|
|
<component :is="getComponent(url)"
|
|
:src="url"
|
|
></component>
|
|
</v-carousel-item>
|
|
|
|
</v-carousel>
|
|
|
|
<v-card-text>
|
|
{{ props.content.description }}
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<router-link :to="'content/' + content.id">
|
|
<div class="bg-blue-500 rounded-lg py-1 px-2">Plus ...</div>
|
|
</router-link>
|
|
</v-card-actions>
|
|
|
|
</v-card>
|
|
|
|
<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> |