@xleddyl/nuxt-cms 0.1.39 → 0.1.40

package/dist/module.json

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

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/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/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';
@@ -138,7 +140,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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "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)",