@meeovi/layer-shared 1.0.0

package/app/composables/media/useMediaCenter.ts

@@ -0,0 +1,353 @@
+import { ref, computed, unref } from 'vue'
+import { useNuxtApp } from '#imports'
+import useDirectusRequest from '../useDirectusRequest'
+import { useAuth } from '~/composables/globals/useAuth'
+
+export function useMediaCenter() {
+  // Prefer a BetterAuth `useAuth()` composable when available (provided by the auth layer).
+  // Fallback to null if not present so the rest of the composable degrades gracefully.
+  // `useAuth()` typically exposes `user` and `session` refs and a `fetchSession()` method.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const auth: any = (globalThis as any).$useAuth ?? (typeof useAuth !== 'undefined' ? useAuth() : null)
+
+  const user = computed(() => {
+    if (!auth) return null
+    // If auth exposes `user` ref directly
+    if (typeof auth.user !== 'undefined') return unref(auth.user) || null
+    // If auth exposes `session` ref containing `{ user }`
+    if (typeof auth.session !== 'undefined') return unref(auth.session)?.user || null
+    return null
+  })
+  const userId = computed(() => user.value?.id || null)
+
+  const {
+    $directus,
+    $readItems,
+    $createItem,
+    $uploadFiles,
+  } = useNuxtApp()
+
+  // CORE MEDIA STATE
+  const allMedia = ref<any[]>([])
+  const isInitialLoading = ref(true)
+  const isLoadingMore = ref(false)
+  const hasMore = ref(true)
+  const limit = 24
+  const offset = ref(0)
+
+  // FOLDERS
+  const folders = ref<any[]>([])
+  const currentFolder = ref<string | null>(null)
+
+  // SHARED & SEARCH
+  const sharedWithMe = ref<any[]>([])
+  const searchResults = ref<any[]>([])
+
+  // SMART ALBUMS
+  const smartAlbums = ref<any[]>([])
+
+  /* ---------- MIME HELPERS ---------- */
+  const mime = (i: any) => i?.directus_files_id?.type || ''
+  const isAudio = (i: any) => mime(i).startsWith('audio')
+  const isVideo = (i: any) => mime(i).startsWith('video')
+  const isImage = (i: any) => mime(i).startsWith('image')
+  const isText  = (i: any) => mime(i).startsWith('text')
+  const isDoc   = (i: any) =>
+    [
+      'application/pdf',
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    ].includes(mime(i))
+
+  /* ---------- FILTERED LISTS ---------- */
+  const filteredMedia = computed(() => {
+    if (!currentFolder.value) return allMedia.value
+    return allMedia.value.filter(m => m.folder === currentFolder.value)
+  })
+
+  const audioMedia    = computed(() => filteredMedia.value.filter(isAudio))
+  const videoMedia    = computed(() => filteredMedia.value.filter(isVideo))
+  const imageMedia    = computed(() => filteredMedia.value.filter(isImage))
+  const textMedia     = computed(() => filteredMedia.value.filter(isText))
+  const documentMedia = computed(() => filteredMedia.value.filter(isDoc))
+
+  /* ---------- RESET PAGINATION ---------- */
+  function resetPagination() {
+    allMedia.value = []
+    offset.value = 0
+    hasMore.value = true
+  }
+
+  /* ---------- FETCH USER MEDIA (PAGINATED) ---------- */
+  async function fetchNextPage() {
+    if (!userId.value) {
+      isInitialLoading.value = false
+      return
+    }
+    if (!hasMore.value) return
+
+    isLoadingMore.value = true
+
+    const filter: any = { user: { _eq: userId.value } }
+    if (currentFolder.value) {
+      filter.folder = { _eq: currentFolder.value }
+    }
+
+    try {
+      const items = await $readItems('media', {
+        fields: [
+          '*',
+          { directus_files_id: ['id', 'type', 'filename_download', 'title'] },
+        ],
+        filter,
+        sort: ['-date_created'],
+        limit,
+        offset: offset.value,
+      })
+
+      if (!items.length) {
+        hasMore.value = false
+      } else {
+        allMedia.value.push(...items)
+        offset.value += items.length
+        if (items.length < limit) hasMore.value = false
+      }
+    } finally {
+      isLoadingMore.value = false
+      isInitialLoading.value = false
+    }
+  }
+
+  /* ---------- UPLOAD FILES ---------- */
+  /**
+   * Upload files to Directus and create `media` entries.
+   * Uploads are performed one-by-one so callers can track progress.
+   *
+   * @param files - array of File objects
+   * @param onProgress - optional callback called with { index, total, status, name }
+   */
+  async function uploadFiles(files: File[], onProgress?: (info: { index: number; total: number; status: 'starting' | 'done' | 'error'; name?: string }) => void) {
+    if (!userId.value) {
+      // Try to fetch session once in case the auth state wasn't loaded yet
+      try {
+        if (auth && typeof auth.fetchSession === 'function') await auth.fetchSession()
+        else if (auth && typeof auth.fetch === 'function') await auth.fetch()
+      } catch (_) {}
+
+      if (!userId.value) {
+        try {
+          const nuxt = useNuxtApp() as any
+          const toast = nuxt?.$toast
+          if (toast && typeof toast.error === 'function') toast.error('You must be signed in to upload files')
+        } catch (_) {}
+        throw new Error('User not authenticated')
+      }
+    }
+
+    const { request } = useDirectusRequest()
+    const newItems: any[] = []
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      if (!file) {
+        onProgress && onProgress({ index: i, total: files.length, status: 'error' })
+        continue
+      }
+      try {
+        onProgress && onProgress({ index: i, total: files.length, status: 'starting', name: file.name })
+
+        const formData = new FormData()
+        formData.append('file', file)
+
+        const resp = await request($uploadFiles(formData))
+        const uploaded = Array.isArray(resp) ? resp : (resp ? [resp] : [])
+
+        for (const up of uploaded) {
+          const mediaItem = await $createItem('media', {
+            user: userId.value,
+            directus_files_id: up.id,
+            title: up.filename_download || up.title || up.id,
+            folder: currentFolder.value || null,
+          })
+
+          newItems.push({ ...mediaItem, directus_files_id: up })
+        }
+
+        onProgress && onProgress({ index: i, total: files.length, status: 'done', name: file.name })
+      } catch (e) {
+        onProgress && onProgress({ index: i, total: files.length, status: 'error', name: file.name })
+        try {
+          const nuxt = useNuxtApp() as any
+          const toast = nuxt?.$toast
+          if (toast && typeof toast.error === 'function') toast.error(`Upload failed: ${file.name}`)
+        } catch (_) {}
+        console.error('uploadFiles failed for file', file.name, e)
+      }
+    }
+
+    if (newItems.length) {
+      // add newly created items to the beginning of allMedia
+      allMedia.value.unshift(...newItems)
+      try {
+        const nuxt = useNuxtApp() as any
+        const toast = nuxt?.$toast
+        if (toast && typeof toast.success === 'function') toast.success(`Uploaded ${newItems.length} file${newItems.length === 1 ? '' : 's'}`)
+      } catch (_) {}
+    }
+
+    return newItems
+  }
+
+  /* ---------- FOLDERS ---------- */
+  async function fetchFolders() {
+    if (!userId.value) return
+    folders.value = await $readItems('folders', {
+      filter: { user: { _eq: userId.value } },
+      sort: ['sort', 'name'],
+    })
+  }
+
+  async function createFolder(name: string, parent: string | null = null) {
+    await $createItem('folders', {
+      name,
+      user: userId.value,
+      parent_folder: parent,
+    })
+    await fetchFolders()
+  }
+
+  function filterByFolder(folderId: string | null) {
+    currentFolder.value = folderId
+    resetPagination()
+    fetchNextPage()
+  }
+
+  async function reorderFolders(updated: any[]) {
+    // You can persist a "sort" field here if you add it to folders.
+    // Example (pseudo-batched):
+    //
+    // for (let index = 0; index < updated.length; index++) {
+    //   const folder = updated[index]
+    //   await $directus.request(
+    //     $updateItem('folders', folder.id, { sort: index })
+    //   )
+    // }
+    //
+    // For now, we just update local state:
+    folders.value = [...updated]
+  }
+
+  /* ---------- SHARED WITH ME ---------- */
+  async function fetchSharedWithMe() {
+    if (!userId.value) return
+    sharedWithMe.value = await $readItems('media', {
+      fields: [
+        '*',
+        { directus_files_id: ['id', 'type', 'filename_download', 'title'] },
+      ],
+      filter: { shared_with: { _contains: userId.value } },
+      sort: ['-date_created'],
+    })
+  }
+
+  /* ---------- SEARCH ---------- */
+  async function searchMedia(query: string) {
+    if (!query) {
+      searchResults.value = []
+      return
+    }
+
+    searchResults.value = await $readItems('media', {
+      fields: [
+        '*',
+        { directus_files_id: ['id', 'type', 'filename_download', 'title'] },
+      ],
+      filter: {
+        _or: [
+          { title: { _icontains: query } },
+          { tags: { _icontains: query } },
+          {
+            directus_files_id: {
+              title: { _icontains: query },
+            },
+          },
+        ],
+      },
+      sort: ['-date_created'],
+    })
+  }
+
+  /* ---------- SMART ALBUMS ---------- */
+  const smartAlbumsComputed = computed(() => {
+    const albums: { id: string; label: string; items: any[] }[] = []
+
+    const now = new Date()
+    const todayKey = now.toISOString().slice(0, 10)
+
+    const buckets: Record<string, any[]> = {}
+
+    for (const item of allMedia.value) {
+      const dateKey = (item.date_created || '').slice(0, 10) || 'unknown'
+      const typeBucket = isImage(item)
+        ? 'Images'
+        : isVideo(item)
+        ? 'Videos'
+        : isAudio(item)
+        ? 'Audio'
+        : 'Other'
+
+      const key =
+        dateKey === todayKey
+          ? `Today / ${typeBucket}`
+          : `${dateKey} / ${typeBucket}`
+
+      if (!buckets[key]) buckets[key] = []
+      buckets[key].push(item)
+    }
+
+    for (const key of Object.keys(buckets)) {
+      albums.push({
+        id: key,
+        label: key,
+        items: buckets[key]!,
+      })
+    }
+
+    return albums
+  })
+
+  smartAlbums.value = smartAlbumsComputed.value
+
+  /* ---------- RETURN API ---------- */
+  return {
+    // state
+    allMedia,
+    audioMedia,
+    videoMedia,
+    imageMedia,
+    textMedia,
+    documentMedia,
+    folders,
+    currentFolder,
+    sharedWithMe,
+    searchResults,
+    smartAlbums,
+
+    // flags
+    isInitialLoading,
+    isLoadingMore,
+    hasMore,
+
+    // actions
+    fetchNextPage,
+    uploadFiles,
+    fetchFolders,
+    createFolder,
+    filterByFolder,
+    reorderFolders,
+    fetchSharedWithMe,
+    searchMedia,
+  }
+}

