Upload 3 files

static/js/downloader.js

@@ -0,0 +1,181 @@
+class InstagramDownloader {
+    constructor() {
+        this.currentFilename = null;
+        this.init();
+    }
+
+    init() {
+        this.cacheElements();
+        this.attachEventListeners();
+    }
+
+    cacheElements() {
+        this.downloadUrl = document.getElementById('downloadUrl');
+        this.downloadBtn = document.getElementById('downloadBtn');
+        this.progressSection = document.getElementById('progressSection');
+        this.progressTitle = document.getElementById('progressTitle');
+        this.progressPercent = document.getElementById('progressPercent');
+        this.progressFill = document.getElementById('progressFill');
+        this.progressMessage = document.getElementById('progressMessage');
+        this.successResult = document.getElementById('successResult');
+        this.errorResult = document.getElementById('errorResult');
+        this.errorMessage = document.getElementById('errorMessage');
+        this.retryBtn = document.getElementById('retryBtn');
+        this.downloadAgainBtn = document.getElementById('downloadAgainBtn');
+        this.loadingOverlay = document.getElementById('loadingOverlay');
+        this.toast = document.getElementById('toast');
+    }
+
+    attachEventListeners() {
+        this.downloadBtn.addEventListener('click', () => this.handleDownload());
+        this.retryBtn.addEventListener('click', () => this.resetForm());
+        this.downloadAgainBtn.addEventListener('click', () => this.resetForm());
+        this.downloadUrl.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.handleDownload();
+        });
+    }
+
+    async handleDownload() {
+        const url = this.downloadUrl.value.trim();
+        
+        if (!url) {
+            this.showToast('Please enter a valid Instagram Reel URL', 'error');
+            return;
+        }
+        
+        this.hideResults();
+        this.showProgress('Downloading...', 30, 'Preparing to download reel...');
+        
+        try {
+            // Step 1: Request download from server
+            this.updateProgress('Downloading...', 40, 'Downloading from Instagram...');
+            
+            const response = await fetch('/download', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ url })
+            });
+            
+            const data = await response.json();
+            
+            if (!data.success) {
+                throw new Error(data.error || data.details || 'Download failed');
+            }
+            
+            this.currentFilename = data.filename;
+            
+            // Step 2: Download the file using fetch and blob
+            this.updateProgress('Downloading...', 70, 'Preparing file for download...');
+            
+            try {
+                const videoResponse = await fetch(`/get-video/${data.filename}`);
+                
+                if (!videoResponse.ok) {
+                    throw new Error('Failed to fetch video file from server');
+                }
+                
+                // Get the video as a blob
+                const blob = await videoResponse.blob();
+                
+                // Create a download URL from the blob
+                const downloadUrl = window.URL.createObjectURL(blob);
+                
+                // Create and trigger download
+                const link = document.createElement('a');
+                link.href = downloadUrl;
+                link.download = data.filename;
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+                
+                // Cleanup
+                setTimeout(() => {
+                    document.body.removeChild(link);
+                    window.URL.revokeObjectURL(downloadUrl);
+                }, 100);
+                
+                // Step 3: Show success
+                this.updateProgress('Complete!', 100, 'Download completed successfully!');
+                
+                setTimeout(() => {
+                    this.showSuccess();
+                    this.showToast('Download completed! Check your downloads folder.', 'success');
+                    
+                    // Clean up file after 30 seconds
+                    setTimeout(() => this.cleanupFile(data.filename), 30000);
+                }, 500);
+                
+            } catch (downloadError) {
+                console.error('Download error:', downloadError);
+                throw new Error('Failed to download video file. Please try again.');
+            }
+            
+        } catch (error) {
+            console.error('Download error:', error);
+            this.showError(error.message);
+        }
+    }
+
+    async cleanupFile(filename) {
+        try {
+            await fetch(`/cleanup/${filename}`, { method: 'POST' });
+        } catch (error) {
+            console.log('Cleanup error (non-critical):', error);
+        }
+    }
+
+    updateProgress(title, percent, message) {
+        this.progressTitle.textContent = title;
+        this.progressPercent.textContent = `${percent}%`;
+        this.progressFill.style.width = `${percent}%`;
+        this.progressMessage.textContent = message;
+    }
+
+    showProgress(title = 'Downloading...', percent = 0, message = 'Starting...') {
+        this.progressSection.style.display = 'block';
+        this.updateProgress(title, percent, message);
+    }
+
+    showSuccess() {
+        this.progressSection.style.display = 'none';
+        this.successResult.style.display = 'block';
+    }
+
+    showError(message) {
+        this.progressSection.style.display = 'none';
+        this.errorResult.style.display = 'block';
+        this.errorMessage.textContent = message;
+        this.showToast('Download failed: ' + message, 'error');
+    }
+
+    hideResults() {
+        this.successResult.style.display = 'none';
+        this.errorResult.style.display = 'none';
+        this.progressSection.style.display = 'none';
+    }
+
+    resetForm() {
+        this.downloadUrl.value = '';
+        this.hideResults();
+        this.currentFilename = null;
+    }
+
+    showToast(message, type = 'info') {
+        this.toast.textContent = message;
+        this.toast.className = 'toast show';
+        
+        if (type === 'success') {
+            this.toast.style.borderLeft = '4px solid var(--success)';
+        } else if (type === 'error') {
+            this.toast.style.borderLeft = '4px solid var(--error)';
+        }
+        
+        setTimeout(() => {
+            this.toast.classList.remove('show');
+        }, 4000);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    new InstagramDownloader();
+});

