hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-18 01:14:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add auto play on select

Browse source
This commit is contained in:
MAZE 2023-10-07 13:50:25 +03:30
parent 856b3e668e
commit 17d1b23c8f
2 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/sound/sound.tsx
View file

@ -13,7 +13,7 @@ interface SoundProps {
} }
export function Sound({ label, src }: SoundProps) { export function Sound({ label, src }: SoundProps) {
const { isPlaying } = usePlay(); const { isPlaying, play } = usePlay();
const [isSelected, setIsSelected] = useLocalStorage( const [isSelected, setIsSelected] = useLocalStorage(
`${label}-is-selected`, `${label}-is-selected`,
false, false,
@ -30,11 +30,22 @@ export function Sound({ label, src }: SoundProps) {
} }
}, [isSelected, sound, isPlaying]); }, [isSelected, sound, isPlaying]);
const toggle = useCallback(() => { const select = useCallback(() => {
setIsSelected(prev => !prev); setIsSelected(true);
play();
}, [setIsSelected, play]);
const unselect = useCallback(() => {
setIsSelected(false);
setVolume(0.5); setVolume(0.5);
}, [setIsSelected, setVolume]); }, [setIsSelected, setVolume]);
const toggle = useCallback(() => {
if (isSelected) return unselect();
select();
}, [isSelected, unselect, select]);
return ( return (
<div <div
className={cn(styles.sound, isSelected && styles.selected)} className={cn(styles.sound, isSelected && styles.selected)}

15
src/contexts/play.tsx
View file

@ -7,7 +7,12 @@ export const PlayContext = createContext({
toggle: () => {}, toggle: () => {},
}); });
export const usePlay = () => useContext(PlayContext); export const usePlay = (): {
isPlaying: boolean;
pause: () => void;
play: () => void;
toggle: () => void;
} => useContext(PlayContext);
interface PlayProviderProps { interface PlayProviderProps {
children: React.ReactNode; children: React.ReactNode;
@ -18,10 +23,10 @@ export function PlayProvider({ children }: PlayProviderProps) {
const play = useCallback(() => setIsPlaying(true), []); const play = useCallback(() => setIsPlaying(true), []);
const pause = useCallback(() => setIsPlaying(false), []); const pause = useCallback(() => setIsPlaying(false), []);
const toggle = useCallback( const toggle = useCallback(() => {
() => (isPlaying ? pause() : play()), if (isPlaying) pause();
[isPlaying, play, pause], else play();
); }, [isPlaying, play, pause]);
return ( return (
<PlayContext.Provider value={{ isPlaying, pause, play, toggle }}> <PlayContext.Provider value={{ isPlaying, pause, play, toggle }}>