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

Passing the right data to donation-button-banner

Browse Source
This commit is contained in:
Karl Carriere
2024-12-17 09:49:07 -05:00
parent 8875038270
commit ccc0bef233
1 changed files with 108 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/views/creators/BannerActions.vue
View File

@@ -1,13 +1,14 @@
<script setup> <script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'; import { useBrandingStore } from '@/stores/brandingStore.js';
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue"; import { useCreatorProfileStore } from '@/stores/creatorProfileStore';
import {useBrandingStore} from "@/stores/brandingStore.js"; import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
const creatorProfileStore = useCreatorProfileStore();
const brandingStore = useBrandingStore(); const brandingStore = useBrandingStore();
const isMobile = ref(false); const isMobile = ref(false);
function updateIsMobile() { function updateIsMobile() {
isMobile.value = window.innerWidth <= 640; isMobile.value = window.innerWidth <= 640;
} }
@@ -19,49 +20,49 @@ function GetSocialsUrls() {
if (brandingSocials.facebookUrl) { if (brandingSocials.facebookUrl) {
socials.push({ socials.push({
icon: "mdi-facebook", icon: 'mdi-facebook',
url: brandingSocials.facebookUrl, url: brandingSocials.facebookUrl,
}); });
} }
if (brandingSocials.instagramUrl) { if (brandingSocials.instagramUrl) {
socials.push({ socials.push({
icon: "mdi-instagram", icon: 'mdi-instagram',
url: brandingSocials.instagramUrl, url: brandingSocials.instagramUrl,
}); });
} }
if (brandingSocials.xUrl) { if (brandingSocials.xUrl) {
socials.push({ socials.push({
icon: "mdi-twitter", icon: 'mdi-twitter',
url: brandingSocials.xUrl, url: brandingSocials.xUrl,
}); });
} }
if (brandingSocials.linkedInUrl) { if (brandingSocials.linkedInUrl) {
socials.push({ socials.push({
icon: "mdi-linkedin", icon: 'mdi-linkedin',
url: brandingSocials.linkedInUrl, url: brandingSocials.linkedInUrl,
}); });
} }
if (brandingSocials.tikTokUrl) { if (brandingSocials.tikTokUrl) {
socials.push({ socials.push({
icon: "/images/socials/tiktok-white.png", icon: '/images/socials/tiktok-white.png',
url: brandingSocials.tikTokUrl, url: brandingSocials.tikTokUrl,
}); });
} }
if (brandingSocials.youtubeUrl) { if (brandingSocials.youtubeUrl) {
socials.push({ socials.push({
icon: "mdi-youtube", icon: 'mdi-youtube',
url: brandingSocials.youtubeUrl, url: brandingSocials.youtubeUrl,
}); });
} }
if (brandingSocials.redditUrl) { if (brandingSocials.redditUrl) {
socials.push({ socials.push({
icon: "mdi-reddit", icon: 'mdi-reddit',
url: brandingSocials.redditUrl, url: brandingSocials.redditUrl,
}); });
} }
if (brandingSocials.websiteUrl) { if (brandingSocials.websiteUrl) {
socials.push({ socials.push({
icon: "mdi-web", icon: 'mdi-web',
url: brandingSocials.websiteUrl, url: brandingSocials.websiteUrl,
}); });
} }
@@ -69,14 +70,12 @@ function GetSocialsUrls() {
return socials; return socials;
} }
const isSticky = ref(false); const isSticky = ref(false);
const mainContainer = ref(null); const mainContainer = ref(null);
onMounted(() => { onMounted(async () => {
updateIsMobile(); updateIsMobile();
window.addEventListener('resize', updateIsMobile);
window.addEventListener("resize", updateIsMobile);
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
@@ -88,10 +87,13 @@ onMounted(() => {
if (mainContainer.value) { if (mainContainer.value) {
observer.observe(mainContainer.value); observer.observe(mainContainer.value);
} }
const creatorName = window.location.pathname.split('/@').pop();
await creatorProfileStore.fetchSpecificCreatorProfile(creatorName);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener("resize", updateIsMobile); window.removeEventListener('resize', updateIsMobile);
}); });
</script> </script>
@@ -102,7 +104,10 @@ onBeforeUnmount(() => {
<div <div
ref="mainContainer" ref="mainContainer"
class="rounded-b-2xl shadow-2xl" class="rounded-b-2xl shadow-2xl"
:style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }" :style="{
backgroundColor: brandingStore.colors.primary,
boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
}"
> >
<div> <div>
<!-- Profile et Info --> <!-- Profile et Info -->
@@ -112,40 +117,68 @@ onBeforeUnmount(() => {
<div> <div>
<img <img
class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10" class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'" :src="
brandingStore.value.images.logo
? brandingStore.value.images.logo
: '/images/placeholders/logo.png'
"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: brandingStore.colors.secondary, height: '190px' }" :style="{
borderColor: brandingStore.colors.secondary,
height: '190px',
}"
/> />
</div> </div>
<div class="ml-64 w-25 min-w-60 flex flex-col" :style="{color: brandingStore.colors.onPrimary}"> <div
<p class="capitalize text-3xl mt-4">{{ brandingStore.value.name }}</p> class="ml-64 w-25 min-w-60 flex flex-col"
<p class="capitalize text-lg -mb-14">{{ brandingStore.value.title }}</p> :style="{ color: brandingStore.colors.onPrimary }"
>
<p class="capitalize text-3xl mt-4">
{{ brandingStore.value.name }}
</p>
<p class="capitalize text-lg -mb-14">
{{ brandingStore.value.title }}
</p>
</div> </div>
</div> </div>
<!-- Version Mobile --> <!-- Version Mobile -->
<div class="relative"> <div class="relative">
<div :style="{ borderColor: brandingStore.colors.secondary, height: '60px' }"> <div
<div v-show="isMobile" class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30"> :style="{
borderColor: brandingStore.colors.secondary,
height: '60px',
}"
>
<div
v-show="isMobile"
class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30"
>
<div> <div>
<img <img
class="shadow-2xl rounded-full border-solid z-20 max-w-[150px]" 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'" :src="
brandingStore.value.images.logo
? brandingStore.value.images.logo
: '/images/placeholders/logo.png'
"
alt="Profile Picture" alt="Profile Picture"
:style="{ height: '135px' }" :style="{ height: '135px' }"
/> />
</div> </div>
<div class="ml-3 text-white w-full flex flex-col items-start"> <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-2xl">
<p class="capitalize text-md">{{ brandingStore.value.title }}</p> {{ brandingStore.value.name }}
</p>
<p class="capitalize text-md">
{{ brandingStore.value.title }}
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Actions - Follow et Register --> <!-- Actions - Follow et Register -->
<div class="flex flex-col items-center justify-center w-full"> <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"> <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
@@ -159,13 +192,13 @@ onBeforeUnmount(() => {
class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50" class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
:class="{ :class="{
'absolute bottom-6 right-8 w-64 h-28 ': !isMobile, 'absolute bottom-6 right-8 w-64 h-28 ': !isMobile,
'fixed bottom-0 left-0 right-0 w-full h-16': isMobile 'fixed bottom-0 left-0 right-0 w-full h-16': isMobile,
}" }"
:style="{ backgroundColor: brandingStore.colors.secondary }" :style="{ backgroundColor: brandingStore.colors.secondary }"
> >
<donation-button-banner <donation-button-banner
:creator-id="creatorId" :creator-id="creatorProfileStore.creator.id"
:creator-name="creatorName" :creator-name="creatorProfileStore.creator.name"
:on-success-url="successUrl" :on-success-url="successUrl"
:on-cancelled-url="cancelledUrl" :on-cancelled-url="cancelledUrl"
></donation-button-banner> ></donation-button-banner>
@@ -176,7 +209,10 @@ onBeforeUnmount(() => {
<!-- Section pour les icônes de réseaux sociaux --> <!-- Section pour les icônes de réseaux sociaux -->
<div <div
class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center" 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)' }" :style="{
backgroundColor: brandingStore.colors.secondary,
boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
}"
> >
<div class="flex justify-evenly mt-4 w-full"> <div class="flex justify-evenly mt-4 w-full">
<div class="flex flex-row space-x-6 justify-center"> <div class="flex flex-row space-x-6 justify-center">
@@ -203,10 +239,9 @@ onBeforeUnmount(() => {
</div> </div>
</template> </template>
<style scoped> <style scoped>
.nav-button { .nav-button {
@apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4 @apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4;
} }
.nav-button:hover { .nav-button:hover {
@@ -218,6 +253,3 @@ onBeforeUnmount(() => {
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
</style> </style>