hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 00:44:14 +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) {
const { isPlaying } = usePlay();
const { isPlaying, play } = usePlay();
const [isSelected, setIsSelected] = useLocalStorage(
`${label}-is-selected`,
false,
@ -30,11 +30,22 @@ export function Sound({ label, src }: SoundProps) {
}
}, [isSelected, sound, isPlaying]);
const toggle = useCallback(() => {
setIsSelected(prev => !prev);
const select = useCallback(() => {
setIsSelected(true);
play();
}, [setIsSelected, play]);
const unselect = useCallback(() => {
setIsSelected(false);
setVolume(0.5);
}, [setIsSelected, setVolume]);
const toggle = useCallback(() => {
if (isSelected) return unselect();
select();
}, [isSelected, unselect, select]);
return (
<div
className={cn(styles.sound, isSelected && styles.selected)}

15
src/contexts/play.tsx
View file

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