@meeovi/layer-social 1.0.3

package/app/components/features/vibez.vue

@@ -0,0 +1,221 @@
+<template>
+    <v-container class="py-10">
+        <v-card elevation="2" class="pa-6">
+            <v-card-title>
+                <v-row align="center" justify="space-between">
+                    <span>🔥 Vibez Feed</span>
+                    <v-switch v-model="showMine" label="Show My Videos" inset color="primary" />
+                </v-row>
+            </v-card-title>
+
+            <v-card-text>
+                <v-row class="mb-4" dense>
+                    <v-col cols="12" sm="6" md="4">
+                        <v-select v-model="sortBy" :items="['recency', 'popularity']" label="Sort By" clearable />
+                    </v-col>
+
+                    <v-col cols="12" sm="6" md="8">
+                        <v-autocomplete v-model="selectedTags" :items="tags" item-title="name" item-value="id"
+                            label="Filter by Tags" multiple chips clearable />
+                    </v-col>
+                </v-row>
+
+                <v-divider class="my-6" />
+                <h2 class="text-h6 mb-4">🔴 Live Now</h2>
+                <v-row>
+                    <v-col cols="12" sm="6" md="4">
+                        <v-card>
+                            <v-img src="https://your-owncast-domain.com/preview.jpg" height="200px" cover />
+                            <v-card-title>Live Stream</v-card-title>
+                            <v-card-actions>
+                                <v-btn href="https://your-owncast-domain.com" target="_blank" color="red">
+                                    Watch Live
+                                </v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </v-col>
+                </v-row>
+
+                <v-divider class="my-6" />
+                <h2 class="text-h6 mb-4">🎥 Videos</h2>
+                <v-row>
+                    <v-col v-for="video in filteredVideos" :key="video.id" cols="12" sm="6" md="4">
+                        <v-card @click="trackView(video.id)">
+                            <v-img :src="getThumbnail(video)" height="200px" cover />
+                            <v-card-title>{{ video.title }}</v-card-title>
+                            <v-card-subtitle>
+                                {{ video.visibility === 'public' ? '🌍 Public' : '🔒 Private' }} •
+                                {{ formatDuration(video.duration) }} • 👁️ {{ video.view_count || 0 }}
+                            </v-card-subtitle>
+                            <v-card-text>
+                                <v-chip v-for="tag in video.tags" :key="tag.id" class="ma-1" size="small"
+                                    color="primary" variant="outlined">
+                                    {{ tag.name }}
+                                </v-chip>
+
+                                <v-btn icon @click.stop="toggleLike(video)" :color="video.liked ? 'red' : 'grey'"
+                                    class="ml-2">
+                                    <v-icon>{{ video.liked ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
+                                </v-btn>
+                                <span>{{ video.reaction_count || 0 }}</span>
+
+                                <v-btn icon @click.stop="openComments(video)" class="ml-2">
+                                    <v-icon>mdi-comment-outline</v-icon>
+                                </v-btn>
+                                <span>{{ video.comment_count || 0 }}</span>
+                            </v-card-text>
+                            <v-card-actions>
+                                <v-btn :href="getVideoUrl(video)" target="_blank" color="primary"
+                                    :disabled="video.status !== 'ready'">
+                                    Watch
+                                </v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </v-col>
+                </v-row>
+
+                <v-alert v-if="filteredVideos.length === 0" type="info" class="mt-6">
+                    No videos match your filters.
+                </v-alert>
+            </v-card-text>
+        </v-card>
+    </v-container>
+</template>
+
+<script setup>
+import { ref, computed, watchEffect } from 'vue'
+
+const { $directus, $readItems, $readItem, $createItem, $deleteItem } = useNuxtApp()
+const config = useRuntimeConfig()
+
+const user = useSupabaseUser()
+
+const videos = ref([])
+const tags = ref([])
+const selectedTags = ref([])
+const showMine = ref(false)
+const sortBy = ref('recency')
+
+async function fetchTags() {
+    try {
+        const { data } = await $directus.request($readItems('tags', { fields: ['id', 'name'] }))
+        tags.value = data || []
+    } catch (e) {
+        console.error('Failed to fetch tags', e)
+    }
+}
+
+async function fetchVideos() {
+    try {
+        const filter = {}
+        if (showMine.value && user) {
+            filter.user_id = { _eq: user.id }
+        } else {
+            filter.visibility = { _eq: 'public' }
+        }
+
+        const sort = sortBy.value === 'popularity' ? ['-view_count'] : ['-created_at']
+
+        const { data } = await $directus.request(
+            $readItems('videos', {
+                filter,
+                sort,
+                fields: ['*', 'tags.id', 'tags.name']
+            })
+        )
+
+        videos.value = (data || []).map((v) => ({ ...v, liked: false, reaction_count: v.reaction_count || 0, comment_count: v.comment_count || 0 }))
+
+        // fetch counts and user reactions per video
+        await Promise.all(
+            videos.value.map(async (v) => {
+                try {
+                    const resp = await $directus.request($readItems('reactions', { filter: { video_id: { _eq: v.id } } }))
+                    v.reaction_count = resp?.data?.length || 0
+
+                    if (userStore.user) {
+                        const me = await $directus.request(
+                            $readItems('reactions', { filter: { video_id: { _eq: v.id }, user_id: { _eq: userStore.user.id } }, limit: 1 })
+                        )
+                        v.liked = (me?.data && me.data.length > 0) || false
+                    }
+
+                    const commentsResp = await $directus.request($readItems('comments', { filter: { video_id: { _eq: v.id } } }))
+                    v.comment_count = commentsResp?.data?.length || 0
+                } catch (e) {
+                    // non-fatal per-video
+                }
+            })
+        )
+    } catch (e) {
+        console.error('Failed to fetch videos', e)
+        videos.value = []
+    }
+}
+
+watchEffect(() => {
+    // run fetches when filters change
+    fetchTags()
+    fetchVideos()
+})
+
+const filteredVideos = computed(() =>
+    videos.value.filter((video) =>
+        selectedTags.value.length === 0 || selectedTags.value.every((tagId) => video.tags?.some((t) => t.id === tagId))
+    )
+)
+
+function getVideoUrl(video) {
+    return `https://${config.public.minioEndpoint}/vibez-transcoded/${video.minio_key}`
+}
+
+function getThumbnail(video) {
+    return `https://${config.public.minioEndpoint}/thumbnails/${video.id}.jpg`
+}
+
+function formatDuration(seconds) {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+async function trackView(videoId) {
+    await fetch('/api/view-video', {
+        method: 'POST',
+        body: JSON.stringify({ videoId }),
+        headers: { 'Content-Type': 'application/json' }
+    })
+}
+
+async function toggleLike(video) {
+    const user = userStore.user
+    if (!user) return
+
+    try {
+        const existing = await $directus.request(
+            $readItems('reactions', { filter: { video_id: { _eq: video.id }, user_id: { _eq: user.id } }, limit: 1 })
+        )
+        const existingId = existing?.data?.[0]?.id || null
+
+        if (existingId) {
+            await $directus.request($deleteItem('reactions', existingId))
+            video.liked = false
+            video.reaction_count = Math.max(0, (video.reaction_count || 0) - 1)
+        } else {
+            const resp = await $directus.request($createItem('reactions', { video_id: video.id, user_id: user.id }))
+            if (resp?.id) {
+                video.liked = true
+                video.reaction_count = (video.reaction_count || 0) + 1
+            }
+        }
+    } catch (e) {
+        console.error('Failed to toggle like', e)
+    }
+}
+
+function openComments(video) {
+    // route to details page; keep simple for now
+    // e.g. navigate to /connect/vibe/:id from parent if router available
+    console.log('Open comments for', video.id)
+}
+</script>

package/app/components/menus/lowerbar.vue

@@ -0,0 +1,37 @@
+<template>
+    <v-card variant="text" class="lowerBar">
+        <v-tabs v-model="tab" :bg-color="lowerbar?.color" :color="lowerbar?.colortext" align-tabs="center">
+            <v-tab><NuxtLink style="color: white;" to="/">{{ lowerbar?.name }}</NuxtLink></v-tab>
+            <div v-for="(menu, index) in lowerbar?.menus" :key="index">
+                <v-tab :value="menu?.value">
+                    <v-btn variant="text" :style="`color: ${lowerbar?.colortext} !important`"
+                        :href="menu?.slug">{{ menu?.name }}</v-btn>
+                </v-tab>
+            </div>
+        </v-tabs>
+    </v-card>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+
+    const tab = ref(null);
+
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const route = useRoute()
+
+    const {
+        data: lowerbar
+    } = await useAsyncData('lowerbar', () => {
+        return $directus.request($readItem('navigation', '76', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>

package/app/components/related/memberList.vue

@@ -0,0 +1,38 @@
+<template>
+    <v-card class="mx-auto" max-width="400">
+        <img v-if="member?.avatar?.filename_disk" class="align-end auto-text" height="200" :src="`${$directus.url}assets/${member?.avatar?.filename_disk}`"  :alt="member?.first_name" />
+
+        <img v-else class="align-end auto-text" height="200" src="assets/images/face7.jpg" :alt="member?.first_name" />
+            <v-card-title>{{ member?.first_name }} {{ member?.last_name }}</v-card-title>
+
+        <v-card-subtitle class="pt-4">
+            {{ member?.title }}
+        </v-card-subtitle>
+
+        <v-card-text>
+            <div>{{ member?.language }}</div>
+
+            <div>{{ member?.location }}</div>
+        </v-card-text>
+
+        <v-card-actions>
+            <v-btn color="orange" text="Add Friend" :href="`/user/${member?.id}`"></v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup>
+  const {
+        $directus
+    } = useNuxtApp()
+    
+    const props = defineProps({
+        member: {
+            type: Object,
+            required: true,
+        },
+    });
+    const {
+        member
+    } = props;
+</script>

package/app/components/related/post.vue

@@ -0,0 +1,119 @@
+<template>
+    <div>
+        <div>
+            <div class="wrap feedPost">
+                <v-card class="card__wrap" height="550">
+                    <v-card-title class="postTitle">{{ post?.title }}</v-card-title>
+                    <div class="image">
+                        <div v-if="post?.file">
+                            <video :src="`${$directus.url}assets/${post?.file?.filename_disk}`"></video>
+                        </div>
+
+                        <div v-else-if="post?.audio">
+                            <audio :src="`${$directus.url}assets/${post?.audio?.filename_disk}`"></audio>
+                        </div>
+
+                        <div v-else-if="post?.image && post?.image?.filename_disk.endsWith('.gif')">
+                            <img loading="lazy" :src="`${$directus.url}assets/${post?.image?.filename_disk}`"
+                                :alt="post?.title || 'No Title'" />
+                        </div>
+
+                        <div v-else>
+                            <img loading="lazy" src="assets/images/background4.jpg" :alt="post?.title || 'No Title'" />
+                        </div>
+                    </div>
+
+                    <v-toolbar color="transparent" flat>
+                        <v-toolbar-title>
+                            <p class="card__date mbr-fonts-style display-4 auto-text">Posted:
+                                {{ post?.date_created ? new Date(post?.date_created).toLocaleDateString() : 'Unknown date' }}
+                            </p>
+                        </v-toolbar-title>
+                        <v-spacer></v-spacer>
+                        
+                        <NuxtLink v-if="post?.author?.avatar" :to="`/user/${post?.author?.id}`" class="postAvatar">
+                            <v-avatar :image="post?.author?.avatar" size="x-small"></v-avatar>
+                        </NuxtLink>
+
+                        <NuxtLink v-else :to="`/user/${post?.author?.id}`" class="postAvatar">
+                            <v-avatar image="/images/background4.jpg" size="x-small"></v-avatar>
+                        </NuxtLink>
+                    </v-toolbar>
+
+                    <p v-dompurify-html="post?.content" class="postContent"></p>
+
+                    <v-card-actions>
+                        <!--Reactions-->
+                        <v-col class="mbr-section-btn">
+                            <v-menu>
+                                <template v-slot:activator="{ props }">
+                                    <v-btn class="btn btn-sm btn-black-outline display-4" icon="fas fa-thumbs-up"
+                                        v-bind="props" variant="text" size="small"></v-btn>
+                                </template>
+                                <v-list>
+                                    <reactions :contentId="post?.reactions?.reactions_id" :contentType="post?.type" />
+                                </v-list>
+                            </v-menu>
+                        </v-col>
+
+                        <!--Comments-->
+                        <v-col class="mbr-section-btn">
+                            <v-btn prepend-icon="fas fa-comment" title="Comment on this post" variant="text"
+                                class="btn btn-sm btn-black-outline display-4"
+                                :href="`/connect/post/${post?.slug}`"></v-btn>
+                        </v-col>
+
+                        <v-col class="mbr-section-btn">
+                            <flag :reportId="post?.report?.report_id?.id" />
+                        </v-col>
+
+                        <!--Share-->
+                        <v-col>
+                            <share />
+                        </v-col>
+                    </v-card-actions>
+                </v-card>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import share from '~/components/blocks/share.vue';
+    import flag from '~/components/blocks/flag.vue';
+    import reactions from '~/components/blocks/reactions.vue';
+    import {
+        toRef,
+        onMounted,
+        computed
+    } from 'vue'
+    import {
+        useReactionsStore
+    } from '~/stores/reactions'
+
+    const props = defineProps({
+        post: {
+            type: Object,
+            required: true,
+        },
+    });
+    const post = toRef(props, 'post');
+
+    const reactionsStore = useReactionsStore()
+    const reactionState = computed(() => {
+        const rid = post.value?.reactions?.reactions_id
+        if (!rid) return {
+            likeCount: 0,
+            isLiked: false,
+            loading: false
+        }
+        return reactionsStore.getItem(rid, post.value?.type)
+    })
+
+    onMounted(async () => {
+        const rid = post.value?.reactions?.reactions_id
+        if (rid) {
+            await reactionsStore.fetchReactions(rid, post.value?.type)
+        }
+    })
+</script>

package/app/components/related/radio.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <v-card color="#b02564">
+            <div class="d-flex flex-no-wrap justify-space-between">
+                <div>
+                    <v-card-title class="text-h5">
+                        {{ radio?.name }}
+                    </v-card-title>
+
+                    <v-card-subtitle>{{ radio?.description }}</v-card-subtitle>
+
+                    <v-card-actions>
+                        <v-btn class="ms-2" size="small" text="LISTEN" variant="outlined"
+                            :href="`/departments/categories/station/${radio?.id}`"></v-btn>
+                    </v-card-actions>
+                </div>
+
+                <v-avatar class="ma-3" rounded="0" size="125">
+                    <NuxtImg :src="`${$directus.url}assets/${radio?.image?.filename_disk}`" />
+                </v-avatar>
+            </div>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        radio: {
+            type: Object,
+            required: true,
+        },
+    });
+    const {
+        radio
+    } = props;
+</script>

package/app/components/related/relatedposts.vue

@@ -0,0 +1,30 @@
+<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="post in note" :key="post" v-slot="{ isSelected, toggle, selectedClass }">
+              <postCard :post="post" :class="['ma-4', selectedClass]" v-if="isSelected" @click="toggle" />
+            </v-slide-group-item>
+          </v-slide-group>
+        </v-sheet>
+      </v-col>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref } from 'vue'
+  import postCard from '~/components/related/post.vue'
+
+  const model = ref(null)
+  const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: note
+    } = await useAsyncData('note', () => {
+        return $directus.request($readItems('posts'))
+    })
+</script>

package/app/components/related/relatedshorts.vue

@@ -0,0 +1,30 @@
+<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="short in vibez" :key="short.id" v-slot="{ isSelected, toggle, selectedClass }">
+              <shortsCard :short="short" :class="['ma-4', selectedClass]" v-if="isSelected" @click="toggle" />
+            </v-slide-group-item>
+          </v-slide-group>
+        </v-sheet>
+      </v-col>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref } from 'vue'
+  import shortsCard from '~/components/related/short.vue'
+
+  const model = ref(null)
+  const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: vibez
+    } = await useAsyncData('vibez', () => {
+        return $directus.request($readItems('shorts'))
+    })
+</script>

package/app/components/related/relatedspaces.vue

@@ -0,0 +1,30 @@
+<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 group" :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>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref } from 'vue'
+  import spaceCard from '~/components/related/space.vue'
+
+  const model = ref(null)
+  const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: group
+    } = await useAsyncData('group', () => {
+        return $directus.request($readItems('spaces'))
+    })
+</script>

