inicontent 1.0.0

package/app/composables/useThumbnailCache.ts

@@ -0,0 +1,136 @@
+import type { IDBPDatabase } from 'idb'
+import { openDB } from 'idb'
+
+const DB_NAME = 'inicontent-thumbnails'
+const STORE_NAME = 'thumbnails'
+const DB_VERSION = 1
+
+let db: IDBPDatabase | null = null
+
+/**
+ * Initialize the thumbnail cache database
+ */
+async function initDB(): Promise<IDBPDatabase> {
+    if (db) return db
+
+    try {
+        db = await openDB(DB_NAME, DB_VERSION, {
+            upgrade(db) {
+                if (!db.objectStoreNames.contains(STORE_NAME)) {
+                    const store = db.createObjectStore(STORE_NAME, { keyPath: 'key' })
+                    store.createIndex('timestamp', 'timestamp', { unique: false })
+                }
+            },
+        })
+        return db
+    } catch (error) {
+        console.warn('Failed to initialize thumbnail cache:', error)
+        throw error
+    }
+}
+
+/**
+ * Get cached thumbnail from IndexedDB
+ * @param key - Unique key for the asset
+ * @returns Cached thumbnail data URL or null if not found
+ */
+export async function getCachedThumbnail(key: string): Promise<string | null> {
+    try {
+        const database = await initDB()
+        const cached = await database.get(STORE_NAME, key)
+        return cached?.data || null
+    } catch (error) {
+        console.warn(`Failed to retrieve cached thumbnail for ${key}:`, error)
+        return null
+    }
+}
+
+/**
+ * Cache a generated thumbnail in IndexedDB
+ * @param key - Unique key for the asset
+ * @param dataUrl - Generated thumbnail data URL
+ * @param expirationDays - Cache expiration in days (default: 30)
+ */
+export async function cacheThumbnail(
+    key: string,
+    dataUrl: string,
+    expirationDays = 30,
+): Promise<void> {
+    try {
+        const database = await initDB()
+        const expirationTime = Date.now() + expirationDays * 24 * 60 * 60 * 1000
+
+        await database.put(STORE_NAME, {
+            key,
+            data: dataUrl,
+            timestamp: Date.now(),
+            expiration: expirationTime,
+        })
+    } catch (error) {
+        console.warn(`Failed to cache thumbnail for ${key}:`, error)
+    }
+}
+
+/**
+ * Clear expired thumbnails from cache
+ */
+export async function clearExpiredThumbnails(): Promise<void> {
+    try {
+        const database = await initDB()
+        const allThumbnails = await database.getAll(STORE_NAME)
+        const now = Date.now()
+
+        for (const thumbnail of allThumbnails) {
+            if (thumbnail.expiration && thumbnail.expiration < now) {
+                await database.delete(STORE_NAME, thumbnail.key)
+            }
+        }
+    } catch (error) {
+        console.warn('Failed to clear expired thumbnails:', error)
+    }
+}
+
+/**
+ * Clear all the cache
+ */
+export async function clearAllCache(): Promise<void> {
+    try {
+        const database = await initDB()
+        await database.clear(STORE_NAME)
+    } catch (error) {
+        console.warn('Failed to clear all thumbnails:', error)
+    }
+}
+
+/**
+ * Get cache stats (useful for debugging)
+ */
+export async function getCacheStats(): Promise<{
+    total: number
+    expired: number
+    size: number
+}> {
+    try {
+        const database = await initDB()
+        const allThumbnails = await database.getAll(STORE_NAME)
+        const now = Date.now()
+        let totalSize = 0
+        let expiredCount = 0
+
+        for (const thumbnail of allThumbnails) {
+            if (thumbnail.expiration && thumbnail.expiration < now) {
+                expiredCount++
+            }
+            totalSize += thumbnail.data?.length || 0
+        }
+
+        return {
+            total: allThumbnails.length,
+            expired: expiredCount,
+            size: totalSize, // in bytes
+        }
+    } catch (error) {
+        console.warn('Failed to get cache stats:', error)
+        return { total: 0, expired: 0, size: 0 }
+    }
+}

