@meeovi/layer-social 1.0.3

package/app/components/blocks/events/about.vue

@@ -0,0 +1,147 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="features12 cid-v0v1enubKX" id="features12-j">
+            <div>
+                <div class="container">
+                    <div class="row">
+                        <div class="card col-12 col-md-6 col-lg-4">
+                            <div class="card-wrapper">
+                                <div class="card-box">
+                                    <div class="iconfont-wrapper icon1">
+                                        <span class="mbr-iconfont mobi-mbri-features mobi-mbri"></span>
+                                    </div>
+                                    <h5 class="card-title mbr-fonts-style display-7">Details</h5>
+                                    <p class="card-text mbr-fonts-style display-4">
+                                        <i class="fas fa-users" style="display: inline-block;"> Event by {{ event?.hosts?.first_name }}
+                                            {{ event?.hosts?.last_name }}</i> <br>
+                                        <i class="fas fa-users" style="display: inline-block;"> {{ event?.location }}</i><br>
+                                        <i class="fas fa-users" style="display: inline-block;"> Tickets <NuxtLink :to="event?.tickets_url"></NuxtLink>
+                                            {{ event?.tickets_url }}</i><br>
+                                        <i class="fas fa-users" style="display: inline-block;"> Type: {{ event?.type }}</i><br>
+                                        <i class="fas fa-users" style="display: inline-block;">{{ event?.description }}</i>
+                                    </p>
+                                    <p class="link display-4">
+                                        <NuxtLink class="text-info custom-link" to="">
+                                            <span class="mbr-iconfont mobi-mbri-arrow-next mobi-mbri">
+                                            </span>
+                                            {{ event?.location }}
+                                        </NuxtLink>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card col-12 col-md-6 col-lg-4">
+                            <div class="card-wrapper">
+                                <div class="card-box">
+                                    <div class="iconfont-wrapper icon2">
+                                        <span class="mbr-iconfont mobi-mbri-desktop mobi-mbri"></span>
+                                    </div>
+                                    <h5 class="card-title mbr-fonts-style display-7">Tickets</h5>
+                                    <p class="link display-4">
+                                        <NuxtLink class="text-info custom-link" :to="event?.tickets_url">
+                                            <span class="mbr-iconfont mobi-mbri-arrow-next mobi-mbri">
+                                            </span>
+                                            Get Your Tickets
+                                        </NuxtLink>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card col-12 col-md-6 col-lg-4">
+                            <div class="card-wrapper">
+                                <div class="card-box">
+                                    <div class="iconfont-wrapper icon3">
+                                        <span class="mbr-iconfont mobi-mbri-cursor-click mobi-mbri"></span>
+                                    </div>
+                                    <h5 class="card-title mbr-fonts-style display-7">Meet Your Hosts</h5>
+                                    <p class="card-text mbr-fonts-style display-4">
+                                        <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="hosts in event?.hosts" :key="hosts.id"
+                                                    :value="hosts" v-slot="{ isSelected, toggle, selectedClass }">
+                                                    <userCard :member="hosts" :class="['ma-4', selectedClass]"
+                                                        v-if="isSelected" @click="toggle" />
+                                                </v-slide-group-item>
+                                            </v-slide-group>
+                                        </v-sheet>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card col-12 col-md-6 col-lg-4">
+                            <div class="card-wrapper">
+                                <div class="card-box">
+                                    <div class="iconfont-wrapper icon4">
+                                        <span class="mbr-iconfont mobi-mbri-help mobi-mbri"></span>
+                                    </div>
+                                    <h5 class="card-title mbr-fonts-style display-7">Guests</h5>
+                                    <p class="card-text mbr-fonts-style display-4">
+                                        Going:
+                                    </p>
+                                    <p class="card-text mbr-fonts-style display-4">
+                                        Interested:
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card col-12 col-md-6 col-lg-4">
+                            <div class="card-wrapper">
+                                <div class="card-box">
+                                    <div class="iconfont-wrapper icon5">
+                                        <span class="mbr-iconfont mobi-mbri-like mobi-mbri"></span>
+                                    </div>
+                                    <h5 class="card-title mbr-fonts-style display-7">Date</h5>
+                                    <p class="card-text mbr-fonts-style display-4">{{ event?.start_time }}
+                                        {{ event?.end_time }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card col-12 col-md-6 col-lg-4">
+                            <div class="card-wrapper">
+                                <div class="card-box">
+                                    <div class="iconfont-wrapper icon6">
+                                        <span class="mbr-iconfont mobi-mbri-responsive-2 mobi-mbri"></span>
+                                    </div>
+                                    <h5 class="card-title mbr-fonts-style display-7">Location</h5>
+                                    <div>
+                                        <LeafletMap :event="event" :height="'350px'" :markerPopup="event?.location" />
+                                    </div>
+                                    <p class="card-text mbr-fonts-style display-4">
+                                        {{ event?.location }}
+                                    </p>
+
+                                    <p class="card-text mbr-fonts-style display-4">
+                                        {{ event?.address }} {{ event?.city?.city_id?.name }}
+                                        {{ event?.state?.state_id?.name  }} {{ event?.city?.country_id?.name }}
+                                        {{ event?.city?.postalcode }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+    import LeafletMap from '~/components/blocks/LeafletMap.vue'
+
+    const model = ref(null)
+    // Accept event prop for display in the template
+    defineProps({
+        event: {
+            type: Object,
+            required: true,
+        },
+    })
+</script>
+
+<style>
+    @import 'leaflet/dist/leaflet.css';
+</style>

package/app/components/blocks/flag.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <v-btn class="btn btn-sm btn-black-outline display-4" @click="dialog = true" prepend-icon="fas fa-flag"
+            title="Flag this content" variant="flat"></v-btn>
+
+        <v-dialog v-model="dialog" max-width="800" transition="dialog-bottom-transition">
+            <template v-slot:default="{ isActive }">
+                <v-card class="pa-4">
+                    <h1>New Report</h1>
+                    <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 reportFields" :key="field.field" :field="field"
+                            v-model="form[field.field]" />
+                        <v-btn type="submit">Submit</v-btn>
+                    </form>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+
+                        <v-btn text="Close" variant="text" @click="isActive.value = false"></v-btn>
+                    </v-card-actions>
+                </v-card>
+            </template>
+        </v-dialog>
+    </div>
+</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('report', async () => {
+        return $directus.request($readFieldsByCollection('report'))
+    })
+
+    // guard against undefined/null data.value and empty arrays
+    // Don't throw here (that will crash the parent page). Instead fall back to an empty fields array
+    let reportFields = data
+    if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
+        console.warn('Report fields not available or empty', error?.value)
+        reportFields = ref([])
+    }
+
+    // use composable for form handling (validation, submit, provide context)
+    const {
+        form,
+        formError,
+        formSuccess,
+        submitForm
+    } = useDirectusForm('report', reportFields, {
+        clearOnSuccess: true,
+        closeDialogRef: dialog
+    })
+
+    const props = defineProps({
+        // Accept either `reportId` or `report` to be compatible with different usages
+        reportId: {
+            type: [String, Number, Object],
+            required: false
+        },
+        report: {
+            type: [String, Number, Object],
+            required: false
+        }
+    });
+
+    // normalize prop value
+    const providedReportId = props.reportId ?? props.report ?? null
+</script>

package/app/components/blocks/groups/about.vue

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="header6 cid-sBXV7XsZQm" id="header6-2i"
+            :style="`background-image: url('${backgroundImage}'); background-position: center;`">
+            <div class="mbr-overlay" style="opacity: 0.2; background-color: rgb(68, 121, 217);"></div>
+            <div class="align-center container-fluid">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-lg-10">
+                        <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-3 display-1">
+                            <strong>{{ group?.name }}</strong>
+                        </h1>
+
+                        <p class="mbr-text mbr-white mbr-fonts-style display-7" v-dompurify-html="group?.description">
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section data-bs-version="5.1" class="features1 cid-sBXVhMMeXw" id="features2-2k">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-md-6 col-lg-3">
+                        <div class="card-wrapper">
+                            <div class="card-box align-center">
+                                <span class="mbr-iconfont mobi-mbri-credit-card mobi-mbri"
+                                    style="color: rgb(255, 153, 102); fill: rgb(255, 153, 102);"></span>
+                                <h4 class="card-title align-center mbr-black mbr-fonts-style display-7">
+                                    <strong>Status</strong><br><br>{{ group?.status }}
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-md-6 col-lg-3">
+                        <div class="card-wrapper">
+                            <div class="card-box align-center">
+                                <span class="mbr-iconfont mobi-mbri-sites mobi-mbri"
+                                    style="color: rgb(255, 153, 102); fill: rgb(255, 153, 102);"></span>
+                                <h4 class="card-title align-center mbr-black mbr-fonts-style display-7">
+                                    <strong>Group
+                                        Created</strong><br><br>{{ new Date(group?.date_created).toLocaleDateString() }}
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-md-6 col-lg-3">
+                        <div class="card-wrapper">
+                            <div class="card-box align-center">
+                                <span class="mbr-iconfont mobi-mbri-users mobi-mbri"
+                                    style="color: rgb(255, 153, 102); fill: rgb(255, 153, 102);"></span>
+                                <h4 class="card-title align-center mbr-black mbr-fonts-style display-7">
+                                    <strong># of Members</strong><br><br>{{ group?.numberOfMembers }}
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-md-6 col-lg-3">
+                        <div class="card-wrapper">
+                            <div class="card-box align-center">
+                                <span class="mbr-iconfont mobi-mbri-home mobi-mbri"
+                                    style="color: rgb(255, 153, 102); fill: rgb(255, 153, 102);"></span>
+                                <h4 class="card-title align-center mbr-black mbr-fonts-style display-7">
+                                    <strong>Owner</strong><br><br>
+                                    <NuxtLink :to="`/user/${group?.owner?.id}`">{{ group?.owner?.first_name }}
+                                        {{ group?.owner?.last_name }}</NuxtLink>
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12">
+                        <div class="card-wrapper">
+                            <div class="card-box align-center">
+                                <p class="card-title align-center mbr-black mbr-fonts-style display-7"
+                                    v-dompurify-html="group?.description"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        group: {
+            type: Object,
+            required: true,
+        },
+    })
+
+const backgroundImage = computed(() => {
+  const image = props.group?.image
+
+  if (image?.filename_disk) {
+    return `${$directus.url}assets/${image.filename_disk}`
+  }
+
+  // fallback image from /assets
+  return new URL('@/assets/images/background2.jpg', import.meta.url).href
+})
+</script>

