Added internet connection checks

jay-bman725 · jay-bman725 · commit b4eaba522d31 · 2025-06-07T22:01:45.000-05:00
diff --git a/changelog.md b/changelog.md
@@ -1,7 +1,40 @@
 # Changelog
 **All dates are in YYYY/MM/DD (Year-Month-Day)**
 
-## [1.5.1] - 2025-01-02
+## [1.5.2] - 2025-06-07
+
+### Added
+- **Internet Connectivity Monitoring**: Comprehensive online/offline detection system to ensure proper app functionality
+  - Real-time connectivity checking with Google ping using 5-second timeout HTTPS requests
+  - Visual connectivity indicator that appears when offline with slide-down animation
+  - Smart retry system: automatic checks every 10 seconds when online, auto-retry every 30 seconds when offline
+  - Manual "Retry Connection" button with loading states for immediate connectivity testing
+  - Red banner notification system with clear "No Internet Connection" messaging
+- **Enhanced User Experience**: Proactive connectivity management for transcription reliability
+  - Prevents failed transcription attempts by ensuring internet availability upfront
+  - Real-time status updates through event-driven IPC communication
+  - Responsive UI feedback with smooth animations and hover effects
+  - App lifecycle integration - starts connectivity checking on launch, stops on quit
+
+### Technical
+- **Backend Connectivity System**: Added comprehensive internet checking infrastructure in main.js
+  - `checkInternetConnectivity()` function with Google ping and timeout handling
+  - `handleConnectivityChange()` for state management and renderer notifications
+  - `startConnectivityChecking()` and `startConnectivityRetryInterval()` for automated monitoring
+  - New IPC handlers: `retry-connectivity-check` and `get-connectivity-status`
+- **Frontend Integration**: Extended app.js with connectivity management
+  - `setupConnectivityManagement()` method for event handling and UI updates
+  - `handleConnectivityChange()` for dynamic indicator visibility control
+  - Manual retry functionality with loading state management
+- **UI Components**: Added connectivity indicator to index.html with professional styling
+  - Red gradient banner with Wi-Fi icon and retry button
+  - CSS animations and responsive design in styles.css
+  - Loading spinner for manual retry operations
+- **IPC Communication**: Enhanced preload.js with connectivity API exposure
+  - `retryConnectivityCheck` and `getConnectivityStatus` methods
+  - `onConnectivityStatus` event listener for real-time updates
+
+## [1.5.1] - 2025-06-07
 
 ### Added
 - **Platform-Specific UI Optimization**: Enhanced interface for Windows and Linux users
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "autocaption",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Automatic caption generation app using OpenAI Whisper",
   "main": "src/main.js",
   "scripts": {
diff --git a/src/app.js b/src/app.js
@@ -16,6 +16,7 @@ class AutoCaptionApp {
         this.setupApiKeyLoadListener();
         this.setupThemeSystem();
         this.setupPlatformDetection();
+        this.setupConnectivityManagement();
         this.loadSettings();
         this.checkOnboardingStatus();
     }
@@ -61,6 +62,14 @@ class AutoCaptionApp {
                 this.openSettings();
             });
         }
+        
+        // Listen for connectivity status changes
+        if (window.electronAPI && window.electronAPI.onConnectivityStatus) {
+            window.electronAPI.onConnectivityStatus((event, status) => {
+                console.log('[DEBUG] Connectivity status changed:', status.isOnline);
+                this.handleConnectivityChange(status.isOnline);
+            });
+        }
     }
 
     setupThemeSystem() {
@@ -90,6 +99,65 @@ class AutoCaptionApp {
         }
     }
 