package/app/composables/media/useVideojs.ts

@@ -0,0 +1,45 @@
+import { useNuxtApp } from '#imports'
+
+/**
+ * Composable wrapper for the shared `videojs` Nuxt plugin.
+ * Provides access to the provided `videojs` instance and registration helpers.
+ */
+export default function useVideojs() {
+  const nuxtApp = useNuxtApp()
+
+  // Provided by layers/shared-app/app/plugins/videojs.client.js
+  const videojs = (nuxtApp as any).$videojs || null
+  const registerVideojsPlugin = (nuxtApp as any).$registerVideojsPlugin || ((name: string, plugin: any) => {})
+  const registerVideojsPlugins = (nuxtApp as any).$registerVideojsPlugins || ((defs: any) => {})
+
+  function createPlayer(el: Element | string | null, options?: any, ready?: (this: any) => void) {
+    if (!videojs) {
+      // fallback: try to import dynamically (client-side only)
+      // but avoid bundling here; return null instead
+      return null
+    }
+    try {
+      return videojs(el as any, options, ready)
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('[useVideojs] createPlayer failed', e)
+      return null
+    }
+  }
+
+  function disposePlayer(player: any) {
+    try {
+      player && typeof player.dispose === 'function' && player.dispose()
+    } catch (e) {
+      // ignore
+    }
+  }
+
+  return {
+    videojs,
+    registerVideojsPlugin,
+    registerVideojsPlugins,
+    createPlayer,
+    disposePlayer,
+  }
+}

