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-11-07 14:37:21 +05:00
parent 53633dd837
commit 5d7c6b2a09
5 changed files with 200 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
public/index.html
View File

@@ -44,37 +44,30 @@
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- Structured Data (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Quixotic Music",
"description": "Удобный сервис для поиска и скачивания музыки",
"url": "https://music.quixy.uk/",
"applicationCategory": "MultimediaApplication",
"operatingSystem": "Any",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "1250"
}
}
</script>
<!-- Structured Data (JSON-LD) - минифицирован -->
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"Quixotic Music","description":"Удобный сервис для поиска и скачивания музыки","url":"https://music.quixy.uk/","applicationCategory":"MultimediaApplication","operatingSystem":"Any","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}</script>
<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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<!-- Preconnect to external resources -->
<link rel="preconnect" href="https://telegram.org" crossorigin>
<link rel="dns-prefetch" href="https://telegram.org">
<!-- Preload critical resources -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="https://telegram.org/js/telegram-web-app.js" as="script">
<!-- Critical CSS - inline the most important styles -->
<style>
:root{--tg-color-bg:var(--tg-theme-bg-color,#ffffff);--tg-color-secondary-bg:var(--tg-theme-secondary-bg-color,#f1f1f1);--tg-color-section-bg:var(--tg-theme-section-bg-color,#ffffff);--tg-color-text:var(--tg-theme-text-color,#000000);--tg-color-hint:var(--tg-theme-hint-color,#999999);--tg-color-link:var(--tg-theme-link-color,#007aff);--tg-color-button:var(--tg-theme-button-color,#007aff);--tg-color-button-text:var(--tg-theme-button-text-color,#ffffff);--tg-border-radius:12px;--tg-spacing-lg:16px;--tg-spacing-xl:20px;--tg-spacing-xxl:24px;--tg-font-size-md:16px;--tg-font-size-lg:17px;--tg-font-size-xl:20px;--tg-line-height-normal:1.4;--tg-line-height-relaxed:1.6}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',system-ui,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--tg-color-bg);color:var(--tg-color-text);font-size:var(--tg-font-size-md);line-height:var(--tg-line-height-normal);overflow-x:hidden}.tg-root{min-height:100vh;display:flex;flex-direction:column}.tg-content{flex:1;padding:var(--tg-spacing-lg);padding-bottom:100px;display:flex;flex-direction:column;gap:var(--tg-spacing-xl)}.tg-placeholder{text-align:center;padding:var(--tg-spacing-xxl) var(--tg-spacing-lg);max-width:300px;margin:0 auto}.tg-placeholder__icon{font-size:48px;margin-bottom:var(--tg-spacing-lg);opacity:.6}.tg-placeholder__title{font-size:var(--tg-font-size-xl);font-weight:600;color:var(--tg-color-text);margin-bottom:8px}.tg-placeholder__description{font-size:14px;color:var(--tg-color-hint);line-height:var(--tg-line-height-relaxed)}.tg-hidden{display:none!important}
</style>
<!-- Load full CSS asynchronously -->
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'; this.onload=null;">
<!-- Load Telegram script asynchronously (defer) -->
<script src="https://telegram.org/js/telegram-web-app.js" defer></script>
</head>
<body>
<div class="tg-root">
@@ -112,6 +105,7 @@
</div>
</div>
<script src="dist/script.js?v=2"></script>
<!-- Load app script with defer for better performance -->
<script src="dist/script.js?v=2" defer></script>
</body>
</html>

22
public/script.ts
View File

@@ -206,7 +206,8 @@ class QuixoticApp {
<div class='tg-list-item__content'>
<div class='tg-list-item__media'>
<img class='tg-list-item__thumbnail'
src='${video.thumbnail}'
src='data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="60"%3E%3Crect fill="%23f1f1f1" width="80" height="60"/%3E%3C/svg%3E'
data-src='${video.thumbnail}'
alt='${this.escapeHtml(video.title)}'
loading='lazy'>
<div class='tg-list-item__duration'>${this.formatDuration(video.duration)}</div>
@@ -238,6 +239,25 @@ class QuixoticApp {
element.style.transform = '';
});
});
// Lazy load images with IntersectionObserver
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target as HTMLImageElement;
const src = img.getAttribute('data-src');
if (src) {
img.src = src;
img.removeAttribute('data-src');
imageObserver.unobserve(img);
}
}
});
}, { rootMargin: '50px' });
this.results.querySelectorAll('img[data-src]').forEach(img => {
imageObserver.observe(img);
});
this.results.classList.remove('tg-hidden');
this.results.classList.add('tg-list--visible');