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

Adds brandingStore.

Browse Source 
Split userStore into userProfileStore and creatorProfileStore
This commit is contained in:
Jonathan Bourdon
2024-09-22 02:42:26 -04:00
parent 3cfb3951e3
commit cd51474d08
36 changed files with 458 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<template>
<div class="shadow-lg rounded-2xl"
:style="{ backgroundColor: creator.colors.secondary}">
:style="{ backgroundColor: branding.value.colors.secondary}">
<div class="relative z-20">
<!--Banner-->
@@ -8,7 +8,7 @@
<div>
<img
class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
:src="creator.images.banner ? creator.images.banner : '/images/placeholders/banner.png'"
:src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
alt="Profile Banner"
style="max-height: 425px"
>
@@ -17,23 +17,15 @@
</div>
<!--actions - Lowerpart-->
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
<banner-actions></banner-actions>
</div>
</template>
<script setup>
import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
creator: {type: Object, required: true},
});
const emits = defineEmits(['content-posted'])
function addContent(content) {
emits('content-posted', content)
}
const branding = useBrandingStore()
</script>

16
src/views/creators/CreatorHome.vue
View File

@@ -5,11 +5,9 @@
<creator-news-summary></creator-news-summary>
</div>
<div class="px-4" :style="{ color: userStore.creator.colors.onBackground}">
<h1>{{ userStore.creator.about.title }}</h1>
<p>
{{ userStore.creator.about.description }}
</p>
<div class="px-4" :style="{ color: brandingStore.value.colors.onBackground}">
<h1>TEST</h1>
<p>GET ME AN EDITOR NOW!</p>
</div>
</div>
@@ -17,10 +15,12 @@
</template>
<script setup>
import CreatorNewsSummary from "@/views/creators/CreatorNewsSummary.vue"
import {useUserStore} from "@/stores/userStore.js";
const userStore = useUserStore()
import CreatorNewsSummary from "@/views/creators/CreatorNewsSummary.vue"
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
</script>
<style scoped>

41
src/views/creators/CreatorLayout.vue
View File

@@ -1,11 +1,9 @@
<template>
<div :style="{ backgroundColor: creator.colors.background }">
<div :style="{ backgroundColor: brandingStore.value.colors.background }">
<div class="max-w-[1500px] mx-auto">
<div v-if="creator && creator.id">
<creator-banner :creator="creator"
@content-posted="contentPosted"
></creator-banner>
<div v-if="brandingStore.value && brandingStore.value.id">
<creator-banner></creator-banner>
</div>
<div v-else>
<div v-if="loading">
@@ -27,7 +25,7 @@
</div>
<div class="max-w-80">
<rewards :creator="creator"></rewards>
<rewards></rewards>
</div>
</div>
@@ -45,34 +43,7 @@ import {useClient} from "@/plugins/api.js";
import CreatorBanner from "@/views/creators/CreatorBanner.vue";
import Rewards from "@/views/creators/Rewards.vue";
import Footer from "@/views/main/Footer.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const creator = ref(null)
const loading = ref(true)
const contents = ref([])
const client = useClient()
const route = useRoute()
function contentPosted(content) {
contents.value.unshift(content)
}
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
watch(
() => route.params.creator,
async () => await fetchCreatorData(route.params.creator)
)
const fetchCreatorData = async (creatorAlias) => {
try {
loading.value = true
const response = await client.get(`/api/creators/@${creatorAlias}`)
creator.value = response.data
} catch (error) {
console.error(`Error fetching content: ${error}`)
} finally {
loading.value = false
}
}
const brandingStore = useBrandingStore()
</script>

