Merge branch 'develop'

src/components/sound/sound.tsx

@@ -27,8 +27,8 @@ export const Sound = forwardRef<HTMLDivElement, SoundProps>(function Sound(
 ) {
   const isPlaying = useSoundStore(state => state.isPlaying);
   const play = useSoundStore(state => state.play);
-  const select = useSoundStore(state => state.select);
+  const selectSound = useSoundStore(state => state.select);
-  const unselect = useSoundStore(state => state.unselect);
+  const unselectSound = useSoundStore(state => state.unselect);
   const setVolume = useSoundStore(state => state.setVolume);
   const volume = useSoundStore(state => state.sounds[id].volume);
   const isSelected = useSoundStore(state => state.sounds[id].isSelected);
@@ -53,23 +53,23 @@ export const Sound = forwardRef<HTMLDivElement, SoundProps>(function Sound(
     else if (hidden && !isSelected) unselectHidden(label);
   }, [label, isSelected, hidden, selectHidden, unselectHidden]);
 
-  const _select = useCallback(() => {
+  const select = useCallback(() => {
     if (locked) return;
-    select(id);
+    selectSound(id);
     play();
-  }, [select, play, id, locked]);
+  }, [selectSound, play, id, locked]);
 
-  const _unselect = useCallback(() => {
+  const unselect = useCallback(() => {
     if (locked) return;
-    unselect(id);
+    unselectSound(id);
     setVolume(id, 0.5);
-  }, [unselect, setVolume, id, locked]);
+  }, [unselectSound, setVolume, id, locked]);
 
   const toggle = useCallback(() => {
     if (locked) return;
-    if (isSelected) _unselect();
+    if (isSelected) unselect();
-    else _select();
+    else select();
-  }, [isSelected, _select, _unselect, locked]);
+  }, [isSelected, select, unselect, locked]);
 
   const handleClick = useCallback(() => {
     toggle();

src/data/sounds/nature.tsx

@@ -1,7 +1,13 @@
 import { GiWaterfall } from 'react-icons/gi/index';
 import { BsFire, BsFillDropletFill } from 'react-icons/bs/index';
 import { BiSolidTree, BiWater } from 'react-icons/bi/index';
-import { FaWater, FaWind, FaLeaf, FaRegSnowflake } from 'react-icons/fa/index';
+import {
+  FaWater,
+  FaWind,
+  FaLeaf,
+  FaRegSnowflake,
+  FaTree,
+} from 'react-icons/fa/index';
 
 import type { Category } from '../types';
 
@@ -69,6 +75,12 @@ export const nature: Category = {
       label: 'Droplets',
       src: '/sounds/nature/droplets.mp3',
     },
+    {
+      icon: <FaTree />,
+      id: 'jungle',
+      label: 'Jungle',
+      src: '/sounds/nature/jungle.mp3',
+    },
   ],
   title: 'Nature',
 };

src/data/sounds/places.tsx

@@ -1,4 +1,8 @@
-import { BiSolidCoffeeAlt, BiSolidPlaneAlt } from 'react-icons/bi/index';
+import {
+  BiSolidCoffeeAlt,
+  BiSolidPlaneAlt,
+  BiSolidDryer,
+} from 'react-icons/bi/index';
 import { FaChurch, FaSubway, FaShoppingBasket } from 'react-icons/fa/index';
 import { TbScubaMask, TbBeerFilled } from 'react-icons/tb/index';
 import { GiVillage, GiCarousel } from 'react-icons/gi/index';
@@ -94,6 +98,12 @@ export const places: Category = {
       label: 'Laboratory',
       src: '/sounds/places/laboratory.mp3',
     },
+    {
+      icon: <BiSolidDryer />,
+      id: 'laundry-room',
+      label: 'Laundry Room',
+      src: '/sounds/places/laundry-room.mp3',
+    },
   ],
   title: 'Places',
 };

src/data/sounds/things.tsx

@@ -1,4 +1,8 @@
-import { GiWindchimes, GiFilmProjector } from 'react-icons/gi/index';
+import {
+  GiWindchimes,
+  GiFilmProjector,
+  GiWashingMachine,
+} from 'react-icons/gi/index';
 import { BsFillKeyboardFill } from 'react-icons/bs/index';
 import { FaKeyboard, FaClock, FaFan } from 'react-icons/fa/index';
 import { MdSmartToy, MdWaterDrop, MdRadio } from 'react-icons/md/index';
@@ -91,6 +95,12 @@ export const things: Category = {
       label: 'Morse Code',
       src: '/sounds/things/morse-code.mp3',
     },
+    {
+      icon: <GiWashingMachine />,
+      id: 'washing-machine',
+      label: 'Washing Machine',
+      src: '/sounds/things/washing-machine.mp3',
+    },
   ],
   title: 'Things',
 };

src/hooks/use-sound-effect.ts

@@ -20,7 +20,7 @@ export function useSoundEffect(src: string, volume: number = 1) {
   }, [src, isBrowser]);
 
   useEffect(() => {
-    if (sound) sound.volume(typeof volume === 'number' ? volume : 1);
+    if (sound) sound.volume(volume ?? 1);
   }, [sound, volume]);
 
   const play = useCallback(() => {

src/hooks/use-sound.ts

@@ -34,13 +34,12 @@ export function useSound(
 
   useEffect(() => {
     if (sound) {
-      sound.loop(typeof options.loop === 'boolean' ? options.loop : false);
+      sound.loop(options.loop ?? false);
     }
   }, [sound, options.loop]);
 
   useEffect(() => {
-    if (sound)
+    if (sound) sound.volume(options.volume ?? 0.5);
-      sound.volume(typeof options.volume === 'number' ? options.volume : 0.5);
   }, [sound, options.volume]);
 
   const play = useCallback(() => {