some visual fixes
This commit is contained in:
@@ -46,10 +46,6 @@
|
|||||||
placeholder="Название песни или исполнитель..."
|
placeholder="Название песни или исполнитель..."
|
||||||
autocomplete="off">
|
autocomplete="off">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="tg-button tg-button--primary tg-button--large" id="searchBtn">
|
|
||||||
<span class="tg-button__text">Найти</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -45,6 +45,7 @@ class QuixoticApp {
|
|||||||
private results!: HTMLElement;
|
private results!: HTMLElement;
|
||||||
private noResults!: HTMLElement;
|
private noResults!: HTMLElement;
|
||||||
private welcomePlaceholder!: HTMLElement;
|
private welcomePlaceholder!: HTMLElement;
|
||||||
|
private searchTimeout?: NodeJS.Timeout;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.tg = (window as WindowWithTelegram).Telegram?.WebApp;
|
this.tg = (window as WindowWithTelegram).Telegram?.WebApp;
|
||||||
@@ -76,17 +77,35 @@ class QuixoticApp {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private bindEvents(): void {
|
private bindEvents(): void {
|
||||||
this.searchBtn.addEventListener('click', () => this.search());
|
// Auto search with debounce timeout
|
||||||
this.searchInput.addEventListener('keypress', (e: KeyboardEvent) => {
|
this.searchInput.addEventListener('input', () => {
|
||||||
if (e.key === 'Enter') {
|
// Clear previous timeout
|
||||||
this.search();
|
if (this.searchTimeout) {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const query = this.searchInput.value.trim();
|
||||||
|
|
||||||
|
// If input is empty, reset to welcome state immediately
|
||||||
|
if (query === '') {
|
||||||
|
this.resetToWelcomeState();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set new timeout for search (500ms delay)
|
||||||
|
this.searchTimeout = setTimeout(() => {
|
||||||
|
this.search();
|
||||||
|
}, 500);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Reset to welcome state when input is cleared
|
// Still handle Enter key for immediate search
|
||||||
this.searchInput.addEventListener('input', () => {
|
this.searchInput.addEventListener('keypress', (e: KeyboardEvent) => {
|
||||||
if (this.searchInput.value.trim() === '') {
|
if (e.key === 'Enter') {
|
||||||
this.resetToWelcomeState();
|
// Clear timeout and search immediately
|
||||||
|
if (this.searchTimeout) {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
|
}
|
||||||
|
this.search();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -104,8 +123,7 @@ class QuixoticApp {
|
|||||||
this.noResults.classList.add('tg-hidden');
|
this.noResults.classList.add('tg-hidden');
|
||||||
this.noResults.style.display = 'none';
|
this.noResults.style.display = 'none';
|
||||||
|
|
||||||
// Enable search button
|
|
||||||
this.searchBtn.disabled = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private async search(): Promise<void> {
|
private async search(): Promise<void> {
|
||||||
@@ -159,7 +177,7 @@ class QuixoticApp {
|
|||||||
this.noResults.classList.add('tg-hidden');
|
this.noResults.classList.add('tg-hidden');
|
||||||
this.noResults.style.display = 'none';
|
this.noResults.style.display = 'none';
|
||||||
|
|
||||||
this.searchBtn.disabled = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private hideLoading(): void {
|
private hideLoading(): void {
|
||||||
@@ -272,13 +290,6 @@ class QuixoticApp {
|
|||||||
if (data.audioUrl) {
|
if (data.audioUrl) {
|
||||||
|
|
||||||
if (this.tg) {
|
if (this.tg) {
|
||||||
// Try WebApp method first (might not work)
|
|
||||||
const payload = {
|
|
||||||
action: 'send_audio',
|
|
||||||
audioUrl: data.audioUrl,
|
|
||||||
title: title
|
|
||||||
};
|
|
||||||
|
|
||||||
const userId = this.tg?.initDataUnsafe?.user?.id;
|
const userId = this.tg?.initDataUnsafe?.user?.id;
|
||||||
if (!userId) {
|
if (!userId) {
|
||||||
this.showMessage('❌ Ошибка: не удается определить пользователя', 'error');
|
this.showMessage('❌ Ошибка: не удается определить пользователя', 'error');
|
||||||
@@ -302,7 +313,7 @@ class QuixoticApp {
|
|||||||
} else {
|
} else {
|
||||||
this.showMessage('❌ Ошибка отправки в Telegram', 'error');
|
this.showMessage('❌ Ошибка отправки в Telegram', 'error');
|
||||||
}
|
}
|
||||||
} catch (directError) {
|
} catch {
|
||||||
this.showMessage('❌ Ошибка соединения с ботом', 'error');
|
this.showMessage('❌ Ошибка соединения с ботом', 'error');
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ body {
|
|||||||
.tg-content {
|
.tg-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: var(--tg-spacing-lg);
|
padding: var(--tg-spacing-lg);
|
||||||
padding-bottom: 140px;
|
padding-bottom: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--tg-spacing-xl);
|
gap: var(--tg-spacing-xl);
|
||||||
@@ -79,9 +79,6 @@ body {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--tg-spacing-md);
|
|
||||||
padding: var(--tg-spacing-lg);
|
padding: var(--tg-spacing-lg);
|
||||||
background: var(--tg-color-bg);
|
background: var(--tg-color-bg);
|
||||||
border-top: 1px solid var(--tg-color-secondary-bg);
|
border-top: 1px solid var(--tg-color-secondary-bg);
|
||||||
|
|||||||
@@ -269,7 +269,7 @@ export class QuixoticBot {
|
|||||||
console.log(`✅ Audio sent: ${title}`);
|
console.log(`✅ Audio sent: ${title}`);
|
||||||
return;
|
return;
|
||||||
|
|
||||||
} catch (audioError: any) {
|
} catch {
|
||||||
// Fallback: try as document
|
// Fallback: try as document
|
||||||
try {
|
try {
|
||||||
await this.bot.sendDocument(chatId, audioUrl, {
|
await this.bot.sendDocument(chatId, audioUrl, {
|
||||||
|
|||||||
Reference in New Issue
Block a user