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

Merged PR 107: Detached into main

Browse Source
This commit is contained in:
Dominic Villemure
2024-08-20 02:39:29 +00:00
parent f481ba685a 67c52b15cb
commit 7b603f4eb2
13 changed files with 921 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/contents/ContentList.vue
View File

@@ -2,12 +2,18 @@
<v-infinite-scroll :items="contents"
:onLoad="fetchContents"
class="gap-2">
class="md:gap-2">
<template v-for="content in contents" :key="content">
<content-card :content="content"
@content-deleted="onContentDeleted"
></content-card>
<template v-for="content in contents" :key="content.id">
<div class="d-sm-none mb-1">
<content-card-sm :content="content" @content-deleted="onContentDeleted"></content-card-sm>
</div>
<div class="d-none d-sm-flex">
<content-card-normal :content="content" @content-deleted="onContentDeleted"></content-card-normal>
</div>
</template>
<template v-slot:empty>
@@ -22,11 +28,12 @@
</template>
<script setup>
<script setup>
import {useClient} from '@/plugins/api.js';
import {ref, watch} from 'vue';
import ContentCard from "./ContentCard.vue";
import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
const props = defineProps({
creatorId: {
@@ -52,10 +59,8 @@ const creatorIdWatcher = watch(
() => props.creatorId,
(newCreatorId) => {
if (newCreatorId) {
// Reset contents and last_id when the creatorId changes
contents.value = []
last_id = null
// Fetch contents for the new creator
fetchContents({
done: () => {
}
@@ -65,7 +70,7 @@ const creatorIdWatcher = watch(
async function fetchContents({done, page_size = 10}) {
if (props.creatorId == null) return
try {
let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
if (last_id !== null) uri = uri + `&last_id=${last_id}`
@@ -94,4 +99,4 @@ async function fetchContents({done, page_size = 10}) {
}
}
</script>
</script>

171
src/views/contents/ContentPage.vue
View File

@@ -1,170 +1,13 @@
<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 class="d-sm-block d-md-block d-lg-none mb-1">
<full-screen-content-sm></full-screen-content-sm>
</div>
<div class="d-none d-lg-flex">
<full-screen-content-md></full-screen-content-md>
</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);
});
import FullScreenContentSm from "@/views/contents/contentfullscreen/FullScreenContentSm.vue";
import FullScreenContentMd from "@/views/contents/contentfullscreen/FullScreenContentMd.vue";
</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>

245
src/views/contents/contentcards/NContentCard.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<div class="shadow-md rounded-2xl bg-gray-50 border custom-border w-full mb-2 ">
<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 v-if="creatorIsCurrentUser" @click="editContent">
<v-list-item-title>Modifier le contenu</v-list-item-title>
</v-list-item>
<v-list-item v-if="creatorIsCurrentUser" @click="openDeleteConfirmationDialog">
<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="max-w-[800px]"
@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>
<v-dialog v-model="openDeleteConfirmationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl"
:style="{
border: `2px solid `
}">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center">
Supprimer ce contenu ?
</div>
<v-btn icon @click="openDeleteConfirmationModal = false" class="ml-auto mr-2" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<div class=" mr-2">
Êtes-vous sûr de vouloir supprimer le contenu ?
</div>
<div class="py-2 space-x-3">
<v-btn variant="flat"
@click="deleteContent()" class=" mt-5">
Oui
</v-btn>
<v-btn variant="outlined"
@click="openDeleteConfirmationModal = false" class=" mt-5">
Non
</v-btn>
</div>
</v-card>
</v-form>
</v-dialog>
</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';
import {useClient} from "@/plugins/api.js";
import {useAuthStore} from "@/stores/authStore.js";
const props = defineProps({
content: {
type: Object,
required: true,
}
});
const openDeleteConfirmationModal = ref(false);
const emits = defineEmits(['content-deleted'])
const contentId = computed(() => props.content.id)
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 authStore = useAuthStore()
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
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 openDeleteConfirmationDialog() {
openDeleteConfirmationModal.value = true;
}
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');
}
async function deleteContent() {
const client = useClient()
const response = await client.delete(`/api/contents/${contentId.value}`)
if (response.status >= 200 && response.status < 300) {
emits('content-deleted', contentId.value)
}
}
function reportContent() {
console.log('Reporter le contenu');
}
function redirectToContent() {
window.location.href = `/content/${props.content.id}`;
}
</script>
<style>
.custom-border {
border-color: #EAEBEC;
}
.hidden {
display: none;
}
.comment-active .v-icon {
color: #D63DAB;
}
</style>

265
src/views/contents/contentcards/SmContentCard.vue Normal file
View File

@@ -0,0 +1,265 @@
<template>
<div class="shadow-md bg-gray-50">
<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">
{{ 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 v-if="creatorIsCurrentUser" @click="editContent">
<v-list-item-title>Modifier le contenu</v-list-item-title>
</v-list-item>
<v-list-item v-if="creatorIsCurrentUser" @click="openDeleteConfirmationDialog">
<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-1">
<div class="flex justify-around ">
<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 ">Commentaires</h2>
<message-list
:subject-id="props.content.id"
:messages="messages"
></message-list>
</div>
<div class="py-1">
<post-message :subject-id="props.content.id"
@message-posted="addMessage"
></post-message>
</div>
</div>
</div>
<v-dialog v-model="openDeleteConfirmationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl"
:style="{
border: `2px solid `
}">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center">
Supprimer ce contenu ?
</div>
<v-btn icon @click="openDeleteConfirmationModal = false" class="ml-auto mr-2" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<div class=" mr-2">
Êtes-vous sûr de vouloir supprimer le contenu ?
</div>
<div class="py-2 space-x-3">
<v-btn variant="flat"
@click="deleteContent()" class=" mt-5">
Oui
</v-btn>
<v-btn variant="outlined"
@click="openDeleteConfirmationModal = false" class=" mt-5">
Non
</v-btn>
</div>
</v-card>
</v-form>
</v-dialog>
</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';
import {useClient} from "@/plugins/api.js";
import {useAuthStore} from "@/stores/authStore.js";
const props = defineProps({
content: {
type: Object,
required: true,
}
});
const openDeleteConfirmationModal = ref(false);
const emits = defineEmits(['content-deleted'])
const contentId = computed(() => props.content.id)
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 authStore = useAuthStore()
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
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 openDeleteConfirmationDialog() {
openDeleteConfirmationModal.value = true;
}
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');
}
async function deleteContent() {
const client = useClient()
const response = await client.delete(`/api/contents/${contentId.value}`)
if (response.status >= 200 && response.status < 300) {
emits('content-deleted', contentId.value)
}
}
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;
}
.v-carousel-item {
padding: 0; /* Supprime tout padding interne */
margin: 0; /* Supprime toute marge interne */
width: 100vw; /* Assure que chaque item occupe toute la largeur de l'écran */
}
.comment-active .v-icon {
color: #D63DAB;
}
</style>

170
src/views/contents/contentfullscreen/FullScreenContentMd.vue Normal file
View 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>

174
src/views/contents/contentfullscreen/FullScreenContentSm.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<div class="flex flex-col -mt-2">
<!-- Titre en haut de l'image -->
<div class="bg-white py-4 text-center font-semibold text-lg">
<div v-if="data && data.title">
{{ data.title }}
</div>
</div>
<!-- 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="flex flex-col 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.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: 100%;
}
.v-btn {
transition: background-color 0.2s ease;
}
.v-btn:hover {
background-color: #555;
}
.v-btn .v-icon {
color: white;
}
</style>

78
src/views/creators/CreatorBanner.vue
View File

@@ -1,53 +1,47 @@
<template>
<!-- Bannière-->
<div>
<div class="relative z-20">
<div>
<div class="relative z-20 -mt-2 md:mt-2">
<div>
<!-- Social Network UpperPart-->
<div class="py-4 px-4 min-h-14 md:rounded-t-2xl"
:style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
<div class="w-full flex justify-end gap-6 max-h-8">
<a
v-for="socialNetwork in GetSocialsUrls()"
:href="socialNetwork.url"
target="_blank"
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
<v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
<img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
alt="Tiktok">
<img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
alt="Website">
</a>
</div>
</div>
</div>
<!--Banner-->
<div class="relative">
<!--Banner-->
<div>
<!-- Social Network-->
<div class="py-4 px-4 min-h-14 md:rounded-t-none lg:rounded-t-2xl"
:style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
<div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
<a
v-for="socialNetwork in GetSocialsUrls()"
:href="socialNetwork.url"
target="_blank"
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
<v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
<img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
alt="Tiktok">
<img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
alt="Website">
</a>
</div>
</div>
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.35)]"
:src="creator.images.banner"
alt="Profile Banner" style="max-height: 425px">
</div>
<!--Banner & user info-->
<div class="relative">
<!--Banner-->
<div>
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.35)]"
:src="creator.images.banner"
alt="Profile Banner" style="max-height: 425px">
</div>
</div>
</div>
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
</div>
</div>
<!--actions - Lowerpart-->
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
</div>
</template>
<script setup>
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import BannerActions from "@/views/creators/banner/BannerActions.vue";
import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";
const props = defineProps({
creator: {type: Object, required: true},

2
src/views/creators/CreatorPage.vue
View File

@@ -16,7 +16,7 @@
</div>
</div>
<!-- Fallback when user try to access a non-existing creator -->
<div v-else>
<div v-if="loading">
<v-progress-linear indeterminate></v-progress-linear>

8
src/views/creators/banner/BannerActions.vue → src/views/creators/banner/bannerlower/BannerActions.vue
View File

@@ -1,8 +1,8 @@
<script setup>
import BannerActionsSm from "@/views/creators/banner/BannerActionsSm.vue";
import BannerActionsMd from "@/views/creators/banner/BannerActionsMd.vue";
import BannerActionsLg from "@/views/creators/banner/BannerActionsLg.vue";
import BannerActionsXl from "@/views/creators/banner/BannerActionsXl.vue";
import BannerActionsMd from "@/views/creators/banner/bannerlower/BannerActionsMd.vue";
import BannerActionsSm from "@/views/creators/banner/bannerlower/BannerActionsSm.vue";
import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg.vue";
import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue";
const props = defineProps({
creator: { type: Object, required: true }

2
src/views/creators/banner/BannerActionsLg.vue → src/views/creators/banner/bannerlower/BannerActionsLg.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative w-full">
<div class="relative w-full mb-5">
<div class="rounded-b-2xl"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
<div class="relative z-20">

0
src/views/creators/banner/BannerActionsMd.vue → src/views/creators/banner/bannerlower/BannerActionsMd.vue
View File

3
src/views/creators/banner/BannerActionsSm.vue → src/views/creators/banner/bannerlower/BannerActionsSm.vue
View File

@@ -6,7 +6,6 @@
borderBottom: `2px solid ${creator.colors.accent || '#000000'}`
}">
<div>
<!-- Logo-Name-Followers-->
<div class="flex flex-row relative z-20">
<div>
@@ -18,7 +17,7 @@
/>
</div>
<div class="flex flex-column text-white cap px-2 mt-1">
<div class="flex flex-column text-white capitalize px-2 mt-1">
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
<div>{{ creator.subscriberCount }} Abonnés</div>
</div>

2
src/views/creators/banner/BannerActionsXl.vue → src/views/creators/banner/bannerlower/BannerActionsXl.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative w-full">
<div class="relative w-full mb-5">
<div class="rounded-b-2xl"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
<div class="relative z-20">