package/app/composables/useVideoCompressor.ts

@@ -0,0 +1,194 @@
+import { ref } from "vue"
+import { FFmpeg } from "@ffmpeg/ffmpeg"
+import { fetchFile, toBlobURL } from "@ffmpeg/util"
+
+// Use a specific version for stability and the single-threaded core
+const FFMPEG_VERSION = "0.12.6"
+const CORE_URL = `https://unpkg.com/@ffmpeg/core-mt@${FFMPEG_VERSION}/dist/esm/ffmpeg-core.js`
+const WASM_URL = `https://unpkg.com/@ffmpeg/core-mt@${FFMPEG_VERSION}/dist/esm/ffmpeg-core.wasm`
+const WORKER_URL = `https://unpkg.com/@ffmpeg/core-mt@${FFMPEG_VERSION}/dist/esm/ffmpeg-core.worker.js`
+
+// Queue system for multiple files
+interface CompressionTask {
+    file: File
+    resolve: (file: File) => void
+    reject: (error: Error) => void
+}
+
+export function useVideoCompressor() {
+    const loading = ref(false)
+    const progress = ref(0)
+    const queue = ref<CompressionTask[]>([])
+    const isProcessing = ref(false)
+    const skipRemaining = ref(false) // Skip compression for remaining files
+    let ffmpeg: FFmpeg | null = null
+    let currentTask: CompressionTask | null = null
+
+    const abort = () => {
+        try {
+            if (ffmpeg) {
+                ffmpeg.terminate()
+                ffmpeg = null
+            }
+            // Mark to skip compression for remaining files
+            skipRemaining.value = true
+
+            // Resolve all pending tasks with original files (skip compression)
+            while (queue.value.length > 0) {
+                const task = queue.value.shift()
+                if (task) {
+                    task.resolve(task.file) // Return original file
+                }
+            }
+            // Reject current task only (it was being compressed)
+            if (currentTask) {
+                currentTask.reject(new Error("terminated"))
+                currentTask = null
+            }
+        } catch (e) {
+            console.error("Error aborting FFmpeg:", e)
+        } finally {
+            loading.value = false
+            progress.value = 0
+            isProcessing.value = false
+        }
+    }
+
+    const resetSkip = () => {
+        skipRemaining.value = false
+    }
+
+    const processQueue = async () => {
+        if (isProcessing.value || queue.value.length === 0) return
+
+        isProcessing.value = true
+
+        while (queue.value.length > 0) {
+            const task = queue.value.shift()
+            if (!task) continue
+
+            currentTask = task
+            try {
+                // If skip was requested, return original file without compression
+                if (skipRemaining.value) {
+                    task.resolve(task.file)
+                } else {
+                    const compressedFile = await compressVideoInternal(task.file)
+                    task.resolve(compressedFile)
+                }
+            } catch (error) {
+                task.reject(error as Error)
+            }
+            currentTask = null
+        }
+
+        isProcessing.value = false
+        // Reset skip flag after processing all files
+        skipRemaining.value = false
+    }
+
+    const compressVideoInternal = async (videoFile: File): Promise<File> => {
+        ffmpeg = new FFmpeg()
+        let tempOutputFileName: string | null = null
+        let inputFileName: string | null = null
+
+        // ffmpeg.on("log", ({ message }) => {
+        //     console.log(message)
+        // })
+
+        ffmpeg.on("progress", ({ progress: p, time }) => {
+            progress.value = p
+            // console.log(`Progress: ${p * 100}%, time: ${time / 1000000}s`)
+        })
+
+        try {
+            loading.value = true
+            progress.value = 0
+
+            await ffmpeg.load({
+                coreURL: await toBlobURL(CORE_URL, "text/javascript"),
+                wasmURL: await toBlobURL(WASM_URL, "application/wasm"),
+                workerURL: await toBlobURL(WORKER_URL, "text/javascript"),
+            })
+
+            // Use unique filename to avoid conflicts
+            inputFileName = `input_${Date.now()}_${videoFile.name}`
+            tempOutputFileName = `temp_output_${Date.now()}.mp4`
+            const finalOutputName = `${videoFile.name.split(".").slice(0, -1).join(".")}.mp4`
+
+            await ffmpeg.writeFile(inputFileName, await fetchFile(videoFile))
+
+            // Execute FFmpeg command for compression
+            await ffmpeg.exec([
+                "-i",
+                inputFileName,
+                "-vcodec",
+                "libx264",
+                "-crf",
+                "28", // Adjust CRF for quality/size balance (lower is better quality)
+                "-preset",
+                "fast", // 'fast' provides a good balance of speed and compression
+                "-movflags",
+                "+faststart",
+                tempOutputFileName,
+            ])
+
+            const data = await ffmpeg.readFile(tempOutputFileName)
+
+            // Create a new File object from the compressed data with a NEW instance
+            // This ensures the original file is not referenced
+            const blob = new Blob([data as any], { type: "video/mp4" })
+            const compressedFile = new File(
+                [blob],
+                finalOutputName,
+                {
+                    type: "video/mp4",
+                    lastModified: Date.now()
+                }
+            )
+
+            return compressedFile
+        } catch (error) {
+            if (String(error).includes("terminate")) {
+                throw new Error("terminated")
+            }
+            console.error("Video compression failed:", error)
+            return videoFile // Return original file on other errors
+        } finally {
+            loading.value = false
+            progress.value = 0
+            if (ffmpeg) {
+                try {
+                    if (inputFileName) await ffmpeg.deleteFile(inputFileName)
+                    if (tempOutputFileName) await ffmpeg.deleteFile(tempOutputFileName)
+                }
+                catch (e) {
+                    console.warn("Could not cleanup files, ffmpeg may have been terminated.", e)
+                }
+                // Terminate FFmpeg instance to free resources
+                try {
+                    await ffmpeg.terminate()
+                    ffmpeg = null
+                } catch (e) {
+                    console.warn("Could not terminate ffmpeg:", e)
+                }
+            }
+        }
+    }
+
+    const compressVideo = async (videoFile: File): Promise<File> => {
+        return new Promise((resolve, reject) => {
+            queue.value.push({ file: videoFile, resolve, reject })
+            processQueue()
+        })
+    }
+
+    return {
+        compressVideo,
+        loading,
+        progress,
+        abort,
+        resetSkip,
+        queueLength: computed(() => queue.value.length)
+    }
+}