8
src/views/creators/CreatorNewsSummary.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
:style="{ color: brandingStore.value.colors.onPrimary, backgroundColor: brandingStore.value.colors.primary}">
Actualité
</div>
<div v-for="(item, index) in articles"
class="my-1 text-white"
:key="index"
:style="{ backgroundColor: userStore.creator.colors.primary }">
:style="{ backgroundColor: brandingStore.value.colors.primary }">
<div class="flex justify-between items-center border-b-2 border-white p-2 mx-2">
<p class="text-xl tracking-[8px]">
@@ -64,9 +64,9 @@
<script setup>
import {ref} from 'vue';
import {useUserStore} from "@/stores/userStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const userStore = useUserStore()
const brandingStore = useBrandingStore()
const articles = ref([
{

35
src/views/creators/DonationButton.vue
View File

@@ -6,20 +6,20 @@
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens!
</div>
<div class="flex flex-row align-center px-3">
<img
:src="creatorLogo"
:src="brandingStore.value.images.logo"
alt="Profile Image"
class="rounded-full"
width="40"
height="40"
:style="{ border: `2px solid ${colorAccent}` }">
<div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
:style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
@@ -50,7 +50,8 @@
clearable
></v-textarea>
<v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
<v-btn variant="outlined"
:style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
@click="goPay()" class="w-full mt-5">
Envoyez
</v-btn>
@@ -68,34 +69,29 @@
<v-card-actions>
<v-spacer></v-spacer>
<v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
<v-btn block class="ma-auto"
style="width: 200px;"
@click="closeDialog()">Annuler
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template>
<script setup>
import {useClient} from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js';
import {computed, onMounted, ref} from 'vue';
import {onMounted, ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
const props = defineProps({
colorBorder: {required: true},
colorAccent: {required: true},
creatorId: {type: String, required: true},
creatorName: {type: String, required: true},
creatorLogo: {required: true},
iconColorClass: {default: 'text-black'}
});
const colorBorder = computed(() => props.colorBorder)
const colorAccent = computed(() => props.colorAccent)
const creatorId = computed(() => props.creatorId)
const creatorName = computed(() => props.creatorName)
const creatorLogo = computed(() => props.creatorLogo)
const donationModal = ref(false);
function openDonationDialog() {
@@ -145,6 +141,7 @@ function closeDialog() {
checkout.destroy();
}
}
async function goPay() {
isPaymentDialogActive.value = true;

46
src/views/creators/DonationButtonBanner.vue
View File

@@ -1,28 +1,32 @@
<template>
<v-btn :style="{
backgroundColor: colorBorder, color: 'white',
borderRadius: '8px', padding:'20px 24px',
display: 'flex', alignItems: 'center',
justifyContent: 'center' }" @click="openDonationDialog()">
<div class="font-bold"> Je soutiens </div>
backgroundColor: brandingStore.value.colors.primary,
color: 'white',
borderRadius: '8px',
padding:'20px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center' }"
@click="openDonationDialog()">
<div class="font-bold"> Je soutiens</div>
</v-btn>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens!
</div>
<div class="flex flex-row align-center px-3">
<img
:src="creatorLogo"
:src="brandingStore.value.image.logoUrl"
alt="Profile Image"
class="rounded-full"
width="40"
height="40"
:style="{ border: `2px solid ${colorAccent}` }">
<div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
:style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
@@ -53,7 +57,7 @@
clearable
></v-textarea>
<v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
<v-btn variant="outlined" :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
@click="goPay()" class="w-full mt-5">
Envoyez
</v-btn>
@@ -76,28 +80,16 @@
</v-card>
</template>
</v-dialog>
</template>
<script setup>
import {useClient} from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js';
import {computed, onMounted, ref} from 'vue';
import {onMounted, ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
colorBorder: {required: true},
colorAccent: {required: true},
creatorId: {type: String, required: true},
creatorName: {type: String, required: true},
creatorLogo: {required: true},
iconColorClass: {default: 'text-black'}
});
const colorBorder = computed(() => props.colorBorder)
const colorAccent = computed(() => props.colorAccent)
const creatorId = computed(() => props.creatorId)
const creatorName = computed(() => props.creatorName)
const creatorLogo = computed(() => props.creatorLogo)
const brandingStore = useBrandingStore()
const donationModal = ref(false);
@@ -109,7 +101,6 @@ function closeDonationDialog() {
donationModal.value = false
}
const isPaymentDialogActive = ref(false);
const tipAmount = ref(0);
@@ -148,6 +139,7 @@ function closeDialog() {
checkout.destroy();
}
}
async function goPay() {
isPaymentDialogActive.value = true;

50
src/views/creators/DonationButtonBannerSlim.vue
View File

@@ -1,28 +1,32 @@
<template>
<v-btn :style="{
backgroundColor: colorBorder, color: 'white',
borderRadius: '8px', padding:'0px 24px',
display: 'flex', alignItems: 'center',
justifyContent: 'center' }" @click="openDonationDialog()">
<div class="font-bold"> Je soutiens </div>
<v-btn :style="{
backgroundColor: brandingStore.value.colors.primary,
color: 'white',
borderRadius: '8px',
padding:'0px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center' }"
@click="openDonationDialog()">
<div class="font-bold">Je soutiens</div>
</v-btn>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens!
</div>
<div class="flex flex-row align-center px-3">
<img
:src="creatorLogo"
:src="brandingStore.value.images.logo"
alt="Profile Image"
class="rounded-full"
width="40"
height="40"
:style="{ border: `2px solid ${colorAccent}` }">
<div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
:style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
@@ -53,7 +57,8 @@
clearable
></v-textarea>
<v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
<v-btn variant="outlined"
:style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
@click="goPay()" class="w-full mt-5">
Envoyez
</v-btn>
@@ -71,33 +76,21 @@
<v-card-actions>
<v-spacer></v-spacer>
<v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
<v-btn block class="ma-auto" style="width: 200px;" @click="closeDialog()">Annuler</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template>
<script setup>
import {useClient} from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js';
import {computed, onMounted, ref} from 'vue';
import {onMounted, ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
colorBorder: {required: true},
colorAccent: {required: true},
creatorId: {type: String, required: true},
creatorName: {type: String, required: true},
creatorLogo: {required: true},
iconColorClass: {default: 'text-black'}
});
const colorBorder = computed(() => props.colorBorder)
const colorAccent = computed(() => props.colorAccent)
const creatorId = computed(() => props.creatorId)
const creatorName = computed(() => props.creatorName)
const creatorLogo = computed(() => props.creatorLogo)
const brandingStore = useBrandingStore()
const donationModal = ref(false);
@@ -148,6 +141,7 @@ function closeDialog() {
checkout.destroy();
}
}
async function goPay() {
isPaymentDialogActive.value = true;

48
src/views/creators/FollowButton.vue
View File

@@ -1,27 +1,22 @@
<script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {computed, ref} from "vue";
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
creator: {type: Object, required: true},
backgroundColor: {required: true},
});
const colorBorder = computed(() => props.colorBorder);
const brandingStore = useBrandingStore()
const subscriptionStore = useSubscriptionStore();
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
function subscribeToCreator() {
subscriptionStore.subscribeTo(props.creator.id);
subscriptionStore.subscribeTo(brandingStore.value.id);
}
// Référence pour contrôler l'affichage du modal
const showUnsubscribeModal = ref(false);
function unsubscribeFromCreator() {
subscriptionStore.unsubscribeFrom(props.creator.id);
subscriptionStore.unsubscribeFrom(brandingStore.value.id);
// Fermer le modal après désabonnement
showUnsubscribeModal.value = false;
}
@@ -33,7 +28,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: backgroundColor,
backgroundColor: brandingStore.value.colors.secondary,
color: 'white',
borderRadius: '8px 0 0 8px',
padding: '10px 24px',
@@ -50,17 +45,17 @@ function unsubscribeFromCreator() {
<template v-else>
<v-btn
:style="{
width: '150px',
height: '28px',
backgroundColor: backgroundColor,
color: 'white',
:style="{
width: '150px',
height: '28px',
backgroundColor: brandingStore.value.colors.secondary,
color: 'white',
borderRadius: '8px 0 0 8px',
padding: '10px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background-color 0.3s ease'
padding: '10px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background-color 0.3s ease'
}"
@click="showUnsubscribeModal = true"
>
@@ -70,7 +65,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${creator.colors.menu}` }">
:style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center">
@@ -87,12 +82,13 @@ function unsubscribeFromCreator() {
</v-btn>
<v-btn class="flex-grow-1"
:style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
:style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
variant="outlined"
@click="showUnsubscribeModal = false">
<div :style="{ color: creator.colors.menu }">Non</div>
<div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-dialog>
</template>

10
src/views/creators/Rewards.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
:style="{ color: brandingStore.value.colors.onPrimary, backgroundColor: brandingStore.value.colors.primary}">
Récompenses
</div>
<div v-for="(item, index) in rewards"
class="my-1 text-white"
:key="index"
:style="{ backgroundColor: userStore.creator.colors.primary }">
:style="{ backgroundColor: brandingStore.value.colors.primary }">
<div class="flex justify-center border-b-2 border-white p-3 mx-2 text-xl tracking-[4px]">
{{ item.title }}
@@ -30,10 +30,10 @@
</template>
<script setup>
import {ref, computed} from 'vue';
import {useUserStore} from "@/stores/userStore.js";
import {ref} from 'vue';
import {useBrandingStore} from "@/stores/brandingStore.js";
const userStore = useUserStore()
const brandingStore = useBrandingStore()
const rewards = ref([
{

30
src/views/creators/SubscribeButton.vue
View File

@@ -1,25 +1,22 @@
<script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {computed, ref} from "vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
creator: {type: Object, required: true},
backgroundColor: {required: true},
});
const brandingStore = useBrandingStore()
const subscriptionStore = useSubscriptionStore()
const subscriptionStore = useSubscriptionStore();
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
function subscribeToCreator() {
subscriptionStore.subscribeTo(props.creator.id);
subscriptionStore.subscribeTo(brandingStore.value.id);
}
// Référence pour contrôler l'affichage du modal
const showUnsubscribeModal = ref(false);
function unsubscribeFromCreator() {
subscriptionStore.unsubscribeFrom(props.creator.id);
subscriptionStore.unsubscribeFrom(brandingStore.value.id);
// Fermer le modal après désabonnement
showUnsubscribeModal.value = false;
}
@@ -31,7 +28,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: backgroundColor,
backgroundColor: brandingStore.value.colors.secondary,
color: 'white',
borderRadius: '0 8px 8px 0',
padding: '10px 24px',
@@ -42,7 +39,7 @@ function unsubscribeFromCreator() {
}"
@click="subscribeToCreator"
>
{{ $t('subscribebutton.subscribe') }}
{{ $t('subscribebutton.subscribe') }}
</v-btn>
</template>
@@ -51,7 +48,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: backgroundColor,
backgroundColor: brandingStore.value.colors.secondary,
color: 'white',
borderRadius: '0 8px 8px 0',
padding: '10px 24px',
@@ -68,7 +65,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${creator.colors.menu}` }">
:style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center">
@@ -83,11 +80,12 @@ function unsubscribeFromCreator() {
:style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
@click="unsubscribeFromCreator">Oui
</v-btn>
<v-btn class="flex-grow-1"
:style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
:style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
variant="outlined"
@click="showUnsubscribeModal = false">
<div :style="{ color: creator.colors.menu }">Non</div>
<div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
</v-btn>
</v-card-actions>
</v-card>

30
src/views/creators/SubscribeButtonSlim.vue
View File

@@ -1,28 +1,21 @@
<script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {computed, ref} from "vue";
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
creator: {type: Object, required: true},
colorBorder: {required: true},
});
const colorBorder = computed(() => props.colorBorder);
const brandingStore = useBrandingStore()
const subscriptionStore = useSubscriptionStore();
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
function subscribeToCreator() {
subscriptionStore.subscribeTo(props.creator.id);
subscriptionStore.subscribeTo(brandingStore.value.id);
}
const showUnsubscribeModal = ref(false);
function unsubscribeFromCreator() {
subscriptionStore.unsubscribeFrom(props.creator.id);
subscriptionStore.unsubscribeFrom(brandingStore.value.id);
showUnsubscribeModal.value = false;
}
</script>
@@ -32,7 +25,7 @@ function unsubscribeFromCreator() {
<v-btn
class="mr-4"
:style="{
backgroundColor: colorBorder,
backgroundColor: brandingStore.value.colors.secondary,
color: 'white',
borderRadius: '8px',
padding: '0px 24px',
@@ -51,7 +44,7 @@ function unsubscribeFromCreator() {
<v-btn
class="mr-4"
:style="{
backgroundColor: colorBorder,
backgroundColor: brandingStore.value.colors.secondary,
color: 'white',
borderRadius: '8px',
padding: '0px 24px',
@@ -68,7 +61,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${creator.colors.menu}` }">
:style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center">
@@ -85,9 +78,10 @@ function unsubscribeFromCreator() {
</v-btn>
<v-btn class="flex-grow-1"
:style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
:style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
variant="outlined"
@click="showUnsubscribeModal = false">
<div :style="{ color: creator.colors.menu }">Non</div>
<div :style="{ color: brandingStore.value.colors.primary }">Non</div>
</v-btn>
</v-card-actions>
</v-card>

15
src/views/creators/SubscriptionList.vue
View File

@@ -12,11 +12,12 @@ const subscriptionStore = useSubscriptionStore()
<RouterLink class="capitalize" :to="`/@${subscription.creatorName}`">
<div class="flex items-center content-center font-sans font-semibold pt-2 ">
<img :src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' "
alt="Profile Image"
class="rounded-full mx-2"
width="32px"
height="32px">
<img
:src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' "
alt="Profile Image"
class="rounded-full mx-2"
width="32px"
height="32px">
{{ subscription.creatorName }}
</div>
@@ -26,9 +27,7 @@ const subscriptionStore = useSubscriptionStore()
</template>
<template v-else>
<slot>
<span>No subscriptions</span>
</slot>
<span>No subscriptions</span>
</template>
</template>

33
src/views/creators/banner/bannerlower/BannerActions.vue
View File

@@ -4,40 +4,21 @@ import BannerActionsSm from "@/views/creators/banner/bannerlower/BannerActionsSm
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}
});
const emits = defineEmits(['content-posted']);
function addContent(content) {
emits('content-posted', content);
}
</script>
<template>
<div>
<banner-actions-sm class="d-sm-none"
:creator="creator"
@content-posted="addContent"
></banner-actions-sm>
<div class="d-none d-sm-flex d-md-none">
<banner-actions-md :creator="creator"
@content-posted="addContent"
></banner-actions-md>
</div>
<banner-actions-md class="d-none d-sm-flex d-md-none"
></banner-actions-md>
<div class="d-none d-md-flex d-lg-none">
<banner-actions-lg :creator="creator"
@content-posted="addContent"
></banner-actions-lg>
</div>
<banner-actions-lg class="d-none d-md-flex d-lg-none"
></banner-actions-lg>
<div class="d-none d-lg-flex">
<banner-actions-xl :creator="creator"
@content-posted="addContent"
></banner-actions-xl>
</div>
<banner-actions-xl class="d-none d-lg-flex"
></banner-actions-xl>
</div>
</template>

65
src/views/creators/banner/bannerlower/BannerActionsLg.vue
View File

@@ -1,7 +1,7 @@
<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') }">
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }">
<!-- Logo & User Info -->
<div class="relative z-20">
@@ -9,30 +9,21 @@
<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'"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
:style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
/>
</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>
<donation-button-banner></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>
<subscribe-button></subscribe-button>
<div class="font-bold text-white flex justify-end mr-5 py-1.5">
{{ creator.subscriberCount }} {{ $t('banner.subscription') }}
{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
</div>
</div>
</div>
@@ -42,36 +33,26 @@
<!-- 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') }">
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.value.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'"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
:style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
/>
</div>
<div class="ml-5 text-white">
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.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>
<donation-button-banner-slim></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">
v-if="!isSubscribed">
</subscribe-button-slim>
</div>
@@ -82,21 +63,19 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
import {ref, onMounted, computed} from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
creator: { type: Object, required: true }
});
const subscriptionStore = useSubscriptionStore();
const brandingStore = useBrandingStore()
const subscriptionStore = useSubscriptionStore()
// Calculer si l'utilisateur est abonné
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(brandingStore.value.id));
const isSticky = ref(false);
const mainContainer = ref(null);
@@ -106,7 +85,7 @@ onMounted(() => {
([entry]) => {
isSticky.value = !entry.isIntersecting;
},
{ threshold: 0 }
{threshold: 0}
);
if (mainContainer.value) {

25
src/views/creators/banner/bannerlower/BannerActionsMd.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="w-full">
<div class="rounded-b-2xl"
:style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom }">
<div>
<!-- Logo-Name-Followers -->
@@ -9,32 +9,26 @@
<div>
<img
class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
:style="{ borderColor: brandingStore.value.colors.accent, height: '150px'}"
/>
</div>
<div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
<div class="flex justify-between">
<div>
<p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
<div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div>
</div>
<div class="flex justify-between mt-2">
<subscribe-button :creator="creator"></subscribe-button>
<subscribe-button></subscribe-button>
<div class="flex space-x-2">
<donation-button :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 iconColorClass="text-white"
></donation-button>
</div>
</div>
@@ -50,9 +44,8 @@
<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
creator: {type: Object, required: true}
});
const brandingStore = useBrandingStore()
</script>

44
src/views/creators/banner/bannerlower/BannerActionsSm.vue
View File

@@ -1,27 +1,14 @@
<template>
<div class="w-full">
<div
:style="{
backgroundColor: creator.colors.bannerBottom || '#A30E79',
borderBottom: `2px solid ${creator.colors.accent || '#000000'}`
}">
:style="{backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.value.colors.accent}`}">
<div>
<!-- Logo-Name-Followers-->
<div class="flex flex-row relative z-20">
<div>
<!-- bug space-->
<!-- <img-->
<!-- -->
<!-- class="rounded-full border-solid border-2 -mt-4 max-w-[80px] h-auto ml-2"-->
<!-- :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
<!-- alt="Profile Picture"-->
<!-- :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"-->
<!-- />-->
</div>
<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 }} {{ $t('banner.subscription')}}</div>
<p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
<div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div>
</div>
@@ -30,21 +17,11 @@
<div class="flex flex-row items-center justify-between w-full px-4">
<div>
<subscribe-button :creator="creator"
></subscribe-button>
<subscribe-button></subscribe-button>
</div>
<div class="flex ml-auto space-x-4">
<publish-content-button :creator="creator"
@content-posted="addContent"
></publish-content-button>
<donation-button :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 iconColorClass="text-white"
></donation-button>
</div>
@@ -58,16 +35,9 @@
<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const props = defineProps({
creator: {type: Object, required: true}
});
const brandingStore = useBrandingStore()
const emits = defineEmits(['content-posted']);
function addContent(content) {
emits('content-posted', content);
}
</script>

