Add content creation
This commit is contained in:
Jonathan Bourdon
@@ -13,14 +13,15 @@ import PaymentCompleted from '../views/PayementCompleted.vue'
|
|||||||
import SignupView from '../views/SignupView.vue'
|
import SignupView from '../views/SignupView.vue'
|
||||||
import Join from '../views/main/Join.vue'
|
import Join from '../views/main/Join.vue'
|
||||||
import Home from '../views/main/Home.vue'
|
import Home from '../views/main/Home.vue'
|
||||||
import Browse from '../views/main/Browse.vue'
|
|
||||||
import Wallet from '../views/main/Wallet.vue'
|
import Wallet from '../views/main/Wallet.vue'
|
||||||
import Profile from '../views/main/Profile.vue'
|
import Profile from '../views/main/Profile.vue'
|
||||||
import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
|
import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
|
||||||
import Leffet from '../views/manualusers/LeffetProfile.vue'
|
import Leffet from '../views/manualusers/LeffetProfile.vue'
|
||||||
import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
|
import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
|
||||||
import Creator from "@/views/main/Creator.vue"
|
import CreatorList from '../views/creators/CreatorList.vue'
|
||||||
import Feed from '../views/main/Feed.vue';
|
import Creator from "@/views/creators/Creator.vue";
|
||||||
|
import Content from "@/views/contents/Content.vue";
|
||||||
|
import PostContent from "@/views/contents/PostContent.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@@ -30,9 +31,25 @@ const routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/browse',
|
path: '/browse',
|
||||||
component: Browse
|
component: CreatorList
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/content/:contentId',
|
||||||
|
component: Content
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/@:creator',
|
||||||
|
component: Creator
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/creators/@:creator',
|
||||||
|
component: Profile
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/content/post',
|
||||||
|
component: PostContent,
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/@leffet',
|
path: '/@leffet',
|
||||||
component: Leffet
|
component: Leffet
|
||||||
@@ -53,11 +70,6 @@ const routes = [
|
|||||||
path: '/@arps',
|
path: '/@arps',
|
||||||
component: ARPS
|
component: ARPS
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
path: '/@:creator',
|
|
||||||
component: Creator
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/helpandcontact',
|
path: '/helpandcontact',
|
||||||
@@ -131,15 +143,7 @@ const routes = [
|
|||||||
path: '/wallet',
|
path: '/wallet',
|
||||||
name: 'wallet',
|
name: 'wallet',
|
||||||
component: Wallet
|
component: Wallet
|
||||||
},
|
}
|
||||||
{
|
|
||||||
path: '/feed',
|
|
||||||
name: 'feed',
|
|
||||||
component: Feed
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|||||||
42
src/views/contents/ContentCard.vue
Normal file
42
src/views/contents/ContentCard.vue
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
<div class=" shadow-lg rounded-lg max-w-sm">
|
||||||
|
|
||||||
|
<div class="h-48 object-cover bg-purple">
|
||||||
|
|
||||||
|
<v-img :src="props.content.url"
|
||||||
|
v-if="!isHttpUrl">
|
||||||
|
</v-img>
|
||||||
|
|
||||||
|
<iframe v-if="isHttpUrl"
|
||||||
|
:src="props.content.banner"
|
||||||
|
title="YouTube video player"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
referrerpolicy="strict-origin-when-cross-origin"
|
||||||
|
allowfullscreen>
|
||||||
|
</iframe>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-lg font-bold">{{ props.content.title }}</div>
|
||||||
|
<div class="text-sm text-gray-500">{{ props.content.title }}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
import {defineProps, computed} from 'vue';
|
||||||
|
|
||||||
|
const isHttpUrl = computed(() => props.content.url.startsWith('http'))
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
content: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
37
src/views/contents/ContentList.vue
Normal file
37
src/views/contents/ContentList.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<ContentCard v-for="content in contents"
|
||||||
|
:content="content"
|
||||||
|
class="m-2 bg-red w-full">
|
||||||
|
</ContentCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
import {useClient} from '@/plugins/api.js';
|
||||||
|
import {defineProps, onBeforeMount, ref} from 'vue';
|
||||||
|
import ContentCard from "./ContentCard.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
creatorId: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const client = useClient();
|
||||||
|
const contents = ref();
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
try {
|
||||||
|
const response = await client.get(`/api/contents/user/${props.creatorId}`)
|
||||||
|
contents.value = response.data
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch posts", error);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
74
src/views/contents/ContentPage.vue
Normal file
74
src/views/contents/ContentPage.vue
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="flex flex-column w-full">
|
||||||
|
|
||||||
|
<div class="border-b-2 p-6 font-sans space-y-2">
|
||||||
|
<div v-if="data && data.uri">
|
||||||
|
Uri: {{ data?.uri }}
|
||||||
|
</div>
|
||||||
|
<div v-if="data && data.title" class="font-semibold">
|
||||||
|
Title: {{ data?.title }}
|
||||||
|
</div>
|
||||||
|
<div v-if="data && data.description">
|
||||||
|
Description: {{ data?.description }}
|
||||||
|
</div>
|
||||||
|
<div v-if="data && data.createdAt">
|
||||||
|
Date: {{ data?.createdAt }}
|
||||||
|
</div>
|
||||||
|
<div v-if="data && data.createdBy">
|
||||||
|
Creator: {{ data?.createdBy }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-b-2 p-6">
|
||||||
|
<PostMessage :content-id="contentId">
|
||||||
|
</PostMessage>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-b-2 p-6">
|
||||||
|
<h2 class="font-sans font-semibold">Commentaires</h2>
|
||||||
|
<MessageList :content-id="contentId">
|
||||||
|
</MessageList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup async>
|
||||||
|
import PostMessage from "@/views/messages/PostMessage.vue";
|
||||||
|
import MessageList from "@/views/messages/MessageList.vue";
|
||||||
|
import {useClient} from "@/plugins/api.js";
|
||||||
|
import {onMounted, watch, ref, computed} from 'vue';
|
||||||
|
import {useRoute} from 'vue-router';
|
||||||
|
|
||||||
|
const data = ref()
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const client = useClient()
|
||||||
|
|
||||||
|
const contentId = computed(() => {
|
||||||
|
return route.params.contentId;
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchContentData = async (contentId) => {
|
||||||
|
try {
|
||||||
|
const response = await client.get(`/api/contents/${contentId}`)
|
||||||
|
data.value = response.data
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error fetching content: ${error}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchContentData(contentId.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(contentId, (newContentId) => {
|
||||||
|
fetchContentData(newContentId);
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
106
src/views/contents/PostContent.vue
Normal file
106
src/views/contents/PostContent.vue
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="flex flex-column">
|
||||||
|
|
||||||
|
<div class="h-full bg-yellow p-2 rounded-2xl m-4">
|
||||||
|
<post-content-menu></post-content-menu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-column m-4 gap-4">
|
||||||
|
<v-form>
|
||||||
|
<v-file-input
|
||||||
|
v-model="selectedFile"
|
||||||
|
label="Select Image"
|
||||||
|
accept="image/*"
|
||||||
|
prepend-icon="mdi-camera"
|
||||||
|
@change="onFileSelected">
|
||||||
|
</v-file-input>
|
||||||
|
|
||||||
|
<v-img
|
||||||
|
v-if="url"
|
||||||
|
:src="url"
|
||||||
|
max-height="375"
|
||||||
|
contain
|
||||||
|
></v-img>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
v-model="title"
|
||||||
|
density="comfortable"
|
||||||
|
variant="outlined"
|
||||||
|
label="Titre"
|
||||||
|
hide-details
|
||||||
|
clearable>
|
||||||
|
</v-text-field>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
v-model="description"
|
||||||
|
density="comfortable"
|
||||||
|
variant="outlined"
|
||||||
|
label="Description"
|
||||||
|
hide-details
|
||||||
|
clearable>
|
||||||
|
</v-text-field>
|
||||||
|
|
||||||
|
</v-form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row gap-2 p-2 justify-end">
|
||||||
|
<v-btn style="border-radius: 20px" variant="text">Canceller</v-btn>
|
||||||
|
<v-btn style="border-radius: 20px" @click="publish">Publier</v-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// import posts from "@/views/posts/posts.json";
|
||||||
|
|
||||||
|
import {useClient} from '@/plugins/api.js';
|
||||||
|
import {defineProps, ref} from 'vue';
|
||||||
|
import PostContentMenu from "@/views/contents/PostContentMenu.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
contentId: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const client = useClient();
|
||||||
|
|
||||||
|
const selectedFile = ref("");
|
||||||
|
const url = ref("");
|
||||||
|
const title = ref("");
|
||||||
|
const description = ref("");
|
||||||
|
|
||||||
|
const onFileSelected = () => {
|
||||||
|
if (selectedFile.value) {
|
||||||
|
const fileReader = new FileReader();
|
||||||
|
fileReader.readAsDataURL(selectedFile.value);
|
||||||
|
fileReader.onload = () => {
|
||||||
|
url.value = fileReader.result;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const publish = async () => {
|
||||||
|
const response = await client.post(
|
||||||
|
`/api/contents/`,
|
||||||
|
{
|
||||||
|
"url": url.value,
|
||||||
|
"title": title.value,
|
||||||
|
"description": description.value
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.info(`Content created!`)
|
||||||
|
} else {
|
||||||
|
console.error(`Failed to create content ${response.data}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
148
src/views/contents/PostContentMenu.vue
Normal file
148
src/views/contents/PostContentMenu.vue
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="flow">
|
||||||
|
<button @click="selectType('title')">
|
||||||
|
<v-icon>mdi-format-title</v-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button @click="selectType('text')">
|
||||||
|
<v-icon>mdi-text</v-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button @click="selectType('image')">
|
||||||
|
<v-icon>mdi-image</v-icon>
|
||||||
|
</button>
|
||||||
|
<button @click="selectType('video')">
|
||||||
|
<v-icon>mdi-video</v-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button @click="selectType('audio')">
|
||||||
|
<v-icon>mdi-volume-high</v-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button @click="selectType('comments')">
|
||||||
|
<v-icon>mdi-comment</v-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Affichage du contenu en fonction du type sélectionné -->
|
||||||
|
<!-- <v-card-text>-->
|
||||||
|
<!-- <v-row v-for="(content, index) in contents" :key="index" class="draggable-row"-->
|
||||||
|
<!-- @dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">-->
|
||||||
|
<!-- <v-col cols="10">-->
|
||||||
|
<!-- <template v-if="content.type === 'title'">-->
|
||||||
|
<!-- <v-text-field v-model="content.value" label="Titre"></v-text-field>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- <template v-else-if="content.type === 'text'">-->
|
||||||
|
<!-- <v-textarea v-model="content.value" label="Texte"></v-textarea>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- <template v-else-if="content.type === 'image'">-->
|
||||||
|
<!-- <v-row>-->
|
||||||
|
|
||||||
|
<!-- <v-col cols="12">-->
|
||||||
|
<!-- <v-file-input v-model="content.value" label="Image"></v-file-input>-->
|
||||||
|
<!-- </v-col>-->
|
||||||
|
<!-- </v-row>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- <template v-else-if="content.type === 'video'">-->
|
||||||
|
<!-- <v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- <template v-else-if="content.type === 'audio'">-->
|
||||||
|
<!-- <v-row>-->
|
||||||
|
<!-- <v-col cols="2">-->
|
||||||
|
<!-- <v-icon>mdi-volume-high</v-icon>-->
|
||||||
|
<!-- </v-col>-->
|
||||||
|
<!-- <v-col cols="10">-->
|
||||||
|
<!-- <v-file-input v-model="content.value" label="Audio"></v-file-input>-->
|
||||||
|
<!-- </v-col>-->
|
||||||
|
<!-- </v-row>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- <template v-else-if="content.type === 'comments'">-->
|
||||||
|
<!-- <v-text-field v-model="content.value" label="Commentaires"></v-text-field>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- </v-col>-->
|
||||||
|
<!-- <v-col cols="2" class="d-flex justify-center align-center">-->
|
||||||
|
<!-- <button icon @click="removeContent(index)" class="remove-button">-->
|
||||||
|
<!-- <v-icon>mdi-close</v-icon>-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- </v-col>-->
|
||||||
|
<!-- </v-row>-->
|
||||||
|
<!-- </v-card-text>-->
|
||||||
|
|
||||||
|
<!-- <!– Boutons Post, Preview et Cancel –>-->
|
||||||
|
<!-- <v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">-->
|
||||||
|
<!-- <v-col class="d-flex justify-end" style="margin-right: 4%;">-->
|
||||||
|
<!-- <button style="margin-right: 15px;" @click="postContent" color="white" dark-->
|
||||||
|
<!-- elevation="4">Post-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- <button style="margin-right: 15px;" @click="previewContent" color="white" dark-->
|
||||||
|
<!-- elevation="5">Preview-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- <button @click="cancelPost" color="white" dark elevation="5">Cancel</button>-->
|
||||||
|
<!-- </v-col>-->
|
||||||
|
<!-- </v-row>-->
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref} from 'vue';
|
||||||
|
|
||||||
|
const contents = ref([]);
|
||||||
|
let dragIndex = null;
|
||||||
|
|
||||||
|
const selectType = (type) => {
|
||||||
|
console.log("Type sélectionné:", type);
|
||||||
|
contents.value.push({type: type, value: ''});
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeContent = (index) => {
|
||||||
|
contents.value.splice(index, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const postContent = () => {
|
||||||
|
// Implémenter la logique pour poster le contenu
|
||||||
|
};
|
||||||
|
|
||||||
|
const previewContent = () => {
|
||||||
|
// Implémenter la logique pour prévisualiser le contenu
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelPost = () => {
|
||||||
|
if (contents.value.length > 0) {
|
||||||
|
// Réinitialiser le tableau contents pour supprimer tous les contenus
|
||||||
|
contents.value = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const dragStart = (index) => {
|
||||||
|
dragIndex = index;
|
||||||
|
};
|
||||||
|
|
||||||
|
const drop = (index) => {
|
||||||
|
if (dragIndex !== null && index !== null) {
|
||||||
|
const draggedItem = contents.value[dragIndex];
|
||||||
|
contents.value.splice(dragIndex, 1);
|
||||||
|
contents.value.splice(index, 0, draggedItem);
|
||||||
|
dragIndex = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.remove-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-button {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable-row {
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
40
src/views/contents/contents.json
Normal file
40
src/views/contents/contents.json
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "00000002-0000-0000-0000-000000000001",
|
||||||
|
"url": "https://www.youtube.com/embed/neKWqjE0eSs?si=Bo7xbYaw9-56w3lU",
|
||||||
|
"description": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy.",
|
||||||
|
"created_by": {
|
||||||
|
"id": "00000001-0000-0000-0000-000000000001",
|
||||||
|
"alias": "@marchy"
|
||||||
|
},
|
||||||
|
"created_at": "",
|
||||||
|
"thumb_up_count": 0,
|
||||||
|
"thumb_down_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "00000002-0000-0000-0000-000000000002",
|
||||||
|
"url": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||||
|
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||||
|
"description": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy.",
|
||||||
|
"created_by": {
|
||||||
|
"id": "00000001-0000-0000-0000-000000000001",
|
||||||
|
"alias": "@marchy",
|
||||||
|
"portrait_url": ""
|
||||||
|
},
|
||||||
|
"created_at": "",
|
||||||
|
"thumb_up_count": 0,
|
||||||
|
"thumb_down_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "00000002-0000-0000-0000-000000000003",
|
||||||
|
"url": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||||
|
"description": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy.",
|
||||||
|
"created_by": {
|
||||||
|
"id": "00000001-0000-0000-0000-000000000001",
|
||||||
|
"alias": "@marchy"
|
||||||
|
},
|
||||||
|
"created_at": "",
|
||||||
|
"thumb_up_count": 0,
|
||||||
|
"thumb_down_count": 0
|
||||||
|
}
|
||||||
|
]
|
||||||
52
src/views/creators/Creator.vue
Normal file
52
src/views/creators/Creator.vue
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<v-img cover
|
||||||
|
max-height="375"
|
||||||
|
:src="creator?.portrait_url">
|
||||||
|
</v-img>
|
||||||
|
|
||||||
|
<div class="w-full p-6">
|
||||||
|
<!-- <ContentList :creator-id="creator?.id">-->
|
||||||
|
<ContentList creator-id="00000001-0000-0000-0000-000000000001">
|
||||||
|
</ContentList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
import {onMounted, watch, ref, computed} from 'vue';
|
||||||
|
import {useRoute} from 'vue-router';
|
||||||
|
import {useClient} from "@/plugins/api.js";
|
||||||
|
import ContentList from "@/views/contents/ContentList.vue";
|
||||||
|
|
||||||
|
const creator = ref()
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const creatorAlias = computed(() => {
|
||||||
|
return route.params.creator;
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(`Opening ${creatorAlias.value} creator page`)
|
||||||
|
|
||||||
|
const client = useClient();
|
||||||
|
const fetchCreatorData = async (creatorAlias) => {
|
||||||
|
try {
|
||||||
|
const response = await client.get(`/api/creators/@${creatorAlias}`)
|
||||||
|
creator.value = response.data
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error fetching content: ${error}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchCreatorData(creatorAlias.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(creatorAlias, (newCreatorAlias) => {
|
||||||
|
fetchCreatorData(newCreatorAlias);
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
@@ -27,10 +27,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
import CreatorCard from "@/views/main/CreatorCard.vue";
|
import CreatorCard from "@/views/creators/CreatorCard.vue";
|
||||||
import creators from "@/views/main/creators.json"; // Import the JSON file
|
import creators from "@/views/creators/creators.json";
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<div class="flex flex-column w-max-[100] ">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="w-full border-b-2 p-6">-->
|
|
||||||
<!-- <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- -->
|
|
||||||
<!-- <div class="w-full border-b-2 p-6">-->
|
|
||||||
<!-- <h2 class="font-sans font-semibold">Commentaires</h2>-->
|
|
||||||
<!-- <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<PostContentMenu></PostContentMenu>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
|
|
||||||
<PostCard v-for="post in posts"
|
|
||||||
:key="post.id"
|
|
||||||
:post="post"
|
|
||||||
class=" bg-white w-full content-center rounded-3xl mt-2">
|
|
||||||
</PostCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
import PostContentMenu from '@/views/main/PostContentMenu.vue'
|
|
||||||
import PostCard from "@/views/main/PostCard.vue"
|
|
||||||
import posts from "@/views/main/posts.json"
|
|
||||||
import PostMessage from "@/views/messages/PostMessage.vue";
|
|
||||||
import MessageList from "@/views/messages/MessageList.vue";
|
|
||||||
|
|
||||||
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<div class="flex flex-column w-max-[100] ">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
|
|
||||||
<PostCard v-for="post in posts"
|
|
||||||
:key="post.id"
|
|
||||||
:post="post"
|
|
||||||
class=" bg-white w-full content-center rounded-3xl mt-2">
|
|
||||||
</PostCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
import PostContentMenu from '@/views/main/PostContentMenu.vue'
|
|
||||||
import PostCard from "@/views/main/PostCard.vue"
|
|
||||||
import posts from "@/views/main/posts.json"
|
|
||||||
import PostMessage from "@/views/messages/PostMessage.vue";
|
|
||||||
import MessageList from "@/views/messages/MessageList.vue";
|
|
||||||
|
|
||||||
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,10 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="bg-black/5 p-6 text-center">
|
<div class="p-4 text-center font-sans">
|
||||||
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
Hutopy ©{{ new Date().getFullYear() }} - Tout droits réservés
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -124,6 +124,7 @@ import SelectedFooter from "@/views/main/SelectedFooter.vue";
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.overlay p {
|
.overlay p {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
@@ -134,6 +135,4 @@ body {
|
|||||||
background-color: #F4F4F4;
|
background-color: #F4F4F4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,44 +0,0 @@
|
|||||||
<template>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="border-2 shadow-2xl mb-4 ">
|
|
||||||
<div class="mt-1">
|
|
||||||
|
|
||||||
<v-img class="mt-1 rounded-t-2xl " :src="props.post.banner"
|
|
||||||
v-if="!isHttpUrl">
|
|
||||||
</v-img>
|
|
||||||
|
|
||||||
|
|
||||||
<iframe style="min-height: 400px" class="w-full rounded-t-2xl"
|
|
||||||
v-if="isHttpUrl"
|
|
||||||
:src="props.post.banner"
|
|
||||||
title="YouTube video player"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
||||||
referrerpolicy="strict-origin-when-cross-origin"
|
|
||||||
allowfullscreen>
|
|
||||||
</iframe>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="text-lg font-bold m-4">{{ props.post.title }}</div>
|
|
||||||
<div class="text-sm text-gray-500 m-4">{{ props.post.title }}</div>
|
|
||||||
<div class="text-base text-gray-700 m-4 text-justify">{{ props.post.content }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {defineProps, computed} from 'vue';
|
|
||||||
|
|
||||||
const isHttpUrl = computed(() => props.post.banner.startsWith('http'))
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
post: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@@ -1,155 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-container>
|
|
||||||
<v-card style="border-radius: 30px" elevation="10">
|
|
||||||
<v-card-text>
|
|
||||||
<v-row>
|
|
||||||
<!-- Boutons de sélection -->
|
|
||||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
||||||
<v-btn elevation="0" icon @click="selectType('title')">
|
|
||||||
<v-icon>mdi-format-title</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
||||||
<v-btn elevation="0" icon @click="selectType('text')">
|
|
||||||
<v-icon>mdi-text</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
||||||
<v-btn elevation="0" icon @click="selectType('image')">
|
|
||||||
<v-icon>mdi-image</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
||||||
<v-btn elevation="0" icon @click="selectType('video')">
|
|
||||||
<v-icon>mdi-video</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
||||||
<v-btn elevation="0" icon @click="selectType('audio')">
|
|
||||||
<v-icon>mdi-volume-high</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
||||||
<v-btn elevation="0" icon @click="selectType('comments')">
|
|
||||||
<v-icon>mdi-comment</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<!-- Affichage du contenu en fonction du type sélectionné -->
|
|
||||||
<v-card-text>
|
|
||||||
<v-row v-for="(content, index) in contents" :key="index" class="draggable-row"
|
|
||||||
@dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">
|
|
||||||
<v-col cols="10">
|
|
||||||
<template v-if="content.type === 'title'">
|
|
||||||
<v-text-field v-model="content.value" label="Titre"></v-text-field>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="content.type === 'text'">
|
|
||||||
<v-textarea v-model="content.value" label="Texte"></v-textarea>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="content.type === 'image'">
|
|
||||||
<v-row>
|
|
||||||
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-file-input v-model="content.value" label="Image"></v-file-input>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="content.type === 'video'">
|
|
||||||
<v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="content.type === 'audio'">
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="2">
|
|
||||||
<v-icon>mdi-volume-high</v-icon>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="10">
|
|
||||||
<v-file-input v-model="content.value" label="Audio"></v-file-input>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="content.type === 'comments'">
|
|
||||||
<v-text-field v-model="content.value" label="Commentaires"></v-text-field>
|
|
||||||
</template>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="2" class="d-flex justify-center align-center">
|
|
||||||
<v-btn icon @click="removeContent(index)" class="remove-button">
|
|
||||||
<v-icon>mdi-close</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<!-- Boutons Post, Preview et Cancel -->
|
|
||||||
<v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">
|
|
||||||
<v-col class="d-flex justify-end" style="margin-right: 4%;">
|
|
||||||
<v-btn style="margin-right: 15px;" @click="postContent" color="white" dark
|
|
||||||
elevation="4">Post</v-btn>
|
|
||||||
<v-btn style="margin-right: 15px;" @click="previewContent" color="white" dark
|
|
||||||
elevation="5">Preview</v-btn>
|
|
||||||
<v-btn @click="cancelPost" color="white" dark elevation="5">Cancel</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card>
|
|
||||||
</v-container>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const contents = ref([]);
|
|
||||||
let dragIndex = null;
|
|
||||||
|
|
||||||
const selectType = (type) => {
|
|
||||||
console.log("Type sélectionné:", type);
|
|
||||||
contents.value.push({ type: type, value: '' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeContent = (index) => {
|
|
||||||
contents.value.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const cancelPost = () => {
|
|
||||||
if (contents.value.length > 0) {
|
|
||||||
// Réinitialiser le tableau contents pour supprimer tous les contenus
|
|
||||||
contents.value = [];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const dragStart = (index) => {
|
|
||||||
dragIndex = index;
|
|
||||||
};
|
|
||||||
|
|
||||||
const drop = (index) => {
|
|
||||||
if (dragIndex !== null && index !== null) {
|
|
||||||
const draggedItem = contents.value[dragIndex];
|
|
||||||
contents.value.splice(dragIndex, 1);
|
|
||||||
contents.value.splice(index, 0, draggedItem);
|
|
||||||
dragIndex = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.remove-button {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: -20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-btn {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable-row {
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": 1,
|
|
||||||
"creatorId": 1,
|
|
||||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
|
||||||
"date": "24-04-2024",
|
|
||||||
"banner": "https://www.youtube.com/embed/neKWqjE0eSs?si=Bo7xbYaw9-56w3lU",
|
|
||||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1,
|
|
||||||
"creatorId": 1,
|
|
||||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
|
||||||
"date": "24-04-2024",
|
|
||||||
"banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
|
||||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1,
|
|
||||||
"creatorId": 1,
|
|
||||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
|
||||||
"date": "24-04-2024",
|
|
||||||
"banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
|
||||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1,
|
|
||||||
"creatorId": 1,
|
|
||||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
|
||||||
"date": "24-04-2024",
|
|
||||||
"banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
|
||||||
"content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@@ -132,9 +132,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import CreatorFeed from "@/views/main/CreatorFeed.vue";
|
|
||||||
import {ref} from 'vue';
|
import {ref} from 'vue';
|
||||||
import DonationPopup from "@/views/main/DonationPopup.vue";
|
|
||||||
|
|
||||||
let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
|
let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
|
||||||
let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
|
let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
|
||||||
|
|||||||
Reference in New Issue
Block a user