@dmitryvim/form-builder 0.1.24 → 0.1.27

package/dist/form-builder.js

@@ -1366,7 +1366,7 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
 // Common file preview rendering function for readonly mode
 function renderFilePreviewReadonly(resourceId, fileName) {
   const meta = state.resourceIndex.get(resourceId);
-  const actualFileName = fileName || meta?.name || "file";
+  const actualFileName = fileName || meta?.name || resourceId.split("/").pop() || "file";
 
   // Individual file result container
   const fileResult = document.createElement("div");
@@ -1377,46 +1377,58 @@ function renderFilePreviewReadonly(resourceId, fileName) {
   previewContainer.className =
     "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";
 
-  // Check file type and render appropriate preview
-  if (
-    meta?.type?.startsWith("image/") ||
-    actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/)
-  ) {
-    // Image preview
+  // Determine if this looks like an image file
+  const isImage = meta?.type?.startsWith("image/") ||
+    actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/);
+  
+  // Determine if this looks like a video file
+  const isVideo = meta?.type?.startsWith("video/") ||
+    actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/);
+
+  if (isImage) {
+    // Image preview - try getThumbnail first
     if (state.config.getThumbnail) {
-      const thumbnailUrl = state.config.getThumbnail(resourceId);
-      if (thumbnailUrl) {
-        previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
-      } else {
+      try {
+        const thumbnailUrl = state.config.getThumbnail(resourceId);
+        if (thumbnailUrl) {
+          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
+        } else {
+          // Fallback to icon if getThumbnail returns null/undefined
+          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        }
+      } catch (error) {
+        console.warn("getThumbnail failed for", resourceId, error);
         previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
       }
     } else {
       previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
     }
-  } else if (
-    meta?.type?.startsWith("video/") ||
-    actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/)
-  ) {
-    // Video preview
+  } else if (isVideo) {
+    // Video preview - try getThumbnail for video URL
     if (state.config.getThumbnail) {
-      const thumbnailUrl = state.config.getThumbnail(resourceId);
-      if (thumbnailUrl) {
-        previewContainer.innerHTML = `
-                    <div class="relative group">
-                        <video class="w-full h-auto" controls preload="auto" muted>
-                            <source src="${thumbnailUrl}" type="${meta?.type || "video/mp4"}">
-                            Ваш браузер не поддерживает видео.
-                        </video>
-                        <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
-                            <div class="bg-white bg-opacity-90 rounded-full p-3">
-                                <svg class="w-8 h-8 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                                    <path d="M8 5v14l11-7z"/>
-                                </svg>
+      try {
+        const videoUrl = state.config.getThumbnail(resourceId);
+        if (videoUrl) {
+          previewContainer.innerHTML = `
+                        <div class="relative group">
+                            <video class="w-full h-auto" controls preload="auto" muted>
+                                <source src="${videoUrl}" type="${meta?.type || "video/mp4"}">
+                                Ваш браузер не поддерживает видео.
+                            </video>
+                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
+                                <div class="bg-white bg-opacity-90 rounded-full p-3">
+                                    <svg class="w-8 h-8 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M8 5v14l11-7z"/>
+                                    </svg>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                `;
-      } else {
+                    `;
+        } else {
+          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        }
+      } catch (error) {
+        console.warn("getThumbnail failed for video", resourceId, error);
         previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
       }
     } else {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.24",
+  "version": "0.1.27",
   "description": "A reusable JSON schema form builder library",
   "main": "dist/form-builder.js",
   "module": "dist/form-builder.js",