package/app/composables/registry.ts

@@ -0,0 +1,13 @@
+import { ContentProvider } from "./types"
+
+const providers: Record<string, ContentProvider> = {}
+
+export function registerContentProvider(name: string, provider: ContentProvider) {
+  providers[name] = provider
+}
+
+export function getContentProvider(name: string) {
+  const provider = providers[name]
+  if (!provider) throw new Error(`Content provider "${name}" not found`)
+  return provider
+}

package/app/composables/types.ts

@@ -0,0 +1,12 @@
+export interface ContentItem {
+  id: string
+  title: string
+  body: any
+  slug?: string
+  [key: string]: any
+}
+
+export interface ContentProvider {
+  getContent(slug: string): Promise<ContentItem>
+  listContent(params?: Record<string, any>): Promise<ContentItem[]>
+}

package/app/composables/useContent.ts

@@ -0,0 +1,13 @@
+import { getContentProvider } from './registry'
+import { useRuntimeConfig } from '#imports'
+
+export function useContent() {
+  const config = useRuntimeConfig()
+  const providerName = config.public.contentProvider || 'directus'
+  const provider = getContentProvider(providerName)
+
+  return {
+    getContent: provider.getContent,
+    listContent: provider.listContent
+  }
+}

package/app/composables/useDirectusRequest.ts

