61 lines
2.5 KiB
Plaintext
61 lines
2.5 KiB
Plaintext
document.addEventListener("DOMContentLoaded", () => {
|
|
console.log("✅ previews.js cargado correctamente");
|
|
|
|
const imagePreviewContainer = document.getElementById('image-preview');
|
|
const previewImage = document.getElementById('preview-image');
|
|
const videoPreviewContainer = document.getElementById('video-preview');
|
|
const previewVideo = document.getElementById('preview-video'); // ✅ Definido correctamente
|
|
const textPreviewContainer = document.getElementById('text-preview');
|
|
const previewText = document.getElementById('preview-text');
|
|
const pdfPreviewContainer = document.getElementById('pdf-preview');
|
|
const previewPdfCanvas = document.getElementById('preview-pdf-canvas');
|
|
|
|
console.log("🎯 Elementos obtenidos:");
|
|
console.log("🖼️ imagePreviewContainer:", imagePreviewContainer);
|
|
console.log("📹 videoPreviewContainer:", videoPreviewContainer);
|
|
console.log("📜 textPreviewContainer:", textPreviewContainer);
|
|
console.log("📄 pdfPreviewContainer:", pdfPreviewContainer);
|
|
|
|
document.body.addEventListener('mouseover', (event) => {
|
|
const button = event.target.closest('.view-btn');
|
|
if (!button) return;
|
|
|
|
const mediaUrl = button.getAttribute('data-url');
|
|
const contentType = button.getAttribute('data-type');
|
|
|
|
console.log("🖱️ Hover en botón:", button);
|
|
console.log("📄 URL:", mediaUrl);
|
|
console.log("📂 Tipo de contenido:", contentType);
|
|
|
|
if (!mediaUrl) {
|
|
console.warn("❌ data-url es NULL o vacío.");
|
|
return;
|
|
}
|
|
|
|
if (contentType.startsWith('image/')) {
|
|
console.log("🖼️ Mostrando imagen...");
|
|
previewImage.src = mediaUrl;
|
|
imagePreviewContainer.classList.remove('d-none');
|
|
} else if (contentType.startsWith('video/')) {
|
|
console.log("🎥 Mostrando video...");
|
|
|
|
// Forzar recarga del video
|
|
previewVideo.src = "";
|
|
setTimeout(() => {
|
|
previewVideo.src = mediaUrl;
|
|
previewVideo.load();
|
|
previewVideo.play();
|
|
}, 50);
|
|
|
|
// Asegurar que el contenedor se muestra y ajustar estilos
|
|
videoPreviewContainer.classList.remove('d-none');
|
|
videoPreviewContainer.style.display = "block";
|
|
|
|
previewVideo.style.objectFit = "contain";
|
|
previewVideo.style.width = "auto";
|
|
previewVideo.style.height = "auto";
|
|
}
|
|
});
|
|
});
|
|
|