From e3fab38d01aeb0f6d2a3df26915f785a8a831a18 Mon Sep 17 00:00:00 2001 From: jknapp Date: Wed, 13 Aug 2025 14:22:37 -0700 Subject: [PATCH] Fix SDK timeout and improve text contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SDK Loading Improvements: - Increased timeout from 5 to 15 seconds for slower connections - Added progressive status messages during SDK loading - Enhanced console logging for debugging - Added fallback SDK loading mechanism with inline script - Better error diagnostics showing Twilio object status Text Contrast Fixes: - Updated all #333 colors to #212529 for better readability - Fixed browser phone title, dial buttons, timer, queue headings - Enhanced dark mode support for all text elements - Improved readability on both light and dark backgrounds Technical Changes: - waitForTwilioSDK() now waits 150 attempts (15 seconds) - Progressive status updates at 3s, 6s, 10s intervals - Backup SDK loading via document.createElement - Comprehensive dark mode color coverage - Better error messaging for network issues Accessibility Improvements: - Higher contrast ratios for WCAG compliance - Consistent text color hierarchy - Better visibility in all lighting conditions - Enhanced mobile readability 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- assets/css/browser-phone-frontend.css | 22 +++++++++++++++------- assets/js/browser-phone-frontend.js | 18 ++++++++++++++++-- includes/class-twp-shortcodes.php | 19 ++++++++++++++++++- 3 files changed, 49 insertions(+), 10 deletions(-) diff --git a/assets/css/browser-phone-frontend.css b/assets/css/browser-phone-frontend.css index 76c6f6d..79196a5 100644 --- a/assets/css/browser-phone-frontend.css +++ b/assets/css/browser-phone-frontend.css @@ -17,7 +17,7 @@ .twp-browser-phone-title { text-align: center; margin: 0 0 20px 0; - color: #333; + color: #212529; font-size: 1.5rem; font-weight: 600; } @@ -166,7 +166,7 @@ padding: 16px 8px; font-size: 20px; font-weight: 600; - color: #333; + color: #212529; cursor: pointer; transition: all 0.2s ease; min-height: 60px; @@ -280,7 +280,7 @@ .timer-value { font-size: 18px; font-weight: 600; - color: #333; + color: #212529; font-family: 'Courier New', monospace; } @@ -304,7 +304,7 @@ .twp-queue-section h4 { margin: 0 0 16px 0; - color: #333; + color: #212529; font-size: 1.1rem; text-align: center; } @@ -369,7 +369,7 @@ .queue-name { font-weight: 600; - color: #333; + color: #212529; margin-bottom: 4px; } @@ -410,7 +410,7 @@ .selected-queue-info h5 { margin: 0 0 8px 0; - color: #333; + color: #212529; font-size: 1rem; } @@ -592,7 +592,15 @@ .queue-name, .status-text, - .twp-phone-selection label { + .twp-phone-selection label, + .twp-browser-phone-title, + .twp-queue-section h4, + .selected-queue-info h5, + .timer-value { + color: #f7fafc; + } + + .twp-dial-btn { color: #f7fafc; } diff --git a/assets/js/browser-phone-frontend.js b/assets/js/browser-phone-frontend.js index 1c845eb..5b7737e 100644 --- a/assets/js/browser-phone-frontend.js +++ b/assets/js/browser-phone-frontend.js @@ -32,18 +32,32 @@ */ function waitForTwilioSDK(callback) { let attempts = 0; - const maxAttempts = 50; // 5 seconds max + const maxAttempts = 150; // 15 seconds max (100ms * 150) function checkTwilio() { + console.log('Checking Twilio SDK availability, attempt:', attempts + 1); + if (typeof Twilio !== 'undefined' && Twilio.Device) { + console.log('Twilio SDK loaded successfully'); callback(); return; } attempts++; + + // Update status message periodically + if (attempts === 30) { // 3 seconds + updateStatus('connecting', 'Loading Twilio SDK...'); + } else if (attempts === 60) { // 6 seconds + updateStatus('connecting', 'Still loading SDK...'); + } else if (attempts === 100) { // 10 seconds + updateStatus('connecting', 'SDK taking longer than expected...'); + } + if (attempts >= maxAttempts) { + console.error('Twilio SDK failed to load. Window.Twilio:', typeof Twilio); updateStatus('offline', 'SDK load timeout'); - showMessage('Twilio SDK failed to load within 5 seconds. Please check your internet connection and refresh the page.', 'error'); + showMessage('Twilio SDK failed to load within 15 seconds. This may be due to a slow connection or network restrictions. Please refresh the page and try again.', 'error'); return; } diff --git a/includes/class-twp-shortcodes.php b/includes/class-twp-shortcodes.php index a6d9794..3caea39 100644 --- a/includes/class-twp-shortcodes.php +++ b/includes/class-twp-shortcodes.php @@ -26,7 +26,7 @@ class TWP_Shortcodes { global $post; if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'twp_browser_phone')) { - // Enqueue Twilio Voice SDK + // Enqueue Twilio Voice SDK with multiple fallbacks wp_enqueue_script( 'twilio-voice-sdk', 'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js', @@ -35,6 +35,23 @@ class TWP_Shortcodes { false // Load in head to ensure it's available ); + // Add backup SDK loading + wp_add_inline_script('twilio-voice-sdk', " + window.twpLoadTwilioSDK = function() { + if (typeof Twilio === 'undefined') { + console.warn('Primary Twilio SDK failed, attempting fallback load'); + var script = document.createElement('script'); + script.src = 'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js'; + script.onload = function() { console.log('Fallback Twilio SDK loaded'); }; + script.onerror = function() { console.error('Fallback Twilio SDK failed'); }; + document.head.appendChild(script); + } + }; + + // Try loading after a delay if not available + setTimeout(window.twpLoadTwilioSDK, 2000); + ", 'after'); + // Enqueue our browser phone script wp_enqueue_script( 'twp-browser-phone-frontend',