package/app/error.vue

@@ -0,0 +1,112 @@
+<template>
+	<!--
+		Offline / no-data bootstrap failures render OUTSIDE the layout chain.
+		When this error is registered during the very first navigation (e.g.
+		the database middleware fails before anything is cached), Nuxt's root
+		<Suspense> never settles while error.vue's lazy layout chain
+		(dashboard → default → LazyHeader…) resolves, so the app stays blank.
+		A synchronous panel here renders instantly instead.
+	-->
+	<div v-if="rendersOffline" class="offline-page">
+		<NFlex vertical justify="center" align="center" style="min-height: 60vh">
+			<NResult :status="code" :title="message" />
+		</NFlex>
+	</div>
+
+	<NuxtLayout v-else :name="layoutName">
+		<NFlex vertical justify="center" align="center" style="min-height: 60vh">
+			<NResult :status="code" :title="message" />
+		</NFlex>
+	</NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+
+type errorCodes =
+	| "info"
+	| "success"
+	| "warning"
+	| "error"
+	| "404"
+	| "403"
+	| "500"
+	| "418";
+const { error } = defineProps({
+	error: Object as () => NuxtError & { message: "database" | "table" | "item" },
+});
+const code = ref<errorCodes>();
+const message = ref();
+
+const route = useRoute();
+
+const isOffline = typeof navigator !== "undefined" && !navigator.onLine;
+
+// Network failures while offline (mapped to 503/"offline" by the database
+// middleware) get a friendly offline page — not a raw fetch stack trace.
+const rendersOffline = computed(
+	() => !!error && (isOffline || error.statusMessage === "offline"),
+);
+
+if (error && !rendersOffline.value) {
+	code.value = String(error.statusCode) as errorCodes;
+	switch (error.statusCode) {
+		case 404:
+			code.value = "warning";
+			message.value = `${t(error.message)} ${t("notFound")}`;
+			break;
+		case 403:
+			code.value = "warning";
+			message.value = t("accessDenied");
+			break;
+		default:
+			code.value = "error";
+			message.value = t("internalServerError");
+			console.clear();
+			console.error(error);
+			break;
+	}
+} else if (!error) {
+	code.value = "error";
+	message.value = t("internalServerError");
+} else {
+	// offline branch
+	code.value = "warning";
+	message.value = t("offline");
+	// Match the app's other pages (function form — evaluated reactively and
+	// applied after the suspense-resolved mount, unlike a plain object).
+	useHead(() => ({
+		title: `${t("inicontent")} | ${t("offline")}`,
+	}));
+}
+
+// Pages that run inside the "table" layout (with the sidebar menu) are
+// /admin/tables/:slug/... (incl. backups/assets), /admin/dashboards and
+// /admin/settings. Errors thrown there — like a 404 for a non-existing
+// table — should render inside that layout so the user keeps the sidebar
+// navigation instead of being dropped to the bare dashboard shell.
+const tableErrorMessages = ["table", "item"];
+const layoutName = computed(() => {
+	if (error && tableErrorMessages.includes(error.statusMessage ?? ""))
+		return "table";
+	const segments = route.path.split("/").filter(Boolean);
+	const tablesIndex = segments.indexOf("tables");
+	if (tablesIndex !== -1 && segments[tablesIndex + 1]) return "table";
+	if (
+		route.path.includes("/admin/dashboards") ||
+		route.path.includes("/admin/settings")
+	)
+		return "table";
+	return "dashboard";
+});
+</script>
+
+<style scoped>
+.offline-page {
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 24px;
+}
+</style>

