master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(player): prevent audio element from stealing focus while playing (blur and tabIndex=-1) so search input remains usable

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 11:15:47 +02:00
parent 2e21c3b5f5
commit 70485e8808
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/frontend/src/components/PersistentMusicPlayer.tsx
View File

@ -22,7 +22,6 @@ import {
FiX, FiX,
} from 'react-icons/fi'; } from 'react-icons/fi';
import type { Song } from '../types/interfaces'; import type { Song } from '../types/interfaces';
import { formatDuration } from '../utils/formatters';
interface PersistentMusicPlayerProps { interface PersistentMusicPlayerProps {
currentSong: Song | null; currentSong: Song | null;
@ -83,6 +82,8 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
if (audioRef.current) { if (audioRef.current) {
audioRef.current.play().then(() => { audioRef.current.play().then(() => {
setIsPlaying(true); setIsPlaying(true);
// Prevent the audio element from stealing focus
audioRef.current?.blur();
}).catch(error => { }).catch(error => {
console.error('Error auto-playing:', error); console.error('Error auto-playing:', error);
}); });
@ -209,6 +210,7 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
onTimeUpdate={handleTimeUpdate} onTimeUpdate={handleTimeUpdate}
onLoadedMetadata={handleLoadedMetadata} onLoadedMetadata={handleLoadedMetadata}
onEnded={handleEnded} onEnded={handleEnded}
tabIndex={-1}
onError={(e) => { onError={(e) => {
console.error('Audio error:', e); console.error('Audio error:', e);
toast({ toast({
@ -220,7 +222,15 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
}); });
}} }}
onLoadStart={() => setIsLoading(true)} onLoadStart={() => setIsLoading(true)}
onCanPlay={() => setIsLoading(false)} onCanPlay={() => {
setIsLoading(false);
// Ensure the audio element never grabs focus during playback events
audioRef.current?.blur();
}}
onPlay={() => {
// Extra safeguard to avoid focus jump while playing
audioRef.current?.blur();
}}
/> />
<HStack spacing={4} align="center"> <HStack spacing={4} align="center">