package/app/components/blocks/groups/feeds.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <div class="text-center">
+            <postCard :post="discussion" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    defineProps({
+        discussion: {
+            type: Object,
+            required: true,
+        },
+    })
+</script>

package/app/components/blocks/groups/lists.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+    useHead({
+        title: 'Videos',
+    })
+</script>

package/app/components/blocks/groups/media.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <div v-if="image?.image?.length">
+            <photoCard :photo="image?.image?.filename_disk" />
+        </div>
+
+        <div v-if="visual?.media?.length">
+            <videoCard :photo="visual?.media?.filename_disk" />
+        </div>
+
+        <div v-else>
+            No Media Found in this Space
+        </div>
+    </div>
+</template>
+
+<script setup>
+    defineProps({
+        image: {
+            type: Object,
+            required: true,
+        },
+        visual: {
+            type: Object,
+            required: true,
+        },
+    })
+</script>

package/app/components/blocks/groups/members.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/blocks/groups/products.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/blocks/groups/spaceLists.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/blocks/reactions.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <!-- ShareThis BEGIN -->
+         <div class="sharethis-inline-reaction-buttons"></div>
+         <!-- ShareThis END -->
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  contentId: {
+    type: [String, Number],
+    required: false,
+  },
+  contentType: {
+    type: String,
+    required: false,
+  },
+})
+
+const config = useRuntimeConfig()
+const projectId =
+  config?.public?.NUXT_PROJECT_ID ?? process.env.NUXT_PROJECT_ID ?? ''
+
+onMounted(() => {
+  const st = window.__sharethis__
+  if (!st) {
+    if (!projectId) {
+      console.warn('ShareThis property (NUXT_PROJECT_ID) is not set in runtime config or env')
+    }
+    const script = document.createElement('script')
+    const encoded = encodeURIComponent(projectId)
+    script.src = `https://platform-api.sharethis.com/js/sharethis.js#property=${encoded}&product=sticky-share-buttons`
+    document.body.appendChild(script)
+  } else if (typeof st.initialize === 'function') {
+    st.href = window.location.href
+    st.initialize()
+  }
+})
+</script>

