angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add page transition animations and notification settings for audio playback

Browse Source
This commit is contained in:
angel
2025-08-08 21:29:01 +00:00
committed by GitHub
parent ba84271d78
commit 437cb9db28
9 changed files with 246 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/components/AudioPlayer.tsx
View File

@@ -31,6 +31,8 @@ export const AudioPlayer: React.FC = () => {
const [volume, setVolume] = useState(1);
const [isClient, setIsClient] = useState(false);
const [isMinimized, setIsMinimized] = useState(false);
// Notifications and title management
const [lastNotifiedTrackId, setLastNotifiedTrackId] = useState<string | null>(null);
const [isFullScreen, setIsFullScreen] = useState(false);
const [audioInitialized, setAudioInitialized] = useState(false);
const audioCurrent = audioRef.current;
@@ -442,6 +444,48 @@ export const AudioPlayer: React.FC = () => {
};
}, [playNextTrack, currentTrack, onTrackProgress, onTrackEnd, onTrackPlay, onTrackPause]);
// Update document title and optionally show a notification when a new song starts
useEffect(() => {
if (!isClient) return;
if (currentTrack) {
// Update favicon/title like Spotify
const baseTitle = `${currentTrack.name} • ${currentTrack.artist} – mice`;
document.title = isPlaying ? baseTitle : `(Paused) ${baseTitle}`;
// Notifications
const notifyEnabled = localStorage.getItem('playback-notifications-enabled') === 'true';
const canNotify = 'Notification' in window && Notification.permission !== 'denied';
if (notifyEnabled && canNotify && lastNotifiedTrackId !== currentTrack.id) {
try {
if (Notification.permission === 'default') {
Notification.requestPermission().then((perm) => {
if (perm === 'granted') {
new Notification('Now Playing', {
body: `${currentTrack.name} — ${currentTrack.artist}`,
icon: currentTrack.coverArt || '/icon-192.png',
badge: '/icon-192.png',
});
setLastNotifiedTrackId(currentTrack.id);
}
});
} else if (Notification.permission === 'granted') {
new Notification('Now Playing', {
body: `${currentTrack.name} — ${currentTrack.artist}`,
icon: currentTrack.coverArt || '/icon-192.png',
badge: '/icon-192.png',
});
setLastNotifiedTrackId(currentTrack.id);
}
} catch (e) {
console.warn('Notification failed:', e);
}
}
} else {
// Reset title when no track
document.title = 'mice';
}
}, [currentTrack?.id, currentTrack?.name, currentTrack?.artist, isPlaying, isClient]);
// Media Session API integration - Enhanced for mobile
useEffect(() => {
if (!isClient || !currentTrack) return;