@@ -0,0 +1,32 @@
+import { useNuxtApp } from '#imports'
+
+/**
+ * Centralized safe wrapper around `$directus.request`.
+ * Shows a toast error when the Directus client or `.request` is not available.
+ */
+export default function useDirectusRequest() {
+  const nuxt = useNuxtApp() as any
+
+  async function request(config: any) {
+    try {
+      const client = nuxt?.$directus
+      if (!client || typeof client.request !== 'function') {
+        try {
+          const toast = nuxt?.$toast
+          if (toast && typeof toast.error === 'function') toast.error('Directus client unavailable')
+        } catch (_) {}
+        throw new Error('Directus client.request is not available')
+      }
+
+      return await client.request(config)
+    } catch (e) {
+      try {
+        const toast = nuxt?.$toast
+        if (toast && typeof toast.error === 'function') toast.error('Request failed')
+      } catch (_) {}
+      throw e
+    }
+  }
+
+  return { request }
+}

package/app/types/api/global-search.ts

@@ -0,0 +1,8 @@
+export interface GlobalSearchResult {
+	id?: string;
+	title?: string;
+	type?: string;
+	description?: string;
+	image?: string;
+	url?: string;
+}

package/app/types/blocks/block-button-group.ts

@@ -0,0 +1,7 @@
+import type { BlockButton } from './block-button';
+
+export interface BlockButtonGroup {
+	id: string;
+	buttons: (string | BlockButton)[] | null;
+	alignment: 'left' | 'center' | null;
+}

package/app/types/blocks/block-button.ts

@@ -0,0 +1,14 @@
+import type { Post, Page } from '../content';
+
+export interface BlockButton {
+	id: string;
+	sort: number | null;
+	type: ('pages' | 'posts' | 'external') | null;
+	label: string | null;
+	color: 'primary' | 'white' | 'gray' | 'white' | 'black';
+	variant: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
+	page: string | Page | null;
+	post: string | Post | null;
+	external_url: string | null;
+	icon: string | null;
+}

package/app/types/blocks/block-column.ts

@@ -0,0 +1,20 @@
+import type { File } from '../system';
+import type { BlockButtonGroup } from '.';
+
+export interface BlockColumn {
+	headline?: string | null;
+	id?: string;
+	title?: string | null;
+	rows?: (number | BlockColumnRow)[];
+}
+
+export interface BlockColumnRow {
+	block_columns?: (string | BlockColumn) | null;
+	content?: string | null;
+	headline?: string | null;
+	id?: string;
+	image?: (string | File) | null;
+	image_position?: string | null;
+	title?: string | null;
+	button_group?: (string | BlockButtonGroup) | null;
+}

package/app/types/blocks/block-cta.ts

@@ -0,0 +1,10 @@
+import type { BlockButtonGroup } from '.';
+
+export interface BlockCta {
+	buttons?: { [key: string]: any } | null;
+	content?: string | null;
+	headline?: string | null;
+	id?: string;
+	title?: string | null;
+	button_group?: (string | BlockButtonGroup) | null;
+}

