Update content page fullscreen
This commit is contained in:
PascalMarchesseault
170
src/views/contents/contentfullscreen/FullScreenContentMd.vue
Normal file
170
src/views/contents/contentfullscreen/FullScreenContentMd.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="flex h-[calc(100vh-118px)] -mt-2">
|
||||
<!-- 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">
|
||||
<v-icon class="text-black bg-white rounded-full" size="36">mdi-close</v-icon>
|
||||
</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>
|
||||
</v-btn>
|
||||
</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" />
|
||||
</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>
|
||||
</v-btn>
|
||||
</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 v-if="data && data.createdByName">
|
||||
Créé par: {{ data.createdByName }}
|
||||
</div>
|
||||
<div v-if="data && data.title" class="font-semibold">
|
||||
Titre: {{ data.title }}
|
||||
</div>
|
||||
<div v-if="data && data.description">
|
||||
Description: {{ data.description }}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-around py-2">
|
||||
<v-btn variant="plain" icon @click="likeContent">
|
||||
<v-icon :color="'#313131'">mdi-thumb-up-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn variant="plain" icon @click="dislikeContent">
|
||||
<v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<donation-button v-if="data"
|
||||
:color-border="data.colorMenu"
|
||||
:color-accent="data.colorAccent"
|
||||
:creator-id="data.createdBy"
|
||||
:creator-name="data.createdByName"
|
||||
:creator-logo="data.createdByPortraitUrl"
|
||||
iconColorClass="text-black"
|
||||
></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>
|
||||
</div>
|
||||
|
||||
<div class="border-b-2 p-6">
|
||||
<post-message :subject-id="contentId"
|
||||
></post-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 {useClient} from "@/plugins/api.js";
|
||||
import {useRoute} from 'vue-router';
|
||||
|
||||
const data = ref(null);
|
||||
const currentImageIndex = ref(0);
|
||||
|
||||
const route = useRoute();
|
||||
const client = useClient();
|
||||
|
||||
const contentId = computed(() => {
|
||||
return route.params.contentId;
|
||||
});
|
||||
|
||||
const currentImage = computed(() => {
|
||||
if (data.value && data.value.urls) {
|
||||
return data.value.urls[currentImageIndex.value] || '';
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// Calculer si on a plus d'une image
|
||||
const multipleImages = computed(() => {
|
||||
if (data.value && data.value.urls) {
|
||||
return data.value.urls.length > 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const fetchContentData = async (contentId) => {
|
||||
try {
|
||||
const response = await client.get(`/api/contents/${contentId}`);
|
||||
data.value = response.data;
|
||||
console.table(data.value)
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchContentData(contentId.value);
|
||||
});
|
||||
|
||||
watch(contentId, (newContentId) => {
|
||||
fetchContentData(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>
|
||||
Reference in New Issue
Block a user