Creator news summary - presentation design

src/router/router.js

@@ -21,6 +21,7 @@ import PostContent from "@/views/contents/PostContent.vue";
 import Explorer from "@/views/explorer/explorer.vue";
 import {useAuthStore} from "@/stores/authStore.js";
 import ForYouPage from "@/views/profile/ForYouPage.vue";
+import CreatorPresentation from "@/views/creators/CreatorPresentation.vue";
 
 const routes = [
     {
@@ -28,6 +29,11 @@ const routes = [
         component: Home,
         meta: { hideSideBar: true }
     },
+    {
+        path: '/presentation/@:creator',
+        component: CreatorPresentation,
+       
+    },
     {
         path: '/browse',
         component: CreatorList

src/views/creators/CreatorPresentation.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :style="{ backgroundColor: '#2D2728' }">
+    <div class="mt-10" v-if="creator && creator.id">
+      <div class="max-w-[1500px] mx-auto">
+        <creator-banner :creator="creator"
+                        @content-posted="contentPosted"
+        ></creator-banner>
+      </div>
+    </div>
+
+    <div v-else>
+      <div v-if="loading">
+        <v-progress-linear indeterminate></v-progress-linear>
+      </div>
+      <div v-else>
+        <v-card>
+          <v-card-text style="text-align: center;">
+            Aucun créateur au nom de {{ route.params.creator }}
+          </v-card-text>
+        </v-card>
+      </div>
+    </div>
+
+    <!--reator presentation-->
+    <div class="flex flex-row max-w-[1500px] mx-auto justify-center mt-8">
+      <div>
+
+        <!-- Actualité feed-->
+        <div class="flex flex-column px-2 max-w-80">
+          <div>
+            <Creatornewssummary :creator="creator"></Creatornewssummary>
+          </div>
+        </div>
+      </div>
+      <div class="min-w-[875px]"></div>
+      <div class="bg-fuchsia-800 flex-grow">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script async setup>
+import {watch, ref, onBeforeMount} from 'vue';
+import {useRoute} from 'vue-router';
+import {useClient} from "@/plugins/api.js";
+import CreatorBanner from "@/views/creators/CreatorBanner.vue";
+import Creatornewssummary from "@/views/creators/banner/Creatornewssummary.vue";
+
+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
+  }
+}
+
+</script>

src/views/creators/banner/Creatornewssummary.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div class="flex justify-center mb-2">
+      <v-btn height="42" @click="scrollUp">
+        <v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
+      </v-btn>
+    </div>
+
+    <div class="text-center text-white rounded-t-lg text-xl" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Actualité</div>
+
+    <div class="flex flex-column">
+      <div v-for="(item, index) in visibleCards" :key="index" class="my-1 text-white" :style="{ backgroundColor: creator.colors.bannerTop }">
+        <div class="flex justify-between items-center border-b-2 border-white p-3 mx-2">
+          <p v-if="item.type === 'nouvelle'" class="text-xl" :style="{ letterSpacing: '8px' }">Nouvelle</p>
+          <p v-if="item.type === 'contenu'" class="text-xl" :style="{ letterSpacing: '8px' }">Contenu</p>
+          <p class="text-xs">{{ item.date }}</p>
+        </div>
+
+        <div class="p-3">
+          <div class="text-lg" style="letter-spacing: 2px">{{ item.title }}</div>
+          <p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
+
+          <div v-if="item.rating" class="stars flex justify-end">
+            {{ item.rating }} ★
+          </div>
+
+          <img v-if="item.photo" :src="item.photo" class="w-full h-auto my-2" />
+
+          <div class="flex justify-evenly">
+            <v-btn icon variant="plain"><v-icon>mdi-thumb-up</v-icon></v-btn>
+            <v-btn icon variant="plain"><v-icon>mdi-comment-outline</v-icon></v-btn>
+            <v-btn icon variant="plain"><v-icon>mdi-gift-outline</v-icon></v-btn>
+          </div>
+
+          <video v-if="item.video" controls :src="item.video" class="w-full h-auto my-2"></video>
+        </div>
+      </div>
+
+      <div class="flex justify-center mt-2">
+        <v-btn height="42" @click="scrollDown">
+          <v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
+        </v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineProps } from 'vue';
+
+// Define props to receive creator
+const props = defineProps({
+  creator: {
+    type: Object,
+    required: true,
+  },
+});
+
+// Simulate JSON data (replace with your actual data)
+const actualites = ref([
+  { type: 'nouvelle', title: 'La visite du studio', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', video: null, rating: null, date: '2024-09-19' },
+  { type: 'contenu', title: 'Éditer comme un pro!', description: 'Ceci est la description du contenu.', photo: null, video: null, rating: 4.5, date: '2024-09-18' },
+  { type: 'nouvelle', title: 'Le studio', description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.', photo: null, video: null, rating: null, date: '2024-09-17' },
+  { type: 'contenu', title: 'Contenu 2', description: 'Deuxième contenu avec description.', photo: null, video: null, rating: 5.0, date: '2024-09-16' },
+]);
+
+// Control card visibility
+const startIndex = ref(0);
+const cardsPerPage = 3;
+
+const endIndex = computed(() => startIndex.value + cardsPerPage);
+const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
+
+function scrollDown() {
+  if (endIndex.value < actualites.value.length) {
+    startIndex.value += 2;
+  }
+}
+
+function scrollUp() {
+  if (startIndex.value > 0) {
+    startIndex.value -= 2;
+  }
+}
+</script>

src/views/creators/banner/bannerlower/BannerActionsXl.vue

@@ -63,16 +63,16 @@
             </div>
           </div>
 
-          <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-2xl text-white"
+          <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
                :style="{ backgroundColor: creator.colors.bannerTop}">
 
             <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-xl w-1/2   flex items-center justify-center"
+                <div class="rounded-tl-md w-1/2   flex items-center justify-center"
                      :style="{ backgroundColor: creator.colors.bannerBottom, opacity: 0.20 }">
                 </div>
-                <div class="rounded-tr-xl w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
+                <div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
                      :style="{ backgroundColor: creator.colors.bannerBottom}">
                   <div class="absolute left-1">
                     <div class="flex flex-row items-center justify-center space-x-5">
@@ -105,15 +105,15 @@
                   </v-btn>
                 </div>
               </div>
-              <!-- Section 1 - Prend 1/3 de la hauteur -->
+             
-              <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-2xl"
+              <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
                    :style="{ backgroundColor: creator.colors.bannerBottom,opacity: 0.80 }">
 
 <textarea
 
     rows="1"
     placeholder="Message facultatif"
-    class="w-full p-2 border border-gray-300 rounded-b-2xl resize-none"
+    class="w-full p-2 border border-gray-300 rounded-b-md resize-none"
     style="max-height: 300px; overflow-y: hidden; outline: none;"
     oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight, 300) + 'px'"></textarea>
 
@@ -122,61 +122,6 @@
           </div>
         </div>
       </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>-->
-      <!--        <div class="flex flex-column">-->
-      <!--          &lt;!&ndash; Bouton abonnement affiché seulement si non abonné &ndash;&gt;-->
-
-      <!--        </div>-->
-      <!--      </div>-->
-      <!--      -->
-
-      <!--    &lt;!&ndash; Conteneur sticky &ndash;&gt;-->
-      <!--    <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') }">-->
-      <!--      <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'"-->
-      <!--              alt="Profile Picture"-->
-      <!--              :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"-->
-      <!--          />-->
-      <!--        </div>-->
-      <!--        <div class="ml-5 text-white">-->
-      <!--          <p class="capitalize text-2xl font-bold">{{ creator.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>-->
-
-      <!--          &lt;!&ndash; Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné &ndash;&gt;-->
-      <!--          <subscribe-button-slim-->
-      <!--              v-if="!isSubscribed"-->
-      <!--              :creator="creator"-->
-      <!--              :color-border="creator.colors.menu">-->
-      <!--          </subscribe-button-slim>-->
-      <!--          -->
-      <!--        </div>-->
-      <!--      </div>-->
-      <!--    </div>-->
     </div>
 
     <div class="rounded-b-2xl min-h-10 px-36 flex flex-col items-center justify-center"