finicky9298/quixotic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

safari fix

Browse Source
This commit is contained in:
Andrey Kondratev
2025-08-29 18:05:35 +05:00
parent a08fd5b495
commit 8e3c927cf1
5 changed files with 110 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@@ -7,6 +7,10 @@
<meta name="theme-color" content="#007AFF">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<link rel="stylesheet" href="style.css">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
@@ -50,6 +54,6 @@
</div>
</div>
<script src="dist/script.js"></script>
<script src="dist/script.js?v=2"></script>
</body>
</html>

72
public/script.ts
View File

@@ -59,9 +59,7 @@ class QuixoticApp {
this.tg.MainButton.hide();
// Debug Telegram user info
console.log('🔧 Telegram WebApp initialized');
console.log('👤 User ID:', this.tg.initDataUnsafe?.user?.id);
console.log('📋 Full initData:', this.tg.initDataUnsafe);
console.log('🔧 WebApp ready, user:', this.tg.initDataUnsafe?.user?.id);
} else {
console.log('❌ Telegram WebApp not available');
}
@@ -202,6 +200,26 @@ class QuixoticApp {
</div>
`).join('');
// Add touch event listeners to prevent sticky states
this.results.querySelectorAll('.tg-list-item').forEach(item => {
const element = item as HTMLElement;
// Reset visual state on touch end
element.addEventListener('touchend', () => {
setTimeout(() => {
element.blur();
element.style.background = '';
element.style.transform = '';
}, 100);
});
// Also handle mouse leave for desktop
element.addEventListener('mouseleave', () => {
element.style.background = '';
element.style.transform = '';
});
});
this.results.classList.remove('tg-hidden');
this.results.classList.add('tg-list--visible');
}
@@ -217,17 +235,21 @@ 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);
console.log('🎵 Converting:', title);
// Find the clicked element by looking for the one that contains this videoId
const videoElement = document.querySelector(`[onclick*="${videoId}"]`) as HTMLElement;
if (videoElement) {
// Force blur to reset any active/focus states
videoElement.blur();
// Remove any stuck hover/active classes on touch devices
videoElement.classList.remove('tg-list-item--active');
videoElement.classList.add('tg-list-item--converting');
}
try {
console.log('Sending convert request...');
const response = await fetch('/api/convert', {
method: 'POST',
headers: {
@@ -241,18 +263,13 @@ class QuixoticApp {
})
});
console.log('Response status:', response.status);
if (!response.ok) {
throw new Error(`Conversion failed with status: ${response.status}`);
}
const data: ConvertResponse = await response.json();
console.log('Response data:', data);
if (data.audioUrl) {
// MP3 conversion successful!
console.log('🎉 MP3 conversion successful:', data.audioUrl);
console.log('🔧 About to send to Telegram, tg available:', !!this.tg);
if (this.tg) {
// Try WebApp method first (might not work)
@@ -261,52 +278,31 @@ class QuixoticApp {
audioUrl: data.audioUrl,
title: title
};
console.log('📤 Attempting WebApp sendData first:', payload);
try {
this.tg.sendData(JSON.stringify(payload));
console.log('✅ WebApp sendData called');
this.showMessage('✓ MP3 готов! Отправляем в чат...', 'success');
} catch (sendError) {
console.error('❌ WebApp sendData failed:', sendError);
}
// Always use direct API as primary method now
const userId = this.tg?.initDataUnsafe?.user?.id;
console.log('👤 Current user ID for sending:', userId);
if (!userId) {
console.error('❌ No user ID available from Telegram WebApp');
this.showMessage('❌ Ошибка: не удается определить пользователя', 'error');
return;
}
// Send via direct API
try {
console.log('🔄 Sending via direct API...');
const requestData = {
userId: userId,
audioUrl: data.audioUrl,
title: title
};
console.log('📦 Request data:', requestData);
const directResponse = await fetch('/api/telegram-send', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestData)
body: JSON.stringify({
userId: userId,
audioUrl: data.audioUrl,
title: title
})
});
if (directResponse.ok) {
const result = await directResponse.json();
console.log('✅ Direct API success:', result);
this.showMessage('✅ MP3 отправлен в чат!', 'success');
} else {
const error = await directResponse.json();
console.error('❌ Direct API failed:', error);
this.showMessage('❌ Ошибка отправки в Telegram', 'error');
}
} catch (directError) {
console.error('❌ Direct API request failed:', directError);
this.showMessage('❌ Ошибка соединения с ботом', 'error');
}
} else {

21
public/style.css
View File

@@ -254,17 +254,30 @@ body {
position: relative;
}
.tg-list-item:hover {
background: var(--tg-color-secondary-bg);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
/* Hover effects for desktop */
@media (hover: hover) and (pointer: fine) {
.tg-list-item:hover {
background: var(--tg-color-secondary-bg);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}
/* Touch feedback for mobile - brief highlight only */
.tg-list-item:active {
transform: translateY(0);
background: var(--tg-color-secondary-bg);
}
/* Prevent sticky hover states on touch devices */
@media (hover: none) {
.tg-list-item:hover {
background: var(--tg-color-section-bg);
transform: none;
box-shadow: none;
}
}
.tg-list-item__content {
display: flex;
align-items: center;