static/js/metadata.js

@@ -0,0 +1,115 @@
+class MetadataGenerator {
+    constructor() {
+        this.init();
+    }
+
+    init() {
+        this.cacheElements();
+        this.attachEventListeners();
+    }
+
+    cacheElements() {
+        this.metadataUrl = document.getElementById('metadataUrl');
+        this.generateBtn = document.getElementById('generateBtn');
+        this.metadataPreview = document.getElementById('metadataPreview');
+        this.previewTitle = document.getElementById('previewTitle');
+        this.previewDescription = document.getElementById('previewDescription');
+        this.previewTags = document.getElementById('previewTags');
+        this.previewHashtags = document.getElementById('previewHashtags');
+        this.loadingOverlay = document.getElementById('loadingOverlay');
+        this.toast = document.getElementById('toast');
+    }
+
+    attachEventListeners() {
+        this.generateBtn.addEventListener('click', () => this.handleGenerate());
+        this.metadataUrl.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.handleGenerate();
+        });
+    }
+
+    async handleGenerate() {
+        const url = this.metadataUrl.value.trim();
+        
+        if (!url) {
+            this.showToast('Please enter a valid Instagram Reel URL', 'error');
+            return;
+        }
+        
+        this.showLoading();
+        
+        try {
+            const response = await fetch('/generate-preview', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ url })
+            });
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                this.displayMetadata(data);
+                this.showToast('AI metadata generated successfully!', 'success');
+            } else {
+                throw new Error(data.error || 'Generation failed');
+            }
+        } catch (error) {
+            this.showToast('Generation failed: ' + error.message, 'error');
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    displayMetadata(data) {
+        this.previewTitle.textContent = data.title || '-';
+        this.previewDescription.textContent = data.description || '-';
+        
+        // Display tags
+        this.previewTags.innerHTML = '';
+        if (data.tags && data.tags.length > 0) {
+            data.tags.slice(0, 15).forEach(tag => {
+                const span = document.createElement('span');
+                span.textContent = tag;
+                this.previewTags.appendChild(span);
+            });
+        }
+        
+        // Display hashtags
+        this.previewHashtags.innerHTML = '';
+        if (data.hashtags && data.hashtags.length > 0) {
+            data.hashtags.slice(0, 20).forEach(hashtag => {
+                const span = document.createElement('span');
+                span.textContent = hashtag;
+                this.previewHashtags.appendChild(span);
+            });
+        }
+        
+        this.metadataPreview.style.display = 'block';
+    }
+
+    showLoading() {
+        this.loadingOverlay.style.display = 'flex';
+    }
+
+    hideLoading() {
+        this.loadingOverlay.style.display = 'none';
+    }
+
+    showToast(message, type = 'info') {
+        this.toast.textContent = message;
+        this.toast.className = 'toast show';
+        
+        if (type === 'success') {
+            this.toast.style.borderLeft = '4px solid var(--success)';
+        } else if (type === 'error') {
+            this.toast.style.borderLeft = '4px solid var(--error)';
+        }
+        
+        setTimeout(() => {
+            this.toast.classList.remove('show');
+        }, 4000);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    new MetadataGenerator();
+});