package/app/components/blocks/repost.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <v-btn stacked icon="fas fa-retweet" title="Repost" variant="text"></v-btn>
+    </div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/blocks/share.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-btn class="shareBtn" :disabled="!isSupported" @click="startShare" variant="text" prepend-icon="fas:fa fa-share-nodes" size="medium" title="Share This">
+    {{ isSupported ? '' : 'Web share is not supported in your browser' }}
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { useShare } from '@vueuse/core'
+
+const { share, isSupported } = useShare()
+
+async function startShare() {
+  try {
+    await share({
+      title: 'Meeovi',
+      text: '',
+      url: window.location.href,
+      // Optional: you can also share files
+      // files: [...files]
+    })
+  } catch (err) {
+    console.error('Error sharing:', err)
+  }
+}
+</script>

package/app/components/blocks/stickers.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+    useHead({
+        title: 'Stickers',
+    })
+</script>

package/app/components/blocks/video.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="aspect-video w-full">
+        <magic-player-provider id="magic-player-default-demo" :options="{
+        src: 'https://stream.mux.com/3wVFr42nN3VqIVv01ugl00oSJTzKlhsZ01ep2yKz5vqeZ8.m3u8',
+        srcType: 'hls',
+      }">
+            <magic-player-video />
+            <magic-player-poster>
+                <magic-player-provider id="magic-player-default-demo-poster" :options="{
+            src: 'https://stream.mux.com/kj7uNjRztuyNotBkAI55oUeVKSSN1C4ONrIYuYcRKxo/highest.mp4',
+            autoplay: true,
+            loop: true,
+          }">
+                    <magic-player-video />
+                    <magic-player-poster>
+                        <img src="https://image.mux.com/kj7uNjRztuyNotBkAI55oUeVKSSN1C4ONrIYuYcRKxo/thumbnail.png?time=0"
+                            alt="Poster" />
+                    </magic-player-poster>
+                </magic-player-provider>
+            </magic-player-poster>
+            <magic-player-overlay />
+            <magic-player-video-controls>
+                <template #popover>
+                    <magic-player-mux-popover />
+                </template>
+            </magic-player-video-controls>
+        </magic-player-provider>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+
+    const show = ref(false)
+
+    defineProps({
+        visual: {
+            type: Object,
+            required: true,
+        },
+    })
+</script>