feat: Add keyboard shortcuts and queue management features
- Implement global keyboard shortcuts for playback controls, volume adjustments, and navigation. - Introduce drag-and-drop functionality for queue reordering with visual feedback. - Add context menus for tracks, albums, and artists with quick action options. - Develop Spotlight Search feature with Last.fm integration for enhanced music discovery. - Create GlobalSearchProvider for managing search state and keyboard shortcuts. - Ensure accessibility and keyboard navigation support across all new features.
This commit is contained in:
46
app/components/GlobalSearchProvider.tsx
Normal file
46
app/components/GlobalSearchProvider.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import React, { createContext, useContext, useState, useCallback } from 'react';
|
||||
import { SpotlightSearch } from './SpotlightSearch';
|
||||
|
||||
interface GlobalSearchContextProps {
|
||||
isSpotlightOpen: boolean;
|
||||
openSpotlight: () => void;
|
||||
closeSpotlight: () => void;
|
||||
}
|
||||
|
||||
const GlobalSearchContext = createContext<GlobalSearchContextProps | undefined>(undefined);
|
||||
|
||||
export function GlobalSearchProvider({ children }: { children: React.ReactNode }) {
|
||||
const [isSpotlightOpen, setIsSpotlightOpen] = useState(false);
|
||||
|
||||
const openSpotlight = useCallback(() => {
|
||||
setIsSpotlightOpen(true);
|
||||
}, []);
|
||||
|
||||
const closeSpotlight = useCallback(() => {
|
||||
setIsSpotlightOpen(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<GlobalSearchContext.Provider value={{
|
||||
isSpotlightOpen,
|
||||
openSpotlight,
|
||||
closeSpotlight
|
||||
}}>
|
||||
{children}
|
||||
<SpotlightSearch
|
||||
isOpen={isSpotlightOpen}
|
||||
onClose={closeSpotlight}
|
||||
/>
|
||||
</GlobalSearchContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useGlobalSearch() {
|
||||
const context = useContext(GlobalSearchContext);
|
||||
if (!context) {
|
||||
throw new Error('useGlobalSearch must be used within a GlobalSearchProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
Reference in New Issue
Block a user