static/js/uploader.js

@@ -0,0 +1,643 @@
+class YouTubeUploader {
+    constructor() {
+        this.isAuthenticated = false;
+        this.currentTaskId = null;
+        this.statusCheckInterval = null;
+        this.init();
+    }
+
+    init() {
+        this.cacheElements();
+        this.attachEventListeners();
+        this.checkAuthentication();
+    }
+
+    cacheElements() {
+        this.authSection = document.getElementById('authSection');
+        this.authBtn = document.getElementById('authBtn');
+        this.channelInfo = document.getElementById('channelInfo');
+        this.channelAvatar = document.getElementById('channelAvatar');
+        this.channelName = document.getElementById('channelName');
+        this.channelStats = document.getElementById('channelStats');
+        this.uploadSection = document.getElementById('uploadSection');
+        this.reelUrl = document.getElementById('reelUrl');
+        this.uploadBtn = document.getElementById('uploadBtn');
+        this.progressSection = document.getElementById('progressSection');
+        this.progressTitle = document.getElementById('progressTitle');
+        this.progressPercent = document.getElementById('progressPercent');
+        this.progressFill = document.getElementById('progressFill');
+        this.progressMessage = document.getElementById('progressMessage');
+        this.metadataPreview = document.getElementById('metadataPreview');
+        this.previewTitle = document.getElementById('previewTitle');
+        this.previewDescription = document.getElementById('previewDescription');
+        this.previewTags = document.getElementById('previewTags');
+        this.previewHashtags = document.getElementById('previewHashtags');
+        this.successResult = document.getElementById('successResult');
+        this.errorResult = document.getElementById('errorResult');
+        this.watchBtn = document.getElementById('watchBtn');
+        this.errorMessage = document.getElementById('errorMessage');
+        this.retryBtn = document.getElementById('retryBtn');
+        this.uploadAnotherBtn = document.getElementById('uploadAnotherBtn');
+        this.loadingOverlay = document.getElementById('loadingOverlay');
+        this.toast = document.getElementById('toast');
+        
+        // Navbar elements
+        this.navAuthButtons = document.getElementById('navAuthButtons');
+        this.navSignInBtn = document.getElementById('navSignInBtn');
+        this.navUserMenu = document.getElementById('navUserMenu');
+        this.navUserAvatarImg = document.getElementById('navUserAvatarImg');
+        this.navUserName = document.getElementById('navUserName');
+        this.navUserStats = document.getElementById('navUserStats');
+        this.navLogoutBtn = document.getElementById('navLogoutBtn');
+        
+        // Mobile menu elements
+        this.mobileSignInBtn = document.getElementById('mobileSignInBtn');
+        this.mobileUserInfo = document.getElementById('mobileUserInfo');
+        this.mobileUserName = document.getElementById('mobileUserName');
+        this.mobileUserStats = document.getElementById('mobileUserStats');
+        this.mobileLogoutBtn = document.getElementById('mobileLogoutBtn');
+        
+        // Music upload elements
+        this.musicUrl = document.getElementById('musicUrl');
+        this.musicVolume = document.getElementById('musicVolume');
+        this.enableEditingToggle = document.getElementById('enableEditingToggle');
+        
+        // Music Source Tab elements
+        this.musicTabUrl = document.getElementById('musicTabUrl');
+        this.musicTabFile = document.getElementById('musicTabFile');
+        this.musicUrlSection = document.getElementById('musicUrlSection');
+        this.musicFileSection = document.getElementById('musicFileSection');
+        this.musicFileInput = document.getElementById('musicFileInput');
+        this.musicFileName = document.getElementById('musicFileName');
+    }
+
+    attachEventListeners() {
+        this.authBtn.addEventListener('click', () => this.handleAuthentication());
+        this.uploadBtn.addEventListener('click', () => this.handleUpload());
+        this.retryBtn.addEventListener('click', () => this.resetForm());
+        this.uploadAnotherBtn.addEventListener('click', () => this.resetForm());
+        this.navLogoutBtn.addEventListener('click', () => this.handleLogout());
+        this.reelUrl.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.handleUpload();
+        });
+        
+        // Navbar sign in button
+        if (this.navSignInBtn) {
+            this.navSignInBtn.addEventListener('click', () => this.handleAuthentication());
+        }
+        
+        // Mobile sign in and logout
+        if (this.mobileSignInBtn) {
+            this.mobileSignInBtn.addEventListener('click', () => {
+                document.getElementById('mobileMenu').classList.remove('active');
+                this.handleAuthentication();
+            });
+        }
+        if (this.mobileLogoutBtn) {
+            this.mobileLogoutBtn.addEventListener('click', () => {
+                document.getElementById('mobileMenu').classList.remove('active');
+                this.handleLogout();
+            });
+        }
+        
+        // Music Source Tab Switching
+        if (this.musicTabUrl && this.musicTabFile) {
+            this.musicTabUrl.addEventListener('click', () => {
+                this.currentMusicSource = 'url';
+                this.musicTabUrl.style.opacity = '1';
+                this.musicTabFile.style.opacity = '0.6';
+                this.musicUrlSection.style.display = 'block';
+                this.musicFileSection.style.display = 'none';
+                this.uploadedMusicFile = null;
+            });
+
+            this.musicTabFile.addEventListener('click', () => {
+                this.currentMusicSource = 'file';
+                this.musicTabFile.style.opacity = '1';
+                this.musicTabUrl.style.opacity = '0.6';
+                this.musicFileSection.style.display = 'block';
+                this.musicUrlSection.style.display = 'none';
+                document.getElementById('musicUrl').value = '';
+            });
+        }
+
+        // Handle music file selection
+        if (this.musicFileInput) {
+            this.musicFileInput.addEventListener('change', async (e) => {
+                const file = e.target.files[0];
+                if (!file) return;
+
+                // Validate file type
+                const validTypes = ['audio/mpeg', 'audio/wav', 'audio/mp4', 'audio/x-m4a', 'audio/aac'];
+                if (!validTypes.includes(file.type) && !file.name.match(/\.(mp3|wav|m4a|aac)$/i)) {
+                    this.showToast('Please select a valid audio file (MP3, WAV, M4A, AAC)', 'error');
+                    return;
+                }
+
+                // Check file size (max 50MB)
+                if (file.size > 50 * 1024 * 1024) {
+                    this.showToast('File size too large. Maximum 50MB allowed.', 'error');
+                    return;
+                }
+
+                // Update UI
+                this.musicFileName.value = file.name;
+                this.showToast('Audio file selected. It will be uploaded when you start the upload process.', 'success');
+                
+                // Store file for later upload
+                this.uploadedMusicFile = file;
+            });
+        }
+    }
+
+    async checkAuthentication() {
+        try {
+            const response = await fetch('/check-auth');
+            const data = await response.json();
+            
+            if (data.authenticated) {
+                this.isAuthenticated = true;
+                if (data.channel) {
+                    this.displayChannelInfo(data.channel);
+                }
+                this.showUploadSection();
+            } else {
+                this.showAuthSection();
+            }
+        } catch (error) {
+            console.error('Auth check failed:', error);
+            this.showAuthSection();
+        }
+    }
+
+    displayChannelInfo(channel) {
+        this.channelAvatar.src = channel.thumbnail || 'https://via.placeholder.com/80';
+        this.channelName.textContent = channel.title;
+        this.channelStats.textContent = `${this.formatNumber(channel.subscriberCount)} subscribers • ${this.formatNumber(channel.videoCount)} videos`;
+        this.channelInfo.style.display = 'block';
+        
+        // Update navbar user menu
+        this.navUserAvatarImg.src = channel.thumbnail || 'https://via.placeholder.com/40';
+        this.navUserName.textContent = channel.title;
+        this.navUserStats.textContent = `${this.formatNumber(channel.subscriberCount)} subscribers`;
+        this.navUserMenu.style.display = 'block';
+        this.navAuthButtons.style.display = 'none';
+        
+        // Update mobile menu
+        this.mobileUserName.textContent = channel.title;
+        this.mobileUserStats.textContent = `${this.formatNumber(channel.subscriberCount)} subscribers`;
+        this.mobileUserInfo.style.display = 'block';
+        this.mobileLogoutBtn.style.display = 'block';
+        this.mobileSignInBtn.style.display = 'none';
+    }
+
+    async handleAuthentication() {
+        this.showLoading();
+        
+        try {
+            const response = await fetch('/auth/start');
+            const data = await response.json();
+            
+            if (data.auth_url) {
+                const authWindow = window.open(data.auth_url, 'YouTube Authentication', 'width=600,height=700');
+                
+                const checkAuth = setInterval(async () => {
+                    if (authWindow.closed) {
+                        clearInterval(checkAuth);
+                        this.hideLoading();
+                        await this.checkAuthentication();
+                    }
+                }, 1000);
+            }
+        } catch (error) {
+            this.showToast('Authentication failed: ' + error.message, 'error');
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    async handleLogout() {
+        if (!confirm('Are you sure you want to logout?')) return;
+        
+        try {
+            const response = await fetch('/logout', { method: 'POST' });
+            const data = await response.json();
+            
+            if (data.success) {
+                this.showToast('Logged out successfully', 'success');
+                this.isAuthenticated = false;
+                this.showAuthSection();
+            }
+        } catch (error) {
+            this.showToast('Logout failed: ' + error.message, 'error');
+        }
+    }
+
+    async handleUpload() {
+        if (!this.isAuthenticated) {
+            this.showToast('Please sign in with YouTube first', 'error');
+            return;
+        }
+        
+        const url = this.reelUrl.value.trim();
+        
+        if (!url) {
+            this.showToast('Please enter a valid Instagram Reel URL', 'error');
+            return;
+        }
+        
+        // Get video editing preferences
+        const enableEditing = document.getElementById('enableEditingToggle').checked;
+        let editingOptions = null;
+        
+        if (enableEditing) {
+            let musicSource = null;
+            
+            // ✅ NEW: Handle local music file upload
+            const currentMusicSource = this.musicTabUrl.style.opacity === '1' ? 'url' : 'file';
+            
+            if (currentMusicSource === 'file' && this.uploadedMusicFile) {
+                this.showLoading();
+                try {
+                    // Upload music file to server
+                    const formData = new FormData();
+                    formData.append('music', this.uploadedMusicFile);
+                    
+                    const uploadResponse = await fetch('/upload-music', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    
+                    const uploadResult = await uploadResponse.json();
+                    
+                    if (!uploadResult.success) {
+                        throw new Error(uploadResult.error || 'Music upload failed');
+                    }
+                    
+                    musicSource = uploadResult.filepath;
+                    this.showToast('Music file uploaded successfully', 'success');
+                    
+                } catch (error) {
+                    this.hideLoading();
+                    this.showToast('Failed to upload music: ' + error.message, 'error');
+                    return;
+                } finally {
+                    this.hideLoading();
+                }
+            } else if (currentMusicSource === 'url') {
+                musicSource = document.getElementById('musicUrl').value.trim();
+            }
+            
+            const musicVolume = parseInt(document.getElementById('musicVolume').value) / 100;
+            
+            // Get all text overlays
+            const textOverlays = [];
+            document.querySelectorAll('.text-overlay-item').forEach(item => {
+                const text = item.querySelector('.overlay-text').value.trim();
+                const position = item.querySelector('.overlay-position').value;
+                const duration = parseInt(item.querySelector('.overlay-duration').value);
+                
+                if (text) {
+                    textOverlays.push({ text, position, duration });
+                }
+            });
+            
+            editingOptions = {
+                enabled: true,
+                music_url: currentMusicSource === 'url' ? musicSource : null,
+                music_file: currentMusicSource === 'file' ? musicSource : null,
+                music_volume: musicVolume,
+                text_overlays: textOverlays.length > 0 ? textOverlays : null
+            };
+        }
+        
+        this.hideResults();
+        this.showProgress();
+        
+        try {
+            const response = await fetch('/auto-upload-async', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ 
+                    url: url,
+                    editing: editingOptions
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                this.currentTaskId = data.task_id;
+                this.startStatusPolling();
+            } else {
+                throw new Error(data.error || 'Upload failed');
+            }
+        } catch (error) {
+            this.showError(error.message);
+        }
+    }
+
+    startStatusPolling() {
+        this.statusCheckInterval = setInterval(async () => {
+            await this.checkTaskStatus();
+        }, 2000);
+    }
+
+    async checkTaskStatus() {
+        if (!this.currentTaskId) return;
+        
+        try {
+            const response = await fetch(`/task-status/${this.currentTaskId}`);
+            const data = await response.json();
+            
+            if (data.success) {
+                const task = data.task;
+                this.updateProgress(task);
+                
+                if (task.status === 'completed') {
+                    this.stopStatusPolling();
+                    this.showSuccess(task);
+                } else if (task.status === 'failed') {
+                    this.stopStatusPolling();
+                    this.showError(task.error || 'Upload failed');
+                }
+            }
+        } catch (error) {
+            console.error('Status check failed:', error);
+        }
+    }
+
+    stopStatusPolling() {
+        if (this.statusCheckInterval) {
+            clearInterval(this.statusCheckInterval);
+            this.statusCheckInterval = null;
+        }
+    }
+
+    updateProgress(task) {
+        this.progressTitle.textContent = this.getStatusTitle(task.status);
+        this.progressPercent.textContent = `${task.progress}%`;
+        this.progressFill.style.width = `${task.progress}%`;
+        this.progressMessage.textContent = task.message;
+        
+        if (task.metadata && task.status === 'uploading') {
+            this.displayMetadata(task.metadata);
+        }
+    }
+
+    getStatusTitle(status) {
+        const titles = {
+            'started': 'Starting...',
+            'downloading': 'Downloading Reel',
+            'editing': 'Editing Video', // ✅ NEW: Add editing status
+            'generating_metadata': 'AI Analyzing Video',
+            'uploading': 'Uploading to YouTube',
+            'completed': 'Upload Complete',
+            'failed': 'Upload Failed'
+        };
+        return titles[status] || 'Processing...';
+    }
+
+    displayMetadata(metadata) {
+        this.previewTitle.textContent = metadata.title || '-';
+        this.previewDescription.textContent = metadata.description || '-';
+        
+        this.previewTags.innerHTML = '';
+        if (metadata.tags && metadata.tags.length > 0) {
+            metadata.tags.slice(0, 15).forEach(tag => {
+                const span = document.createElement('span');
+                span.textContent = tag;
+                this.previewTags.appendChild(span);
+            });
+        }
+        
+        this.previewHashtags.innerHTML = '';
+        if (metadata.hashtags && metadata.hashtags.length > 0) {
+            metadata.hashtags.slice(0, 20).forEach(hashtag => {
+                const span = document.createElement('span');
+                span.textContent = hashtag;
+                this.previewHashtags.appendChild(span);
+            });
+        }
+        
+        this.metadataPreview.style.display = 'block';
+    }
+
+    showProgress() {
+        this.progressSection.style.display = 'block';
+        this.metadataPreview.style.display = 'none';
+        this.successResult.style.display = 'none';
+        this.errorResult.style.display = 'none';
+    }
+
+    showSuccess(task) {
+        this.progressSection.style.display = 'none';
+        this.successResult.style.display = 'block';
+        
+        if (task.youtube_url) {
+            this.watchBtn.href = task.youtube_url;
+        }
+        
+        this.showToast('Video uploaded successfully! 🎉', 'success');
+    }
+
+    showError(message) {
+        this.progressSection.style.display = 'none';
+        this.errorResult.style.display = 'block';
+        this.errorMessage.textContent = message;
+        this.showToast('Upload failed: ' + message, 'error');
+    }
+
+    hideResults() {
+        this.successResult.style.display = 'none';
+        this.errorResult.style.display = 'none';
+        this.metadataPreview.style.display = 'none';
+    }
+
+    resetForm() {
+        this.reelUrl.value = '';
+        this.hideResults();
+        this.progressSection.style.display = 'none';
+        this.currentTaskId = null;
+        this.stopStatusPolling();
+    }
+
+    showUploadSection() {
+        this.authSection.style.display = 'none';
+        this.uploadSection.style.display = 'block';
+    }
+
+    showAuthSection() {
+        this.authSection.style.display = 'block';
+        this.uploadSection.style.display = 'none';
+        this.channelInfo.style.display = 'none';
+        
+        // Update navbar
+        this.navUserMenu.style.display = 'none';
+        this.navAuthButtons.style.display = 'flex';
+        
+        // Update mobile menu
+        this.mobileUserInfo.style.display = 'none';
+        this.mobileLogoutBtn.style.display = 'none';
+        this.mobileSignInBtn.style.display = 'block';
+    }
+
+    showLoading() {
+        this.loadingOverlay.style.display = 'flex';
+    }
+
+    hideLoading() {
+        this.loadingOverlay.style.display = 'none';
+    }
+
+    showToast(message, type = 'info') {
+        this.toast.textContent = message;
+        this.toast.className = 'toast show';
+        
+        if (type === 'success') {
+            this.toast.style.borderLeft = '4px solid var(--success)';
+        } else if (type === 'error') {
+            this.toast.style.borderLeft = '4px solid var(--error)';
+        }
+        
+        setTimeout(() => {
+            this.toast.classList.remove('show');
+        }, 4000);
+    }
+
+    formatNumber(num) {
+        if (num >= 1000000) {
+            return (num / 1000000).toFixed(1) + 'M';
+        } else if (num >= 1000) {
+            return (num / 1000).toFixed(1) + 'K';
+        }
+        return num;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    new YouTubeUploader();
+});
+
+// Helper functions
+function showLoadingOverlay(message) {
+    const overlay = document.getElementById('loadingOverlay');
+    if (overlay) {
+        overlay.querySelector('p').textContent = message;
+        overlay.style.display = 'flex';
+    }
+}
+
+function hideLoadingOverlay() {
+    const overlay = document.getElementById('loadingOverlay');
+    if (overlay) {
+        overlay.style.display = 'none';
+    }
+}
+
+function showToast(message, type = 'info') {
+    const toast = document.getElementById('toast');
+    if (toast) {
+        toast.textContent = message;
+        toast.classList.add('show');
+        setTimeout(() => toast.classList.remove('show'), 3000);
+    }
+}
+
+// Modified upload function to handle music file
+async function startUpload() {
+    const reelUrl = document.getElementById('reelUrl').value.trim();
+    
+    if (!reelUrl) {
+        showToast('Please enter an Instagram Reel URL', 'error');
+        return;
+    }
+
+    // Check if editing is enabled
+    const editingEnabled = document.getElementById('enableEditingToggle').checked;
+    let editingOptions = null;
+
+    if (editingEnabled) {
+        let musicPath = null;
+        
+        // Handle music upload if local file is selected
+        if (currentMusicSource === 'file' && uploadedMusicFile) {
+            showLoadingOverlay('Uploading background music...');
+            
+            try {
+                const formData = new FormData();
+                formData.append('music', uploadedMusicFile);
+                
+                const uploadResponse = await fetch('/upload-music', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const uploadResult = await uploadResponse.json();
+                
+                if (!uploadResult.success) {
+                    throw new Error(uploadResult.error || 'Music upload failed');
+                }
+                
+                musicPath = uploadResult.filepath;
+                hideLoadingOverlay();
+                
+            } catch (error) {
+                hideLoadingOverlay();
+                showToast('Failed to upload music file: ' + error.message, 'error');
+                return;
+            }
+        } else if (currentMusicSource === 'url') {
+            musicPath = document.getElementById('musicUrl').value.trim();
+        }
+
+        // Collect text overlays
+        const textOverlays = [];
+        document.querySelectorAll('.text-overlay-item').forEach(item => {
+            const text = item.querySelector('.overlay-text').value.trim();
+            if (text) {
+                textOverlays.push({
+                    text: text,
+                    position: item.querySelector('.overlay-position').value,
+                    duration: parseInt(item.querySelector('.overlay-duration').value) || 5
+                });
+            }
+        });
+
+        editingOptions = {
+            enabled: true,
+            music_url: currentMusicSource === 'url' ? musicPath : null,
+            music_file: currentMusicSource === 'file' ? musicPath : null,
+            music_volume: parseInt(document.getElementById('musicVolume').value) / 100,
+            text_overlays: textOverlays
+        };
+    }
+
+    // Start async upload
+    try {
+        showLoadingOverlay('Starting upload process...');
+        
+        const response = await fetch('/auto-upload-async', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                url: reelUrl,
+                editing: editingOptions
+            })
+        });
+
+        const result = await response.json();
+        hideLoadingOverlay();
+
+        if (result.success) {
+            // Start polling for status
+            pollTaskStatus(result.task_id);
+        } else {
+            showToast(result.error || 'Failed to start upload', 'error');
+        }
+
+    } catch (error) {
+        hideLoadingOverlay();
+        showToast('Error: ' + error.message, 'error');
+    }
+}