81
src/views/creators/banner/bannerlower/BannerActionsXl.vue
View File

@@ -4,7 +4,7 @@
<div class="relative w-full shadow-xl rounded-2xl">
<div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
:style="{ backgroundColor: creator.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
:style="{ backgroundColor: brandingStore.value.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
<div>
<div>
@@ -14,16 +14,16 @@
<div>
<img
class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.secondary, height: '190px'}"
:style="{ borderColor: brandingStore.value.colors.secondary, height: '190px'}"
/>
</div>
<div class="ml-64 text-white w-25 min-w-60">
<p class="capitalize text-2xl mt-1">{{ creator.name }}</p>
<p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
<p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
<div class="text-xs">
105 Followers - {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
105 Followers - {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
</div>
</div>
</div>
@@ -50,29 +50,23 @@
</div>
<!-- Follow and Subscribe Buttons -->
<div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
<follow-button
:creator="creator"
:background-color="creator.colors.secondary">
</follow-button>
<subscribe-button
:creator="creator"
:background-color="creator.colors.secondary">
</subscribe-button>
<follow-button></follow-button>
<subscribe-button></subscribe-button>
</div>
</div>
</div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
:style="{ backgroundColor: creator.colors.background}">
:style="{ backgroundColor: brandingStore.value.colors.background}">
<div class="w-96 h-28 flex flex-col">
<!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
<div class="flex flex-row flex-grow-[2] min-h-20">
<div class="rounded-tl-md w-1/2 flex items-center justify-center"
:style="{ backgroundColor: creator.colors.primary, opacity: 0.20 }">
:style="{ backgroundColor: brandingStore.value.colors.primary, opacity: 0.20 }">
</div>
<div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
:style="{ backgroundColor: creator.colors.secondary}">
:style="{ backgroundColor: brandingStore.value.colors.secondary}">
<div class="absolute left-1">
<div class="flex flex-row items-center justify-center space-x-5">
<div class="flex flex-row items-center">
@@ -87,11 +81,11 @@
<div class="flex flex-col items-center space-y-2">
<v-btn
:style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
:style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">+
</v-btn>
<v-btn
:style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
:style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">-
</v-btn>
</div>
@@ -108,7 +102,7 @@
</div>
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
:style="{ backgroundColor: creator.colors.secondary, opacity: 0.80 }">
:style="{ backgroundColor: brandingStore.value.colors.secondary, opacity: 0.80 }">
<textarea
rows="1"
@@ -126,18 +120,18 @@
</div>
<div class="rounded-b-2xl h-12 px-36 flex flex-col items-center justify-center"
:style="{ backgroundColor: creator.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
:style="{ backgroundColor: brandingStore.value.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
<div class="flex justify-evenly w-full">
<RouterLink class="nav-button"
:to="`/@${creator.name}`">
:to="`/@${brandingStore.value.name}`">
Présentation
</RouterLink>
<RouterLink class="nav-button text-white hover:bg-gray-700"
:to="`/@${creator.name}/news`">
:to="`/@${brandingStore.value.name}/news`">
Actualité
</RouterLink>
<RouterLink class="nav-button text-white hover:bg-gray-700"
:to="`/@${creator.name}/content`">
:to="`/@${brandingStore.value.name}/content`">
Exclusivité
</RouterLink>
</div>
@@ -161,69 +155,66 @@
import {ref, onMounted} from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import FollowButton from "@/views/creators/FollowButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
function GetSocialsUrls() {
const socials = [];
if (props.creator.socials.facebookUrl !== null) {
if (brandingStore.value.socials.facebookUrl !== null) {
socials.push({
icon: "mdi-facebook",
url: props.creator.socials.facebookUrl
url: brandingStore.value.socials.facebookUrl
})
}
if (props.creator.socials.instagramUrl !== null) {
if (brandingStore.value.socials.instagramUrl !== null) {
socials.push({
icon: "mdi-instagram",
url: props.creator.socials.instagramUrl
url: brandingStore.value.socials.instagramUrl
})
}
if (props.creator.socials.xUrl !== null) {
if (brandingStore.value.socials.xUrl !== null) {
socials.push({
icon: "mdi-twitter",
url: props.creator.socials.xUrl
url: brandingStore.value.socials.xUrl
})
}
if (props.creator.socials.linkedInUrl !== null) {
if (brandingStore.value.socials.linkedInUrl !== null) {
socials.push({
icon: 'mdi-linkedin',
url: props.creator.socials.linkedInUrl
url: brandingStore.value.socials.linkedInUrl
})
}
if (props.creator.socials.tikTokUrl !== null) {
if (brandingStore.value.socials.tikTokUrl !== null) {
socials.push({
icon: '/images/socials/tiktok-white.png',
url: props.creator.socials.tikTokUrl
url: brandingStore.value.socials.tikTokUrl
})
}
if (props.creator.socials.youtubeUrl !== null) {
if (brandingStore.value.socials.youtubeUrl !== null) {
socials.push({
icon: 'mdi-youtube',
url: props.creator.socials.youtubeUrl
url: brandingStore.value.socials.youtubeUrl
})
}
if (props.creator.socials.redditUrl !== null) {
if (brandingStore.value.socials.redditUrl !== null) {
socials.push({
icon: 'mdi-reddit',
url: props.creator.socials.redditUrl
url: brandingStore.value.socials.redditUrl
})
}
if (props.creator.socials.websiteUrl !== null) {
if (brandingStore.value.socials.websiteUrl !== null) {
socials.push({
icon: 'mdi-web',
url: props.creator.socials.websiteUrl
url: brandingStore.value.socials.websiteUrl
})
}
return socials;
}
const props = defineProps({
creator: {type: Object, required: true}
});
// Calculer si l'utilisateur est abonné
const isSticky = ref(false);
const mainContainer = ref(null);