Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'
git-subtree-dir: frontend git-subtree-mainline:205a3bd14bgit-subtree-split:c070c0315d
This commit is contained in:
285
frontend/src/views/creators/BannerActions.vue
Normal file
285
frontend/src/views/creators/BannerActions.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<script setup>
|
||||
import { useClient } from '@/plugins/api.js';
|
||||
import { useBrandingStore } from '@/stores/brandingStore.js';
|
||||
import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import IconAccountVerified from "@/components/icons/IconAccountVerified.vue";
|
||||
|
||||
const brandingStore = useBrandingStore();
|
||||
const isMobile = ref(false);
|
||||
const creator = ref(null);
|
||||
const baseURL = window.location.origin;
|
||||
const creatorName = window.location.pathname.split('/@').pop();
|
||||
|
||||
function updateIsMobile() {
|
||||
isMobile.value = window.innerWidth <= 640;
|
||||
}
|
||||
|
||||
// Récupération des URLs des réseaux sociaux
|
||||
function GetSocialsUrls() {
|
||||
const socials = [];
|
||||
const brandingSocials = brandingStore.value.socials;
|
||||
|
||||
if (brandingSocials.facebookUrl) {
|
||||
socials.push({
|
||||
icon: 'mdi-facebook',
|
||||
url: brandingSocials.facebookUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.instagramUrl) {
|
||||
socials.push({
|
||||
icon: 'mdi-instagram',
|
||||
url: brandingSocials.instagramUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.xUrl) {
|
||||
socials.push({
|
||||
icon: 'mdi-twitter',
|
||||
url: brandingSocials.xUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.linkedInUrl) {
|
||||
socials.push({
|
||||
icon: 'mdi-linkedin',
|
||||
url: brandingSocials.linkedInUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.tikTokUrl) {
|
||||
socials.push({
|
||||
icon: '/images/socials/tiktok-white.png',
|
||||
url: brandingSocials.tikTokUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.youtubeUrl) {
|
||||
socials.push({
|
||||
icon: 'mdi-youtube',
|
||||
url: brandingSocials.youtubeUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.redditUrl) {
|
||||
socials.push({
|
||||
icon: 'mdi-reddit',
|
||||
url: brandingSocials.redditUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.websiteUrl) {
|
||||
socials.push({
|
||||
icon: 'mdi-web',
|
||||
url: brandingSocials.websiteUrl,
|
||||
});
|
||||
}
|
||||
|
||||
return socials;
|
||||
}
|
||||
|
||||
const isSticky = ref(false);
|
||||
const mainContainer = ref(null);
|
||||
|
||||
onMounted(async () => {
|
||||
updateIsMobile();
|
||||
window.addEventListener('resize', updateIsMobile);
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
isSticky.value = !entry.isIntersecting;
|
||||
},
|
||||
{ threshold: 0 }
|
||||
);
|
||||
|
||||
if (mainContainer.value) {
|
||||
observer.observe(mainContainer.value);
|
||||
}
|
||||
|
||||
const client = useClient();
|
||||
|
||||
try {
|
||||
const creatorResponse = await client.get(`/api/creators/@${creatorName}`);
|
||||
creator.value = creatorResponse.data;
|
||||
} catch (error) {
|
||||
creator.value = undefined;
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updateIsMobile);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-column w-full">
|
||||
<!-- Container principal avec le profil -->
|
||||
<div class="relative w-full shadow-xl rounded-2xl">
|
||||
<div
|
||||
ref="mainContainer"
|
||||
class="rounded-b-2xl shadow-2xl"
|
||||
:style="{
|
||||
backgroundColor: brandingStore.colors.primary,
|
||||
boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<!-- Profile et Info -->
|
||||
<div>
|
||||
<!-- Version PC -->
|
||||
<div v-show="!isMobile" class="items-start">
|
||||
<div>
|
||||
<img
|
||||
class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-5"
|
||||
:src="
|
||||
brandingStore.value.images.logo
|
||||
? brandingStore.value.images.logo
|
||||
: '/images/placeholders/logo.png'
|
||||
"
|
||||
alt="Profile Picture"
|
||||
:style="{
|
||||
borderColor: brandingStore.colors.secondary,
|
||||
height: '190px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ml-64 w-25 min-w-60 flex flex-row"
|
||||
:style="{ color: brandingStore.colors.onPrimary }"
|
||||
>
|
||||
<div v-show="brandingStore.value.verified" class="text-blue m-4 align-content-center verifiedhook">
|
||||
<icon-account-verified></icon-account-verified>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<span class="capitalize text-3xl titlepos">
|
||||
{{ brandingStore.value.name }}
|
||||
</span>
|
||||
<span class="capitalize text-lg titlepos">
|
||||
{{ brandingStore.value.title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version Mobile -->
|
||||
<div class="relative">
|
||||
<div
|
||||
:style="{
|
||||
borderColor: brandingStore.colors.secondary,
|
||||
height: '80px',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-show="isMobile"
|
||||
class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
class="shadow-2xl rounded-full border-solid z-20 max-w-[150px]"
|
||||
:src="
|
||||
brandingStore.value.images.logo
|
||||
? brandingStore.value.images.logo
|
||||
: '/images/placeholders/logo.png'
|
||||
"
|
||||
alt="Profile Picture"
|
||||
:style="{ height: '135px' }"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="brandingStore.value.verified" class="text-blue m-4 align-content-center">
|
||||
<icon-account-verified></icon-account-verified>
|
||||
</div>
|
||||
<div class="ml-3 text-white w-full flex flex-col items-start">
|
||||
<p class="capitalize text-2xl">
|
||||
{{ brandingStore.value.name }}
|
||||
</p>
|
||||
<p class="capitalize text-md">
|
||||
{{ brandingStore.value.title }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions - Follow et Register -->
|
||||
<!-- <div class="flex flex-col items-center justify-center w-full">-->
|
||||
<!-- <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">-->
|
||||
<!-- <!–<subscribe-button></subscribe-button>–>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<!-- Bouton Support -->
|
||||
<div
|
||||
v-show="brandingStore.value.acceptDonation"
|
||||
class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
|
||||
:class="{
|
||||
'absolute bottom-6 right-8 w-64 h-28 ': !isMobile,
|
||||
'fixed bottom-0 left-0 right-0 w-full h-16': isMobile,
|
||||
}"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary }"
|
||||
>
|
||||
<donation-button-banner
|
||||
v-if="creator"
|
||||
:creator-id="creator.id"
|
||||
:creator-name="creator.name"
|
||||
:on-success-url="baseURL + '/paymentcompleted/' + creator.id"
|
||||
:on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
|
||||
></donation-button-banner>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section pour les icônes de réseaux sociaux -->
|
||||
<div
|
||||
class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
|
||||
:style="{
|
||||
backgroundColor: brandingStore.colors.secondary,
|
||||
boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
|
||||
}"
|
||||
>
|
||||
<div class="flex justify-evenly mt-3 w-full">
|
||||
<div class="flex flex-row space-x-6 justify-center">
|
||||
<a
|
||||
v-for="socialNetwork in GetSocialsUrls()"
|
||||
:key="socialNetwork.url"
|
||||
:href="socialNetwork.url"
|
||||
target="_blank"
|
||||
class="text-white text-md 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-else
|
||||
:src="socialNetwork.icon"
|
||||
class="w-6 h-6 mt-0.5"
|
||||
:alt="socialNetwork.url"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-button {
|
||||
@apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
@apply bg-purple-800;
|
||||
}
|
||||
|
||||
/* Transition CSS */
|
||||
.transition-all {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.titlepos {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
}
|
||||
.verifiedhook{
|
||||
position: relative;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user