125 lines
4.7 KiB
Vue
125 lines
4.7 KiB
Vue
<template>
|
|
<div class="relative w-full">
|
|
<div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
|
|
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
|
|
|
|
<!-- Logo & User Info -->
|
|
<div class="relative z-20">
|
|
<div class="flex flex-row items-center py-2">
|
|
<div>
|
|
<img
|
|
class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
|
|
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
|
|
alt="Profile Picture"
|
|
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
|
|
/>
|
|
</div>
|
|
<div class="ml-72 text-white mr-10">
|
|
<p class="capitalize text-4xl font-bold">{{ creator.name }}</p>
|
|
<div class="text-2xl text-white flex flex-row align-center">
|
|
{{ creator.about.title }}
|
|
<creator-about class="px-2" :creator="creator"></creator-about>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row ml-auto space-x-2.5">
|
|
<donation-button-banner
|
|
:color-border="creator.colors.menu"
|
|
:color-accent="creator.colors.accent"
|
|
:creator-id="creator.id"
|
|
:creator-name="creator.name"
|
|
:creator-logo="creator.images.logo"
|
|
iconColorClass="text-white">
|
|
</donation-button-banner>
|
|
<div class="flex flex-column">
|
|
<!-- Bouton abonnement affiché seulement si non abonné -->
|
|
<subscribe-button
|
|
|
|
:creator="creator"
|
|
:color-border="creator.colors.menu">
|
|
</subscribe-button>
|
|
<div class="font-bold text-white flex justify-end mr-5 py-1.5">
|
|
{{ creator.subscriberCount }} {{ $t('banner.subscription') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conteneur sticky -->
|
|
<div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
|
|
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
|
|
<div class="shadow-3xl flex flex-row items-center py-2 px-2">
|
|
<div>
|
|
<img
|
|
class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
|
|
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
|
|
alt="Profile Picture"
|
|
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
|
|
/>
|
|
</div>
|
|
<div class="ml-5 text-white">
|
|
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
|
|
</div>
|
|
<div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
|
|
|
|
<donation-button-banner-slim
|
|
class=""
|
|
:color-border="creator.colors.menu"
|
|
:color-accent="creator.colors.accent"
|
|
:creator-id="creator.id"
|
|
:creator-name="creator.name"
|
|
:creator-logo="creator.images.logo"
|
|
>
|
|
</donation-button-banner-slim>
|
|
|
|
<!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
|
|
<subscribe-button-slim
|
|
v-if="!isSubscribed"
|
|
:creator="creator"
|
|
:color-border="creator.colors.menu">
|
|
</subscribe-button-slim>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
|
|
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
|
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
|
|
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
|
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
|
|
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
|
|
|
|
const props = defineProps({
|
|
creator: { type: Object, required: true }
|
|
});
|
|
|
|
const subscriptionStore = useSubscriptionStore();
|
|
|
|
// Calculer si l'utilisateur est abonné
|
|
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
|
|
|
|
const isSticky = ref(false);
|
|
const mainContainer = ref(null);
|
|
|
|
onMounted(() => {
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
isSticky.value = !entry.isIntersecting;
|
|
},
|
|
{ threshold: 0 }
|
|
);
|
|
|
|
if (mainContainer.value) {
|
|
observer.observe(mainContainer.value);
|
|
}
|
|
});
|
|
</script>
|
|
|