Error fixing and debugging implementation.

Web/templates/library_table.html

@@ -1359,9 +1359,11 @@
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
 
+        // Lade-Status anzeigen und Modal öffnen
         detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
+        // Daten vom Backend-API-Endpoint abrufen
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
                 if (!response.ok) {
@@ -1373,23 +1375,40 @@
                 detailContent.innerHTML = data.html;
 
                 const imageArray = data.images || [];
+                const thumbnailInfoMap = data.thumbnailInfo || [];
 
                 if (Array.isArray(imageArray) && imageArray.length > 0) {
-                    const imagesHtml = imageArray.map(image => {
-                        const imageSrc = image.startsWith('/uploads/') || image.startsWith('http')
-                            ? image
-                            : `/uploads/${image}`;
+                    const imagesHtml = imageArray.map((image, index) => {
+                        const isVideo = typeof isVideoFile === 'function' ? isVideoFile(image) : /\.(mp4|webm|ogg|mov)$/i.test(image);
+                        const thumbnailInfo = thumbnailInfoMap[index];
 
-                        return `
-                                <div class="item-image-wrapper">
-                                    <img src="${imageSrc}"
-                                        alt="Buchcover"
-                                        class="item-image"
-                                        loading="lazy"
-                                        onload="console.log('Bild geladen:', '${imageSrc}')"
-                                        onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
-                                </div>
-                    `;
+                        if (isVideo) {
+                            const videoSrc = image.startsWith('/uploads/') || image.startsWith('http')
+                                ? image
+                                : `/uploads/${image}`;
+
+                            return `
+                        <div class="item-image-wrapper" style="width: 100%; height: auto;">
+                            <video src="${videoSrc}" class="item-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" controls preload="metadata" style="width: 100%; height: auto; max-height: 300px;"></video>
+                        </div>`;
+                        } else {
+                            const imageSrc = thumbnailInfo && thumbnailInfo.has_preview
+                                ? thumbnailInfo.preview_url
+                                : (image.startsWith('/uploads/') || image.startsWith('http')
+                                    ? image
+                                    : `/uploads/${image}`);
+
+                            return `
+                        <div class="item-image-wrapper">
+                            <img src="${imageSrc}"
+                                 alt="Buchcover / Bild"
+                                 class="item-image ${index === 0 ? 'active-image' : ''}"
+                                 id="modal-image-${index}"
+                                 loading="lazy"
+                                 onload="console.log('Bild geladen:', '${imageSrc}')"
+                                 onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
+                        </div>`;
+                        }
                     }).join('');
 
                     const mediaHtml = `<div class="detail-gallery-container">${imagesHtml}</div>`;