@xleddyl/nuxt-cms 0.1.39 → 0.1.41

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -9,8 +9,8 @@ import svgLoader from 'vite-svg-loader';
 import { introspectionFromSchema, buildSchema } from 'graphql';
 import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal';
 import { createJiti } from 'jiti';
-import { typeName, blockTypeName, blockUnionName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
-import { isMultiSelect, fieldConditions, isTranslatableField, isTranslatableMediaField, isRequiredField, isPrivateField, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
+import { typeName, blockTypeName, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
+import { isMultiSelect, fieldConditions, isTranslatableField, isTranslatableMediaField, isRequiredField, isPrivateField, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 import { createHash } from 'node:crypto';
 import { readFile } from 'node:fs/promises';
@@ -450,6 +450,10 @@ ${[mediaTableExpr(dialect), ...tables, ...joins].join(
 `;
 }
 
+function mediaTsType(field) {
+  const types = mediaTypeFilter(field.mediaType);
+  return types ? `CmsMedia<${types.map((type) => `'${type}'`).join(" | ")}>` : "CmsMedia";
+}
 function scalarTsType(field) {
   switch (field.type) {
     case "number":
@@ -470,13 +474,13 @@ function fieldTsType(config, entryName, key, field) {
     if (field.cardinality === "many-to-many") return `${target}[]`;
     return isRequiredField(field) && !config[field.to]?.drafts ? target : `${target} | null`;
   }
-  if (field.type === "media") return "CmsMedia | null";
+  if (field.type === "media") return `${mediaTsType(field)} | null`;
   if (field.type === "select" && field.multiple) {
     const union = field.options.map((o) => JSON.stringify(o)).join(" | ");
     return `(${union})[]`;
   }
   if (field.type === "blocks") {
-    const union = blockUnionName(entryName, key);
+    const union = blocksFieldTypeName(entryName, key);
     return isRequiredField(field) ? `${union}[]` : `${union}[] | null`;
   }
   if (isTranslatableField(field)) return isRequiredField(field) ? "string" : "string | null";
@@ -492,7 +496,7 @@ function blockTypesTs(entryName, key, field) {
     const lines = [`  __typename?: '${name}'`, `  type: '${blockName}'`];
     for (const [blockFieldKey, blockField] of Object.entries(block.fields)) {
       if (blockField.type === "media") {
-        lines.push(`  ${blockFieldKey}: CmsMedia | null`);
+        lines.push(`  ${blockFieldKey}: ${mediaTsType(blockField)} | null`);
         continue;
       }
       const base = scalarTsType(blockField);
@@ -503,7 +507,7 @@ ${lines.join("\n")}
 }`);
   }
   if (members.length)
-    defs.push(`export type ${blockUnionName(entryName, key)} = ${members.join(" | ")}`);
+    defs.push(`export type ${blocksFieldTypeName(entryName, key)} = ${members.join(" | ")}`);
   return defs;
 }
 function entryTs(config, name, entry) {
@@ -520,10 +524,11 @@ ${lines.join("\n")}
 }
 function renderTypesFile(config) {
   const parts = [
-    `export interface CmsMedia {
+    `export type CmsMediaType = 'image' | 'video' | 'file'`,
+    `export interface CmsMedia<T extends CmsMediaType = CmsMediaType> {
   key: string
   url: string | null
-  type: 'image' | 'video' | 'file'
+  type: T
   alt: string | null
   folder: string | null
   mime: string | null

package/dist/runtime/app/components/cms/MediaField.d.vue.ts

@@ -1,6 +1,6 @@
 import type { MediaType } from '#nuxt-cms';
 type __VLS_Props = {
-    mediaType?: MediaType;
+    mediaType?: MediaType | MediaType[];
     accept?: string[];
 };
 type __VLS_ModelProps = {

package/dist/runtime/app/components/cms/MediaField.vue.d.ts

@@ -1,6 +1,6 @@
 import type { MediaType } from '#nuxt-cms';
 type __VLS_Props = {
-    mediaType?: MediaType;
+    mediaType?: MediaType | MediaType[];
     accept?: string[];
 };
 type __VLS_ModelProps = {

package/dist/runtime/app/components/cms/MediaGallery.d.vue.ts

@@ -1,7 +1,7 @@
 import type { MediaType } from '#nuxt-cms';
 type __VLS_Props = {
     selectable?: boolean;
-    mediaType?: MediaType;
+    mediaType?: MediaType | MediaType[];
     accept?: string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/app/components/cms/MediaGallery.vue

@@ -243,7 +243,13 @@
 
 <script setup>
 import { computed, onMounted, ref, watch } from "#imports";
-import { MEDIA_TYPES, mediaFilename, mediaIconFor, normalizeMediaFolder } from "#nuxt-cms";
+import {
+  MEDIA_TYPES,
+  mediaFilename,
+  mediaIconFor,
+  mediaTypeFilter,
+  normalizeMediaFolder
+} from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
@@ -298,12 +304,16 @@ const sourceHint = computed(() => {
 onMounted(reload);
 const notConfigured = computed(() => errorCode.value === 501);
 const loadError = computed(() => errorCode.value !== null && errorCode.value !== 501);
-const restricted = computed(
-  () => props.mediaType && props.mediaType !== "file" ? props.mediaType : null
-);
-const filters = ["all", ...MEDIA_TYPES];
+const allowedTypes = computed(() => mediaTypeFilter(props.mediaType));
+const filters = computed(() => [
+  "all",
+  ...allowedTypes.value ?? MEDIA_TYPES
+]);
 const filter = ref("all");
-const showTypeFilters = computed(() => !restricted.value && items.value.length > 0);
+const showTypeFilters = computed(() => filters.value.length > 2 && items.value.length > 0);
+watch(filters, (list) => {
+  if (!list.includes(filter.value)) filter.value = "all";
+});
 const search = ref("");
 const draftFolders = ref([]);
 onMounted(() => {
@@ -350,8 +360,9 @@ watch(usedFolders, (used) => {
   }
 });
 const visible = computed(() => {
-  const active = restricted.value ?? (filter.value === "all" ? null : filter.value);
-  let list = active ? items.value.filter((item) => item.type === active) : items.value;
+  const allowed = allowedTypes.value;
+  let list = allowed ? items.value.filter((item) => allowed.includes(item.type)) : items.value;
+  if (filter.value !== "all") list = list.filter((item) => item.type === filter.value);
   if (folder.value) list = list.filter((item) => item.folder === folder.value);
   const query = search.value.trim().toLowerCase();
   if (query) {

package/dist/runtime/app/components/cms/MediaGallery.vue.d.ts

@@ -1,7 +1,7 @@
 import type { MediaType } from '#nuxt-cms';
 type __VLS_Props = {
     selectable?: boolean;
-    mediaType?: MediaType;
+    mediaType?: MediaType | MediaType[];
     accept?: string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/app/components/cms/MediaUpload.d.vue.ts

@@ -1,7 +1,7 @@
 import type { MediaItem, MediaType } from '#nuxt-cms';
 type __VLS_Props = {
     multiple?: boolean;
-    mediaType?: MediaType;
+    mediaType?: MediaType | MediaType[];
     accept?: string[];
     folder?: string | null;
 };

package/dist/runtime/app/components/cms/MediaUpload.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup>
-import { formatFileSize } from "#nuxt-cms";
+import { formatFileSize, mediaTypeAccept } from "#nuxt-cms";
 import { computed, ref } from "#imports";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
@@ -50,7 +50,6 @@ const emit = defineEmits(["uploaded"]);
 const toast = useCmsToast();
 const { mediaMaxFileSize } = useCmsRuntime();
 async function imageDimensions(file) {
-  if (!file.type.startsWith("image/")) return {};
   try {
     const bitmap = await createImageBitmap(file);
     const dims = { width: bitmap.width, height: bitmap.height };
@@ -60,13 +59,35 @@ async function imageDimensions(file) {
     return {};
   }
 }
+function videoDimensions(file) {
+  return new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const video = document.createElement("video");
+    const settle = (dims) => {
+      URL.revokeObjectURL(url);
+      resolve(dims);
+    };
+    video.preload = "metadata";
+    video.muted = true;
+    video.onloadedmetadata = () => settle(
+      video.videoWidth && video.videoHeight ? { width: video.videoWidth, height: video.videoHeight } : {}
+    );
+    video.onerror = () => settle({});
+    video.src = url;
+  });
+}
+async function mediaDimensions(file) {
+  if (file.type.startsWith("image/")) return imageDimensions(file);
+  if (file.type.startsWith("video/")) return videoDimensions(file);
+  return {};
+}
 const input = ref(null);
 const dragOver = ref(false);
 const uploading = ref(false);
 const done = ref(0);
 const total = ref(0);
 const acceptAttr = computed(
-  () => props.accept?.length ? props.accept.join(",") : props.mediaType === "image" ? "image/*" : props.mediaType === "video" ? "video/*" : void 0
+  () => (props.accept?.length ? props.accept : mediaTypeAccept(props.mediaType))?.join(",")
 );
 function matchesAccept(file) {
   if (!acceptAttr.value) return true;
@@ -100,7 +121,7 @@ async function uploadOne(file) {
       folder: presign.folder,
       mime: file.type || null,
       size: file.size,
-      ...await imageDimensions(file)
+      ...await mediaDimensions(file)
     }
   });
   done.value++;

package/dist/runtime/app/components/cms/MediaUpload.vue.d.ts

@@ -1,7 +1,7 @@
 import type { MediaItem, MediaType } from '#nuxt-cms';
 type __VLS_Props = {
     multiple?: boolean;
-    mediaType?: MediaType;
+    mediaType?: MediaType | MediaType[];
     accept?: string[];
     folder?: string | null;
 };

package/dist/runtime/app/composables/cms-query-disabled.d.ts

@@ -1,6 +1,11 @@
-import type { AsyncData } from 'nuxt/app';
+import type { AsyncData, AsyncDataOptions } from 'nuxt/app';
 type CmsDisabledResult = Record<string, any>;
 type CmsDisabledVariables = Record<string, any>;
+export interface CmsAsyncDataOptions<ResT, DefaultT> extends Pick<AsyncDataOptions<ResT>, 'server' | 'lazy' | 'immediate' | 'deep' | 'dedupe' | 'watch'> {
+    key?: string;
+    default?: () => DefaultT;
+}
+export declare function cmsQueryKey(query: string, variables?: unknown): string;
 export declare function $cmsQuery<const Q extends string>(query: Q, variables?: CmsDisabledVariables): Promise<CmsDisabledResult>;
-export declare function useCms<const Q extends string>(query: Q, variables?: CmsDisabledVariables): AsyncData<CmsDisabledResult | undefined, Error | undefined>;
+export declare function useCms<const Q extends string, DefaultT = undefined>(query: Q, variables?: CmsDisabledVariables, options?: CmsAsyncDataOptions<CmsDisabledResult, DefaultT>): AsyncData<CmsDisabledResult | DefaultT | undefined, Error | undefined>;
 export {};

package/dist/runtime/app/composables/cms-query-disabled.js

@@ -1,10 +1,14 @@
 import { useAsyncData } from "#imports";
+export function cmsQueryKey(query, variables) {
+  return `cms-gql:${query}:${JSON.stringify(variables ?? {})}`;
+}
 export async function $cmsQuery(query, variables) {
   return {};
 }
-export function useCms(query, variables) {
+export function useCms(query, variables, options = {}) {
+  const { key, default: defaultValue } = options;
   return useAsyncData(
-    `cms-gql:${query}:${JSON.stringify(variables ?? {})}`,
-    async () => null
+    key ?? cmsQueryKey(query, variables),
+    async () => defaultValue ? defaultValue() : null
   );
 }

package/dist/runtime/app/composables/cms-query.d.ts

@@ -1,4 +1,9 @@
 import type { CmsResult, CmsVariables } from '#cms-graphql';
-import type { AsyncData } from 'nuxt/app';
+import type { AsyncData, AsyncDataOptions } from 'nuxt/app';
+export interface CmsAsyncDataOptions<ResT, DefaultT> extends Pick<AsyncDataOptions<ResT>, 'server' | 'lazy' | 'immediate' | 'deep' | 'dedupe' | 'watch'> {
+    key?: string;
+    default?: () => DefaultT;
+}
+export declare function cmsQueryKey(query: string, variables?: unknown): string;
 export declare function $cmsQuery<const Q extends string>(query: Q, variables?: CmsVariables<Q>): Promise<CmsResult<Q>>;
-export declare function useCms<const Q extends string>(query: Q, variables?: CmsVariables<Q>): AsyncData<CmsResult<Q> | undefined, Error | undefined>;
+export declare function useCms<const Q extends string, DefaultT = undefined>(query: Q, variables?: CmsVariables<Q>, options?: CmsAsyncDataOptions<CmsResult<Q>, DefaultT>): AsyncData<CmsResult<Q> | DefaultT | undefined, Error | undefined>;

package/dist/runtime/app/composables/cms-query.js

@@ -1,5 +1,8 @@
 import { useAsyncData } from "#imports";
 const ENDPOINT = "/api/cms/graphql";
+export function cmsQueryKey(query, variables) {
+  return `cms-gql:${query}:${JSON.stringify(variables ?? {})}`;
+}
 export async function $cmsQuery(query, variables) {
   const res = await $fetch(ENDPOINT, {
     method: "POST",
@@ -10,9 +13,11 @@ export async function $cmsQuery(query, variables) {
   }
   return res.data;
 }
-export function useCms(query, variables) {
+export function useCms(query, variables, options = {}) {
+  const { key, ...asyncDataOptions } = options;
   return useAsyncData(
-    `cms-gql:${query}:${JSON.stringify(variables ?? {})}`,
-    () => $cmsQuery(query, variables)
+    key ?? cmsQueryKey(query, variables),
+    () => $cmsQuery(query, variables),
+    asyncDataOptions
   );
 }

package/dist/runtime/server/utils/graphql.js

@@ -30,7 +30,12 @@ import {
   pickTranslatedMedia,
   translatableFieldKeys
 } from "../../shared/index.js";
-import { blockTypeName, blockUnionName, renderGraphqlSdl, typeName } from "../../shared/graphql-sdl.js";
+import {
+  blockTypeName,
+  blocksFieldTypeName,
+  renderGraphqlSdl,
+  typeName
+} from "../../shared/graphql-sdl.js";
 import { useMediaIndex } from "./media-index.js";
 import { getContentI18n, resolveTable, tableColumns } from "./registry.js";
 const MAX_LIMIT = 100;
@@ -285,7 +290,7 @@ function entryResolvers(config, name, entry) {
 }
 function blockResolvers(name, key, field) {
   const resolvers = {};
-  resolvers[blockUnionName(name, key)] = {
+  resolvers[blocksFieldTypeName(name, key)] = {
     __resolveType: (value) => blockTypeName(name, key, String(value.type))
   };
   for (const [blockName, block] of Object.entries(field.blocks ?? {})) {

package/dist/runtime/server/utils/media-sync.d.ts

@@ -24,5 +24,8 @@ export declare function jpegImageSize(bytes: Uint8Array): ImageSize | null;
 export declare function webpImageSize(bytes: Uint8Array): ImageSize | null;
 export declare function gifImageSize(bytes: Uint8Array): ImageSize | null;
 export declare function imageSizeFromBuffer(bytes: Uint8Array): ImageSize | null;
+export declare function mp4VideoSize(bytes: Uint8Array): ImageSize | null;
+export declare function matroskaVideoSize(bytes: Uint8Array): ImageSize | null;
+export declare function videoSizeFromBuffer(bytes: Uint8Array): ImageSize | null;
 export declare function scanMediaDirectory(root: string): Promise<ScannedMediaFile[]>;
 export declare function readMediaFileMeta(root: string, file: ScannedMediaFile): Promise<MediaFileMeta>;

package/dist/runtime/server/utils/media-sync.js

@@ -9,7 +9,9 @@ export const MEDIA_SYNC_MIME_TYPES = {
   gif: "image/gif",
   svg: "image/svg+xml",
   mp4: "video/mp4",
+  m4v: "video/x-m4v",
   webm: "video/webm",
+  mkv: "video/x-matroska",
   mov: "video/quicktime",
   mp3: "audio/mpeg",
   wav: "audio/wav",
@@ -18,6 +20,7 @@ export const MEDIA_SYNC_MIME_TYPES = {
   pdf: "application/pdf"
 };
 const HEADER_BYTES = 65536;
+const MOOV_MAX_BYTES = 4 * 1024 * 1024;
 export function mediaSyncExtension(key) {
   const name = key.split("/").pop() ?? key;
   const dot = name.lastIndexOf(".");
@@ -157,14 +160,213 @@ export function gifImageSize(bytes) {
 export function imageSizeFromBuffer(bytes) {
   return pngImageSize(bytes) ?? gifImageSize(bytes) ?? webpImageSize(bytes) ?? jpegImageSize(bytes);
 }
+const ISO_BMFF_TOP_LEVEL = /* @__PURE__ */ new Set([
+  "ftyp",
+  "styp",
+  "moov",
+  "moof",
+  "mdat",
+  "free",
+  "skip",
+  "wide",
+  "pnot",
+  "meta",
+  "uuid"
+]);
+const FIXED_POINT_16_16 = 65536;
+function readBoxHeader(bytes, offset) {
+  if (offset + 8 > bytes.length) return null;
+  const data = view(bytes);
+  const declared = data.getUint32(offset);
+  const type = ascii(bytes, offset + 4, 4);
+  if (declared === 1) {
+    if (offset + 16 > bytes.length) return null;
+    const size = data.getUint32(offset + 8) * 2 ** 32 + data.getUint32(offset + 12);
+    return { type, headerLength: 16, size };
+  }
+  return { type, headerLength: 8, size: declared === 0 ? null : declared };
+}
+function readBoxRange(bytes, offset, end) {
+  const box = readBoxHeader(bytes, offset);
+  if (!box) return null;
+  const size = box.size ?? end - offset;
+  if (size < box.headerLength) return null;
+  return {
+    type: box.type,
+    start: offset + box.headerLength,
+    end: Math.min(end, offset + size),
+    next: offset + size
+  };
+}
+function findBox(bytes, start, end, type) {
+  let offset = start;
+  while (offset + 8 <= end) {
+    const box = readBoxRange(bytes, offset, end);
+    if (!box || box.next <= offset) return null;
+    if (box.type === type) return box;
+    offset = box.next;
+  }
+  return null;
+}
+function trackHeaderSize(bytes, start, end) {
+  const version = bytes[start];
+  if (version === void 0) return null;
+  const matrixOffset = start + (version === 1 ? 52 : 40);
+  const sizeOffset = start + (version === 1 ? 88 : 76);
+  if (sizeOffset + 8 > end) return null;
+  const data = view(bytes);
+  const width = Math.round(data.getUint32(sizeOffset) / FIXED_POINT_16_16);
+  const height = Math.round(data.getUint32(sizeOffset + 4) / FIXED_POINT_16_16);
+  if (!width || !height) return null;
+  const quarterTurn = data.getInt32(matrixOffset) === 0 && Math.abs(data.getInt32(matrixOffset + 4)) === FIXED_POINT_16_16;
+  return quarterTurn ? { width: height, height: width } : { width, height };
+}
+function moovVideoSize(bytes, start, end) {
+  let offset = start;
+  while (offset + 8 <= end) {
+    const box = readBoxRange(bytes, offset, end);
+    if (!box || box.next <= offset) return null;
+    if (box.type === "trak") {
+      const header = findBox(bytes, box.start, box.end, "tkhd");
+      const size = header ? trackHeaderSize(bytes, header.start, header.end) : null;
+      if (size) return size;
+    }
+    offset = box.next;
+  }
+  return null;
+}
+export function mp4VideoSize(bytes) {
+  const first = readBoxHeader(bytes, 0);
+  if (!first || !ISO_BMFF_TOP_LEVEL.has(first.type)) return null;
+  const moov = findBox(bytes, 0, bytes.length, "moov");
+  return moov ? moovVideoSize(bytes, moov.start, moov.end) : null;
+}
+const EBML_SIGNATURE = [26, 69, 223, 163];
+const EBML_SEGMENT = 408125543;
+const EBML_TRACKS = 374648427;
+const EBML_TRACK_ENTRY = 174;
+const EBML_VIDEO = 224;
+const EBML_PIXEL_WIDTH = 176;
+const EBML_PIXEL_HEIGHT = 186;
+const EBML_DISPLAY_WIDTH = 21680;
+const EBML_DISPLAY_HEIGHT = 21690;
+const EBML_PARENTS = /* @__PURE__ */ new Set([EBML_SEGMENT, EBML_TRACKS, EBML_TRACK_ENTRY]);
+function readEbmlVint(bytes, offset, keepMarker) {
+  const first = bytes[offset];
+  if (!first) return null;
+  let length = 1;
+  let mask = 128;
+  while (length <= 8 && !(first & mask)) {
+    length++;
+    mask >>= 1;
+  }
+  if (length > 8 || offset + length > bytes.length) return null;
+  let value = keepMarker ? first : first & mask - 1;
+  for (let index = 1; index < length; index++) value = value * 256 + bytes[offset + index];
+  return { value, length, unknown: !keepMarker && value === 2 ** (7 * length) - 1 };
+}
+function readEbmlElement(bytes, offset, end) {
+  const id = readEbmlVint(bytes, offset, true);
+  if (!id) return null;
+  const size = readEbmlVint(bytes, offset + id.length, false);
+  if (!size) return null;
+  const start = offset + id.length + size.length;
+  const elementEnd = size.unknown ? end : Math.min(end, start + size.value);
+  return { id: id.value, start, end: elementEnd, next: Math.max(start, elementEnd) };
+}
+function readEbmlUint(bytes, start, end) {
+  let value = 0;
+  for (let index = start; index < end && index < bytes.length; index++) {
+    value = value * 256 + bytes[index];
+  }
+  return value;
+}
+function matroskaTrackSize(bytes, start, end) {
+  let pixelWidth = 0;
+  let pixelHeight = 0;
+  let displayWidth = 0;
+  let displayHeight = 0;
+  let offset = start;
+  while (offset < end) {
+    const element = readEbmlElement(bytes, offset, end);
+    if (!element || element.next <= offset) break;
+    if (element.id === EBML_PIXEL_WIDTH) {
+      pixelWidth = readEbmlUint(bytes, element.start, element.end);
+    } else if (element.id === EBML_PIXEL_HEIGHT) {
+      pixelHeight = readEbmlUint(bytes, element.start, element.end);
+    } else if (element.id === EBML_DISPLAY_WIDTH) {
+      displayWidth = readEbmlUint(bytes, element.start, element.end);
+    } else if (element.id === EBML_DISPLAY_HEIGHT) {
+      displayHeight = readEbmlUint(bytes, element.start, element.end);
+    }
+    offset = element.next;
+  }
+  const width = displayWidth || pixelWidth;
+  const height = displayHeight || pixelHeight;
+  return width && height ? { width, height } : null;
+}
+function matroskaVideoSizeIn(bytes, start, end) {
+  let offset = start;
+  while (offset < end) {
+    const element = readEbmlElement(bytes, offset, end);
+    if (!element || element.next <= offset) return null;
+    if (element.id === EBML_VIDEO) {
+      const size = matroskaTrackSize(bytes, element.start, element.end);
+      if (size) return size;
+    } else if (EBML_PARENTS.has(element.id)) {
+      const size = matroskaVideoSizeIn(bytes, element.start, element.end);
+      if (size) return size;
+    }
+    offset = element.next;
+  }
+  return null;
+}
+export function matroskaVideoSize(bytes) {
+  if (!startsWith(bytes, 0, EBML_SIGNATURE)) return null;
+  return matroskaVideoSizeIn(bytes, 0, bytes.length);
+}
+export function videoSizeFromBuffer(bytes) {
+  return mp4VideoSize(bytes) ?? matroskaVideoSize(bytes);
+}
+async function readChunk(handle, position, length) {
+  if (length <= 0) return new Uint8Array(0);
+  const buffer = new Uint8Array(length);
+  const { bytesRead } = await handle.read(buffer, 0, length, position);
+  return buffer.subarray(0, bytesRead);
+}
 async function readHeader(path, size) {
   const length = Math.min(size, HEADER_BYTES);
   if (length <= 0) return null;
   const handle = await open(path, "r");
   try {
-    const buffer = new Uint8Array(length);
-    const { bytesRead } = await handle.read(buffer, 0, length, 0);
-    return buffer.subarray(0, bytesRead);
+    return await readChunk(handle, 0, length);
+  } finally {
+    await handle.close();
+  }
+}
+async function readMoovVideoSize(handle, fileSize) {
+  let position = 0;
+  while (position + 8 <= fileSize) {
+    const header = await readChunk(handle, position, 16);
+    const box = header.length >= 8 ? readBoxHeader(header, 0) : null;
+    if (!box) return null;
+    const size = box.size ?? fileSize - position;
+    if (size < box.headerLength) return null;
+    if (box.type === "moov") {
+      return mp4VideoSize(await readChunk(handle, position, Math.min(size, MOOV_MAX_BYTES)));
+    }
+    position += size;
+  }
+  return null;
+}
+async function readVideoSize(path, fileSize) {
+  if (fileSize <= 0) return null;
+  const handle = await open(path, "r");
+  try {
+    const head = await readChunk(handle, 0, Math.min(fileSize, HEADER_BYTES));
+    return videoSizeFromBuffer(head) ?? await readMoovVideoSize(handle, fileSize);
+  } catch {
+    return null;
   } finally {
     await handle.close();
   }
@@ -189,12 +391,23 @@ export async function scanMediaDirectory(root) {
   await walk(root, "");
   return files.sort((a, b) => a.key < b.key ? -1 : a.key > b.key ? 1 : 0);
 }
+const IMAGE_SIZE_MIME_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/webp", "image/gif"]);
+const VIDEO_SIZE_MIME_TYPES = /* @__PURE__ */ new Set([
+  "video/mp4",
+  "video/x-m4v",
+  "video/quicktime",
+  "video/webm",
+  "video/x-matroska"
+]);
 export async function readMediaFileMeta(root, file) {
   const mime = mediaMimeForKey(file.key);
+  const path = join(root, ...file.key.split("/"));
   let size = null;
-  if (mime === "image/png" || mime === "image/jpeg" || mime === "image/webp" || mime === "image/gif") {
-    const header = await readHeader(join(root, ...file.key.split("/")), file.size);
+  if (mime && IMAGE_SIZE_MIME_TYPES.has(mime)) {
+    const header = await readHeader(path, file.size);
     size = header ? imageSizeFromBuffer(header) : null;
+  } else if (mime && VIDEO_SIZE_MIME_TYPES.has(mime)) {
+    size = await readVideoSize(path, file.size);
   }
   return {
     key: file.key,

package/dist/runtime/shared/graphql-sdl.d.ts

@@ -1,5 +1,4 @@
 import type { CmsConfig } from './index.js';
-export declare function typeName(name: string): string;
-export declare function blockUnionName(entryName: string, fieldKey: string): string;
-export declare function blockTypeName(entryName: string, fieldKey: string, blockName: string): string;
+import { blockTypeName, blocksFieldTypeName, typeName } from './index.js';
+export { blockTypeName, blocksFieldTypeName, typeName };
 export declare function renderGraphqlSdl(config: CmsConfig): string;

package/dist/runtime/shared/graphql-sdl.js

@@ -1,13 +1,12 @@
-import { isPrivateField, isRequiredField, isTranslatableField } from "./index.js";
-export function typeName(name) {
-  return name.replace(/(?:^|_)([a-z0-9])/gi, (_, c) => c.toUpperCase());
-}
-export function blockUnionName(entryName, fieldKey) {
-  return `${typeName(entryName)}${typeName(fieldKey)}Block`;
-}
-export function blockTypeName(entryName, fieldKey, blockName) {
-  return `${typeName(entryName)}${typeName(fieldKey)}${typeName(blockName)}`;
-}
+import {
+  blockTypeName,
+  blocksFieldTypeName,
+  isPrivateField,
+  isRequiredField,
+  isTranslatableField,
+  typeName
+} from "./index.js";
+export { blockTypeName, blocksFieldTypeName, typeName };
 function scalarFor(field) {
   switch (field.type) {
     case "number":
@@ -58,7 +57,7 @@ function fieldSdl(config, entryName, key, field) {
   if (field.type === "media") return `  ${key}: CmsMedia`;
   if (field.type === "select" && field.multiple) return `  ${key}: [String!]!`;
   if (field.type === "blocks")
-    return `  ${key}: [${blockUnionName(entryName, key)}!]${isRequiredField(field) ? "!" : ""}`;
+    return `  ${key}: [${blocksFieldTypeName(entryName, key)}!]${isRequiredField(field) ? "!" : ""}`;
   return `  ${key}: ${scalarFor(field)}${isRequiredField(field) ? "!" : ""}`;
 }
 function entrySdl(config, name, entry) {
@@ -73,25 +72,44 @@ function entrySdl(config, name, entry) {
 ${lines.join("\n")}
 }`;
 }
+function blockFieldSdl(field) {
+  if (field.type === "media") return { base: "CmsMedia", nonNull: false };
+  return { base: scalarFor(field), nonNull: !!field.required };
+}
+function sharedBlockFieldsSdl(field) {
+  const blocks = Object.values(field.blocks ?? {});
+  const first = blocks[0];
+  if (!first) return [];
+  const lines = [];
+  for (const key of Object.keys(first.fields)) {
+    const rendered = blocks.map((block) => block.fields[key]);
+    if (rendered.some((blockField) => !blockField)) continue;
+    const types = rendered.map((blockField) => blockFieldSdl(blockField));
+    if (types.some((type) => type.base !== types[0].base)) continue;
+    const nonNull = types.every((type) => type.nonNull);
+    lines.push(`  ${key}: ${types[0].base}${nonNull ? "!" : ""}`);
+  }
+  return lines;
+}
 function blocksSdl(name, key, field) {
-  const defs = [];
-  const members = [];
-  for (const [blockName, block] of Object.entries(field.blocks ?? {})) {
-    const gqlType = blockTypeName(name, key, blockName);
-    members.push(gqlType);
+  const blocks = Object.entries(field.blocks ?? {});
+  if (!blocks.length) return [];
+  const interfaceName = blocksFieldTypeName(name, key);
+  const shared = ["  type: String!", ...sharedBlockFieldsSdl(field)];
+  const defs = [`interface ${interfaceName} {
+${shared.join("\n")}
+}`];
+  for (const [blockName, block] of blocks) {
     const lines = ["  type: String!"];
     for (const [blockFieldKey, blockField] of Object.entries(block.fields)) {
-      if (blockField.type === "media") {
-        lines.push(`  ${blockFieldKey}: CmsMedia`);
-        continue;
-      }
-      lines.push(`  ${blockFieldKey}: ${scalarFor(blockField)}${blockField.required ? "!" : ""}`);
+      const type = blockFieldSdl(blockField);
+      lines.push(`  ${blockFieldKey}: ${type.base}${type.nonNull ? "!" : ""}`);
     }
-    defs.push(`type ${gqlType} {
+    const gqlType = blockTypeName(name, key, blockName);
+    defs.push(`type ${gqlType} implements ${interfaceName} {
 ${lines.join("\n")}
 }`);
   }
-  if (members.length) defs.push(`union ${blockUnionName(name, key)} = ${members.join(" | ")}`);
   return defs;
 }
 function filterSdl(name, entry) {
@@ -119,7 +137,8 @@ const COMMON_SDL = [
   "input FloatFilter {\n  eq: Float\n  neq: Float\n  gt: Float\n  gte: Float\n  lt: Float\n  lte: Float\n  in: [Float!]\n  isNull: Boolean\n}",
   "input StringFilter {\n  eq: String\n  neq: String\n  gt: String\n  gte: String\n  lt: String\n  lte: String\n  like: String\n  in: [String!]\n  isNull: Boolean\n}",
   "input BooleanFilter {\n  eq: Boolean\n  neq: Boolean\n  isNull: Boolean\n}",
-  "type CmsMedia {\n  key: String!\n  url: String\n  type: String!\n  alt: String\n  folder: String\n  mime: String\n  size: Int\n  width: Int\n  height: Int\n}"
+  "enum CmsMediaType {\n  image\n  video\n  file\n}",
+  "type CmsMedia {\n  key: String!\n  url: String\n  type: CmsMediaType!\n  alt: String\n  folder: String\n  mime: String\n  size: Int\n  width: Int\n  height: Int\n}"
 ];
 export function renderGraphqlSdl(config) {
   const queryLines = [];

package/dist/runtime/shared/index.d.ts

@@ -13,6 +13,8 @@ export declare function mediaTypeForKey(key: string): MediaType;
 export declare function mediaFilename(key: string): string;
 export declare function mediaTypeFor(mime: string | null | undefined, key: string): MediaType;
 export declare function mediaIconFor(type: MediaType): string;
+export declare function mediaTypeFilter(mediaType: MediaType | MediaType[] | null | undefined): MediaType[] | null;
+export declare function mediaTypeAccept(mediaType: MediaType | MediaType[] | null | undefined): string[] | null;
 export declare function mediaPublicUrl(baseUrl: string | null | undefined, key: string): string | null;
 export declare const DEFAULT_MEDIA_MAX_FILE_SIZE: number;
 export declare function formatFileSize(bytes: number): string;
@@ -60,7 +62,7 @@ export interface FieldConfig {
     multiple?: boolean;
     from?: string;
     blocks?: Record<string, BlockConfig>;
-    mediaType?: MediaType;
+    mediaType?: MediaType | MediaType[];
     accept?: string[];
     to?: string;
     cardinality?: 'many-to-one' | 'one-to-one' | 'many-to-many';
@@ -96,6 +98,9 @@ export interface CmsEntry {
     table?: CmsTable;
 }
 export type CmsConfig = Record<string, CmsEntry>;
+export declare function typeName(name: string): string;
+export declare function blocksFieldTypeName(entryName: string, fieldKey: string): string;
+export declare function blockTypeName(entryName: string, fieldKey: string, blockName: string): string;
 interface FieldInputBase {
     label: string;
     required?: boolean;
@@ -138,7 +143,7 @@ export interface JsonFieldInput extends FieldInputBase {
 }
 export interface MediaFieldInput extends FieldInputBase {
     type: 'media';
-    mediaType?: MediaType;
+    mediaType?: MediaType | MediaType[];
     accept?: string[];
     translatable?: boolean;
 }

package/dist/runtime/shared/index.js

@@ -38,6 +38,16 @@ export function mediaTypeFor(mime, key) {
 export function mediaIconFor(type) {
   return type === "image" ? "photo" : type === "video" ? "film" : "document";
 }
+export function mediaTypeFilter(mediaType) {
+  const requested = Array.isArray(mediaType) ? mediaType : mediaType ? [mediaType] : [];
+  const types = [...new Set(requested.filter((type) => MEDIA_TYPES.includes(type)))];
+  if (!types.length || types.includes("file")) return null;
+  return types;
+}
+export function mediaTypeAccept(mediaType) {
+  const types = mediaTypeFilter(mediaType);
+  return types ? types.map((type) => `${type}/*`) : null;
+}
 export function mediaPublicUrl(baseUrl, key) {
   return baseUrl ? `${baseUrl.replace(/\/+$/, "")}/${key}` : null;
 }
@@ -174,6 +184,15 @@ export function localizeBlocks(field, value, locale, defaultLocale) {
   if (!Array.isArray(value)) return value;
   return value.map((item) => localizeBlock(field, item, locale, defaultLocale));
 }
+export function typeName(name) {
+  return name.replace(/(?:^|_)([a-z0-9])/gi, (_, c) => c.toUpperCase());
+}
+export function blocksFieldTypeName(entryName, fieldKey) {
+  return `${typeName(entryName)}${typeName(fieldKey)}Block`;
+}
+export function blockTypeName(entryName, fieldKey, blockName) {
+  return `${typeName(entryName)}${typeName(fieldKey)}${typeName(blockName)}`;
+}
 export function defineCmsConfig(config) {
   return config;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "description": "Lightweight CMS that ships with your Nuxt app: runs on the Nitro server, content types defined in code, /cms admin panel, GraphQL API, SQLite or Postgres. No external CMS needed!",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",