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

Ensure the Creator's Colors are applied to the DonationButton

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-15 15:38:04 -04:00
parent c438bbb570
commit 3fcf9bd67d
4 changed files with 97 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/contents/ContentCard.vue
View File

@@ -78,8 +78,14 @@
<v-icon>mdi-comment-outline</v-icon>
</v-btn>
<donation-button :creator="creator" iconColorClass="text-black"></donation-button>
<donation-button :color-border="colorMenu"
:color-accent="colorAccent"
:creator-id="creatorId"
:creator-name="creatorName"
:creator-logo="creatorLogo"
iconColorClass="text-black"
></donation-button>
</div>
<div :class="{'hidden': !messagesVisible}">
@@ -103,9 +109,9 @@ import {computed, ref} from 'vue';
import {time_ago} from "@/internal_time_ago.js";
import MessageList from "@/views/messages/MessageList.vue";
import PostMessage from "@/views/messages/PostMessage.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import YoutubePlayer from './YoutubePlayer.vue';
import ImageViewer from './ImageViewer.vue';
import DonationButton from "@/views/creators/DonationButton.vue";
const props = defineProps({
content: {
@@ -114,7 +120,11 @@ const props = defineProps({
}
});
const creator = ref(null);
const creatorId = computed(() => props.content.createdBy)
const creatorName = computed(() => props.content.createdByName)
const creatorLogo = computed(() => props.content.createdByPortraitUrl)
const colorMenu = computed(() => props.content.colorMenu)
const colorAccent = computed(() => props.content.colorAccent)
const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
const messagesVisible = ref(false);

53
src/views/contents/ContentPage.vue
View File

@@ -55,33 +55,43 @@
<v-btn variant="plain" icon @click="dislikeContent">
<v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon>
</v-btn>
<donation-button :creator="creator" iconColorClass="text-black"></donation-button>
<donation-button v-if="data"
:color-border="data.colorMenu"
:color-accent="data.colorAccent"
:creator-id="data.createdBy"
:creator-name="data.createdByName"
:creator-logo="data.createdByPortraitUrl"
iconColorClass="text-black"
></donation-button>
</div>
</div>
<div class="border-b-2 p-6">
<h2 class="font-sans font-semibold">Commentaires</h2>
<MessageList :content-id="contentId"></MessageList>
<message-list :subject-id="contentId"
></message-list>
</div>
<div class="border-b-2 p-6">
<PostMessage :content-id="contentId"></PostMessage>
<post-message :subject-id="contentId"
></post-message>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import {ref, computed, onMounted, watch} from 'vue';
import PostMessage from "@/views/messages/PostMessage.vue";
import MessageList from "@/views/messages/MessageList.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import { useClient } from "@/plugins/api.js";
import { useRoute } from 'vue-router';
import {useClient} from "@/plugins/api.js";
import {useRoute} from 'vue-router';
const data = ref();
const data = ref(null);
const currentImageIndex = ref(0);
const creator = ref(null);
const route = useRoute();
const client = useClient();
@@ -90,36 +100,31 @@ const contentId = computed(() => {
return route.params.contentId;
});
const creatorAlias = ref(route.params.creator); // Récupération de l'alias du créateur
const currentImage = computed(() => {
return data.value?.urls[currentImageIndex.value] || '';
if (data.value && data.value.urls) {
return data.value.urls[currentImageIndex.value] || '';
}
return '';
});
// Calculer si on a plus d'une image
const multipleImages = computed(() => {
return data.value?.urls.length > 1;
if (data.value && data.value.urls) {
return data.value.urls.length > 1;
}
return 0;
});
const fetchContentData = async (contentId) => {
try {
const response = await client.get(`/api/contents/${contentId}`);
data.value = response.data;
console.table(data.value)
} catch (error) {
console.error(`Error fetching content: ${error}`);
}
};
const fetchCreatorData = async (creatorAlias) => {
try {
const response = await client.get(`/api/creators/@hutopy`);
creator.value = response.data;
} catch (error) {
console.error(`Error fetching creator data: ${error}`);
}
};
function goBack() {
window.history.go(-1);
}
@@ -138,16 +143,12 @@ function previousImage() {
onMounted(() => {
fetchContentData(contentId.value);
fetchCreatorData(creatorAlias.value); // Fetch creator data
});
watch(contentId, (newContentId) => {
fetchContentData(newContentId);
});
watch(creatorAlias, (newCreatorAlias) => {
fetchCreatorData(newCreatorAlias); // Update creator data if alias changes
});
</script>
<style scoped>

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

@@ -62,18 +62,24 @@
<subscribe-button :creator="creator"></subscribe-button>
</div>
<donation-button :creator="creator" iconColorClass="text-white"></donation-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>
<div class="flex flex-row align-center">
</div>
<!-- Buttons -->
<div class="flex flex-wrap items-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
<publish-content-button :creator="creator"></publish-content-button>
<div class="text-white text-2xl">{{ creator.about.title }}</div>
<creator-about :creator="creator"></creator-about>
<creator-about :creator="creator"></creator-about>
</div>
</div>
</div>

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

@@ -1,32 +1,32 @@
<template>
<v-btn variant="text" icon @click="donationModal = true">
<v-btn variant="text" icon @click="openDonationDialog()">
<v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
</v-btn>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${creator.colors.menu}` }">
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
<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="creator.images.logo"
:src="creatorLogo"
alt="Profile Image"
class="rounded-full"
width="40"
height="40"
:style="{ border: `2px solid ${creator.colors.accent}` }">
<div class="capitalize px-2 text-2xl">{{ creator.name }}</div>
<v-btn icon @click="donationModal = false" class="ml-auto" variant="text">
:style="{ border: `2px solid ${colorAccent}` }">
<div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<v-card-text>
<v-text-field v-model="price"
<v-text-field v-model="tipAmount"
class="p-2"
label="Montant"
density="comfortable"
@@ -44,7 +44,8 @@
clearable
></v-textarea>
<v-btn variant="outlined" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" @click="goPay()" class="w-full mt-5">
<v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
@click="goPay()" class="w-full mt-5">
Envoyez
</v-btn>
</v-card-text>
@@ -55,9 +56,10 @@
<v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
<template v-slot:default>
<v-card>
<div id="checkout">
</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
@@ -65,32 +67,52 @@
</v-card>
</template>
</v-dialog>
</template>
<script setup>
import {useClient} from '@/plugins/api.js';
import {loadStripe} from '@stripe/stripe-js';
import {onMounted, ref} from 'vue';
import {computed, onMounted, ref} from 'vue';
const props = defineProps({
colorBorder: {type: String, required: true},
colorAccent: {type: String, required: true},
creatorId: {type: String, required: true},
creatorName: {type: String, required: true},
creatorLogo: {type: String, required: true},
iconColorClass: {type: String, 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);
const isPaymentDialogActive = ref(false); // Ajout de cette ligne
const price = ref(0);
function openDonationDialog() {
donationModal.value = true
}
function closeDonationDialog() {
donationModal.value = false
}
const isPaymentDialogActive = ref(false);
const tipAmount = ref(0);
const tipMessage = ref("");
let stripe = null;
let checkout;
const client = useClient();
const props = defineProps({
creator: {type: Object, required: true},
iconColorClass: { type: String, default: 'text-black' }
});
onMounted(async () => {
stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
console.log(props.creator.id)
console.log(creatorId)
});
const fetchClientSecret = async () => {
@@ -99,13 +121,13 @@ const fetchClientSecret = async () => {
};
async function createCheckoutSession() {
const client = useClient()
let clientSecret = await client.post('/api/Stripe', {
amount: (price.value * 100),
amount: (tipAmount.value * 100),
tipMessage: tipMessage.value,
creatorId: props.creator.id
creatorId: props.creatorId
});
let secret = clientSecret["data"];