feat: Add new logo, PWA service worker, and background audio support
- New modern audio wave 'A' logo (192x192 and 512x512 icons) - PWA service worker for offline support and installability - Wake Lock API for background audio on FiiO/Android devices - Visibility change handling to prevent audio pause on screen off - Updated manifest.json with music categories and proper PWA config - Media Session API lock screen controls (already present) - Renamed app to 'Audiophile Web Player'
This commit is contained in:
Khoa Vo
parent
8e17986c95
commit
dd788db786
35 changed files with 3518 additions and 3328 deletions
1
backend/backend/data/user_playlists.json
Normal file
1
backend/backend/data/user_playlists.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
[]
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 13 KiB |
BIN
frontend/app/favicon.png
Normal file
BIN
frontend/app/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -7,6 +7,7 @@ import MobileNav from "@/components/MobileNav";
|
|||
import RightSidebar from "@/components/RightSidebar";
|
||||
import { PlayerProvider } from "@/context/PlayerContext";
|
||||
import { LibraryProvider } from "@/context/LibraryContext";
|
||||
import ServiceWorkerRegistration from "@/components/ServiceWorkerRegistration";
|
||||
|
||||
const outfit = Outfit({
|
||||
subsets: ["latin"],
|
||||
|
|
@ -43,6 +44,7 @@ export default function RootLayout({
|
|||
<body
|
||||
className={`${outfit.variable} antialiased bg-black h-screen flex flex-col overflow-hidden text-white font-sans`}
|
||||
>
|
||||
<ServiceWorkerRegistration />
|
||||
<PlayerProvider>
|
||||
<LibraryProvider>
|
||||
<div className="flex-1 flex overflow-hidden p-2 gap-2 mb-[64px] md:mb-0">
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import LyricsDetail from './LyricsDetail';
|
|||
export default function PlayerBar() {
|
||||
const { currentTrack, isPlaying, isBuffering, togglePlay, setBuffering, likedTracks, toggleLike, nextTrack, prevTrack, shuffle, toggleShuffle, repeatMode, toggleRepeat, audioQuality, isLyricsOpen, toggleLyrics } = usePlayer();
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const wakeLockRef = useRef<WakeLockSentinel | null>(null);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [volume, setVolume] = useState(1);
|
||||
|
|
@ -22,6 +23,70 @@ export default function PlayerBar() {
|
|||
const [isFullScreenPlayerOpen, setIsFullScreenPlayerOpen] = useState(false);
|
||||
const [isCoverModalOpen, setIsCoverModalOpen] = useState(false);
|
||||
|
||||
// Wake Lock API - Keeps device awake during playback (for FiiO/Android)
|
||||
useEffect(() => {
|
||||
const requestWakeLock = async () => {
|
||||
if ('wakeLock' in navigator && isPlaying) {
|
||||
try {
|
||||
wakeLockRef.current = await navigator.wakeLock.request('screen');
|
||||
console.log('Wake Lock acquired for background playback');
|
||||
|
||||
wakeLockRef.current.addEventListener('release', () => {
|
||||
console.log('Wake Lock released');
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Wake Lock not available:', err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const releaseWakeLock = async () => {
|
||||
if (wakeLockRef.current) {
|
||||
await wakeLockRef.current.release();
|
||||
wakeLockRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
if (isPlaying) {
|
||||
requestWakeLock();
|
||||
} else {
|
||||
releaseWakeLock();
|
||||
}
|
||||
|
||||
// Re-acquire wake lock when page becomes visible again
|
||||
const handleVisibilityChange = async () => {
|
||||
if (document.visibilityState === 'visible' && isPlaying) {
|
||||
await requestWakeLock();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
|
||||
return () => {
|
||||
releaseWakeLock();
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
};
|
||||
}, [isPlaying]);
|
||||
|
||||
// Prevent audio pause on visibility change (screen off) - Critical for FiiO
|
||||
useEffect(() => {
|
||||
const handleVisibilityChange = () => {
|
||||
// When screen turns off, Android might pause audio
|
||||
// We explicitly resume if we should be playing
|
||||
if (document.visibilityState === 'hidden' && isPlaying && audioRef.current) {
|
||||
// Use setTimeout to ensure audio continues after visibility change
|
||||
setTimeout(() => {
|
||||
if (audioRef.current && audioRef.current.paused && isPlaying) {
|
||||
audioRef.current.play().catch(e => console.log('Resume on hidden:', e));
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
}, [isPlaying]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentTrack && audioRef.current && currentTrack.url) {
|
||||
// Prevent reloading if URL hasn't changed
|
||||
|
|
|
|||
20
frontend/components/ServiceWorkerRegistration.tsx
Normal file
20
frontend/components/ServiceWorkerRegistration.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function ServiceWorkerRegistration() {
|
||||
useEffect(() => {
|
||||
if ("serviceWorker" in navigator) {
|
||||
navigator.serviceWorker
|
||||
.register("/sw.js")
|
||||
.then((registration) => {
|
||||
console.log("Service Worker registered:", registration.scope);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Service Worker registration failed:", error);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 386 KiB After Width: | Height: | Size: 298 KiB |
|
|
@ -1,20 +1,26 @@
|
|||
{
|
||||
"name": "Spotify Clone",
|
||||
"short_name": "Spotify",
|
||||
"name": "Audiophile Web Player",
|
||||
"short_name": "Audiophile",
|
||||
"description": "High-Fidelity Local-First Music Player",
|
||||
"start_url": "/",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"orientation": "portrait",
|
||||
"background_color": "#121212",
|
||||
"theme_color": "#1DB954",
|
||||
"categories": ["music", "entertainment"],
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
96
frontend/public/sw.js
Normal file
96
frontend/public/sw.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
const CACHE_NAME = 'audiophile-v1';
|
||||
const STATIC_ASSETS = [
|
||||
'/',
|
||||
'/manifest.json',
|
||||
'/icons/icon-192x192.png',
|
||||
'/icons/icon-512x512.png'
|
||||
];
|
||||
|
||||
// Install event - cache static assets
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
return cache.addAll(STATIC_ASSETS);
|
||||
})
|
||||
);
|
||||
// Activate immediately
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
// Activate event - clean up old caches
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
caches.keys().then((cacheNames) => {
|
||||
return Promise.all(
|
||||
cacheNames
|
||||
.filter((name) => name !== CACHE_NAME)
|
||||
.map((name) => caches.delete(name))
|
||||
);
|
||||
})
|
||||
);
|
||||
// Take control of all pages immediately
|
||||
self.clients.claim();
|
||||
});
|
||||
|
||||
// Fetch event - network first for API, cache first for static
|
||||
self.addEventListener('fetch', (event) => {
|
||||
const url = new URL(event.request.url);
|
||||
|
||||
// Skip non-GET requests
|
||||
if (event.request.method !== 'GET') return;
|
||||
|
||||
// Skip streaming/audio requests - let them go directly to network
|
||||
if (url.pathname.includes('/api/stream') ||
|
||||
url.pathname.includes('/api/download') ||
|
||||
event.request.headers.get('range')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// API requests - network first
|
||||
if (url.pathname.startsWith('/api/')) {
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.catch(() => caches.match(event.request))
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Static assets - cache first, then network
|
||||
event.respondWith(
|
||||
caches.match(event.request).then((cachedResponse) => {
|
||||
if (cachedResponse) {
|
||||
// Return cached version, but also update cache in background
|
||||
fetch(event.request).then((response) => {
|
||||
if (response.ok) {
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(event.request, response);
|
||||
});
|
||||
}
|
||||
}).catch(() => {});
|
||||
return cachedResponse;
|
||||
}
|
||||
|
||||
// Not in cache - fetch from network
|
||||
return fetch(event.request).then((response) => {
|
||||
// Cache successful responses
|
||||
if (response.ok && response.type === 'basic') {
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
cache.put(event.request, responseClone);
|
||||
});
|
||||
}
|
||||
return response;
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Handle background sync for offline actions (future enhancement)
|
||||
self.addEventListener('sync', (event) => {
|
||||
console.log('Background sync:', event.tag);
|
||||
});
|
||||
|
||||
// Handle push notifications (future enhancement)
|
||||
self.addEventListener('push', (event) => {
|
||||
console.log('Push received:', event);
|
||||
});
|
||||
Loading…
Reference in a new issue