fixes?

.serena/memories/song_tile_state_fix.md

@@ -0,0 +1,22 @@
+# Song Tile State Fix
+
+## Problem Identified
+Song tiles were not returning to normal state after download completion because the code was using `document.activeElement` instead of the actual clicked element.
+
+## Root Cause
+- `convertVideo()` method used `document.activeElement` to get the element to style
+- `document.activeElement` might not be the correct song tile, especially during async operations
+- The `finally` block tried to remove `tg-list-item--converting` class from wrong element
+
+## Solution Implemented
+- Replaced `document.activeElement` with `document.querySelector(\`[onclick*="${videoId}"]\`)` 
+- This finds the specific song tile that contains the videoId in its onclick attribute
+- Ensures the correct element gets the converting state and has it properly removed
+
+## Code Location
+- File: `public/script.ts`
+- Method: `convertVideo()` around line 212-218
+- Changed element selection logic to target the correct clicked song tile
+
+## Result
+Song tiles now properly return to normal state after download/conversion completes (both success and error cases).

public/script.ts

@@ -212,7 +212,9 @@ class QuixoticApp {
     public async convertVideo(videoId: string, title: string, url: string): Promise<void> {
         console.log('🎵 CONVERT VIDEO CALLED:', { videoId, title, url });
         console.log('🔧 Telegram WebApp available:', !!this.tg);
-        const videoElement = document.activeElement as HTMLElement;
+        
+        // Find the clicked element by looking for the one that contains this videoId
+        const videoElement = document.querySelector(`[onclick*="${videoId}"]`) as HTMLElement;
         if (videoElement) {
             videoElement.classList.add('tg-list-item--converting');
         }

src/bot.ts

@@ -62,6 +62,19 @@ export class QuixoticBot {
     }
 
     private setupHandlers(): void {
+        console.log('🔧 Setting up bot handlers...');
+        
+        // Log all incoming messages for debugging
+        this.bot.on('message', (msg: any) => {
+            console.log('📨 Received message type:', msg.web_app ? 'web_app_data' : 'text', 'from user:', msg.from?.id);
+            
+            // Handle web app data in regular message event
+            if (msg.web_app?.data) {
+                console.log('🔍 Web app data found in message:', msg.web_app.data);
+                this.handleWebAppData(msg);
+            }
+        });
+        
         // Start command
         this.bot.onText(/\/start/, async (msg: Message) => {
             const chatId = msg.chat.id;
@@ -155,33 +168,10 @@ export class QuixoticBot {
             }
         });
 
-        // Handle web app data
+        // Handle web app data (legacy event listener, may not work)
         this.bot.on('web_app_data', async (msg: Message) => {
-            console.log('🔍 Web app data received:', msg.web_app?.data);
+            console.log('🔍 Web app data received via web_app_data event:', msg.web_app?.data);
-            const chatId = msg.chat.id;
+            this.handleWebAppData(msg);
-            const userId = msg.from?.id;
-            
-            if (!msg.web_app?.data) {
-                console.log('❌ No web app data found');
-                return;
-            }
-            
-            try {
-                const data: WebAppData = JSON.parse(msg.web_app.data);
-                console.log('📝 Parsed data:', data);
-
-                if (data.action === 'send_audio') {
-                    console.log(`🎵 Processing audio request for user ${userId}, chat ${chatId}: ${data.title}`);
-                    await this.sendAudioFile(chatId, data.audioUrl, data.title);
-                } else {
-                    console.log('⚠️ Unknown action:', data.action);
-                    await this.bot.sendMessage(chatId, '❌ Неизвестное действие.');
-                }
-            } catch (parseError: any) {
-                console.error('Web app data parse error:', parseError.message);
-                console.error('Raw data:', msg.web_app?.data);
-                await this.bot.sendMessage(chatId, '❌ Ошибка обработки данных.');
-            }
         });
 
         // Handle inline queries for search
@@ -294,6 +284,33 @@ export class QuixoticBot {
         }
     }
 
+    private async handleWebAppData(msg: Message): Promise<void> {
+        const chatId = msg.chat.id;
+        const userId = msg.from?.id;
+        
+        if (!msg.web_app?.data) {
+            console.log('❌ No web app data found');
+            return;
+        }
+        
+        try {
+            const data: WebAppData = JSON.parse(msg.web_app.data);
+            console.log('📝 Parsed data:', data);
+
+            if (data.action === 'send_audio') {
+                console.log(`🎵 Processing audio request for user ${userId}, chat ${chatId}: ${data.title}`);
+                await this.sendAudioFile(chatId, data.audioUrl, data.title);
+            } else {
+                console.log('⚠️ Unknown action:', data.action);
+                await this.bot.sendMessage(chatId, '❌ Неизвестное действие.');
+            }
+        } catch (parseError: any) {
+            console.error('Web app data parse error:', parseError.message);
+            console.error('Raw data:', msg.web_app?.data);
+            await this.bot.sendMessage(chatId, '❌ Ошибка обработки данных.');
+        }
+    }
+
     private formatDuration(seconds: number): string {
         if (!seconds) return '';
         const mins = Math.floor(seconds / 60);