@meeovi/layer-social 1.0.3

package/app/components/features/friends.vue

@@ -0,0 +1,131 @@
+<template>
+    <div>
+		<section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+			<div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+			<div class="align-center container">
+				<div class="row justify-content-center">
+					<div class="col-12 col-lg-8">
+						<h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+							<strong> {{ friendsPage?.name }}</strong>
+						</h3>
+						<p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="friendsPage?.content"></p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+        <v-card variant="text">
+            <v-toolbar :style="`background-color: ${friendBar?.color}; color: ${friendBar?.colortext} !important`">
+
+                <v-tabs v-model="tab" align-tabs="center">
+                    <div v-for="(menu, index) in friendBar?.menus" :key="index">
+                        <v-tab :value="menu?.value">
+                            <v-btn variant="text" :style="`color: ${friendBar?.colortext} !important`"
+                                :href="menu?.slug">{{ menu?.name }}</v-btn>
+                        </v-tab>
+                    </div>
+                </v-tabs>
+            </v-toolbar>
+        </v-card>
+
+        <v-tabs-window v-model="tab">
+            <v-tabs-window-item :value="friendBar?.menus?.[0]?.value">
+                <v-sheet class="pa-5" color="purple">
+                    <div v-for="member in friends?.followers" :key="member.id" class="d-inline-block">
+                        <memberCard :member="member?.followers_id" />
+                    </div>
+                </v-sheet>
+            </v-tabs-window-item>
+            <v-tabs-window-item :value="friendBar?.menus?.[1]?.value">
+                <v-sheet class="pa-5" color="orange">
+                    <div v-for="member in friendRequests" :key="member.id" class="d-inline-block">
+                        <memberCard :member="member" />
+                    </div>
+                </v-sheet>
+            </v-tabs-window-item>
+            <v-tabs-window-item :value="friendBar?.menus?.[2]?.value">
+                <v-sheet class="pa-5" color="brown">
+                     <div v-for="member in suggestions" :key="member.id" class="d-inline-block">
+                        <memberCard :member="member" />
+                    </div>
+                </v-sheet>
+            </v-tabs-window-item>
+            <!--<v-tabs-window-item :value="friendBar?.menus?.[3]?.value">
+                <v-sheet class="pa-5" color="green">
+                     <div v-for="member in membersList" :key="member.id" class="d-inline-block">
+                        <memberCard :member="member" />
+                    </div>
+                </v-sheet>
+            </v-tabs-window-item>-->
+        </v-tabs-window>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import memberCard from '~/components/related/memberList.vue'
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+    const route = useRoute()
+    const tab = ref(null);
+
+    const {
+        data: friendBar
+    } = await useAsyncData('friendBar', () => {
+        return $directus.request($readItem('navigation', '77', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: friendsPage
+    } = await useAsyncData('friendsPage', () => {
+        return $directus.request($readItem('pages', '87', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: friends
+    } = await useAsyncData('members', () => {
+        return $directus.request($readItems('profiles', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: suggestions
+    } = await useAsyncData('members', () => {
+        return $directus.request($readItems('profiles', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: membersList
+    } = await useAsyncData('members', () => {
+        return $directus.request($readItems('profiles', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    useHead({
+        title: 'Friend Center',
+    })
+</script>

package/app/components/features/hashtags.vue

@@ -0,0 +1,101 @@
+<template>
+    <div>
+		<section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+			<div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+			<div class="align-center container">
+				<div class="row justify-content-center">
+					<div class="col-12 col-lg-8">
+						<h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+							<strong> {{ hashtagPage?.name }}</strong>
+						</h3>
+						<p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="hashtagPage?.content"></p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+        <v-card variant="text">
+            <v-toolbar :style="`background-color: ${tagBar?.color}; color: ${tagBar?.colortext} !important`">
+                <v-toolbar-title>{{ tagBar?.name }}</v-toolbar-title>
+
+
+                <v-tabs v-model="tab" align-tabs="center">
+                    <div v-for="(menu, index) in tagBar?.menus" :key="index">
+                        <v-tab :value="menu?.value">
+                            <v-btn variant="text" :style="`color: ${tagBar?.colortext} !important`"
+                                :href="menu?.slug">{{ menu?.name }}</v-btn>
+                        </v-tab>
+                    </div>
+                </v-tabs>
+            </v-toolbar>
+        </v-card>
+
+        <section data-bs-version="5.1" class="header6 cid-v0GHPMn349" id="header6-k">
+            <div class="mbr-overlay" style="opacity: 0.3; background-color: rgb(1, 43, 58);">
+            </div>
+
+            <div>
+                <div class="container">
+                    <h5 class="mbr-section-title mbr-fonts-style display-4" v-dompurify-html="hashtagPage?.content"></h5>
+                    <p class="mbr-text mbr-fonts-style display-1">{{ hashtagPage?.name }}</p>
+
+                </div>
+            </div>
+        </section>
+
+        <div class="text-center">
+            <div v-for="hashtag in hashtags" :key="hashtag.id" class="d-inline-block">
+                <tagChip :tag="hashtag" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import TagChip from '~/components/related/tag.vue'
+
+    const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+    const route = useRoute()
+    const tab = ref(null);
+
+    const {
+        data: hashtags
+    } = await useAsyncData('hashtags', () => {
+        return $directus.request($readItems('tags', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: hashtagPage
+    } = await useAsyncData('hashtagPage', () => {
+        return $directus.request($readItem('pages', '86', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: tagBar
+    } = await useAsyncData('tagBar', () => {
+        return $directus.request($readItem('navigation', '78', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    useHead({
+        title: 'Hashtags',
+    })
+</script>

package/app/components/features/media.vue

@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <v-toolbar density="comfortable"
+            :style="`background-color: ${mediaBar?.color}; color: ${mediaBar?.colortext} !important`">
+            <v-toolbar-title>{{ mediaCenterPage?.name }}</v-toolbar-title>
+
+            <v-spacer></v-spacer>
+
+            <DragDropUpload />
+        </v-toolbar>
+
+        <!-- NAVIGATION TABS -->
+        <v-card variant="text">
+            <v-toolbar :style="`background-color: ${mediaBar?.color}; color: ${mediaBar?.colortext} !important`">
+                <v-tabs v-model="tab" align-tabs="center">
+                    <v-tab v-for="(menu, index) in mediaBar?.menus" :key="index" :value="menu.value">
+                        <v-btn variant="text" :style="`color: ${mediaBar?.colortext} !important`">
+                            {{ menu.name }}
+                        </v-btn>
+                    </v-tab>
+                </v-tabs>
+            </v-toolbar>
+        </v-card>
+
+        <!-- TAB CONTENT -->
+        <v-tabs-window v-model="tab">
+            <!-- ALL (carousel) -->
+            <v-tabs-window-item :value="mediaBar?.menus?.[0]?.value">
+                <MediaCarousel :items="allMedia" />
+            </v-tabs-window-item>
+
+            <!-- AUDIO -->
+            <v-tabs-window-item :value="mediaBar?.menus?.[1]?.value">
+                <AudioGallery :items="audioMedia" />
+            </v-tabs-window-item>
+
+            <!-- VIDEO -->
+            <v-tabs-window-item :value="mediaBar?.menus?.[2]?.value">
+                <VideoGallery :items="videoMedia" />
+            </v-tabs-window-item>
+
+            <!-- IMAGES -->
+            <v-tabs-window-item :value="mediaBar?.menus?.[3]?.value">
+                <ImageGallery :items="imageMedia" />
+            </v-tabs-window-item>
+
+            <!-- FOLDERS -->
+            <v-tabs-window-item :value="mediaBar?.menus?.[4]?.value">
+                <MediaFolderSidebar :folders="folders" @create="createFolder" @select="selectFolder"
+                    @reorder="reorderFolders" />
+            </v-tabs-window-item>
+
+            <!-- SEARCH -->
+            <v-tabs-window-item :value="mediaBar?.menus?.[5]?.value">
+                <MediaSearchBar @search="searchMedia" />
+                <MediaCarousel :items="searchResults" />
+            </v-tabs-window-item>
+
+            <!-- SHARED WITH ME (if you have a menu for it) -->
+            <v-tabs-window-item :value="mediaBar?.menus?.[6]?.value">
+                <MediaCarousel :items="sharedWithMe" />
+            </v-tabs-window-item>
+
+            <!-- SMART ALBUMS TAB -->
+            <v-tabs-window-item :value="mediaBar?.menus?.[7]?.value">
+                <div v-for="album in smartAlbums" :key="album.id" class="mb-6">
+                    <h4 class="mb-2">{{ album.label }}</h4>
+                    <MediaCarousel :items="album.items" />
+                </div>
+            </v-tabs-window-item>
+        </v-tabs-window>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import ImageGallery from '#shared/app/components/media/imageGallery.vue'
+    import VideoGallery from '#shared/app/components/media/videoGallery.vue'
+    import AudioGallery from '#shared/app/components/media/audioGallery.vue'
+    import MediaCarousel from '#shared/app/components/media/mediaCarousel.vue'
+    import MediaFolderSidebar from '#shared/app/components/media/mediaFolderSidebar.vue'
+    import MediaSearchBar from '#shared/app/components/media/mediaSearchBar.vue'
+    import DragDropUpload from '#shared/app/components/media/dragDropUpload.vue'
+
+    import {
+        useMediaCenter
+    } from '#shared/app/composables/media/useMediaCenter'
+
+    const {
+        allMedia,
+        imageMedia,
+        videoMedia,
+        audioMedia,
+        searchResults,
+        sharedWithMe,
+        folders,
+        smartAlbums,
+
+        uploadFiles,
+        searchMedia,
+        createFolder,
+        filterByFolder,
+        reorderFolders,
+    } = useMediaCenter()
+
+    const selectFolder = (folder) => {
+        filterByFolder(folder?.id || null)
+    }
+
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const tab = ref(null)
+
+    const {
+        data: mediaBar
+    } = await useAsyncData('mediaBar', () =>
+        $directus.request(
+            $readItem('navigation', '81', {
+                fields: ['*', {
+                    menus: ['*']
+                }],
+            })
+        )
+    )
+
+    const {
+        data: mediaCenterPage
+    } = await useAsyncData('mediaCenterPage', () =>
+        $directus.request(
+            $readItem('pages', '100', {
+                fields: ['*'],
+            })
+        )
+    )
+
+    useHead({
+        title: 'Meeovi Media Center'
+    })
+</script>

package/app/components/features/members.vue

@@ -0,0 +1,59 @@
+<template>
+	<div>
+		<section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+			<div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+			<div class="align-center container">
+				<div class="row justify-content-center">
+					<div class="col-12 col-lg-8">
+						<h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+							<strong> {{ memberPage?.name }}</strong>
+						</h3>
+						<p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="memberPage?.content"></p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<v-row>
+			<v-col cols="3" v-for="members in members" :key="members.id">
+				<membersCard :member="members" />
+			</v-col>
+		</v-row>
+	</div>
+</template>
+
+<script setup>
+	import membersCard from '~/components/related/membersList.vue'
+
+	useHead({
+		title: 'Members Area',
+	})
+
+	const {
+		$directus,
+		$readItems,
+		$readItem
+	} = useNuxtApp();
+
+	const {
+		data: memberPage
+	} = await useAsyncData('memberPage', () => {
+		return $directus.request($readItem('pages', '98', {
+			fields: ['*', {
+				'*': ['*']
+			}]
+		}))
+	})
+
+	const {
+		data: members
+	} = await useAsyncData('members', () => {
+		return $directus.request($readItems('members', {
+			fields: [
+				'*',
+				'avatar.*'
+			],
+			sort: '-created_on'
+		}))
+	})
+</script>

package/app/components/features/memories.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+            <div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+            <div class="align-center container">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-lg-8">
+                        <h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+                            <strong> {{ memoryPage?.name }}</strong>
+                        </h3>
+                        <p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="memoryPage?.content"></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <v-row class="text-center">
+            <v-col cols="3" v-for="historyPosts in historyPosts" :key="historyPosts">
+                <postsCard :posts="historyPosts" />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import { ref } from 'vue'
+    import postsCard from '~/components/related/post.vue'
+    
+    const user = useSupabaseUser()
+    const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+    const route = useRoute()
+    const tab = ref(null);
+
+    const {
+        data: memoryPage
+    } = await useAsyncData('memoryPage', () => {
+        return $directus.request($readItem('pages', '90', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: historyPosts
+    } = await useAsyncData('historyPosts', () => {
+        return $directus.request($readItems('posts', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                date_created: {
+                    _lt: new Date().toISOString()
+                }
+            }
+        }))
+    })
+
+    useHead({
+        title: 'Memories Center',
+    })
+</script>

package/app/components/features/radio.vue

@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+            <div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+            <div class="align-center container">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-lg-8">
+                        <h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+                            <strong> {{ radioPage?.name }}</strong>
+                        </h3>
+                        <p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="radioPage?.content"></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div v-for="(result, index) in stations" :key="index">
+            <stationCard style="margin: 10px;" :radio="result" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+    } from 'vue';
+    import stationCard from '~/components/related/radio.vue'
+
+    const model = ref(null);
+    const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: radioPage
+    } = await useAsyncData('radioPage', () => {
+        return $directus.request($readItem('pages', '97', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: stations
+    } = await useAsyncData('stations', () => {
+        return $directus.request($readItems('radios', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    useHead({
+        title: 'Meeovi Radio',
+    })
+</script>

package/app/components/features/spaceSections/audioSpaces.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <v-col cols="12">
+            <v-sheet class="mx-auto">
+                <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                    <v-slide-group-item v-for="space in myAudioSpaces" :key="space.id"
+                        v-slot="{ isSelected, toggle, selectedClass }">
+                        <spaceCard :space="space" :class="['ma-4', selectedClass]" v-if="isSelected" @click="toggle" />
+                    </v-slide-group-item>
+                </v-slide-group>
+            </v-sheet>
+        </v-col>
+
+        <v-row class="member-cards">
+            <v-col cols="3" v-for="space in audioSpaces" :key="space.id" class="d-inline-block">
+                <spaceCard :space="space" />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import spaceCard from '~/components/related/space.vue'
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const userStore = useUserStore()
+    const userDisplayName = computed(() => {
+        return userStore.user?.name || userStore.user?.username || 'User'
+    })
+
+    const model = ref(null)
+    const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: myAudioSpaces
+    } = await useAsyncData('myAudioSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                owner: {
+                    first_name: {
+                     _eq: userStore?.user?.firstName,   
+                    },
+                    last_name: {
+                        _eq: userStore?.user?.lastName,
+                    }
+                },
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'Audio'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: audioSpaces
+    } = await useAsyncData('audioSpaces', () => {
+        return $directus.request($readItems('spaces', {
+            filter: {
+                space_type: {
+                    space_types_id: {
+                        name: {
+                            _eq: 'Audio'
+                        }
+                    }
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>