+    async setupConnectivityManagement() {
+        // Set up retry button
+        const retryBtn = document.getElementById('retry-connection-btn');
+        const retryText = document.getElementById('retry-connection-text');
+        const retrySpinner = document.getElementById('retry-connection-spinner');
+        
+        if (retryBtn) {
+            retryBtn.addEventListener('click', async () => {
+                console.log('[DEBUG] Manual connectivity retry requested');
+                
+                // Show loading state
+                retryText.style.display = 'none';
+                retrySpinner.style.display = 'inline-block';
+                retryBtn.disabled = true;
+                
+                try {
+                    const result = await window.electronAPI.retryConnectivityCheck();
+                    console.log('[DEBUG] Connectivity retry result:', result);
+                    
+                    if (result.success && result.isOnline) {
+                        // Connection restored, indicator will be hidden by connectivity change handler
+                        this.handleConnectivityChange(true);
+                    }
+                } catch (error) {
+                    console.error('Error during connectivity retry:', error);
+                } finally {
+                    // Reset button state
+                    retryText.style.display = 'inline';
+                    retrySpinner.style.display = 'none';
+                    retryBtn.disabled = false;
+                }
+            });
+        }
+        
+        // Check initial connectivity status
+        try {
+            const result = await window.electronAPI.getConnectivityStatus();
+            if (result.success) {
+                this.handleConnectivityChange(result.isOnline);
+            }
+        } catch (error) {
+            console.error('Error getting initial connectivity status:', error);
+        }
+    }
+
+    handleConnectivityChange(isOnline) {
+        const connectivityIndicator = document.getElementById('connectivity-indicator');
+        
+        if (isOnline) {
+            // Hide connectivity indicator when online
+            connectivityIndicator.style.display = 'none';
+            console.log('[DEBUG] Internet connection restored');
+        } else {
+            // Show connectivity indicator when offline
+            connectivityIndicator.style.display = 'block';
+            console.log('[DEBUG] Internet connection lost');
+        }
+    }
+
     handleTitleBarVisibility(platform) {
         const titleBar = document.querySelector('.title-bar');
         const container = document.querySelector('.container');
diff --git a/src/index.html b/src/index.html
@@ -228,6 +228,21 @@ <h4>Quick Start:</h4>
                 <h1>AutoCaption</h1>
                 <p>Generate professional captions for your videos.</p>
             </div>
+            
+            <!-- Connectivity Indicator -->
+            <div id="connectivity-indicator" class="connectivity-indicator" style="display: none;">
+                <div class="connectivity-content">
+                    <div class="connectivity-icon">🌐</div>
+                    <div class="connectivity-text">
+                        <h3>No Internet Connection</h3>
+                        <p>Please check your internet connection to use AutoCaption's AI transcription features.</p>
+                    </div>
+                    <button id="retry-connection-btn" class="btn btn-primary">
+                        <span id="retry-connection-text">🔄 Retry Connection</span>
+                        <div id="retry-connection-spinner" class="spinner" style="display: none;"></div>
+                    </button>
+                </div>
+            </div>
         </header>
 
         <main>
@@ -291,7 +306,7 @@ <h3>🔄 Updates</h3>
                         <div class="setting-group">
                             <h3>ℹ️ About</h3>
                             <div class="setting-item">
-                                <p><strong>Version:</strong> 1.5.1</p>
+                                <p><strong>Version:</strong> 1.5.2</p>
                                 <p><strong>Made with ❤️ by Jay</strong></p>
                                 <p>Using OpenAI Whisper for AI-powered transcription</p>
                             </div>
diff --git a/src/main.js b/src/main.js
@@ -6,6 +6,115 @@ const OpenAI = require('openai');
 const https = require('https');
 const ffmpeg = require('fluent-ffmpeg');
 
+// Internet connectivity checking
+let isOnline = true;
+let connectivityCheckInterval;
+let connectivityRetryInterval;
+const CONNECTIVITY_CHECK_INTERVAL = 10000; // 10 seconds
+const CONNECTIVITY_RETRY_INTERVAL = 30000; // 30 seconds when offline
+const CONNECTIVITY_TIMEOUT = 5000; // 5 seconds timeout
+
+// Check internet connectivity by trying to reach Google
+function checkInternetConnectivity() {
+  return new Promise((resolve) => {
+    const request = https.request({
+      hostname: 'google.com',
+      port: 443,
+      path: '/',
+      method: 'HEAD',
+      timeout: CONNECTIVITY_TIMEOUT
+    }, (res) => {
+      resolve(true);
+    });
+
+    request.on('error', () => {
+      resolve(false);
+    });
+
+    request.on('timeout', () => {
+      request.destroy();
+      resolve(false);
+    });
+
+    request.setTimeout(CONNECTIVITY_TIMEOUT);
+    request.end();
+  });
+}
+
+// Handle connectivity state changes
+async function handleConnectivityChange(online) {
+  const wasOnline = isOnline;
+  isOnline = online;
+
+  logger.info(`Connectivity status changed: ${online ? 'online' : 'offline'}`);
+
+  if (mainWindow) {
+    mainWindow.webContents.send('connectivity-status', { isOnline: online });
+  }
+
+  // If we just went offline, start more frequent retry checking
+  if (wasOnline && !online) {
+    logger.info('Device went offline, starting retry interval');
+    startConnectivityRetryInterval();
+  }
+  // If we just came back online, stop retry checking and resume normal checking
+  else if (!wasOnline && online) {
+    logger.info('Device came back online, stopping retry interval');
+    stopConnectivityRetryInterval();
+  }
+}
+
+// Start normal connectivity checking (every 10 seconds)
+function startConnectivityChecking() {
+  logger.info('Starting connectivity checking');
+  
+  // Initial check
+  checkInternetConnectivity().then(handleConnectivityChange);
+  
+  // Set up regular checking
+  connectivityCheckInterval = setInterval(async () => {
+    if (isOnline) { // Only do regular checks when we think we're online
+      const online = await checkInternetConnectivity();
+      if (online !== isOnline) {
+        await handleConnectivityChange(online);
+      }
+    }
+  }, CONNECTIVITY_CHECK_INTERVAL);
+}
+
+// Start aggressive retry checking (every 30 seconds when offline)
+function startConnectivityRetryInterval() {
+  if (connectivityRetryInterval) {
+    clearInterval(connectivityRetryInterval);
+  }
+  
+  connectivityRetryInterval = setInterval(async () => {
+    logger.debug('Retry connectivity check (offline state)');
+    const online = await checkInternetConnectivity();
+    if (online !== isOnline) {
+      await handleConnectivityChange(online);
+    }
+  }, CONNECTIVITY_RETRY_INTERVAL);
+}
+
+// Stop retry checking
+function stopConnectivityRetryInterval() {
+  if (connectivityRetryInterval) {
+    clearInterval(connectivityRetryInterval);
+    connectivityRetryInterval = null;
+  }
+}
+
+// Stop all connectivity checking
+function stopConnectivityChecking() {
+  logger.info('Stopping connectivity checking');
+  if (connectivityCheckInterval) {
+    clearInterval(connectivityCheckInterval);
+    connectivityCheckInterval = null;
+  }
+  stopConnectivityRetryInterval();
+}
+
 // Debug logging setup
 const debugLogsDir = path.join(app.getPath('userData'), 'logs');
 const debugLogFile = path.join(debugLogsDir, 'debug.log');
@@ -107,7 +216,7 @@ let openai;
 let updateCheckInterval;
 
 // Current app version
-const CURRENT_VERSION = '1.5.1';
+const CURRENT_VERSION = '1.5.2';
 const UPDATE_CHECK_URL = 'https://raw.githubusercontent.com/jay-bman725/AutoCaption/refs/heads/main/version';
 const CHANGELOG_URL = 'https://raw.githubusercontent.com/jay-bman725/AutoCaption/refs/heads/main/changelog.md';
 
@@ -435,6 +544,9 @@ async function createWindow() {
     // Start automatic update checking
     await startAutoUpdateCheck();
     
+    // Start connectivity checking
+    startConnectivityChecking();
+    
     logger.info('Showing main window');
     mainWindow.show();
   });
