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

184
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,29 +70,30 @@ 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]) => {
isSticky.value = !entry.isIntersecting; isSticky.value = !entry.isIntersecting;
}, },
{threshold: 0} { threshold: 0 }
); );
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>
@@ -100,101 +102,135 @@ onBeforeUnmount(() => {
<!-- Container principal avec le profil --> <!-- Container principal avec le profil -->
<div class="relative w-full shadow-xl rounded-2xl"> <div class="relative w-full shadow-xl rounded-2xl">
<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 -->
<div> <div>
<!-- Version PC --> <!-- Version PC -->
<div v-show="!isMobile" class=" items-start"> <div v-show="!isMobile" class="items-start">
<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="
alt="Profile Picture" brandingStore.value.images.logo
:style="{ borderColor: brandingStore.colors.secondary, height: '190px' }" ? brandingStore.value.images.logo
: '/images/placeholders/logo.png'
"
alt="Profile Picture"
: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="
alt="Profile Picture" brandingStore.value.images.logo
:style="{height: '135px'}" ? brandingStore.value.images.logo
: '/images/placeholders/logo.png'
"
alt="Profile Picture"
: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">
<!--<subscribe-button></subscribe-button>--> <!--<subscribe-button></subscribe-button>-->
</div> </div>
</div> </div>
</div> </div>
<!-- Bouton Support --> <!-- Bouton Support -->
<div <div
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>
</div> </div>
</div> </div>
</div> </div>
<!-- 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">
<a <a
v-for="socialNetwork in GetSocialsUrls()" v-for="socialNetwork in GetSocialsUrls()"
:key="socialNetwork.url" :key="socialNetwork.url"
:href="socialNetwork.url" :href="socialNetwork.url"
target="_blank" target="_blank"
class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500" 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')"> <v-icon v-if="socialNetwork.icon.includes('mdi')">
{{ socialNetwork.icon }} {{ socialNetwork.icon }}
</v-icon> </v-icon>
<img <img
v-else v-else
:src="socialNetwork.icon" :src="socialNetwork.icon"
class="w-6 h-6 mt-0.5" class="w-6 h-6 mt-0.5"
:alt="socialNetwork.url" :alt="socialNetwork.url"
/> />
</a> </a>
</div> </div>
@@ -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>