jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix video in content Viewer

Browse Source
This commit is contained in:
PascalMarchesseault
2024-11-05 00:43:58 -05:00
parent 0e055926c0
commit 4ed578fad5
1 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/views/contents/contentfullscreen/FullScreenContentMd.vue
View File

@@ -1,13 +1,11 @@
<template>
<div class="flex h-[calc(100vh-118px)] -mt-2 w-full">
<!-- Homemade carousel -->
<div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
<!-- Blur image BG (désactivation des interactions) -->
<div class="absolute inset-0 z-0 bg-cover bg-center blur-lg pointer-events-none"
:style="{ backgroundImage: `url(${currentImage})` }"></div>
<!-- back Btn -->
<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">
@@ -15,7 +13,6 @@
</v-btn>
</div>
<!-- Left arrow collée à gauche -->
<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>
@@ -23,10 +20,9 @@
</div>
<div class="flex items-center justify-center w-full h-full z-10">
<img :src="currentImage" alt="Image" class="max-w-full max-h-full object-contain" />
<component :is="getComponent(currentImage)" :src="currentImage" class="max-w-full max-h-full object-contain"/>
</div>
<!-- right arrow -->
<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>
@@ -34,39 +30,27 @@
</div>
</div>
<!-- Info -->
<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>
<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 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"
></message-list>
<message-list :subject-id="contentId" :messages="messages"></message-list>
</div>
<div class="border-b-2 p-6">
<post-message :subject-id="contentId"
></post-message>
<post-message :subject-id="contentId" @message-posted="addMessage"></post-message>
</div>
</div>
</div>
@@ -77,19 +61,24 @@ import {ref, computed, onMounted, watch} 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(() => {
return route.params.contentId;
});
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) {
@@ -98,13 +87,19 @@ const currentImage = computed(() => {
return '';
});
// Calculer si on a plus d'une image
const multipleImages = computed(() => {
if (data.value && data.value.urls) {
return data.value.urls.length > 1;
const multipleImages = computed(() => data.value?.urls.length > 1);
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 0;
});
return 'div';
}
const fetchContentData = async (contentId) => {
try {
@@ -115,28 +110,48 @@ const fetchContentData = async (contentId) => {
}
};
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;
}
}
onMounted(() => {
fetchContentData(contentId.value);
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, (newContentId) => {
fetchContentData(newContentId);
watch(contentId, async (newContentId) => {
await fetchContentData(newContentId);
messageCount.value = await messageStore.fetchMessageCount(newContentId);
messages.value = await messageStore.fetchMessages(newContentId);
});
</script>