@@ -515,6 +627,7 @@ app.whenReady().then(async () => {
 app.on('window-all-closed', () => {
   logger.info('All windows closed');
   stopAutoUpdateCheck();
+  stopConnectivityChecking();
   if (process.platform !== 'darwin') {
     logger.info('Quitting application');
     app.quit();
@@ -829,6 +942,30 @@ ipcMain.handle('get-platform', async () => {
   }
 });
 
+// Connectivity management
+ipcMain.handle('retry-connectivity-check', async () => {
+  try {
+    logger.info('Manual connectivity retry requested');
+    const online = await checkInternetConnectivity();
+    if (online !== isOnline) {
+      await handleConnectivityChange(online);
+    }
+    return { success: true, isOnline: online };
+  } catch (error) {
+    logger.error('Error during manual connectivity retry:', error);
+    return { success: false, error: error.message };
+  }
+});
+
+ipcMain.handle('get-connectivity-status', async () => {
+  try {
+    return { success: true, isOnline };
+  } catch (error) {
+    logger.error('Error getting connectivity status:', error);
+    return { success: false, error: error.message };
+  }
+});
+
 // Onboarding IPC handlers
 ipcMain.handle('get-onboarding-status', async () => {
   try {
diff --git a/src/preload.js b/src/preload.js
@@ -45,5 +45,12 @@ contextBridge.exposeInMainWorld('electronAPI', {
   getOnboardingStatus: () => ipcRenderer.invoke('get-onboarding-status'),
   completeOnboardingStep: (stepName) => ipcRenderer.invoke('complete-onboarding-step', stepName),
   completeOnboarding: () => ipcRenderer.invoke('complete-onboarding'),
-  skipOnboarding: () => ipcRenderer.invoke('skip-onboarding')
+  skipOnboarding: () => ipcRenderer.invoke('skip-onboarding'),
+  
+  // Connectivity management
+  retryConnectivityCheck: () => ipcRenderer.invoke('retry-connectivity-check'),
+  getConnectivityStatus: () => ipcRenderer.invoke('get-connectivity-status'),
+  
+  // Listen for connectivity status changes
+  onConnectivityStatus: (callback) => ipcRenderer.on('connectivity-status', callback)
 });
diff --git a/src/styles.css b/src/styles.css
diff --git a/version b/version

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "autocaption",`
`3`		`- "version": "1.5.1",`
	`3`	`+ "version": "1.5.2",`
`4`	`4`	`"description": "Automatic caption generation app using OpenAI Whisper",`
`5`	`5`	`"main": "src/main.js",`
`6`	`6`	`"scripts": {`