Fix JavaScript function scoping - make all functions globally available

app.py

@@ -185,21 +185,80 @@ def get_video_info(video_file):
 
 # Client-side Google Drive integration
 google_drive_js = """
-<script src="https://apis.google.com/js/api.js"></script>
+<script src="https://apis.google.com/js/api.js" async defer></script>
 <script>
-// Google Drive Picker API
-let pickerApiLoaded = false;
-let oauthToken;
+// Google Drive Picker API - make functions global
+window.pickerApiLoaded = false;
+window.oauthToken = null;
 
-// Initialize the APIs
+// Ensure functions are globally available
+window.authenticateGoogleDrive = function() {
+    console.log('🔐 Starting authentication...');
+    try {
+        const authInstance = gapi.auth2.getAuthInstance();
+        if (!authInstance) {
+            throw new Error('Auth instance not available - please wait for APIs to load');
+        }
+        
+        authInstance.signIn({
+            scope: 'https://www.googleapis.com/auth/drive.file'
+        }).then(() => {
+            window.oauthToken = authInstance.currentUser.get().getAuthResponse().access_token;
+            console.log('✅ Google Drive authenticated!');
+            document.getElementById('drive-status').innerText = '✅ Authenticated with Google Drive - ready to browse!';
+        }).catch(error => {
+            console.error('❌ Authentication failed:', error);
+            document.getElementById('drive-status').innerText = '❌ Authentication failed: ' + error.message;
+        });
+    } catch (error) {
+        console.error('❌ Auth error:', error);
+        document.getElementById('drive-status').innerText = '❌ Error: ' + error.message + ' - Please wait for APIs to load';
+    }
+};
+
+window.openDrivePicker = function() {
+    console.log('📁 Opening Drive picker...', { pickerApiLoaded: window.pickerApiLoaded, hasToken: !!window.oauthToken });
+    
+    if (!window.pickerApiLoaded) {
+        document.getElementById('drive-status').innerText = '❌ Picker API not loaded yet - please wait';
+        return;
+    }
+    
+    if (!window.oauthToken) {
+        document.getElementById('drive-status').innerText = '❌ Please authenticate first';
+        return;
+    }
+    
+    try {
+        const picker = new google.picker.PickerBuilder()
+            .addView(google.picker.ViewId.DOCS_VIDEOS)
+            .setOAuthToken(window.oauthToken)
+            .setDeveloperKey('AIzaSyAOYIFpJLIFUSmNGuj1-LdtIG6X2UWJY-I')
+            .setCallback(window.pickerCallback)
+            .build();
+        picker.setVisible(true);
+        console.log('✅ Picker opened');
+    } catch (error) {
+        console.error('❌ Picker error:', error);
+        document.getElementById('drive-status').innerText = '❌ Picker error: ' + error.message;
+    }
+};
+
+// Initialize the APIs when gapi loads
 function initializeGoogleDrive() {
     console.log('🚀 Initializing Google Drive...');
+    if (typeof gapi === 'undefined') {
+        console.log('⏳ GAPI not loaded yet, retrying in 1 second...');
+        setTimeout(initializeGoogleDrive, 1000);
+        return;
+    }
+    
     gapi.load('auth2:picker', onAuthApiLoad);
 }
 
 function onAuthApiLoad() {
     console.log('✅ Auth API loaded');
-    window.gapi.load('picker', onPickerApiLoad);
+    gapi.load('picker', onPickerApiLoad);
     
     // Initialize OAuth2
     gapi.auth2.init({
@@ -215,7 +274,7 @@ function onAuthApiLoad() {
 
 function onPickerApiLoad() {
     console.log('✅ Picker API loaded');
-    pickerApiLoaded = true;
+    window.pickerApiLoaded = true;
 }
 
 // Authenticate user
@@ -273,7 +332,7 @@ function openDrivePicker() {
 }
 
 // Handle file selection
-function pickerCallback(data) {
+window.pickerCallback = function(data) {
     if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
         const file = data[google.picker.Response.DOCUMENTS][0];
         const fileId = file[google.picker.Document.ID];
@@ -284,7 +343,7 @@ function pickerCallback(data) {
         // Download the file
         downloadFromDrive(fileId, fileName);
     }
-}
+};
 
 // Download file from Google Drive
 function downloadFromDrive(fileId, fileName) {
@@ -310,8 +369,17 @@ function downloadFromDrive(fileId, fileName) {
     });
 }
 
-// Initialize when page loads
-window.addEventListener('load', initializeGoogleDrive);
+// Initialize when page loads - multiple attempts to ensure it works
+window.addEventListener('load', function() {
+    console.log('🚀 Page loaded, starting Google Drive initialization...');
+    initializeGoogleDrive();
+});
+
+// Also try after a delay in case GAPI loads slowly
+setTimeout(function() {
+    console.log('🔄 Delayed initialization attempt...');
+    initializeGoogleDrive();
+}, 2000);
 </script>
 
 <div id="google-drive-section" style="border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 8px;">