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,
} from 'react-icons/fi';
import type { Song } from '../types/interfaces';
import { formatDuration } from '../utils/formatters';
interface PersistentMusicPlayerProps {
currentSong: Song | null;
@ -83,6 +82,8 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
if (audioRef.current) {
audioRef.current.play().then(() => {
setIsPlaying(true);
// Prevent the audio element from stealing focus
audioRef.current?.blur();
}).catch(error => {
console.error('Error auto-playing:', error);
});
@ -209,6 +210,7 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
onTimeUpdate={handleTimeUpdate}
onLoadedMetadata={handleLoadedMetadata}
onEnded={handleEnded}
tabIndex={-1}
onError={(e) => {
console.error('Audio error:', e);
toast({
@ -220,7 +222,15 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
});
}}
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">