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

Merged with new stuff for CreatorPage

Browse Source
This commit is contained in:
Dominic Villemure
2024-07-05 23:50:45 -04:00
parent 4f2fa68daf
commit 97dcd419bb
4 changed files with 168 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -36,7 +36,7 @@ import {eventBus} from '@/eventBus.js';
import {useUserStore} from "@/stores/user.js"; import {useUserStore} from "@/stores/user.js";
import {useClient} from "@/plugins/api.js"; import {useClient} from "@/plugins/api.js";
const hideSideBar = ref(false); const hideSideBar = ref(true);
const isUserLoaded = ref(false); const isUserLoaded = ref(false);
const showPopup = ref(false); const showPopup = ref(false);
const popup = ref(null); const popup = ref(null);

96
src/views/main/CreatorBanner.vue → src/views/creators/CreatorBanner.vue
View File

@@ -3,7 +3,7 @@
<div class="relative bottom-4 z-20 m"> <div class="relative bottom-4 z-20 m">
<div class="relative flex flex-col"> <div class="relative flex flex-col">
<!-- Social Network--> <!-- Social Network-->
<div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24" :style="{ backgroundColor: user.profileColors.bannerTop }"> <div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block"> <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
<div class="text-lg">1000+ Abonnés</div> <div class="text-lg">1000+ Abonnés</div>
<div class="text-sm">500 Contacts en commun</div> <div class="text-sm">500 Contacts en commun</div>
@@ -25,19 +25,19 @@
<div class="relative"> <div class="relative">
<!--Banner--> <!--Banner-->
<div> <div>
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="user.storedDataUrls.bannerPictureUrl" alt="Profile Banner" style="max-height: 550px"> <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'" alt="Profile Banner" style="max-height: 550px">
</div> </div>
<!--User info --> <!--User info -->
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2"> <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
<div class="text-white"> <div class="text-white">
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold"> <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
<p :style="{ color: user.profileColors.accent }">{{ user.firstName }}</p> <p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }}</p>
</div> </div>
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold"> <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
<p :style="{ color: user.profileColors.accent }">{{ user.lastName }}</p> <p :style="{ color: creator.profileColors.accent }">{{ creator.lastName }}</p>
</div> </div>
<div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl"> <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">
<p :style="{ color: user.profileColors.accent }">{{ user.occupation }}</p> <p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -46,15 +46,15 @@
<!-- Actions Button & image profile --> <!-- Actions Button & image profile -->
<div class="relative bottom-4 w-full"> <div class="relative bottom-4 w-full">
<div class="bg-gray-800 py-4 relative shadow-lg" :style="{ backgroundColor: user.profileColors.bannerBottom }"> <div class="bg-gray-800 py-4 relative shadow-lg" :style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
<div class="flex flex-col sm:flex-row items-center sm:justify-between"> <div class="flex flex-col sm:flex-row items-center sm:justify-between">
<img <img
class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20" class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
:src="user.storedDataUrls.profilePictureUrl" :src="creator.storedDataUrls.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: user.profileColors.accent, maxWidth: '250px', width: '100%' }" :style="{ borderColor: creator.profileColors.accent || '#A30E79', maxWidth: '250px', width: '100%' }"
> >
<div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4"> <div v-if="creator.id === userStore.getCurrentUser().id" class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
<button <button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125" class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
@click="isDialogActive = true"> @click="isDialogActive = true">
@@ -78,38 +78,100 @@
</div> </div>
</div> </div>
<!--Post-modale-->
<v-dialog v-model="isDialogActive" max-width="500">
<template v-slot:default="{ isActive }">
<v-card class="text-center rounded-xl">
<div class="text-white p-4 rounded-t" :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
<h2>Publication</h2>
</div>
<v-card-text class="bg">
<v-row class="justify-center mb-4">
<v-col class="d-flex align-center justify-end">
<v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
</v-col>
<v-col class="d-flex align-center justify-start">
<v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
</v-col>
</v-row>
<v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
<v-file-input
label="Ajoutez des fichiers"
v-model="files"
outlined
multiple
dropzone
placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
></v-file-input>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn color="primary" @click="publishPost">Publier</v-btn>
<v-btn color="primary" @click="cancelPost">Annuler</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template> </template>
<script setup> <script setup>
import {defineProps, ref} from "vue"; import {defineProps, ref} from "vue";
import {useUserStore} from "@/stores/user.js";
const props = defineProps({ const props = defineProps({
user: { type: Object, required: true }, creator: { type: Object, required: true },
}); });
const userStore = useUserStore();
const isDialogActive = ref(false); const isDialogActive = ref(false);
const message = ref('');
const files = ref([]);
const isArticle = ref(false);
const publishPost = () => {
// Logic to publish post
console.log('Post published:', message.value, files.value);
isDialogActive.value = false;
resetPostForm();
};
const cancelPost = () => {
isDialogActive.value = false;
resetPostForm();
};
const resetPostForm = () => {
message.value = '';
files.value = [];
};
const togglePostType = (article) => {
isArticle.value = article;
};
function GetActiveSocialNetworkUrls(){ function GetActiveSocialNetworkUrls(){
const socialNetworks = []; const socialNetworks = [];
const userSocialNetworks = props.user.socialNetworks; const userSocialNetworks = props.creator.socialNetworks;
if (userSocialNetworks.facebookUrl !== ''){ if (userSocialNetworks.facebookUrl !== ''){
socialNetworks.push({icon: "mdi-facebook", url: props.user.socialNetworks.facebookUrl}) socialNetworks.push({icon: "mdi-facebook", url: props.creator.socialNetworks.facebookUrl})
} }
if (userSocialNetworks.facebookUrl !== ''){ if (userSocialNetworks.facebookUrl !== ''){
socialNetworks.push({icon: "mdi-twitter", url: props.user.socialNetworks.xUrl}) socialNetworks.push({icon: "mdi-twitter", url: props.creator.socialNetworks.xUrl})
} }
if (userSocialNetworks.instagramUrl !== ''){ if (userSocialNetworks.instagramUrl !== ''){
socialNetworks.push({icon: "mdi-instagram", url: props.user.socialNetworks.instagramUrl}) socialNetworks.push({icon: "mdi-instagram", url: props.creator.socialNetworks.instagramUrl})
} }
if (userSocialNetworks.tiktokUrl !== ''){ if (userSocialNetworks.tiktokUrl !== ''){
socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.user.socialNetworks.tikTokUrl}) socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.creator.socialNetworks.tikTokUrl})
} }
if (userSocialNetworks.youtubeUrl !== ''){ if (userSocialNetworks.youtubeUrl !== ''){
socialNetworks.push({icon: "mdi-youtube", url: props.user.socialNetworks.youtubeUrl}) socialNetworks.push({icon: "mdi-youtube", url: props.creator.socialNetworks.youtubeUrl})
} }
if (userSocialNetworks.yourWebsiteUrl !== ''){ if (userSocialNetworks.yourWebsiteUrl !== ''){
socialNetworks.push({icon: "mdi-web", url: props.user.socialNetworks.yourWebsiteUrl}) socialNetworks.push({icon: "mdi-web", url: props.creator.socialNetworks.yourWebsiteUrl})
} }
return socialNetworks; return socialNetworks;

