@meeovi/layer-social 1.0.3

package/app/pages/connect/vibe/[...id].vue

@@ -0,0 +1,204 @@
+<template>
+  <v-container class="py-10">
+    <v-card elevation="2" class="pa-6">
+      <v-card-title>{{ video?.title }}</v-card-title>
+      <v-card-subtitle>
+        {{ video?.visibility }} • {{ formatDuration(video?.duration) }} • 👁️ {{ video?.view_count }}
+      </v-card-subtitle>
+
+      <v-card-text>
+        <video
+          v-if="video?.status === 'ready'"
+          controls
+          :src="getVideoUrl(video)"
+          style="width: 100%; max-height: 500px;"
+        />
+
+        <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="toggleLike"
+          :color="liked ? 'red' : 'grey'"
+          class="ml-2"
+        >
+          <v-icon>{{ liked ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
+        </v-btn>
+        <span>{{ reactionCount }}</span>
+      </v-card-text>
+
+      <v-divider class="my-6" />
+      <h2 class="text-h6 mb-4">💬 Comments</h2>
+
+      <v-textarea
+        v-model="newComment"
+        label="Add a comment"
+        auto-grow
+        outlined
+      />
+      <v-btn color="primary" class="mt-2" @click="postComment">Post</v-btn>
+
+      <v-list>
+        <v-list-item v-for="comment in comments" :key="comment.id">
+          <v-list-item-content>
+            <v-list-item-title>{{ comment.content }}</v-list-item-title>
+            <v-list-item-subtitle>{{ formatDate(comment.created_at) }}</v-list-item-subtitle>
+            <v-btn size="small" @click="replyTo(comment)">Reply</v-btn>
+
+            <v-list-item
+              v-for="reply in comment.replies"
+              :key="reply.id"
+              class="ml-4"
+            >
+              <v-list-item-content>
+                <v-list-item-title>{{ reply.content }}</v-list-item-title>
+                <v-list-item-subtitle>{{ formatDate(reply.created_at) }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-card>
+
+    <!-- Floating Emoji Bar -->
+    <v-bottom-navigation grow fixed app>
+      <v-btn icon @click="react('🔥')"><span>🔥</span></v-btn>
+      <v-btn icon @click="react('😂')"><span>😂</span></v-btn>
+      <v-btn icon @click="react('❤️')"><span>❤️</span></v-btn>
+      <v-btn icon @click="react('👏')"><span>👏</span></v-btn>
+    </v-bottom-navigation>
+  </v-container>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const route = useRoute()
+const client = useDirectusClient()
+const { user } = useDirectusAuth()
+
+const video = ref(null)
+const comments = ref([])
+const newComment = ref('')
+const replyingTo = ref(null)
+const liked = ref(false)
+const reactionCount = ref(0)
+
+let pollId = null
+onMounted(async () => {
+  await fetchVideo()
+  await trackView()
+  await fetchReactions()
+  await refreshComments()
+  // Simple polling for new comments every 10s
+  pollId = setInterval(refreshComments, 10000)
+})
+onUnmounted(() => {
+  if (pollId) clearInterval(pollId)
+})
+
+async function fetchVideo() {
+  const resp = await client.items('videos').readByQuery({
+    filter: { id: { _eq: route.params.id } },
+    limit: 1,
+    fields: ['*', 'tags.id', 'tags.name']
+  })
+  video.value = resp?.data?.[0] || null
+}
+
+async function trackView() {
+  await fetch('/api/view-video', {
+    method: 'POST',
+    body: JSON.stringify({ videoId: route.params.id }),
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+async function fetchReactions() {
+  if (!user.value) {
+    liked.value = false
+  } else {
+    const resp = await client.items('reactions').readByQuery({
+      filter: { video_id: { _eq: route.params.id }, user_id: { _eq: user.value.id } },
+      limit: 1
+    })
+    liked.value = (resp?.data && resp.data.length > 0) || false
+  }
+
+  const all = await client.items('reactions').readByQuery({ filter: { video_id: { _eq: route.params.id } } })
+  reactionCount.value = all?.data?.length || 0
+}
+
+async function toggleLike() {
+  if (!user.value) return
+  const existing = await client.items('reactions').readByQuery({
+    filter: { video_id: { _eq: route.params.id }, user_id: { _eq: user.value.id } },
+    limit: 1
+  })
+  const existingId = existing?.data?.[0]?.id || null
+
+  if (existingId) {
+    await client.items('reactions').delete(existingId)
+    liked.value = false
+    reactionCount.value = Math.max(0, reactionCount.value - 1)
+  } else {
+    await client.items('reactions').create({ video_id: route.params.id, user_id: user.value.id })
+    liked.value = true
+    reactionCount.value += 1
+  }
+}
+
+async function react(emoji) {
+  if (!user.value) return
+  await client.items('emoji_reactions').create({ target_type: 'video', target_id: route.params.id, user_id: user.value.id, emoji })
+}
+
+function replyTo(comment) {
+  replyingTo.value = comment
+  newComment.value = `@${comment.id} `
+}
+
+async function postComment() {
+  if (!newComment.value || !user.value) return
+  await client.items('comments').create({ video_id: route.params.id, parent_id: replyingTo.value?.id || null, user_id: user.value.id, content: newComment.value })
+  newComment.value = ''
+  replyingTo.value = null
+  await refreshComments()
+}
+
+async function refreshComments() {
+  const topResp = await client.items('comments').readByQuery({ filter: { video_id: { _eq: route.params.id }, parent_id: { _null: true } }, sort: ['-created_at'] })
+  const topLevel = topResp?.data || []
+  for (const comment of topLevel) {
+    const repliesResp = await client.items('comments').readByQuery({ filter: { parent_id: { _eq: comment.id } }, sort: ['created_at'] })
+    comment.replies = repliesResp?.data || []
+  }
+  comments.value = topLevel
+}
+
+// Real-time subscriptions removed; using simple polling via setInterval
+
+function getVideoUrl(video) {
+  return `https://${config.public.minioEndpoint}/vibez-transcoded/${video.minio_key}`
+}
+
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+function formatDate(date) {
+  return new Date(date).toLocaleString()
+}
+</script>

package/app/pages/connect/vibe/preview.vue

@@ -0,0 +1,100 @@
+<template>
+    <v-container class="py-10">
+        <v-card elevation="2" class="pa-6">
+            <v-card-title>🎬 Your Vibez Library</v-card-title>
+            <v-card-text>
+                <v-row class="mb-4" dense>
+                    <v-col cols="12" sm="6" md="4">
+                        <v-select v-model="selectedVisibility" :items="visibilityOptions" label="Filter by Visibility"
+                            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-row>
+                    <v-col v-for="video in filteredVideos" :key="video.id" cols="12" sm="6" md="4">
+                        <v-card>
+                            <v-img :src="getThumbnail(video)" height="200px" cover></v-img>
+                            <v-card-title>{{ video.title }}</v-card-title>
+                            <v-card-subtitle>
+                                Visibility: {{ video.visibility }}
+                            </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-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, onMounted } from 'vue'
+    import { useDirectusClient, useDirectusAuth } from '~/composables/useDirectus'
+
+    const config = useRuntimeConfig()
+    const directus = useDirectusClient()
+    const { user } = useDirectusAuth()
+
+    const videos = ref([])
+    const tags = ref([])
+    const selectedVisibility = ref(null)
+    const selectedTags = ref([])
+
+    const visibilityOptions = ['public', 'followers', 'circles', 'private']
+
+    onMounted(async () => {
+        if (!user.value) return
+
+        // Fetch videos for this user and their tags
+        const videoResp = await directus.items('videos').list(`filter[user_id][_eq]=${user.value.id}&sort=-created_at&fields=*,tags.id,tags.name`)
+        if (videoResp && videoResp.data) videos.value = videoResp.data
+
+        // Fetch all available tags
+        const tagResp = await directus.items('tags').list()
+        if (tagResp && tagResp.data) tags.value = tagResp.data
+    })
+
+    const filteredVideos = computed(() => {
+        return videos.value.filter((video) => {
+            const matchesVisibility = !selectedVisibility.value || video.visibility ===
+                selectedVisibility.value
+
+            const matchesTags =
+                selectedTags.value.length === 0 ||
+                selectedTags.value.every((tagId) =>
+                    video.tags?.some((t) => t.id === tagId)
+                )
+
+            return matchesVisibility && matchesTags
+        })
+    })
+
+
+    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`
+    }
+</script>

package/app/pages/connect/vibe/upload.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="upload-page">
+    <h1>Upload Your Vibez 🎥</h1>
+
+    <form @submit.prevent="handleUpload">
+      <label>
+        Title:
+        <input v-model="name" type="text" placeholder="My awesome video" />
+      </label>
+
+      <label>
+        Video File:
+        <input type="file" accept="video/*" @change="handleFile" />
+      </label>
+
+      <button :disabled="loading">
+        {{ loading ? 'Uploading...' : 'Upload Vibez' }}
+      </button>
+
+      <p v-if="error" class="error">{{ error }}</p>
+      <p v-if="success" class="success">Upload successful! 🎉</p>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useDirectusAuth } from '~/composables/useDirectus'
+
+const { user } = useDirectusAuth()
+
+const name = ref('')
+const file = ref(null)
+const loading = ref(false)
+const error = ref('')
+const success = ref(false)
+
+function handleFile(e) {
+  file.value = e.target.files[0]
+}
+
+async function handleUpload() {
+  error.value = ''
+  success.value = false
+  loading.value = true
+
+  if (!user.value) {
+    error.value = 'You must be logged in to upload.'
+    loading.value = false
+    return
+  }
+
+  if (!file.value) {
+    error.value = 'Please select a video file.'
+    loading.value = false
+    return
+  }
+
+  const formData = new FormData()
+  formData.append('name', name.value)
+  formData.append('video', file.value)
+
+  // Try to read Directus access token from cookies (common names: access_token or sb:token)
+  const cookies = typeof document !== 'undefined' ? document.cookie : ''
+  const match = cookies.match(/access_token=([^;]+)/) || cookies.match(/sb:token=([^;]+)/)
+  const accessToken = match && match[1] ? decodeURIComponent(match[1]) : null
+
+  const res = await fetch('/api/upload-video', {
+    method: 'POST',
+    headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
+    body: formData,
+  })
+
+  const result = await res.json()
+  if (!res.ok) {
+    error.value = result.statusMessage || 'Upload failed.'
+  } else {
+    success.value = true
+    name.value = ''
+    file.value = null
+  }
+
+  loading.value = false
+}
+</script>
+
+<style scoped>
+.upload-page {
+  max-width: 600px;
+  margin: auto;
+  padding: 2rem;
+}
+label {
+  display: block;
+  margin-bottom: 1rem;
+}
+input[type="text"],
+input[type="file"] {
+  width: 100%;
+  padding: 0.5rem;
+}
+button {
+  padding: 0.75rem 1.5rem;
+  background: #0070f3;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+.error {
+  color: red;
+}
+.success {
+  color: green;
+}
+</style>

package/app/pages/profile/[...slug].vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <section data-bs-version="5.1" class="people5 cid-uHg5WZJiwK" id="people5-au">
+      <div class="container-fluid">
+        <div class="row justify-content-between">
+          <div class="col-12 col-lg-12">
+            <div>
+              <div class="shadow">
+                <img v-if="!user?.image" :src="user?.image" :alt="user?.name" class="align">
+                <img v-else src="assets/images/team1.jpg" :alt="user?.name" class="align">
+                <h5 class="card-title mbr-fonts-style display-2">
+                  <strong>{{ user?.name }}</strong>
+                </h5>
+                <h5 class="card-subtitle mbr-fonts-style display-4">
+                  {{ user?.profession }}</h5>
+                <NuxtLink v-if="user?.isSeller" :to="`/spaces/${user?.spaces?.space_id?.slug}`"
+                  class="card-text mbr-fonts-style display-4"></NuxtLink>
+                <p class="card-text mbr-fonts-style display-4" v-dompurify-html="user?.description"></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <v-sheet>
+      <v-tabs color="primary" center-active>
+        <v-tab value="one">Feed</v-tab>
+        <v-tab value="two">Vibez</v-tab>
+        <v-tab value="three" v-if="user?.isSeller">Shop</v-tab>
+        <v-tab value="four">Links</v-tab>
+      </v-tabs>
+
+      <v-divider></v-divider>
+
+      <v-tabs-window v-model="tab">
+        <v-tabs-window-item value="one">
+          <v-sheet class="pa-5" color="purple">One</v-sheet>
+        </v-tabs-window-item>
+        <v-tabs-window-item value="two">
+          <v-sheet class="pa-5" color="orange">Two</v-sheet>
+        </v-tabs-window-item>
+        <v-tabs-window-item value="three">
+          <v-sheet class="pa-5" color="brown">Three</v-sheet>
+        </v-tabs-window-item>
+        <v-tabs-window-item value="four">
+          <v-sheet class="pa-5" color="green">Four</v-sheet>
+        </v-tabs-window-item>
+      </v-tabs-window>
+    </v-sheet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuth, useI18n, useLocalePath, useAsyncData, useHead, useToast } from '#imports';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+  
+  const route = useRoute();
+  const tab = ref(null);
+  const {
+    user,
+    session,
+    client
+  } = useAuth()
+  const toast = useToast()
+  const {
+    t
+  } = useI18n()
+  const localePath = useLocalePath()
+  const {
+    data: accounts
+  } = await useAsyncData<any>('/accounts', () => client.listAccounts())
+
+  function hasProvider(provider: string) {
+    const list = (accounts.value as any)?.data ?? (accounts.value as any)
+    return list?.some((account: { provider: string }) => account.provider === provider)
+  }
+
+  const error = useRoute().query?.error
+  onMounted(() => {
+    if (error) {
+      toast.error({ message: String(error) })
+    }
+  })
+
+  useHead({
+    title: user?.value?.username || 'User Profile',
+  })
+
+</script>

package/app/plugins/rocketchat-api.js

@@ -0,0 +1,105 @@
+// Custom Rocket.Chat API adapter factory for Vssue
+export function RocketChatAPI(options = {}) {
+  const baseURL = options.baseURL || process.env.ROCKETCHAT_URL
+  const token = options.token || process.env.ROCKETCHAT_TOKEN
+  const userId = options.userId || process.env.ROCKETCHAT_USER_ID
+
+  return {
+    async getComments({ issueId }) {
+      const url = new URL(`${baseURL}/api/v1/channels.messages`)
+      url.search = new URLSearchParams({ roomName: issueId }).toString()
+      const response = await fetch(url.toString(), {
+        method: 'GET',
+        headers: {
+          'X-Auth-Token': token,
+          'X-User-Id': userId,
+          'Content-Type': 'application/json'
+        }
+      })
+      const data = await response.json()
+      return (data.messages || []).map(msg => ({
+        id: msg._id,
+        content: msg.msg,
+        author: { login: msg.u?.username, avatar: msg.u?.avatar },
+        createdAt: msg.ts,
+        updatedAt: msg._updatedAt
+      }))
+    },
+
+    async postComment({ issueId, content }) {
+      const response = await fetch(`${baseURL}/api/v1/chat.postMessage`, {
+        method: 'POST',
+        headers: {
+          'X-Auth-Token': token,
+          'X-User-Id': userId,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          channel: issueId,
+          text: content
+        })
+      })
+      const data = await response.json()
+      return {
+        id: data.message?._id,
+        content: data.message?.msg,
+        author: { login: data.message?.u?.username },
+        createdAt: data.message?.ts
+      }
+    },
+
+    async deleteComment({ commentId }) {
+      await fetch(`${baseURL}/api/v1/chat.delete`, {
+        method: 'POST',
+        headers: {
+          'X-Auth-Token': token,
+          'X-User-Id': userId,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ msgId: commentId })
+      })
+    },
+
+    async updateComment({ commentId, content }) {
+      const response = await fetch(`${baseURL}/api/v1/chat.update`, {
+        method: 'POST',
+        headers: {
+          'X-Auth-Token': token,
+          'X-User-Id': userId,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          msgId: commentId,
+          text: content
+        })
+      })
+      const data = await response.json()
+      return {
+        id: data.message?._id,
+        content: data.message?.msg,
+        updatedAt: data.message?._updatedAt
+      }
+    },
+
+    async getUser() {
+      const response = await fetch(`${baseURL}/api/v1/me`, {
+        headers: {
+          'X-Auth-Token': token,
+          'X-User-Id': userId
+        }
+      })
+      const data = await response.json()
+      return {
+        login: data.username,
+        avatar: data.avatar,
+        homepage: `${baseURL}/direct/${data.username}`
+      }
+    }
+  }
+}
+
+// Provide a Nuxt plugin wrapper so Nuxt recognizes this file as a plugin.
+export default defineNuxtPlugin((nuxtApp) => {
+  // expose factory on `nuxtApp.provide` for optional programmatic access
+  nuxtApp.provide('rocketChatAPIFactory', RocketChatAPI)
+})