usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-01-28 13:05:36 -05:00
parent fe11a3ebb5
commit 7997ecb830
5 changed files with 169 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/send_media_message.php
+12 -5
View File
@@ -66,9 +66,10 @@ if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
}
// Función auxiliar para enviar con media_id
function sendMediaByIdToWhatsApp($whatsapp, $recipient, $mediaId, $mediaType, $caption, $filename) {
function sendMediaByIdToWhatsApp($whatsapp, $recipient, $mediaId, $mediaType, $caption, $filename, $isVoice = false) {
// Pasar skipAutoSave=true para evitar guardado duplicado (lo guardamos manualmente después)
return $whatsapp->sendMediaById($recipient, $mediaId, $mediaType, $caption, $filename, true);
// Para audio: pasar is_voice para determinar si es nota de voz o audio normal
return $whatsapp->sendMediaById($recipient, $mediaId, $mediaType, $caption, $filename, true, $isVoice);
}
// Función auxiliar para enviar con link
@@ -151,6 +152,12 @@ try {
$mediaType = $input['media_type']; // image, video, audio, document
$caption = $input['caption'] ?? null;
$filename = $input['filename'] ?? null;
// Para audio: is_voice = true significa nota de voz (grabada desde micrófono)
// is_voice = false o ausente significa audio normal (archivo subido)
$isVoice = isset($input['is_voice']) ? (bool)$input['is_voice'] : false;
error_log("send_media_message.php - is_voice: " . ($isVoice ? 'true' : 'false'));
smm_log("is_voice: " . ($isVoice ? 'true' : 'false'));
// Inicializar servicio de WhatsApp
$whatsapp = new WhatsAppService();
@@ -216,8 +223,8 @@ try {
error_log("send_media_message.php - Media ID obtenido: " . $mediaId);
smm_log("Media ID obtained: " . $mediaId);
// Enviar mensaje usando media_id
$response = sendMediaByIdToWhatsApp($whatsapp, $recipient, $mediaId, $mediaType, $caption, $filename);
// Enviar mensaje usando media_id (pasar isVoice para audio)
$response = sendMediaByIdToWhatsApp($whatsapp, $recipient, $mediaId, $mediaType, $caption, $filename, $isVoice);
smm_log("Send media by id response: " . json_encode($response));
} else {
smm_log("Upload did not return id: " . json_encode($uploadResult));
@@ -276,7 +283,7 @@ try {
if (isset($uploadResult['id'])) {
$uploaded_media_id = $uploadResult['id'];
smm_log('Uploaded downloaded audio to WhatsApp, media_id: ' . $uploaded_media_id);
$response = sendMediaByIdToWhatsApp($whatsapp, $recipient, $uploaded_media_id, $mediaType, $caption, $filename);
$response = sendMediaByIdToWhatsApp($whatsapp, $recipient, $uploaded_media_id, $mediaType, $caption, $filename, $isVoice);
} else {
smm_log('Upload of downloaded audio did not return id, fallback to link.');
$response = sendMediaByLinkToWhatsApp($whatsapp, $recipient, $mediaUrl, $mediaType, $caption, $filename);
api/upload_media.php
+8 -3
View File
@@ -108,11 +108,16 @@ try {
if ($ffmpeg) {
try {
if (strpos($fileType, 'audio/webm') === 0) {
// Audio WebM -> OGG/Opus
// Audio WebM -> OGG/Opus (Compatible con WhatsApp Voice Messages)
$convertedName = uniqid('media_', true) . '.ogg';
$convertedPath = $uploadDir . $convertedName;
// Convertir a Opus (bitrate moderado). Forzamos formato OGG, mono 48kHz y mapeamos la primera pista de audio.
$cmd = escapeshellcmd($ffmpeg) . ' -y -i ' . escapeshellarg($uploadPath) . ' -map 0:a:0 -c:a libopus -b:a 64k -vbr on -ar 48000 -ac 1 -f ogg ' . escapeshellarg($convertedPath) . ' 2>&1';
// Parámetros WhatsApp Voice:
// -c:a libopus = códec OPUS (requerido para transcripción)
// -b:a 32k = bitrate bajo para mantener archivo < 512KB (ícono play)
// -ar 48000 = sample rate 48kHz (estándar OPUS)
// -ac 1 = mono (reduce tamaño)
// -vbr on = variable bitrate
$cmd = escapeshellcmd($ffmpeg) . ' -y -i ' . escapeshellarg($uploadPath) . ' -map 0:a:0 -c:a libopus -b:a 32k -vbr on -ar 48000 -ac 1 -f ogg ' . escapeshellarg($convertedPath) . ' 2>&1';
$newType = 'audio/ogg';
$logType = 'Audio';
} else {
assets/js/chat-common.js
+9 -3
View File
@@ -219,10 +219,16 @@ async function convertWebmToOgg(file) {
if (_ffmpegInstance._fetchFile) data = await _ffmpegInstance._fetchFile(file);
else data = new Uint8Array(await file.arrayBuffer());
_ffmpegInstance.FS('writeFile', inName, data);
await _ffmpegInstance.run('-i', inName, '-c:a', 'libopus', '-b:a', '64k', outName);
// Parámetros compatibles con WhatsApp Voice Messages:
// -c:a libopus = códec OPUS (requerido)
// -b:a 32k = bitrate bajo para mantener archivo < 512KB (ícono play)
// -ar 48000 = sample rate 48kHz (estándar OPUS)
// -ac 1 = mono (reduce tamaño)
// -vbr on = variable bitrate para mejor calidad
await _ffmpegInstance.run('-i', inName, '-c:a', 'libopus', '-b:a', '32k', '-ar', '48000', '-ac', '1', '-vbr', 'on', outName);
const outData = _ffmpegInstance.FS('readFile', outName);
const blob = new Blob([outData.buffer], { type: 'audio/ogg' });
const newFile = new File([blob], (file.name || 'audio').replace(/\.[^/.]+$/, '') + '.ogg', { type: 'audio/ogg' });
const blob = new Blob([outData.buffer], { type: 'audio/ogg; codecs=opus' });
const newFile = new File([blob], (file.name || 'audio').replace(/\.[^/.]+$/, '') + '.ogg', { type: 'audio/ogg; codecs=opus' });
return newFile;
}
conversations.php
+105 -63
View File
@@ -704,6 +704,22 @@ if (!isset($_SESSION['user_id'])) {
.quick-replies-panel { left: 8px; right: 8px; bottom: 56px; min-width: auto; }
}
/* Indicador de nuevos mensajes */
#new-messages-indicator {
animation: bounceIn 0.4s ease, pulse 2s ease-in-out infinite;
}
@keyframes bounceIn {
0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
60% { transform: translateX(-50%) translateY(-10px); opacity: 1; }
100% { transform: translateX(-50%) translateY(-6px); opacity: 1; }
}
@keyframes pulse {
0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); }
50% { box-shadow: 0 6px 30px rgba(37, 211, 102, 0.55); }
}
/* Recording controls: rectangular buttons and clearer contrast */
#recording-indicator .btn {
border-radius: 6px;
@@ -1197,44 +1213,25 @@ if (!isset($_SESSION['user_id'])) {
// Si la conversación del mensaje es la actualmente abierta
if (this.currentUserId && String(this.currentUserId) === String(userId)) {
console.log('♻️ Mensaje para conversación ACTIVA, procesando...');
console.log('♻️ Mensaje para conversación ACTIVA');
// Verificar si el usuario está al final del chat (dentro de 150px del final)
const container = document.getElementById('chat-conversations');
const isAtBottom = container ?
(container.scrollHeight - container.scrollTop - container.clientHeight) < 150 : true;
// SOLUCIÓN: Siempre usar staged messages + indicador
// Esto evita el error que borra la pantalla al intentar recargar automáticamente
if (!this._stagedMessages) this._stagedMessages = [];
if (!this._stagedMessageIds) this._stagedMessageIds = new Set();
console.log('📍 Posición scroll:', {
scrollHeight: container?.scrollHeight,
scrollTop: container?.scrollTop,
clientHeight: container?.clientHeight,
distanceFromBottom: container ? (container.scrollHeight - container.scrollTop - container.clientHeight) : 0,
isAtBottom: isAtBottom
});
// Crear key única para evitar duplicados
const msgKey = data.message_id || data.id || `${data.created_at}_${data.content?.substring(0,20)}`;
if (isAtBottom) {
// Usuario está al final: agregar mensaje automáticamente con highlight
console.log('✅ Usuario AL FINAL, recargando mensajes...');
// Marcar que el próximo mensaje nuevo debe tener highlight
this._nextMessageUnread = true;
// Recargar mensajes (esto hará el fetch y renderizará)
this.loadMessages(this.currentUserId, true, true).then(() => {
// Después de cargar, quitar el highlight después de 3 segundos
setTimeout(() => {
this._removeUnreadHighlights();
}, 3000);
});
} else {
// Usuario está leyendo arriba: mostrar indicador de nuevos mensajes
console.log('⬆️ Usuario LEYENDO ARRIBA, mostrando indicador');
this.showNewMessagesIndicator(1);
// Guardar mensaje en staging para agregarlo cuando el usuario baje
if (!this._stagedMessages) this._stagedMessages = [];
if (!this._stagedMessageIds.has(msgKey)) {
this._stagedMessageIds.add(msgKey);
this._stagedMessages.push(data);
console.log('💾 Mensaje guardado en staging. Total staged:', this._stagedMessages.length);
console.log('💾 Mensaje guardado en staging. Total:', this._stagedMessages.length);
// Mostrar indicador de nuevos mensajes
this.showNewMessagesIndicator(this._stagedMessages.length);
} else {
console.log('⏭️ Mensaje duplicado, omitiendo');
}
} else {
console.log('📋 Mensaje para OTRA conversación, solo actualizando lista');
@@ -4063,6 +4060,8 @@ if (!isset($_SESSION['user_id'])) {
// set as selected file and show preview
this.selectedFile = file;
// Marcar como grabación de voz para enviar como nota de voz (ptt=true)
this._isVoiceRecording = true;
this.showMediaPreview(file);
// restore mic UI to default (not recording)
try {
@@ -4184,28 +4183,51 @@ if (!isset($_SESSION['user_id'])) {
el.style.transform = 'translateX(-50%)';
el.style.bottom = '84px';
el.style.zIndex = '1500';
el.className = 'btn btn-primary';
el.style.padding = '8px 14px';
el.style.borderRadius = '20px';
el.style.boxShadow = '0 6px 18px rgba(2,6,23,0.12)';
el.className = 'btn btn-success';
el.style.padding = '10px 18px';
el.style.borderRadius = '24px';
el.style.boxShadow = '0 6px 20px rgba(37, 211, 102, 0.35)';
el.style.cursor = 'pointer';
el.style.fontWeight = '600';
el.style.fontSize = '14px';
el.innerHTML = '<i class="fas fa-arrow-down me-2"></i>Nuevo mensaje';
el.onclick = async () => {
try {
// Hide indicator immediately and suspend auto-refresh to avoid races
this.hideNewMessagesIndicator();
this._suspendAutoRefresh = true;
if (this.currentUserId) {
// Trigger a full load and follow to bottom
await this.loadMessages(this.currentUserId, true, true);
}
// Clear staged messages since full load will include them
console.log('🔄 Clic en indicador de nuevos mensajes');
// Mostrar loading en el botón
el.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Cargando...';
el.style.pointerEvents = 'none';
// Limpiar staged messages
this._stagedMessages = [];
if (this._stagedMessageIds) this._stagedMessageIds.clear();
this._stagedCount = 0;
// Suspender auto-refresh para evitar conflictos
this._suspendAutoRefresh = true;
if (this.currentUserId) {
// Reset loading flag para permitir la carga
this.loadingMessages = false;
// Cargar mensajes
await this.loadMessages(this.currentUserId, true, true);
// Scroll al fondo
this.scrollToBottom();
console.log('✅ Mensajes cargados correctamente');
}
// Ocultar indicador
this.hideNewMessagesIndicator();
} catch (e) {
console.warn('Indicator click failed to load full conversation', e);
console.error('❌ Error al cargar mensajes:', e);
// En caso de error, intentar ocultar el indicador y restaurar estado
this.hideNewMessagesIndicator();
} finally {
try { this._suspendAutoRefresh = false; } catch(e) {}
this._suspendAutoRefresh = false;
}
};
// subtle fade-in
@@ -4215,8 +4237,11 @@ if (!isset($_SESSION['user_id'])) {
setTimeout(() => { try { el.style.opacity = '1'; el.style.transform = 'translateX(-50%) translateY(-6px)'; } catch(e) {} }, 20);
}
const c = (typeof count === 'number') ? count : (this._stagedMessages ? this._stagedMessages.length : 0);
el.textContent = (c && c > 1) ? `Nuevos mensajes (${c})` : 'Nuevo mensaje';
el.innerHTML = (c && c > 1)
? `<i class="fas fa-arrow-down me-2"></i>Nuevos mensajes (${c})`
: '<i class="fas fa-arrow-down me-2"></i>Nuevo mensaje';
el.style.display = 'inline-block';
el.style.pointerEvents = 'auto'; // Restaurar por si estaba deshabilitado
} catch (e) { console.warn('showNewMessagesIndicator failed', e); }
}
@@ -4257,28 +4282,37 @@ if (!isset($_SESSION['user_id'])) {
// Immediately hide indicator to provide instant feedback
this.hideNewMessagesIndicator();
// Append staged messages to conversation model
const toApplyCount = this._stagedMessages.length;
console.debug('applyStagedMessages: applying', toApplyCount, 'messages');
this._stagedMessages.forEach(m => { this.currentMessages.push(m); });
// clear staged storage
console.log('✅ applyStagedMessages: aplicando', toApplyCount, 'mensajes');
// ENFOQUE SEGURO: En lugar de renderizar incrementalmente,
// simplemente recargar los mensajes desde el servidor.
// Esto es más seguro y evita problemas de renderizado.
const userId = this.currentUserId;
// Limpiar staged messages primero
this._stagedMessages = [];
if (this._stagedMessageIds) this._stagedMessageIds.clear();
this._stagedCount = 0;
// Render newly added messages and follow to bottom
this.renderMessagesIncremental(false, 0, true);
this.scrollToBottom();
// Update latest timestamp
try { const last = this.currentMessages[this.currentMessages.length - 1]; if (last && last.created_at) this._latestMessage = last.created_at; } catch(e){}
// Recargar mensajes de forma segura
if (userId) {
this.loadingMessages = false; // Reset flag para permitir la carga
this.loadMessages(userId, true, true).then(() => {
console.log('✅ Mensajes recargados después de aplicar staged');
this.scrollToBottom();
}).catch(err => {
console.error('❌ Error recargando mensajes:', err);
// Fallback: intentar scroll al fondo de lo que ya hay
this.scrollToBottom();
});
}
} catch (e) {
console.warn('applyStagedMessages failed', e);
} finally {
// allow indicator to show again for future arrivals after short delay
setTimeout(() => { this._applyingStaged = false; }, 250);
setTimeout(() => { this._applyingStaged = false; }, 500);
}
}
@@ -4717,6 +4751,9 @@ if (!isset($_SESSION['user_id'])) {
const file = event.target.files[0];
if (!file) return;
// NO es grabación de voz (es archivo subido)
this._isVoiceRecording = false;
// Validar tamaño
const maxSize = this.getMaxFileSize(file.type);
if (file.size > maxSize) {
@@ -4849,7 +4886,10 @@ if (!isset($_SESSION['user_id'])) {
media_url: uploadResult.data.url,
media_type: uploadResult.data.type,
caption: caption || null,
filename: this.selectedFile.name
filename: this.selectedFile.name,
// Para audio: is_voice = true si fue grabado desde micrófono (nota de voz)
// is_voice = false si fue subido como archivo (audio normal)
is_voice: (uploadResult.data.type === 'audio' && this._isVoiceRecording) ? true : false
})
});
@@ -4930,6 +4970,8 @@ if (!isset($_SESSION['user_id'])) {
document.getElementById('media-caption').value = '';
document.getElementById('file-input').value = '';
this.selectedFile = null;
// Limpiar flag de grabación de voz
this._isVoiceRecording = false;
// Restaurar botón enviar
const sendBtn = document.getElementById('send-btn');
services/WhatsAppService.php
+35 -5
View File
@@ -337,16 +337,30 @@ class WhatsAppService
/**
* Enviar audio
* @param string $to Número de destinatario
* @param string $audioUrl URL del audio
* @param bool $skipAutoSave Omitir guardado automático
* @param bool $isVoice True para enviar como nota de voz (requiere .ogg con códec OPUS)
*/
public function sendAudioMessage($to, $audioUrl, $skipAutoSave = false)
public function sendAudioMessage($to, $audioUrl, $skipAutoSave = false, $isVoice = false)
{
$audioData = [
'link' => $audioUrl
];
// Si es nota de voz, agregar parámetro ptt (push-to-talk)
// Requiere archivo .ogg con códec OPUS
if ($isVoice) {
// NOTA: WhatsApp Cloud API no tiene parámetro 'ptt' directo para links.
// Para notas de voz se recomienda subir el archivo y usar sendMediaById con is_voice.
error_log('sendAudioMessage: is_voice=true pero usando link. Para notas de voz, subir archivo primero.');
}
$data = [
'messaging_product' => 'whatsapp',
'to' => $this->formatPhoneNumber($to),
'type' => 'audio',
'audio' => [
'link' => $audioUrl
]
'audio' => $audioData
];
if ($skipAutoSave) {
@@ -434,8 +448,15 @@ class WhatsAppService
/**
* Enviar mensaje usando media_id (archivo ya subido a WhatsApp)
* @param string $to Número de destinatario
* @param string $mediaId ID del archivo en WhatsApp
* @param string $mediaType Tipo: image, video, audio, document
* @param string|null $caption Texto opcional (no aplica para audio)
* @param string|null $filename Nombre archivo (solo document)
* @param bool $skipAutoSave Omitir guardado automático
* @param bool $isVoice Para audio: true = nota de voz con onda verde, false = audio normal
*/
public function sendMediaById($to, $mediaId, $mediaType, $caption = null, $filename = null, $skipAutoSave = false)
public function sendMediaById($to, $mediaId, $mediaType, $caption = null, $filename = null, $skipAutoSave = false, $isVoice = false)
{
$data = [
'messaging_product' => 'whatsapp',
@@ -453,6 +474,15 @@ class WhatsAppService
$mediaData['filename'] = $filename;
}
// Para audio: agregar parámetro 'ptt' (push-to-talk) si es nota de voz
// Esto hace que aparezca con la onda verde característica de WhatsApp
if ($mediaType === 'audio' && $isVoice) {
// Según documentación de Meta: "ptt": true para mensajes de voz
// El archivo debe ser .ogg con códec OPUS
$mediaData['ptt'] = true;
error_log('sendMediaById: Enviando como nota de voz (ptt=true)');
}
$data[$mediaType] = $mediaData;
// Marcar para evitar guardado automático si se solicita