diff --git a/index.html b/index.html
index 7ca22e7..717ed41 100644
--- a/index.html
+++ b/index.html
@@ -463,6 +463,8 @@
- High-quality lossless audio streaming
- Lyrics support with karaoke mode
+ - Recently Played tracking for easy history access
+ - Comprehensive Personal Library for favorites
- Intelligent API caching for improved performance
- Offline-capable Progressive Web App (PWA)
- Media Session API integration for system controls
diff --git a/styles.css b/styles.css
index 95a220c..59d5406 100644
--- a/styles.css
+++ b/styles.css
@@ -602,6 +602,10 @@ body.has-page-background .track-item:hover {
transition: transform 0.2s ease, color 0.2s ease;
}
+.like-btn:hover .heart-icon {
+ color: #ef4444;
+}
+
.heart-icon.filled {
color: #ef4444;
fill: #ef4444;
@@ -3242,3 +3246,10 @@ input:checked + .slider::before {
align-items: center;
justify-content: center;
}
+
+/* Show a grey box for images with no source, hiding the broken icon */
+img:not([src]), img[src=''] {
+ content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+ background-color: var(--muted);
+}
+
diff --git a/sw.js b/sw.js
index 00c279f..589f884 100644
--- a/sw.js
+++ b/sw.js
@@ -1,6 +1,5 @@
//sw.js
const CACHE_NAME = 'monochrome-v4';
-const IMAGE_CACHE_NAME = 'monochrome-images-v1';
const urlsToCache = [
'/',
'/index.html',
@@ -38,26 +37,6 @@ self.addEventListener('install', event => {
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
- // Cache Images (Cache-First)
- if (url.hostname === 'resources.tidal.com' || url.hostname === 'picsum.photos') {
- event.respondWith(
- caches.open(IMAGE_CACHE_NAME).then(cache => {
- return cache.match(event.request).then(response => {
- return response || fetch(event.request).then(networkResponse => {
- if (networkResponse.ok) {
- cache.put(event.request, networkResponse.clone());
- }
- return networkResponse;
- }).catch(() => {
- // If fetch fails (e.g. CORS), return null/error so client handles it
- return new Response(null, { status: 404, statusText: 'Image fetch failed' });
- });
- });
- })
- );
- return;
- }
-
// Static Assets & App Shell (Cache-First)
event.respondWith(
caches.match(event.request)
@@ -72,7 +51,7 @@ self.addEventListener('fetch', event => {
});
self.addEventListener('activate', event => {
- const cacheWhitelist = [CACHE_NAME, IMAGE_CACHE_NAME];
+ const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(