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

more fixes

Browse Source
This commit is contained in:
Andrey Kondratev
2025-08-29 11:29:28 +05:00
parent b483ed71f2
commit cfe2b459fb
6 changed files with 99 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/script.ts
View File

@@ -65,6 +65,9 @@ class QuixoticApp {
this.results = document.getElementById('results') as HTMLElement;
this.noResults = document.getElementById('noResults') as HTMLElement;
this.welcomePlaceholder = document.getElementById('welcomePlaceholder') as HTMLElement;
// Initialize proper state - only welcome should be visible
this.resetToWelcomeState();
}
private bindEvents(): void {
@@ -74,6 +77,30 @@ class QuixoticApp {
this.search();
}
});
// Reset to welcome state when input is cleared
this.searchInput.addEventListener('input', () => {
if (this.searchInput.value.trim() === '') {
this.resetToWelcomeState();
}
});
}
private resetToWelcomeState(): void {
// Show only welcome placeholder
this.welcomePlaceholder.classList.remove('tg-hidden');
this.welcomePlaceholder.style.display = '';
// Hide all other states
this.loading.classList.add('tg-hidden');
this.loading.classList.remove('tg-spinner--visible');
this.results.classList.add('tg-hidden');
this.results.classList.remove('tg-list--visible');
this.noResults.classList.add('tg-hidden');
this.noResults.style.display = 'none';
// Enable search button
this.searchBtn.disabled = false;
}
private async search(): Promise<void> {
@@ -107,12 +134,26 @@ class QuixoticApp {
}
private showLoading(): void {
// Clear any existing status messages
const existingMessage = document.querySelector('.tg-status-message');
if (existingMessage) {
existingMessage.remove();
}
// Hide welcome immediately when loading starts
this.welcomePlaceholder.classList.add('tg-hidden');
this.welcomePlaceholder.style.display = 'none';
// Show loading spinner
this.loading.classList.remove('tg-hidden');
this.loading.classList.add('tg-spinner--visible');
// Hide other elements
this.results.classList.add('tg-hidden');
this.results.classList.remove('tg-list--visible');
this.noResults.classList.add('tg-hidden');
this.noResults.style.display = 'none';
this.searchBtn.disabled = true;
}
@@ -130,6 +171,12 @@ class QuixoticApp {
return;
}
// Hide welcome and no results
this.welcomePlaceholder.classList.add('tg-hidden');
this.welcomePlaceholder.style.display = 'none';
this.noResults.classList.add('tg-hidden');
this.noResults.style.display = 'none';
this.results.innerHTML = videos.map(video => `
<div class='tg-list-item' onclick='app.convertVideo("${video.id}", "${this.escapeHtml(video.title)}", "${this.escapeHtml(video.url)}")'>
<div class='tg-list-item__content'>
@@ -150,14 +197,16 @@ class QuixoticApp {
this.results.classList.remove('tg-hidden');
this.results.classList.add('tg-list--visible');
this.noResults.classList.add('tg-hidden');
}
private showNoResults(): void {
this.hideLoading();
this.welcomePlaceholder.classList.add('tg-hidden');
this.welcomePlaceholder.style.display = 'none';
this.results.classList.add('tg-hidden');
this.results.classList.remove('tg-list--visible');
this.noResults.classList.remove('tg-hidden');
this.noResults.style.display = '';
}
public async convertVideo(videoId: string, title: string, url: string): Promise<void> {