310
src/views/creators/CreatorPage.vue
View File

@@ -1,117 +1,9 @@
<template> <template>
<div v-if="creator && creator.id">
<!-- Bannière--> <creator-banner :creator="creator"></creator-banner>
<div class="relative bottom-4 z-20 m">
<div class="relative flex flex-col">
<!-- Social Network--> <DonationPopup :creator-id="creator.id"></DonationPopup>
<div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24"
:style="creatorColorTop">
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
<div class="text-lg">1000+ Abonnés</div>
<div class="text-sm">500 Contacts en commun</div>
</div>
<div class="grid grid-cols-6 md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
<a v-if="creatorFacebook"
:href="creatorFacebook"
target="_blank"
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
<v-icon>mdi-facebook</v-icon>
</a>
<a v-if="creatorX"
:href="creatorX"
target="_blank"
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-400">
<v-icon>mdi-twitter</v-icon>
</a>
<a v-if="creatorInstagram"
:href="creatorInstagram" target="_blank"
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-pink-500">
<v-icon>mdi-instagram</v-icon>
</a>
<a v-if="creatorTiktok"
:href="creatorTiktok"
target="_blank"
class="transform transition-transform duration-200 hover:scale-110">
<img src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
</a>
<a v-if="creatorYoutube"
:href="creatorYoutube" target="_blank"
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-red-500">
<v-icon>mdi-youtube</v-icon>
</a>
<a v-if="creatorWebsite"
:href="creatorWebsite" target="_blank"
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-gray-500">
<v-icon>mdi-web</v-icon>
</a>
</div>
</div>
</div>
<!--Banner & user info-->
<div class="relative">
<!--Banner-->
<div>
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
:src="creatorBanner"
alt="Profile Banner"
>
</div>
<!--User info -->
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
<div class="text-white">
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">{{ creatorName }}</div>
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">{{ creatorLastName}}</div>
<div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">{{Occupation}}</div>
</div>
</div>
</div>
</div>
<!-- Actions Button & image profile -->
<div class="relative bottom-4 w-full">
<div class="py-4 relative shadow-lg"
:style="creatorColorBottom">
<div class="flex flex-col sm:flex-row items-center sm:justify-between">
<img
class="left-5 rounded-full border-solid border-4 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
:src="creatorPortrait"
alt="Profile Picture"
:style="{ creatorColorAccent, maxWidth: '250px', width: '100%' }"
>
<div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
@click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
</button>
<button class="text-white py-2 px-4 rounded"
style="background-color: #333; transition: background-color 0.3s ease;"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
S'ABONNER
</button>
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
</button>
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
</button>
</div>
</div>
</div>
</div>
<div class="w-full mt-20"> <div class="w-full mt-20">
@@ -123,13 +15,12 @@
<v-tab value="community">Communauté</v-tab> <v-tab value="community">Communauté</v-tab>
</v-tabs> </v-tabs>
<v-card-text> <v-card-text>
<v-tabs-window v-model="tab"> <v-tabs-window v-model="tab">
<v-tabs-window-item value="content"> <v-tabs-window-item value="content">
<div class="w-full h-full p-6"> <div class="w-full h-full p-6">
<ContentList v-if="creatorId" <ContentList v-if="creator.id"
:creator-id="creatorId"> :creator-id="creator.id">
</ContentList> </ContentList>
</div> </div>
</v-tabs-window-item> </v-tabs-window-item>
@@ -137,15 +28,15 @@
<v-tabs-window-item value="community"> <v-tabs-window-item value="community">
<div> <div>
<div class="border-b-2 p-6"> <div class="border-b-2 p-6">
<PostMessage v-if="creatorId" <PostMessage v-if="creator.id"
:content-id="creatorId"> :content-id="creator.id">
</PostMessage> </PostMessage>
</div> </div>
<div class="border-b-2 p-6"> <div class="border-b-2 p-6">
<h2 class="font-sans font-semibold">Commentaires</h2> <h2 class="font-sans font-semibold">Commentaires</h2>
<MessageList v-if="creatorId" <MessageList v-if="creator.id"
:content-id="creatorId"> :content-id="creator.id">
</MessageList> </MessageList>
</div> </div>
</div> </div>
@@ -153,177 +44,72 @@
</v-tabs-window> </v-tabs-window>
</v-card-text> </v-card-text>
</div>
</div> </div>
<!--Post-modale--> <!-- Fallback when user try to access a non-existing creator -->
<v-dialog v-model="isDialogActive" max-width="500"> <div v-else>
<template v-slot:default="{ isActive }"> <div v-if="loading">
<v-card class="text-center rounded-xl"> <v-progress-linear indeterminate></v-progress-linear>
<div class="text-white p-4 rounded-t" :style="creatorColorMenu">
<h2>Publication</h2>
</div> </div>
<v-card-text class="bg"> <div v-else>
<v-row class="justify-center mb-4"> <v-card>
<v-col class="d-flex align-center justify-end"> <v-card-text style="text-align: center;">
<v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn> Aucun créateur au nom de {{ route.params.creator }}
</v-col>
<v-col class="d-flex align-center justify-start">
<v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
</v-col>
</v-row>
<v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
<v-file-input
label="Ajoutez des fichiers"
v-model="files"
outlined
multiple
dropzone
placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
></v-file-input>
</v-card-text> </v-card-text>
<v-card-actions class="justify-end">
<v-btn color="primary" @click="publishPost">Publier</v-btn>
<v-btn color="primary" @click="cancelPost">Annuler</v-btn>
</v-card-actions>
</v-card> </v-card>
</template> </div>
</v-dialog> </div>
</template> </template>
<script async setup>
<script setup> import {watch, ref, onBeforeMount} from 'vue';
import {onMounted, watch, ref, computed} from 'vue';
import {useRoute} from 'vue-router'; import {useRoute} from 'vue-router';
import {useClient} from "@/plugins/api.js"; import {useClient} from "@/plugins/api.js";
import CreatorBanner from "@/views/creators/CreatorBanner.vue";
import MessageList from "@/views/messages/MessageList.vue";
import ContentList from "@/views/contents/ContentList.vue"; import ContentList from "@/views/contents/ContentList.vue";
import PostMessage from "@/views/messages/PostMessage.vue"; import PostMessage from "@/views/messages/PostMessage.vue";
import MessageList from "@/views/messages/MessageList.vue"; import DonationPopup from "@/views/main/DonationPopup.vue";
const tab = ref() const client = useClient();
// FETCH CREATOR NAME
const route = useRoute(); const route = useRoute();
const creatorAlias = computed(() => {
return route.params.creator;
})
//Informations const creator = ref(null);
const creatorName = computed(() => { const loading = ref(true);
const tab = ref();
return creator.value?.firstName; onBeforeMount(async() => {
setTimeout(() => {
loading.value = false;
}, 1500);
await fetchCreatorData(route.params.creator);
}); });
const creatorLastName = computed(() => { watch(
return creator.value?.lastName () => route.params.creator,
}) async () => {
loading.value = true;
const Occupation = computed(() => { setTimeout(() => {
return creator.value?.occupation loading.value = false;
}) }, 1000);
await fetchCreatorData(route.params.creator);
// CREATOR METADATA }
const creator = ref() );
const creatorId = computed(() => {
return creator?.value?.id
})
const creatorFacebook = computed(() => {
return creator?.value?.socialNetworks?.facebookUrl
})
const creatorX = computed(() => {
return creator?.value?.socialNetworks?.xUrl
})
const creatorWebsite = computed(() => {
return creator?.value?.socialNetworks?.yourWebsiteUrl
})
const creatorTiktok = computed(() => {
return creator?.value?.socialNetworks?.tikTokUrl
})
const creatorYoutube = computed(() => {
return creator?.value?.socialNetworks?.youtubeUrl
})
const creatorInstagram = computed(() => {
return creator?.value?.socialNetworks?.instagramUrl
})
const creatorLinkedIn = computed(() => {
return creator?.value?.socialNetworks?.linkedInUrl
})
const creatorReddit = computed(() => {
return creator?.value?.socialNetworks?.redditUrl
})
const creatorPortrait = computed(() =>
creator.value?.storedDataUrls?.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png');
const creatorBanner = computed(() =>
creator.value?.storedDataUrls?.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png');
//Color
const creatorColorTop = computed(() => {
return {backgroundColor: creator?.value?.profileColors?.bannerTop || '#6B0065'};
});
const creatorColorBottom = computed(() => {
return {backgroundColor: creator?.value?.profileColors?.bannerBottom || '#A30E79'};
});
const creatorColorAccent = computed(() => {
return {borderColor: creator?.value?.profileColors?.accent || '#A30E79'};
});
const creatorColorMenu = computed(() => {
return {backgroundColor: creator?.value?.profileColors?.menu || '#2E0222'};
});
const client = useClient()
const fetchCreatorData = async (creatorAlias) => { const fetchCreatorData = async (creatorAlias) => {
try { try {
const response = await client.get(`/api/creators/@${creatorAlias}`) const response = await client.get(`/api/creators/@${creatorAlias}`)
creator.value = response.data creator.value = response.data;
console.log('loaded the following creator from api') console.log('loaded the following creator from api');
console.table(creator.value.id) console.table(creator.value.id);
} catch (error) { } catch (error) {
console.error(`Error fetching content: ${error}`) console.error(`Error fetching content: ${error}`);
} }
} }
onMounted(() => {
fetchCreatorData(creatorAlias.value);
});
watch(creatorAlias, (newCreatorAlias) => {
fetchCreatorData(newCreatorAlias);
});
// POST CONTENT / POPUP DIALOG
const isDialogActive = ref(false);
const message = ref('');
const files = ref([]);
const isArticle = ref(false);
const publishPost = () => {
// Logic to publish post
console.log('Post published:', message.value, files.value);
isDialogActive.value = false;
resetPostForm();
};
const cancelPost = () => {
isDialogActive.value = false;
resetPostForm();
};
const resetPostForm = () => {
message.value = '';
files.value = [];
};
const togglePostType = (article) => {
isArticle.value = article;
};
</script> </script>
<style scoped> <style scoped>

9
src/views/main/DonationPopup.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
<div class="bg-gray-100 rounded-b-2xl p-4"> <div class="bg-gray-100 rounded-b-2xl p-4">
<div class="mx-2"> <div class="mx-2">
<StripePayment></StripePayment> <StripePayment :creator-id="creatorId"></StripePayment>
</div> </div>
</div> </div>
</div> </div>
@@ -27,13 +27,18 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from 'vue'; import {ref, onMounted, onUnmounted, defineProps} from 'vue';
import StripePayment from "@/views/StripePayment.vue"; import StripePayment from "@/views/StripePayment.vue";
const showPopup = ref(false); const showPopup = ref(false);
const popup = ref(null); const popup = ref(null);
const popupButton = ref(null); const popupButton = ref(null);
const props = defineProps({
creatorId: { type: String, required: true },
});
const togglePopup = () => { const togglePopup = () => {
showPopup.value = !showPopup.value; showPopup.value = !showPopup.value;
}; };