@meeovi/layer-social 1.0.3

package/app/components/features/spaces.vue

@@ -0,0 +1,127 @@
+<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> {{ spacePage?.name }}</strong>
+                        </h3>
+                        <p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="spacePage?.content"></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <v-card variant="text">
+            <v-toolbar :style="`background-color: ${spacesPage?.color}; color: ${spacesPage?.colortext} !important`">
+                <v-toolbar-title>{{ spacesPage?.name }}</v-toolbar-title>
+
+                <v-tabs v-model="currentTab" fixed-tabs>
+                    <v-tab v-for="(menu, index) in tabsList" :key="menu?.value ?? index" :value="menu?.value ?? menu">
+                        <v-chip>{{ menu?.title || menu?.name || menu?.value }}</v-chip>
+                    </v-tab>
+
+                    <!--<v-menu v-if="tabsList?.length">
+                        <template v-slot:activator="{ props }">
+                            <v-btn class="align-self-center me-4" height="100%" rounded="0" variant="plain"
+                                v-bind="props">
+                                Filter
+                                <v-icon icon="mdi-menu-down" end></v-icon>
+                            </v-btn>
+                        </template>
+
+                        <v-list class="bg-grey-lighten-3">
+                            <v-list-item v-for="(menu, index) in tabsList" :key="menu?.value ?? index"
+                                :title="menu?.title || menu?.name || menu?.value" @click="selectTab(menu)">
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>-->
+
+                    <v-tab :value="'create'">
+                        <createspace />
+                    </v-tab>
+                </v-tabs>
+            </v-toolbar>
+
+            <v-tabs-window v-model="currentTab">
+                <v-tabs-window-item v-for="(menu, index) in tabsList" :key="menu?.value ?? index"
+                    :value="menu?.value ?? menu">
+                    <component :is="contentComponents[index] || null" />
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed,
+        watch,
+        defineAsyncComponent,
+        markRaw
+    } from 'vue'
+    import createspace from '~/components/features/spaceSections/crud/add-space.vue'
+    import { componentMap } from '~/types/componentMap'
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+
+    // current selected tab value (matches menu.value)
+    const currentTab = ref(null);
+
+    const {
+        data: spacesPage
+    } = await useAsyncData('spacesPage', () => {
+        return $directus.request($readItem('pages', '99', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: spacesBar
+    } = await useAsyncData('spacesBar', () => {
+        return $directus.request($readItem('navigation', '79', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    // Normalize menus to objects: support both string arrays and object arrays
+    const tabsList = computed(() => {
+        const raw = spacesBar?.value?.menus ?? []
+        return raw.map((m) => (typeof m === 'string' ? {
+            value: m,
+            title: m
+        } : m))
+    })
+
+    // Map the exported loaders to async components (preserve lazy loading)
+    // markRaw each component so Vue doesn't make the component object reactive
+    const contentComponents = componentMap.map((loader) => markRaw(defineAsyncComponent(loader)))
+
+    // initialize currentTab when menus arrive
+    watch(tabsList, (val) => {
+        if (val?.length && !currentTab.value) {
+            currentTab.value = val[0].value ?? val[0]
+        }
+    }, {
+        immediate: true
+    })
+
+    function selectTab(menu) {
+        currentTab.value = menu?.value ?? menu
+    }
+
+    useHead({
+        title: 'Spaces',
+    })
+</script>

package/app/components/features/vibeSections/add-live.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-row justify="center">
+    <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition">
+      <v-card class="b-1">
+        <v-card-title>
+          <h3>Create New Vibe</h3>
+        </v-card-title>
+
+        <v-card-text>
+          <div v-if="formError" class="error">{{ formError }}</div>
+          <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
+          <form @submit.prevent="submitForm">
+            <DirectusFormElement v-for="field in shortFields" :key="field.field" :field="field" v-model="form[field.field]" />
+            <v-btn type="submit">Create</v-btn>
+          </form>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
+import { useDirectusForm } from '#shared/app/composables/globals/useDirectusForm'
+
+const dialog = ref(false)
+const { $directus, $readFieldsByCollection } = useNuxtApp()
+
+const { data, error } = await useAsyncData('shorts', async () => {
+  return $directus.request($readFieldsByCollection('shorts'))
+})
+
+// guard against undefined/null data.value and empty arrays
+if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
+  console.error(error)
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Vibe not found'
+  })
+}
+
+const shortFields = data
+
+// use composable for form handling (validation, submit, provide context)
+const { form, formError, formSuccess, submitForm } = useDirectusForm('shorts', shortFields, { clearOnSuccess: true, closeDialogRef: dialog })
+</script>

package/app/components/features/vibeSections/relatedshorts.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <v-sheet class="mx-auto row align-items-stretch items-row">
+      <v-toolbar title="Vibez within the community" color="transparent">
+        <NuxtLink to="/social/vibez/">All Vibez</NuxtLink>
+      </v-toolbar>
+      <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+        <v-slide-group-item v-slot="{ toggle, selectedClass }" v-for="(result, index) in short" :key="index">
+          <shorts style="margin: 10px;" :short="result" :class="['ma-4', selectedClass]" @click="toggle" />
+        </v-slide-group-item>
+      </v-slide-group>
+    </v-sheet>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+  } from 'vue';
+  import shorts from './shorts.vue'
+
+  const model = ref(null);
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  const {
+    data: short
+  } = await useAsyncData('short', () => {
+    return $directus.request($readItems('shorts', {
+      fields: ['*', { '*': ['*'] }]
+    }))
+  })
+</script>

package/app/components/features/vibeSections/shorts.vue

@@ -0,0 +1,207 @@
+<template>
+  <v-card class="mb-4" elevation="2">
+    <v-card-title class="d-flex align-center">
+      <v-avatar size="40" class="mr-3">
+        <v-img :src="short?.creator_avatar || '/default-avatar.png'" :alt="short?.creator" />
+      </v-avatar>
+      <div>
+        <div class="font-weight-bold">{{ short?.creator || 'Anonymous' }}</div>
+        <div class="text-caption text-grey">{{ formatDate(short?.date_created) }}</div>
+      </div>
+      <v-spacer />
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn icon="mdi-dots-vertical" variant="text" v-bind="props" />
+        </template>
+        <v-list>
+          <v-list-item @click="shareVibe">
+            <v-list-item-title>Share Vibe</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="reportVibe">
+            <v-list-item-title>Report</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-card-title>
+
+    <video 
+      ref="videoRef"
+      class="vibe-video"
+      :src="`${$directus.url}/assets/${short?.video?.filename_disk}`"
+      controls
+      preload="metadata"
+      @click="togglePlay"
+    />
+
+    <v-card-text>
+      <h4 v-if="short?.name" class="mb-2">{{ short.name }}</h4>
+      <p v-if="short?.description">{{ short.description }}</p>
+      
+      <div v-if="hashtags.length" class="mt-2">
+        <v-chip
+          v-for="tag in hashtags"
+          :key="tag"
+          size="small"
+          color="primary"
+          variant="outlined"
+          class="mr-1 mb-1"
+          @click="$emit('hashtag-click', tag)"
+        >
+          #{{ tag }}
+        </v-chip>
+      </div>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-btn icon="mdi-heart" variant="text" @click="toggleLike" :color="isLiked ? 'red' : 'grey'" />
+      <span class="text-caption">{{ short?.likes_count || 0 }}</span>
+      
+      <v-btn icon="mdi-comment" variant="text" @click="toggleComments" />
+      <span class="text-caption">{{ short?.comments_count || 0 }}</span>
+      
+      <v-btn icon="fas:fa:fa share-nodes" variant="text" @click="shareVibe" />
+      <span class="text-caption">{{ short?.shares_count || 0 }}</span>
+      
+      <v-spacer />
+      <v-btn :to="`/social/vibe/${short?.id}`" variant="text" size="small">View Vibe</v-btn>
+    </v-card-actions>
+
+    <!-- Comments Section -->
+    <v-expand-transition>
+      <div v-show="showComments">
+        <v-divider />
+        <v-card-text>
+          <v-text-field
+            v-model="newComment"
+            label="Add a comment..."
+            variant="outlined"
+            density="compact"
+            append-inner-icon="mdi-send"
+            @click:append-inner="addComment"
+            @keyup.enter="addComment"
+          />
+          
+          <div v-for="comment in vibeComments" :key="comment.id" class="mb-2">
+            <div class="d-flex align-start">
+              <v-avatar size="32" class="mr-2">
+                <v-img :src="comment.user_avatar || '/default-avatar.png'" />
+              </v-avatar>
+              <div>
+                <div class="font-weight-bold text-caption">{{ comment.username }}</div>
+                <div class="text-body-2">{{ comment.content }}</div>
+                <div class="text-caption text-grey">{{ formatDate(comment.date_created) }}</div>
+              </div>
+            </div>
+          </div>
+        </v-card-text>
+      </div>
+    </v-expand-transition>
+  </v-card>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  short: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['hashtag-click', 'comment-click', 'share'])
+
+const { short } = props
+const videoRef = ref(null)
+const isLiked = ref(false)
+const showComments = ref(false)
+const newComment = ref('')
+const vibeComments = ref([])
+
+const hashtags = computed(() => {
+  if (!short?.description) return []
+  const matches = short.description.match(/#(\w+)/g)
+  return matches ? matches.map(tag => tag.slice(1)) : []
+})
+
+const formatDate = (dateString) => {
+  if (!dateString) return 'Unknown date'
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const togglePlay = () => {
+  if (videoRef.value) {
+    if (videoRef.value.paused) {
+      videoRef.value.play()
+    } else {
+      videoRef.value.pause()
+    }
+  }
+}
+
+const toggleLike = async () => {
+  isLiked.value = !isLiked.value
+  // TODO: Implement like functionality with Directus
+}
+
+const toggleComments = () => {
+  showComments.value = !showComments.value
+  if (showComments.value && vibeComments.value.length === 0) {
+    loadComments()
+  }
+}
+
+const addComment = async () => {
+  if (!newComment.value.trim()) return
+  
+  // TODO: Implement comment creation with Directus
+  const comment = {
+    id: Date.now(),
+    username: 'Current User',
+    content: newComment.value,
+    date_created: new Date().toISOString()
+  }
+  
+  vibeComments.value.unshift(comment)
+  newComment.value = ''
+}
+
+const loadComments = async () => {
+  // TODO: Load comments from Directus
+  vibeComments.value = [
+    {
+      id: 1,
+      username: 'User1',
+      content: 'Great vibe!',
+      date_created: new Date().toISOString()
+    }
+  ]
+}
+
+const shareVibe = () => {
+  emit('share', short)
+}
+
+const reportVibe = () => {
+  console.log('Reporting vibe:', short.id)
+}
+</script>
+
+<style scoped>
+.vibe-video {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.vibe-video:hover {
+  opacity: 0.9;
+}
+</style>

package/app/components/features/vibeSections/update-short.vue

@@ -0,0 +1,266 @@
+<template>
+    <div>
+        <v-dialog max-width="500">
+            <template v-slot:activator="{ props: activatorProps }">
+                <v-btn color="primary" v-bind="activatorProps" size="medium" variant="text" class="shortUpdateBtn"
+                    text="Update" title="Update"></v-btn>
+            </template>
+
+            <template v-slot:default="{ isActive }">
+                <v-row justify="center">
+                    <v-card>
+                        <form @submit.prevent="handleSubmit">
+                            <v-toolbar dark color="primary">
+                                <v-btn icon dark @click="dialog = false">
+                                    <v-icon icon="fas:fa fa-circle-xmark"></v-icon>
+                                </v-btn>
+                                <v-card-title>
+                                    <span class="text-h6">Update Short</span>
+                                </v-card-title>
+                            </v-toolbar>
+                            <v-card-text>
+                                <v-container>
+                                    <v-row>
+                                        <v-col cols="12">
+                                            <v-text-field v-model="shortData.name" id="shortName" label="Short Name*"
+                                                required />
+                                        </v-col>
+                                        <v-col cols="6">
+                                            <v-select v-model="shortData.type" label="What type of short is this?"
+                                                :items="['Default', 'Live', 'Eats']" />
+                                        </v-col>
+                                        <v-col cols="6">
+                                            <v-select v-model="shortData.status"
+                                                label="Is this short public or private?"
+                                                :items="['Published', 'Private', 'Draft']" />
+                                        </v-col>
+                                        <v-col cols="6">
+                                            <v-select v-model="shortData.age_requirement"
+                                                label="What is the Age Requirement?"
+                                                :items="['Everyone', '18+', '16+']" />
+                                        </v-col>
+                                        <v-col cols="12">
+                                            <v-textarea v-model="shortData.description" label="Description"
+                                                id="shortDescription" />
+                                        </v-col>
+                                        <v-col cols="6">
+                                            <v-file-input @change="handleVideoUpload" clearable density="compact"
+                                                prepend-icon="fas:fa fa-video" accept="video/*" label="Video File"
+                                                variant="solo-inverted" />
+                                        </v-col>
+                                        <v-col cols="6">
+                                            <v-file-input @change="handleThumbnailUpload" clearable density="compact"
+                                                prepend-icon="fas:fa fa-image" accept="image/*" label="Image for Video"
+                                                variant="solo-inverted" />
+                                        </v-col>
+                                    </v-row>
+                                </v-container>
+                                <small>*indicates required field</small>
+                            </v-card-text>
+                            <v-card-actions>
+                                <v-spacer></v-spacer>
+                                <v-btn color="blue-darken-1" variant="text" @click="dialog = false">
+                                    Close
+                                </v-btn>
+                                <v-btn color="blue-darken-1" variant="text" type="submit">
+                                    Update Short
+                                </v-btn>
+                            </v-card-actions>
+                        </form>
+                    </v-card>
+                </v-row>
+            </template>
+        </v-dialog>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue';
+    import {
+        readItem,
+        updateItem
+    } from '@meeovi/directus-client'; // Add this import at the top
+    import {
+        useRouter
+    } from 'vue-router';
+    import uploadFiles from '~//composables/uploadFiles';
+    import updateShort from '../../composables/shorts/updateShort';
+
+    // Make sure your props are properly defined
+    // Update props to include spaces_id
+    const props = defineProps({
+        spaces_id: {
+            type: String,
+            required: true
+        }
+    });
+
+    const route = useRoute();
+
+    const id = route.params.id;
+
+    const shortData = ref({
+        name: '',
+        description: '',
+        type: '',
+        status: '',
+        duration: '',
+        video_url: '',
+        age_requirement: '',
+        video: '',
+        thumbnail: null,
+        host: userDisplayName,
+        spaces: [{
+            spaces_id: {
+                id: id
+            }
+        }], // Initialize with the spaces_id from props
+    })
+
+    const dialog = ref(false);
+    const location = ref('bottom');
+    const loading = ref(false);
+
+    const imageFile = ref(null);
+    const videoFile = ref(null);
+
+    // Function to fetch existing space data
+    const fetchShortData = async () => {
+        try {
+            const {
+                $directus,
+                $readItem
+            } = useNuxtApp();
+            const shortId = route.params.id; // Assuming you're passing the ID in the route
+            const response = await $directus.request(readItem('shorts', shortId));
+
+            // Populate the form with existing data
+            shortData.value = {
+                id: response.id,
+                name: response.name,
+                type: response.type,
+                status: response.status,
+                description: response.description,
+                video: response.video,
+                duration: response.duration,
+                video_url: response.video_url,
+                age_requirement: response.age_requirement,
+                thumbnail: response.thumbnail,
+            };
+        } catch (error) {
+            console.error('Error fetching short:', error);
+        }
+    };
+
+    // Load existing data when component mounts
+    onMounted(() => {
+        if (route.params.id) {
+            fetchShortData();
+        }
+    });
+
+    const getVideoDuration = (file) => {
+        return new Promise((resolve, reject) => {
+            const video = document.createElement('video');
+            video.preload = 'metadata';
+
+            video.onloadedmetadata = function () {
+                window.URL.revokeObjectURL(video.src);
+                resolve(video.duration);
+            }
+
+            video.onerror = function () {
+                reject("Invalid video. Please select a valid video file.");
+            }
+
+            video.src = URL.createObjectURL(file);
+        });
+    }
+
+
+    // Emit event for parent component updates
+    const emit = defineEmits(['short-updated']);
+
+    const handleThumbnailUpload = (event) => {
+        imageFile.value = event.target.files[0];
+    };
+
+    const handleVideoUpload = async (event) => {
+        videoFile.value = event.target.files[0];
+        if (videoFile.value) {
+            try {
+                const duration = await getVideoDuration(videoFile.value);
+                shortData.value.duration = Math.round(duration);
+                console.log('Video duration:', shortData.value.duration);
+            } catch (error) {
+                console.error('Error getting video duration:', error);
+                alert(error);
+            }
+        }
+    };
+
+    const handleSubmit = async () => {
+        try {
+            loading.value = true;
+            const {
+                $directus
+            } = useNuxtApp();
+
+            let uploadedFiles = {};
+            let videoDuration = shortData.value.duration; // Keep the existing duration as fallback
+
+            if (videoFile.value || imageFile.value) {
+                uploadedFiles = await uploadFiles({
+                    videoFile: videoFile.value,
+                    imageFile: imageFile.value
+                });
+
+                // Calculate video duration if a new video file is uploaded
+                if (videoFile.value) {
+                    try {
+                        const duration = await getVideoDuration(videoFile.value);
+                        videoDuration = Math.round(duration);
+                        console.log('New video duration:', videoDuration);
+                    } catch (error) {
+                        console.error('Error getting video duration:', error);
+                        // Don't throw here, we'll use the existing duration
+                    }
+                }
+            }
+
+            // Update the short using Directus SDK
+            const updatedShort = await $directus.request(
+                updateItem('shorts', route.params.id, {
+                    name: shortData.value.name,
+                    type: shortData.value.type,
+                    status: shortData.value.status,
+                    description: shortData.value.description,
+                    video: uploadedFiles.videoId || shortData.value.video,
+                    duration: videoDuration, // Use the calculated duration or existing one
+                    video_url: shortData.value.video_url,
+                    age_requirement: shortData.value.age_requirement,
+                    thumbnail: uploadedFiles.imageId || shortData.value.thumbnail,
+                })
+            );
+
+            if (updatedShort) {
+                await fetchShortData(); // Refresh the data
+                alert('Short updated successfully');
+                dialog.value = false; // Close the dialog
+                window.location.reload(); // Refresh the page
+            }
+        } catch (error) {
+            console.error('Error updating short:', error);
+            alert('Error updating short: ' + error.message);
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    // Add watch to update shorts_id if props change
+    watch(() => props.spaces_id, (newSpaceId) => {
+        shortData.value.spaces_id = newSpaceId;
+    });
+</script>