package/app/types/blocks/block-divider.ts

@@ -0,0 +1,4 @@
+export interface BlockDivider {
+	id?: string;
+	title?: string | null;
+}

package/app/types/blocks/block-faq.ts

@@ -0,0 +1,12 @@
+export interface BlockFaq {
+	faqs?: BlockFaqQuestion[] | null;
+	headline?: string | null;
+	id?: string;
+	title?: string | null;
+	alignment?: 'left' | 'center' | null;
+}
+
+export interface BlockFaqQuestion {
+	title: string | null;
+	answer: string | null;
+}

package/app/types/blocks/block-form.ts

@@ -0,0 +1,8 @@
+import type { Form } from '../content';
+
+export interface BlockForm {
+	form?: (string | Form) | null;
+	headline?: string | null;
+	id?: string;
+	title?: string | null;
+}

package/app/types/blocks/block-gallery.ts

@@ -0,0 +1,14 @@
+import type { File } from '../system';
+
+export interface BlockGallery {
+	headline?: string | null;
+	id?: string;
+	title?: string | null;
+	gallery_items?: BlockGalleryFile[] | null;
+}
+export interface BlockGalleryFile {
+	block_gallery?: (string | BlockGallery) | null;
+	directus_files_id?: (string | File) | null;
+	id?: number;
+	sort?: number | null;
+}

package/app/types/blocks/block-hero.ts

@@ -0,0 +1,12 @@
+import type { File } from '../system';
+import type { BlockButtonGroup } from '.';
+
+export interface BlockHero {
+	id?: string;
+	title?: string | null;
+	headline?: string | null;
+	content?: string | null;
+	image?: (string | File) | null;
+	image_position?: 'left' | 'right' | null;
+	button_group?: (string | BlockButtonGroup) | null;
+}

package/app/types/blocks/block-html.ts

@@ -0,0 +1,4 @@
+export interface BlockHtml {
+	id?: string;
+	raw_html?: string | null;
+}

package/app/types/blocks/block-logocloud.ts

@@ -0,0 +1,14 @@
+import type { File } from '../system';
+
+export interface BlockLogocloud {
+	headline?: string | null;
+	id?: string;
+	title?: string | null;
+	logos?: (string | BlockLogocloudFile)[];
+}
+export interface BlockLogocloudFile {
+	id?: string;
+	sort?: number | null;
+	block_logocloud_id?: (string | BlockLogocloud) | null;
+	directus_files_id?: (string | File) | null;
+}

package/app/types/blocks/block-quote.ts

@@ -0,0 +1,11 @@
+import type { File } from '../system';
+
+export interface BlockQuote {
+	background_color?: string | null;
+	content?: string | null;
+	headline?: string | null;
+	id?: string;
+	image?: (string | File) | null;
+	subtitle?: string | null;
+	title?: string | null;
+}

package/app/types/blocks/block-richtext.ts

@@ -0,0 +1,7 @@
+export interface BlockRichtext {
+	content?: string | null;
+	headline?: string | null;
+	id?: string;
+	title?: string | null;
+	alignment?: 'left' | 'center' | null;
+}

package/app/types/blocks/block-steps.ts

@@ -0,0 +1,22 @@
+import type { File } from '../system';
+import type { BlockButtonGroup } from '.';
+
+export interface BlockStep {
+	id?: string;
+	title?: string | null;
+	headline?: string | null;
+	/** If enabled, image position is alternated between left and right. */
+	alternate_image_position?: boolean;
+	/** Show the step numbers on the website. For example: (Step 1, Step 2, etc) */
+	show_step_numbers?: boolean | null;
+	steps?: (number | BlockStepItem)[];
+}
+export interface BlockStepItem {
+	id?: string;
+	title?: string | null;
+	content?: string | null;
+	image?: (string | File) | null;
+	sort?: number | null;
+	block_steps?: (string | BlockStep) | null;
+	button_group?: (string | BlockButtonGroup) | null;
+}

package/app/types/blocks/block-team.ts

@@ -0,0 +1,6 @@
+export interface BlockTeam {
+	content?: string | null;
+	headline?: string | null;
+	id?: string;
+	title?: string | null;
+}