Compare commits
3 Commits
2025.12.02
...
2026.01.12
| Author | SHA1 | Date | |
|---|---|---|---|
| 61beadcd06 | |||
| 026edde33b | |||
| a3345ed854 |
@@ -48,19 +48,13 @@ jobs:
|
|||||||
|
|
||||||
- name: Update plugin version
|
- name: Update plugin version
|
||||||
run: |
|
run: |
|
||||||
# Get current version from plugin file
|
# Replace version placeholder with actual version
|
||||||
CURRENT_VERSION=$(grep "Version:" twilio-wp-plugin.php | head -1 | sed 's/.*Version: //' | sed 's/ *$//')
|
sed -i "s/Version: {auto_update_value_on_deploy}/Version: ${{ steps.get_version.outputs.version }}/" twilio-wp-plugin.php
|
||||||
|
sed -i "s/TWP_VERSION', '{auto_update_value_on_deploy}/TWP_VERSION', '${{ steps.get_version.outputs.version }}/" twilio-wp-plugin.php
|
||||||
|
|
||||||
# Only update if version doesn't match the release version
|
# Verify the changes were made
|
||||||
if [ "$CURRENT_VERSION" != "${{ steps.get_version.outputs.version }}" ]; then
|
|
||||||
sed -i "s/Version: .*/Version: ${{ steps.get_version.outputs.version }}/" twilio-wp-plugin.php
|
|
||||||
echo "Updated version from $CURRENT_VERSION to ${{ steps.get_version.outputs.version }}"
|
|
||||||
else
|
|
||||||
echo "Version already set to ${{ steps.get_version.outputs.version }}"
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Verify the change
|
|
||||||
grep "Version:" twilio-wp-plugin.php
|
grep "Version:" twilio-wp-plugin.php
|
||||||
|
grep "TWP_VERSION" twilio-wp-plugin.php
|
||||||
|
|
||||||
- name: Create ZIP archive
|
- name: Create ZIP archive
|
||||||
run: |
|
run: |
|
||||||
|
|||||||
@@ -19,11 +19,13 @@ jobs:
|
|||||||
|
|
||||||
- name: Update version in plugin file
|
- name: Update version in plugin file
|
||||||
run: |
|
run: |
|
||||||
# Replace version in main plugin file
|
# Replace version in main plugin file (both header and constant)
|
||||||
sed -i "s/Version: .*/Version: ${{ env.TAG }}/" twilio-wp-plugin.php
|
sed -i "s/Version: {auto_update_value_on_deploy}/Version: ${{ env.TAG }}/" twilio-wp-plugin.php
|
||||||
|
sed -i "s/TWP_VERSION', '{auto_update_value_on_deploy}/TWP_VERSION', '${{ env.TAG }}/" twilio-wp-plugin.php
|
||||||
|
|
||||||
# Verify change
|
# Verify changes
|
||||||
grep "Version:" twilio-wp-plugin.php
|
grep "Version:" twilio-wp-plugin.php
|
||||||
|
grep "TWP_VERSION" twilio-wp-plugin.php
|
||||||
|
|
||||||
- name: Commit changes
|
- name: Commit changes
|
||||||
run: |
|
run: |
|
||||||
|
|||||||
@@ -6996,6 +6996,7 @@ class TWP_Admin {
|
|||||||
<div class="phone-interface">
|
<div class="phone-interface">
|
||||||
<div class="phone-display">
|
<div class="phone-display">
|
||||||
<div id="phone-status">Ready</div>
|
<div id="phone-status">Ready</div>
|
||||||
|
<div id="device-connection-status" style="font-size: 12px; color: #999; margin-top: 5px;">Connecting...</div>
|
||||||
<div id="phone-number-display"></div>
|
<div id="phone-number-display"></div>
|
||||||
<div id="call-timer" style="display: none;">00:00</div>
|
<div id="call-timer" style="display: none;">00:00</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -7434,6 +7435,210 @@ class TWP_Admin {
|
|||||||
var callStartTime = null;
|
var callStartTime = null;
|
||||||
var tokenRefreshTimer = null;
|
var tokenRefreshTimer = null;
|
||||||
var tokenExpiry = null;
|
var tokenExpiry = null;
|
||||||
|
var audioContext = null;
|
||||||
|
var ringtoneAudio = null;
|
||||||
|
var isPageVisible = true;
|
||||||
|
var deviceConnectionState = 'disconnected'; // disconnected, connecting, connected
|
||||||
|
var serviceWorkerRegistration = null;
|
||||||
|
|
||||||
|
// Initialize AudioContext for mobile audio playback
|
||||||
|
function initializeAudioContext() {
|
||||||
|
try {
|
||||||
|
if (!audioContext) {
|
||||||
|
// Create AudioContext with compatibility
|
||||||
|
var AudioContextClass = window.AudioContext || window.webkitAudioContext;
|
||||||
|
audioContext = new AudioContextClass();
|
||||||
|
console.log('AudioContext created, state:', audioContext.state);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Resume AudioContext if suspended (required on mobile)
|
||||||
|
if (audioContext.state === 'suspended') {
|
||||||
|
audioContext.resume().then(function() {
|
||||||
|
console.log('AudioContext resumed successfully');
|
||||||
|
}).catch(function(err) {
|
||||||
|
console.error('Failed to resume AudioContext:', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to initialize AudioContext:', error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create and setup ringtone audio element
|
||||||
|
function setupRingtone() {
|
||||||
|
if (!ringtoneAudio) {
|
||||||
|
ringtoneAudio = new Audio();
|
||||||
|
// Use a simple sine wave tone or default ringtone
|
||||||
|
// For now, we'll use a data URI for a simple beep tone
|
||||||
|
ringtoneAudio.loop = true;
|
||||||
|
ringtoneAudio.volume = 0.7;
|
||||||
|
|
||||||
|
// Create a simple ringtone using Web Audio API
|
||||||
|
createRingtone();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create ringtone using Web Audio API for better mobile support
|
||||||
|
function createRingtone() {
|
||||||
|
// Use a simple base64-encoded beep tone (short MP3)
|
||||||
|
// This is a simple 1-second beep at 800Hz
|
||||||
|
// You can replace this with a custom ringtone file URL if you upload one
|
||||||
|
|
||||||
|
// For now, use a simple approach: HTML5 Audio with error fallback
|
||||||
|
// Note: On mobile, audio playback may be restricted, so we rely heavily on vibration
|
||||||
|
var ringtoneUrl = '<?php echo plugins_url('assets/sounds/ringtone.mp3', dirname(__FILE__)); ?>';
|
||||||
|
|
||||||
|
// Try to load the ringtone file
|
||||||
|
ringtoneAudio.src = ringtoneUrl;
|
||||||
|
|
||||||
|
// Fallback: if ringtone file fails to load, we'll just use vibration
|
||||||
|
ringtoneAudio.addEventListener('error', function(e) {
|
||||||
|
console.log('Ringtone file not found (this is normal), using vibration only for mobile');
|
||||||
|
// Don't show error - vibration is sufficient for mobile
|
||||||
|
}, { once: true });
|
||||||
|
|
||||||
|
// Try to preload
|
||||||
|
ringtoneAudio.load();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Play ringtone for incoming call
|
||||||
|
function playRingtone() {
|
||||||
|
try {
|
||||||
|
// Initialize AudioContext on user interaction
|
||||||
|
initializeAudioContext();
|
||||||
|
|
||||||
|
if (ringtoneAudio) {
|
||||||
|
var playPromise = ringtoneAudio.play();
|
||||||
|
|
||||||
|
if (playPromise !== undefined) {
|
||||||
|
playPromise.then(function() {
|
||||||
|
console.log('Ringtone playing');
|
||||||
|
}).catch(function(error) {
|
||||||
|
console.error('Ringtone play failed:', error);
|
||||||
|
// Fallback: vibrate on mobile
|
||||||
|
vibrateDevice([300, 200, 300, 200, 300]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Always vibrate on mobile for better notification
|
||||||
|
vibrateDevice([300, 200, 300, 200, 300]);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error playing ringtone:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stop ringtone
|
||||||
|
function stopRingtone() {
|
||||||
|
try {
|
||||||
|
if (ringtoneAudio) {
|
||||||
|
ringtoneAudio.pause();
|
||||||
|
ringtoneAudio.currentTime = 0;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error stopping ringtone:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vibrate device (mobile)
|
||||||
|
function vibrateDevice(pattern) {
|
||||||
|
if ('vibrate' in navigator) {
|
||||||
|
navigator.vibrate(pattern);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Register service worker for PWA notifications
|
||||||
|
function registerServiceWorker() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
var swPath = '<?php echo plugins_url('assets/js/twp-service-worker.js', dirname(__FILE__)); ?>';
|
||||||
|
|
||||||
|
navigator.serviceWorker.register(swPath)
|
||||||
|
.then(function(registration) {
|
||||||
|
console.log('Service Worker registered:', registration);
|
||||||
|
serviceWorkerRegistration = registration;
|
||||||
|
|
||||||
|
// Request notification permission
|
||||||
|
if ('Notification' in window && Notification.permission === 'default') {
|
||||||
|
Notification.requestPermission().then(function(permission) {
|
||||||
|
console.log('Notification permission:', permission);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function(error) {
|
||||||
|
console.error('Service Worker registration failed:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Send notification via service worker
|
||||||
|
function sendIncomingCallNotification(callerNumber) {
|
||||||
|
// Try browser notification first
|
||||||
|
if ('Notification' in window && Notification.permission === 'granted') {
|
||||||
|
if (serviceWorkerRegistration && serviceWorkerRegistration.active) {
|
||||||
|
serviceWorkerRegistration.active.postMessage({
|
||||||
|
type: 'SHOW_NOTIFICATION',
|
||||||
|
title: 'Incoming Call',
|
||||||
|
body: 'Call from ' + (callerNumber || 'Unknown Number'),
|
||||||
|
icon: '<?php echo plugins_url('assets/images/phone-icon.png', dirname(__FILE__)); ?>',
|
||||||
|
tag: 'incoming-call',
|
||||||
|
requireInteraction: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Fallback: show notification directly
|
||||||
|
new Notification('Incoming Call', {
|
||||||
|
body: 'Call from ' + (callerNumber || 'Unknown Number'),
|
||||||
|
icon: '<?php echo plugins_url('assets/images/phone-icon.png', dirname(__FILE__)); ?>',
|
||||||
|
tag: 'incoming-call',
|
||||||
|
requireInteraction: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Monitor page visibility for background call handling
|
||||||
|
function setupPageVisibility() {
|
||||||
|
document.addEventListener('visibilitychange', function() {
|
||||||
|
isPageVisible = !document.hidden;
|
||||||
|
console.log('Page visibility changed:', isPageVisible ? 'visible' : 'hidden');
|
||||||
|
|
||||||
|
// If page becomes visible, resume audio context
|
||||||
|
if (isPageVisible && audioContext) {
|
||||||
|
initializeAudioContext();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update device connection status in UI
|
||||||
|
function updateConnectionStatus(state) {
|
||||||
|
deviceConnectionState = state;
|
||||||
|
var statusText = '';
|
||||||
|
var statusColor = '';
|
||||||
|
|
||||||
|
switch(state) {
|
||||||
|
case 'connected':
|
||||||
|
statusText = 'Connected';
|
||||||
|
statusColor = '#4CAF50';
|
||||||
|
break;
|
||||||
|
case 'connecting':
|
||||||
|
statusText = 'Connecting...';
|
||||||
|
statusColor = '#FF9800';
|
||||||
|
break;
|
||||||
|
case 'disconnected':
|
||||||
|
statusText = 'Disconnected';
|
||||||
|
statusColor = '#f44336';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
statusText = 'Unknown';
|
||||||
|
statusColor = '#999';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update status indicator (we'll add this to the UI)
|
||||||
|
$('#device-connection-status').text(statusText).css('color', statusColor);
|
||||||
|
}
|
||||||
|
|
||||||
// Wait for SDK to load
|
// Wait for SDK to load
|
||||||
function waitForTwilioSDK(callback) {
|
function waitForTwilioSDK(callback) {
|
||||||
@@ -7450,6 +7655,18 @@ class TWP_Admin {
|
|||||||
// Initialize the browser phone
|
// Initialize the browser phone
|
||||||
function initializeBrowserPhone() {
|
function initializeBrowserPhone() {
|
||||||
$('#phone-status').text('Initializing...');
|
$('#phone-status').text('Initializing...');
|
||||||
|
updateConnectionStatus('connecting');
|
||||||
|
|
||||||
|
// Initialize audio and PWA features
|
||||||
|
setupRingtone();
|
||||||
|
registerServiceWorker();
|
||||||
|
setupPageVisibility();
|
||||||
|
|
||||||
|
// Initialize AudioContext on first user interaction
|
||||||
|
$(document).one('click touchstart', function() {
|
||||||
|
console.log('User interaction detected, initializing AudioContext');
|
||||||
|
initializeAudioContext();
|
||||||
|
});
|
||||||
|
|
||||||
// Wait for SDK before proceeding
|
// Wait for SDK before proceeding
|
||||||
waitForTwilioSDK(function() {
|
waitForTwilioSDK(function() {
|
||||||
@@ -7468,9 +7685,11 @@ class TWP_Admin {
|
|||||||
// WordPress wp_send_json_error sends the error message as response.data
|
// WordPress wp_send_json_error sends the error message as response.data
|
||||||
var errorMsg = response.data || response.error || 'Unknown error';
|
var errorMsg = response.data || response.error || 'Unknown error';
|
||||||
showError('Failed to initialize: ' + errorMsg);
|
showError('Failed to initialize: ' + errorMsg);
|
||||||
|
updateConnectionStatus('disconnected');
|
||||||
}
|
}
|
||||||
}).fail(function() {
|
}).fail(function() {
|
||||||
showError('Failed to connect to server');
|
showError('Failed to connect to server');
|
||||||
|
updateConnectionStatus('disconnected');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -7518,36 +7737,77 @@ class TWP_Admin {
|
|||||||
throw new Error('Twilio Voice SDK not loaded');
|
throw new Error('Twilio Voice SDK not loaded');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('Setting up Twilio Device...');
|
||||||
|
updateConnectionStatus('connecting');
|
||||||
|
|
||||||
// Request media permissions before setting up device
|
// Request media permissions before setting up device
|
||||||
const hasPermissions = await requestMediaPermissions();
|
const hasPermissions = await requestMediaPermissions();
|
||||||
if (!hasPermissions) {
|
if (!hasPermissions) {
|
||||||
|
updateConnectionStatus('disconnected');
|
||||||
return; // Stop setup if permissions denied
|
return; // Stop setup if permissions denied
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clean up existing device if any
|
// Clean up existing device if any
|
||||||
if (device) {
|
if (device) {
|
||||||
|
console.log('Destroying existing device');
|
||||||
await device.destroy();
|
await device.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Detect if we're on Android/mobile for specific settings
|
||||||
|
var isAndroid = /Android/i.test(navigator.userAgent);
|
||||||
|
var isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||||||
|
|
||||||
|
console.log('Device detection - Android:', isAndroid, 'Mobile:', isMobile);
|
||||||
|
|
||||||
|
// Android-specific audio constraints for better WebRTC performance
|
||||||
|
var audioConstraints = {
|
||||||
|
echoCancellation: true,
|
||||||
|
noiseSuppression: true,
|
||||||
|
autoGainControl: true
|
||||||
|
};
|
||||||
|
|
||||||
|
// Additional Android-specific settings
|
||||||
|
if (isAndroid) {
|
||||||
|
audioConstraints.googEchoCancellation = true;
|
||||||
|
audioConstraints.googNoiseSuppression = true;
|
||||||
|
audioConstraints.googAutoGainControl = true;
|
||||||
|
audioConstraints.googHighpassFilter = true;
|
||||||
|
}
|
||||||
|
|
||||||
// Setup Twilio Voice SDK v2 Device
|
// Setup Twilio Voice SDK v2 Device
|
||||||
// Note: Voice SDK v2 uses Twilio.Device directly, not Twilio.Voice.Device
|
// Note: Voice SDK v2 uses Twilio.Device directly, not Twilio.Voice.Device
|
||||||
device = new Twilio.Device(token, {
|
device = new Twilio.Device(token, {
|
||||||
logLevel: 1, // 0 = TRACE, 1 = DEBUG
|
logLevel: 1, // 0 = TRACE, 1 = DEBUG
|
||||||
codecPreferences: ['opus', 'pcmu'],
|
codecPreferences: ['opus', 'pcmu'],
|
||||||
edge: 'sydney' // Or closest edge location
|
edge: 'sydney', // Or closest edge location
|
||||||
|
enableIceRestart: true, // Important for mobile network switching
|
||||||
|
audioConstraints: audioConstraints,
|
||||||
|
maxCallSignalingTimeoutMs: 30000, // 30 seconds timeout for mobile
|
||||||
|
closeProtection: true // Warn before closing during call
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log('Twilio Device created with audio constraints:', audioConstraints);
|
||||||
|
|
||||||
// Set up event handlers BEFORE registering
|
// Set up event handlers BEFORE registering
|
||||||
// Device registered and ready
|
// Device registered and ready
|
||||||
device.on('registered', function() {
|
device.on('registered', function() {
|
||||||
console.log('Device registered successfully');
|
console.log('Device registered successfully');
|
||||||
$('#phone-status').text('Ready').css('color', '#4CAF50');
|
$('#phone-status').text('Ready').css('color', '#4CAF50');
|
||||||
$('#call-btn').prop('disabled', false);
|
$('#call-btn').prop('disabled', false);
|
||||||
|
updateConnectionStatus('connected');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Device unregistered
|
||||||
|
device.on('unregistered', function() {
|
||||||
|
console.log('Device unregistered');
|
||||||
|
updateConnectionStatus('disconnected');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handle errors
|
// Handle errors
|
||||||
device.on('error', function(error) {
|
device.on('error', function(error) {
|
||||||
console.error('Twilio Device Error:', error);
|
console.error('Twilio Device Error:', error);
|
||||||
|
console.error('Error code:', error.code, 'Message:', error.message);
|
||||||
|
updateConnectionStatus('disconnected');
|
||||||
|
|
||||||
var errorMsg = error.message || error.toString();
|
var errorMsg = error.message || error.toString();
|
||||||
|
|
||||||
@@ -7560,6 +7820,15 @@ class TWP_Admin {
|
|||||||
errorMsg = 'Token error: ' + errorMsg + ' - The page will automatically try to refresh the token.';
|
errorMsg = 'Token error: ' + errorMsg + ' - The page will automatically try to refresh the token.';
|
||||||
// Try to reinitialize after token error
|
// Try to reinitialize after token error
|
||||||
setTimeout(initializeBrowserPhone, 5000);
|
setTimeout(initializeBrowserPhone, 5000);
|
||||||
|
} else if (errorMsg.includes('31005') || errorMsg.includes('Connection error')) {
|
||||||
|
errorMsg = 'Connection error: Check your internet connection. If on mobile, try switching between WiFi and cellular data.';
|
||||||
|
// Retry connection
|
||||||
|
setTimeout(function() {
|
||||||
|
if (device) {
|
||||||
|
console.log('Attempting to reconnect device...');
|
||||||
|
device.register();
|
||||||
|
}
|
||||||
|
}, 3000);
|
||||||
}
|
}
|
||||||
|
|
||||||
showError(errorMsg);
|
showError(errorMsg);
|
||||||
@@ -7567,16 +7836,32 @@ class TWP_Admin {
|
|||||||
|
|
||||||
// Handle incoming calls
|
// Handle incoming calls
|
||||||
device.on('incoming', function(call) {
|
device.on('incoming', function(call) {
|
||||||
|
console.log('Incoming call from:', call.parameters.From);
|
||||||
|
console.log('Call SID:', call.parameters.CallSid);
|
||||||
|
console.log('Device connection state:', deviceConnectionState);
|
||||||
|
|
||||||
currentCall = call;
|
currentCall = call;
|
||||||
|
var callerNumber = call.parameters.From || 'Unknown Number';
|
||||||
|
|
||||||
$('#phone-status').text('Incoming Call').css('color', '#FF9800');
|
$('#phone-status').text('Incoming Call').css('color', '#FF9800');
|
||||||
$('#phone-number-display').text(call.parameters.From || 'Unknown Number');
|
$('#phone-number-display').text(callerNumber);
|
||||||
$('#call-btn').hide();
|
$('#call-btn').hide();
|
||||||
$('#answer-btn').show();
|
$('#answer-btn').show();
|
||||||
|
|
||||||
|
// Play ringtone and show notification
|
||||||
|
playRingtone();
|
||||||
|
|
||||||
|
// If page is in background, send notification
|
||||||
|
if (!isPageVisible) {
|
||||||
|
console.log('Page in background, sending notification');
|
||||||
|
sendIncomingCallNotification(callerNumber);
|
||||||
|
}
|
||||||
|
|
||||||
// Setup call event handlers
|
// Setup call event handlers
|
||||||
setupCallHandlers(call);
|
setupCallHandlers(call);
|
||||||
|
|
||||||
if ($('#auto-answer').is(':checked')) {
|
if ($('#auto-answer').is(':checked')) {
|
||||||
|
console.log('Auto-answer enabled, accepting call');
|
||||||
call.accept();
|
call.accept();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -7599,6 +7884,8 @@ class TWP_Admin {
|
|||||||
function setupCallHandlers(call) {
|
function setupCallHandlers(call) {
|
||||||
// Call accepted/connected
|
// Call accepted/connected
|
||||||
call.on('accept', function() {
|
call.on('accept', function() {
|
||||||
|
console.log('Call accepted and connected');
|
||||||
|
stopRingtone();
|
||||||
$('#phone-status').text('Connected').css('color', '#2196F3');
|
$('#phone-status').text('Connected').css('color', '#2196F3');
|
||||||
$('#call-btn').hide();
|
$('#call-btn').hide();
|
||||||
$('#answer-btn').hide();
|
$('#answer-btn').hide();
|
||||||
@@ -7610,6 +7897,8 @@ class TWP_Admin {
|
|||||||
|
|
||||||
// Call disconnected
|
// Call disconnected
|
||||||
call.on('disconnect', function() {
|
call.on('disconnect', function() {
|
||||||
|
console.log('Call disconnected');
|
||||||
|
stopRingtone();
|
||||||
currentCall = null;
|
currentCall = null;
|
||||||
$('#phone-status').text('Ready').css('color', '#4CAF50');
|
$('#phone-status').text('Ready').css('color', '#4CAF50');
|
||||||
$('#hangup-btn').hide();
|
$('#hangup-btn').hide();
|
||||||
@@ -7627,6 +7916,8 @@ class TWP_Admin {
|
|||||||
|
|
||||||
// Call rejected
|
// Call rejected
|
||||||
call.on('reject', function() {
|
call.on('reject', function() {
|
||||||
|
console.log('Call rejected');
|
||||||
|
stopRingtone();
|
||||||
currentCall = null;
|
currentCall = null;
|
||||||
$('#phone-status').text('Ready').css('color', '#4CAF50');
|
$('#phone-status').text('Ready').css('color', '#4CAF50');
|
||||||
$('#answer-btn').hide();
|
$('#answer-btn').hide();
|
||||||
@@ -7635,6 +7926,8 @@ class TWP_Admin {
|
|||||||
|
|
||||||
// Call cancelled (by caller before answer)
|
// Call cancelled (by caller before answer)
|
||||||
call.on('cancel', function() {
|
call.on('cancel', function() {
|
||||||
|
console.log('Call cancelled by caller');
|
||||||
|
stopRingtone();
|
||||||
currentCall = null;
|
currentCall = null;
|
||||||
$('#phone-status').text('Missed Call').css('color', '#FF9800');
|
$('#phone-status').text('Missed Call').css('color', '#FF9800');
|
||||||
$('#answer-btn').hide();
|
$('#answer-btn').hide();
|
||||||
@@ -7643,6 +7936,26 @@ class TWP_Admin {
|
|||||||
$('#phone-status').text('Ready').css('color', '#4CAF50');
|
$('#phone-status').text('Ready').css('color', '#4CAF50');
|
||||||
}, 3000);
|
}, 3000);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Call error
|
||||||
|
call.on('error', function(error) {
|
||||||
|
console.error('Call error:', error);
|
||||||
|
console.error('Error code:', error.code, 'Message:', error.message);
|
||||||
|
stopRingtone();
|
||||||
|
|
||||||
|
var errorMsg = error.message || error.toString();
|
||||||
|
|
||||||
|
// Specific error handling for Android/mobile
|
||||||
|
if (error.code === 31005) {
|
||||||
|
errorMsg = 'Connection failed: Check your network connection. Try switching between WiFi and cellular data.';
|
||||||
|
} else if (error.code === 31201 || error.code === 31204) {
|
||||||
|
errorMsg = 'Call setup failed: Please try again. If the problem persists, refresh the page.';
|
||||||
|
} else if (error.code === 31208) {
|
||||||
|
errorMsg = 'Media connection failed: Check microphone permissions and try again.';
|
||||||
|
}
|
||||||
|
|
||||||
|
showError('Call error: ' + errorMsg);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function refreshToken() {
|
function refreshToken() {
|
||||||
@@ -7753,11 +8066,15 @@ class TWP_Admin {
|
|||||||
$('#caller-id-select').html('<option value="">Error loading numbers</option>');
|
$('#caller-id-select').html('<option value="">Error loading numbers</option>');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Dialpad functionality
|
// Dialpad functionality (support both click and touch events)
|
||||||
$('.dialpad-btn').on('click', function() {
|
$('.dialpad-btn').on('click touchend', function(e) {
|
||||||
|
e.preventDefault(); // Prevent duplicate events
|
||||||
var digit = $(this).data('digit');
|
var digit = $(this).data('digit');
|
||||||
var currentVal = $('#phone-number-input').val();
|
var currentVal = $('#phone-number-input').val();
|
||||||
$('#phone-number-input').val(currentVal + digit);
|
$('#phone-number-input').val(currentVal + digit);
|
||||||
|
|
||||||
|
// Initialize AudioContext on user interaction (mobile requirement)
|
||||||
|
initializeAudioContext();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Call button
|
// Call button
|
||||||
@@ -7818,8 +8135,45 @@ class TWP_Admin {
|
|||||||
|
|
||||||
// Answer button
|
// Answer button
|
||||||
$('#answer-btn').on('click', function() {
|
$('#answer-btn').on('click', function() {
|
||||||
if (currentCall) {
|
console.log('Answer button clicked');
|
||||||
|
console.log('Device connection state:', deviceConnectionState);
|
||||||
|
console.log('Current call:', currentCall);
|
||||||
|
|
||||||
|
if (!currentCall) {
|
||||||
|
console.error('No current call to answer');
|
||||||
|
showError('No incoming call to answer');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check device connection state
|
||||||
|
if (deviceConnectionState !== 'connected') {
|
||||||
|
console.error('Device not connected, state:', deviceConnectionState);
|
||||||
|
showError('Phone not connected. Reconnecting...');
|
||||||
|
|
||||||
|
// Try to reconnect
|
||||||
|
if (device) {
|
||||||
|
device.register().then(function() {
|
||||||
|
console.log('Device reconnected, answering call');
|
||||||
|
if (currentCall) {
|
||||||
|
currentCall.accept();
|
||||||
|
}
|
||||||
|
}).catch(function(err) {
|
||||||
|
console.error('Failed to reconnect device:', err);
|
||||||
|
showError('Failed to reconnect. Please refresh the page.');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize AudioContext before accepting (important for mobile)
|
||||||
|
initializeAudioContext();
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('Accepting call...');
|
||||||
currentCall.accept();
|
currentCall.accept();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error accepting call:', error);
|
||||||
|
showError('Failed to answer call: ' + error.message);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
42
assets/images/README.md
Normal file
42
assets/images/README.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# Browser Phone Images
|
||||||
|
|
||||||
|
## Required Images for PWA Notifications
|
||||||
|
|
||||||
|
Place the following image files in this directory for browser push notifications:
|
||||||
|
|
||||||
|
### phone-icon.png
|
||||||
|
- **Purpose**: Main notification icon
|
||||||
|
- **Size**: 192x192 pixels (recommended)
|
||||||
|
- **Format**: PNG with transparency
|
||||||
|
- **Usage**: Shown in browser notifications for incoming calls
|
||||||
|
|
||||||
|
### phone-badge.png
|
||||||
|
- **Purpose**: Small badge icon for notifications
|
||||||
|
- **Size**: 96x96 pixels or 72x72 pixels
|
||||||
|
- **Format**: PNG with transparency
|
||||||
|
- **Usage**: Displayed in the notification badge area (Android)
|
||||||
|
|
||||||
|
## Fallback Behavior
|
||||||
|
|
||||||
|
If these images are not present, the browser will:
|
||||||
|
- Use a default browser notification icon
|
||||||
|
- Still display text-based notifications
|
||||||
|
- Functionality will not be affected
|
||||||
|
|
||||||
|
## Image Creation Tips
|
||||||
|
|
||||||
|
- Use a simple, recognizable phone icon
|
||||||
|
- Ensure good contrast for visibility
|
||||||
|
- Test on both light and dark backgrounds
|
||||||
|
- Transparent backgrounds work best
|
||||||
|
- Use a consistent color scheme with your brand
|
||||||
|
|
||||||
|
## Example Resources
|
||||||
|
|
||||||
|
- Google Material Icons: https://fonts.google.com/icons
|
||||||
|
- Font Awesome: https://fontawesome.com/
|
||||||
|
- Flaticon: https://www.flaticon.com/
|
||||||
|
- Or create custom icons using tools like:
|
||||||
|
- Figma
|
||||||
|
- Adobe Illustrator
|
||||||
|
- Inkscape (free)
|
||||||
@@ -72,7 +72,23 @@ self.addEventListener('push', function(event) {
|
|||||||
|
|
||||||
// Handle messages from the main script
|
// Handle messages from the main script
|
||||||
self.addEventListener('message', function(event) {
|
self.addEventListener('message', function(event) {
|
||||||
|
console.log('TWP Service Worker: Message received', event.data);
|
||||||
|
|
||||||
if (event.data && event.data.type === 'SHOW_NOTIFICATION') {
|
if (event.data && event.data.type === 'SHOW_NOTIFICATION') {
|
||||||
self.registration.showNotification(event.data.title, event.data.options);
|
const options = {
|
||||||
|
body: event.data.body || 'You have a new call waiting',
|
||||||
|
icon: event.data.icon || '/wp-content/plugins/twilio-wp-plugin/assets/images/phone-icon.png',
|
||||||
|
badge: '/wp-content/plugins/twilio-wp-plugin/assets/images/phone-badge.png',
|
||||||
|
vibrate: [300, 200, 300, 200, 300],
|
||||||
|
tag: event.data.tag || 'incoming-call',
|
||||||
|
requireInteraction: event.data.requireInteraction !== undefined ? event.data.requireInteraction : true,
|
||||||
|
data: event.data.data || {}
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('TWP Service Worker: Showing notification', event.data.title, options);
|
||||||
|
|
||||||
|
event.waitUntil(
|
||||||
|
self.registration.showNotification(event.data.title || 'Incoming Call', options)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
36
assets/sounds/README.md
Normal file
36
assets/sounds/README.md
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
# Ringtone Audio Files
|
||||||
|
|
||||||
|
## Custom Ringtone
|
||||||
|
|
||||||
|
To add a custom ringtone for incoming calls in the browser phone:
|
||||||
|
|
||||||
|
1. Place your ringtone audio file in this directory
|
||||||
|
2. Name it: `ringtone.mp3`
|
||||||
|
3. Recommended format: MP3, under 5 seconds, loopable
|
||||||
|
|
||||||
|
## Fallback Behavior
|
||||||
|
|
||||||
|
If no ringtone file is present, the browser phone will:
|
||||||
|
- Use device vibration on mobile devices (Android, iOS)
|
||||||
|
- Rely on browser notifications to alert users
|
||||||
|
- Display visual indicators in the browser interface
|
||||||
|
|
||||||
|
## Supported Audio Formats
|
||||||
|
|
||||||
|
- **MP3** (recommended) - Best compatibility across browsers
|
||||||
|
- **OGG** - Good for Firefox, Chrome
|
||||||
|
- **WAV** - Larger file size but universal support
|
||||||
|
|
||||||
|
## File Requirements
|
||||||
|
|
||||||
|
- Maximum file size: 100KB recommended
|
||||||
|
- Duration: 1-5 seconds (will loop)
|
||||||
|
- Sample rate: 44.1kHz or 48kHz
|
||||||
|
- Bitrate: 128kbps or higher
|
||||||
|
|
||||||
|
## Example Ringtone Sources
|
||||||
|
|
||||||
|
You can find free ringtone files at:
|
||||||
|
- https://freesound.org/
|
||||||
|
- https://incompetech.com/
|
||||||
|
- Or create your own using Audacity or similar tools
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
* Plugin Name: Twilio WP Plugin
|
* Plugin Name: Twilio WP Plugin
|
||||||
* Plugin URI: https://repo.anhonesthost.net/wp-plugins/twilio-wp-plugin
|
* Plugin URI: https://repo.anhonesthost.net/wp-plugins/twilio-wp-plugin
|
||||||
* Description: WordPress plugin for Twilio integration with phone scheduling, call forwarding, queue management, and Eleven Labs TTS
|
* Description: WordPress plugin for Twilio integration with phone scheduling, call forwarding, queue management, and Eleven Labs TTS
|
||||||
* Version: 2.8.9
|
* Version: {auto_update_value_on_deploy}
|
||||||
* Author: Josh Knapp
|
* Author: Josh Knapp
|
||||||
* License: GPL v2 or later
|
* License: GPL v2 or later
|
||||||
* Text Domain: twilio-wp-plugin
|
* Text Domain: twilio-wp-plugin
|
||||||
@@ -15,7 +15,7 @@ if (!defined('WPINC')) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Plugin constants
|
// Plugin constants
|
||||||
define('TWP_VERSION', '2.8.9');
|
define('TWP_VERSION', '{auto_update_value_on_deploy}');
|
||||||
define('TWP_DB_VERSION', '1.6.2'); // Track database version separately
|
define('TWP_DB_VERSION', '1.6.2'); // Track database version separately
|
||||||
define('TWP_PLUGIN_DIR', plugin_dir_path(__FILE__));
|
define('TWP_PLUGIN_DIR', plugin_dir_path(__FILE__));
|
||||||
define('TWP_PLUGIN_URL', plugin_dir_url(__FILE__));
|
define('TWP_PLUGIN_URL', plugin_dir_url(__FILE__));
|
||||||
|
|||||||
Reference in New Issue
Block a user