package/app/layouts/api.vue

@@ -0,0 +1,188 @@
+<template>
+    <NuxtLayout name="dashboard">
+        <NLayout position="absolute" has-sider>
+            <NLayoutSider v-if="database?.slug" :collapsed="!isMenuOpen"
+                @update-collapsed="(collapsed) => (isMenuOpen = !collapsed)" style="z-index: 1000" bordered
+                show-trigger="bar" collapse-mode="width" :collapsed-width="$device.isMobile ? 0 : 64" width="240"
+                :native-scrollbar="false">
+                <NMenu :collapsed="!isMenuOpen" :collapsed-icon-size="22" :collapsed-width="$device.isMobile ? 0 : 64"
+                    :options="menuOptions" :default-value="defaultValue" :watch-props="['defaultValue']" accordion />
+            </NLayoutSider>
+            <NLayoutContent id="pageContent" position="absolute" :content-style="{
+                padding: $device.isMobile
+                    ? '24px 12px'
+                    : Language === 'ar'
+                        ? '0 88px 24px 24px'
+                        : '0 24px 24px 88px',
+            }" :native-scrollbar="false">
+                <div v-if="isMenuOpen" @mouseover="() => (isMenuOpen = false)"
+                    style="width: 100%; height: 100%; right: 0; top: 0; position: absolute; background-color: #0000006e; z-index: 99; cursor: pointer;">
+                </div>
+                <slot></slot>
+            </NLayoutContent>
+        </NLayout>
+    </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import type { MenuOption } from "naive-ui"
+import { Icon, LazyTableIcon, NuxtLink, NIcon } from "#components"
+
+const database = useState<Database>("database");
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug)
+
+onBeforeUpdate(() => {
+    clearNuxtState("isMenuOpen")
+})
+
+const route = useRoute()
+const isMenuOpen = useState("isMenuOpen", () => false)
+const table = useState<Table>("table")
+
+const defaultValue = computed(() => {
+    const rawMethodKey = route.query.method as string | undefined
+    const normalizedMethod = rawMethodKey
+        ? methodAliases[rawMethodKey.toLowerCase()] ?? rawMethodKey
+        : undefined
+    const methodKey = normalizedMethod ?? "overview"
+    if (table.value?.slug) return `${table.value.slug}-${methodKey}`
+    const lastPathInRoute = decodeURIComponent(
+        route.path.split("/").filter(Boolean).at(-1) ?? "",
+    )
+    return lastPathInRoute
+})
+
+const methodAliases: Record<string, string> = {
+    create: "post",
+    read: "get",
+    update: "put",
+    post: "post",
+    get: "get",
+    put: "put",
+    delete: "delete",
+}
+
+const methodEntries = [
+    {
+        key: "overview",
+        icon: "tabler:book",
+        label: () => t("overview"),
+        show: () => true,
+        to: (baseUrl: string) => baseUrl,
+    },
+    {
+        key: "post",
+        icon: "tabler:plus",
+        label: () => t("methods.post"),
+        show: (allowed?: string) => allowed?.includes("c"),
+        to: (baseUrl: string) => ({ path: baseUrl, query: { method: "post" } }),
+    },
+    {
+        key: "get",
+        icon: "tabler:eye",
+        label: () => t("methods.get"),
+        show: (allowed?: string) => allowed?.includes("r"),
+        to: (baseUrl: string) => ({ path: baseUrl, query: { method: "get" } }),
+    },
+    {
+        key: "put",
+        icon: "tabler:pencil",
+        label: () => t("methods.put"),
+        show: (allowed?: string) => allowed?.includes("u"),
+        to: (baseUrl: string) => ({ path: baseUrl, query: { method: "put" } }),
+    },
+    {
+        key: "delete",
+        icon: "tabler:trash",
+        label: () => t("methods.delete"),
+        show: (allowed?: string) => allowed?.includes("d"),
+        to: (baseUrl: string) => ({ path: baseUrl, query: { method: "delete" } }),
+    },
+]
+
+function buildMethodChildren(currentTable: Table) {
+    const baseUrl = `${route.params.database ? `/${route.params.database}` : ""}/admin/api/tables/${currentTable.slug}`
+    return methodEntries
+        .filter((entry) => entry.show(currentTable.allowedMethods))
+        .map((entry) => ({
+            label: () =>
+                h(
+                    NuxtLink,
+                    {
+                        to: entry.to(baseUrl),
+                    },
+                    { default: () => entry.label() },
+                ),
+            key: `${currentTable.slug}-${entry.key}`,
+            icon: () => h(NIcon, () => h(Icon, { name: entry.icon })),
+        }))
+}
+
+function buildMenuOption(currentTable: Table): MenuOption {
+    const children = buildMethodChildren(currentTable)
+    return {
+        label: () =>
+            h(
+                NuxtLink,
+                {
+                    to: `${route.params.database ? `/${route.params.database}` : ""}/admin/api/tables/${currentTable.slug}`,
+                },
+                { default: () => t(currentTable.slug) },
+            ),
+        key: `${currentTable.slug}Group`,
+        icon: () => h(LazyTableIcon, { table: currentTable }),
+        children: [
+            {
+                type: "group",
+                label: t(currentTable.slug),
+                key: currentTable.slug,
+                children,
+            },
+        ],
+    }
+}
+
+const primaryTables = computed(() =>
+    (database.value?.tables ?? []).filter(
+        ({ slug, allowedMethods, show }) =>
+            ![
+                "users",
+                "sessions",
+                "assets",
+                "translations",
+                "pages",
+                "blocks",
+                "templates",
+            ].includes(slug) &&
+            allowedMethods?.includes("r") &&
+            show !== false,
+    ),
+)
+
+const secondaryTables = computed(() =>
+    (database.value?.tables ?? []).filter(
+        ({ slug, allowedMethods, show }) =>
+            [
+                "users",
+                "sessions",
+                "assets",
+                "translations",
+                "pages",
+                "blocks",
+                "templates",
+            ].includes(slug) &&
+            allowedMethods?.includes("r") &&
+            show !== false,
+    ),
+)
+
+const menuOptions = computed(() => {
+    if (!database.value?.tables) return [] as MenuOption[]
+    const options: MenuOption[] = []
+    options.push(...primaryTables.value.map(buildMenuOption))
+    if (secondaryTables.value.length)
+        options.push({ key: "divider-1", type: "divider" })
+    options.push(...secondaryTables.value.map(buildMenuOption))
+    return options
+})
+</script>