package/app/components/related/relatedusers.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+      <v-col cols="12">
+        <v-toolbar density="comfortable" color="transparent">
+            <v-toolbar-title>SUGGESTED USERS</v-toolbar-title>
+        </v-toolbar>
+        <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="user in users" :key="user.id" :value="user"
+              v-slot="{ isSelected, toggle, selectedClass }">
+              <userCard :member="user" :class="['ma-4', selectedClass]" v-if="isSelected" @click="toggle" />
+            </v-slide-group-item>
+          </v-slide-group>
+        </v-sheet>
+      </v-col>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref } from 'vue'
+  import userCard from '~/components/related/memberList.vue'
+
+  const model = ref(null)
+  const {
+        $directus,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: users
+    } = await useAsyncData('users', () => {
+        return $directus.request($readItems('tags'))
+    })
+</script>

package/app/components/related/short.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-card class="mx-auto" max-width="400">
+    <video loading="lazy" id="my-video" class="video-js" controls preload="auto"
+      style="width: 100% !important; height: 50% !important;" loop>
+      <source :src="`${$directus.url}assets/${short?.video?.filename_disk}`" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+
+    <v-card-subtitle class="pt-4">
+      {{ short?.name }}
+    </v-card-subtitle>
+
+    <v-card-text>
+      <div>Type: {{ short?.type }}</div>
+
+      <div>{{ short?.description }}</div>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-btn color="orange" text="View" :href="`/social/vibe/${short?.id}`"></v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import videojs from 'video.js'
+
+  const {
+        $directus
+    } = useNuxtApp()
+    
+const model = ref(null)
+const player = ref(null)
+
+const props = defineProps({
+  short: {
+    type: Object,
+    required: true,
+  },
+})
+const { short } = props
+
+onMounted(() => {
+  player.value = videojs('my-video', {
+    controls: true,
+    autoplay: false,
+    preload: 'auto',
+    fluid: true
+  })
+})
+
+// Clean up on component unmount
+onUnmounted(() => {
+  if (player.value) {
+    player.value.dispose()
+  }
+})
+</script>
+
+<style scoped>
+.video-js {
+  width: 100%;
+  height: 300px;
+  position: relative;
+  display: block;
+}
+</style>