up
This commit is contained in:
lizandrogd
+114
-7
@@ -74,6 +74,54 @@ if (empty($user_id)) {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Estilos para mensajes multimedia */
|
||||
.message-bubble img {
|
||||
max-width: 300px;
|
||||
max-height: 400px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.message-bubble video {
|
||||
max-width: 300px;
|
||||
max-height: 400px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.message-bubble audio {
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
margin: 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message-document {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 15px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.message-document:hover {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.message-document i {
|
||||
font-size: 1.5rem;
|
||||
color: #25D366;
|
||||
}
|
||||
|
||||
.message-outgoing {
|
||||
background: #DCF8C6;
|
||||
margin-left: auto;
|
||||
@@ -528,21 +576,34 @@ if (empty($user_id)) {
|
||||
// Mensaje multimedia
|
||||
switch (msg.media_type) {
|
||||
case 'image':
|
||||
contentHtml = `<img src="${msg.media_url}" alt="Imagen" style="max-width: 100%; border-radius: 8px;">`;
|
||||
contentHtml = `<img src="${msg.media_url}" alt="Imagen" class="message-media-image" onclick="openImageModal('${msg.media_url}')">`;
|
||||
break;
|
||||
case 'video':
|
||||
contentHtml = `<video controls style="max-width: 100%; border-radius: 8px;"><source src="${msg.media_url}"></video>`;
|
||||
contentHtml = `<video controls class="message-media-video">
|
||||
<source src="${msg.media_url}" type="video/mp4">
|
||||
Tu navegador no soporta video HTML5.
|
||||
</video>`;
|
||||
break;
|
||||
case 'audio':
|
||||
contentHtml = `<audio controls style="width: 100%;"><source src="${msg.media_url}"></audio>`;
|
||||
contentHtml = `<audio controls class="message-media-audio">
|
||||
<source src="${msg.media_url}" type="audio/mpeg">
|
||||
<source src="${msg.media_url}" type="audio/ogg">
|
||||
Tu navegador no soporta audio HTML5.
|
||||
</audio>`;
|
||||
break;
|
||||
case 'document':
|
||||
const filename = msg.filename || 'Documento';
|
||||
contentHtml = `<a href="${msg.media_url}" target="_blank" class="message-document">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
<span>${filename}</span>
|
||||
const filename = msg.filename || msg.content || 'Documento';
|
||||
const fileIcon = getFileIcon(filename);
|
||||
contentHtml = `<a href="${msg.media_url}" target="_blank" class="message-document" download>
|
||||
<i class="${fileIcon}"></i>
|
||||
<span>${escapeHtml(filename)}</span>
|
||||
</a>`;
|
||||
break;
|
||||
default:
|
||||
contentHtml = `<a href="${msg.media_url}" target="_blank" class="message-document">
|
||||
<i class="fas fa-file"></i>
|
||||
<span>Archivo adjunto</span>
|
||||
</a>`;
|
||||
}
|
||||
|
||||
if (msg.caption) {
|
||||
@@ -1128,6 +1189,52 @@ if (empty($user_id)) {
|
||||
// Auto-refresh cada 30 segundos para nuevos mensajes
|
||||
setInterval(refreshChat, 30000);
|
||||
});
|
||||
|
||||
// Función para obtener icono según tipo de archivo
|
||||
function getFileIcon(filename) {
|
||||
const ext = filename.split('.').pop().toLowerCase();
|
||||
const iconMap = {
|
||||
'pdf': 'fas fa-file-pdf text-danger',
|
||||
'doc': 'fas fa-file-word text-primary',
|
||||
'docx': 'fas fa-file-word text-primary',
|
||||
'xls': 'fas fa-file-excel text-success',
|
||||
'xlsx': 'fas fa-file-excel text-success',
|
||||
'ppt': 'fas fa-file-powerpoint text-warning',
|
||||
'pptx': 'fas fa-file-powerpoint text-warning',
|
||||
'zip': 'fas fa-file-archive text-secondary',
|
||||
'rar': 'fas fa-file-archive text-secondary',
|
||||
'txt': 'fas fa-file-alt text-muted',
|
||||
};
|
||||
return iconMap[ext] || 'fas fa-file text-muted';
|
||||
}
|
||||
|
||||
// Modal para ver imágenes en grande
|
||||
function openImageModal(imageUrl) {
|
||||
// Crear modal si no existe
|
||||
let modal = document.getElementById('imageModal');
|
||||
if (!modal) {
|
||||
modal = document.createElement('div');
|
||||
modal.id = 'imageModal';
|
||||
modal.className = 'modal fade';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content bg-transparent border-0">
|
||||
<div class="modal-body p-0 position-relative">
|
||||
<button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3"
|
||||
data-bs-dismiss="modal" style="z-index: 10;"></button>
|
||||
<img id="modalImage" src="" class="img-fluid w-100" style="border-radius: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
|
||||
// Actualizar imagen y mostrar
|
||||
document.getElementById('modalImage').src = imageUrl;
|
||||
const bsModal = new bootstrap.Modal(modal);
|
||||
bsModal.show();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user