feat: add sound on timer

src/app/components/timer.tsx

@@ -1,20 +1,34 @@
+import { Button, Group, Menu, Text } from "@mantine/core";
+import { IconBellRinging, IconClock } from "@tabler/icons";
 import { useEffect, useState } from "react";
+import sound from "../../assets/cuckoo-clock.mp3";
 import * as State from "../state";
-import { Button, Group, Menu, Text } from "@mantine/core";
-import { IconBellRinging, IconClock } from "@tabler/icons-react";
+
+const audio = new Audio(sound);
 
 export const Timer = () => {
   const onTimerSet = (seconds: number) => State.startTimer(seconds);
   const settings = () => State.getAppState().timer;
+
+  const reset = () => {
+    State.resetTimer();
+    setTimeLeft(undefined);
+  };
+
   const calculateTimeLeft = () => {
     const timeLeft = Math.floor(
       ((settings()?.duration ?? 0) * 1000 -
         (new Date().getTime() - (settings()?.start ?? 0))) /
         1000,
     );
-    if (settings() === null) {
+    if (settings() === null || settings() === undefined) {
       return undefined;
     } else if (timeLeft <= 0) {
+      if (timeLeft >= -1 && timeLeft <= 0) {
+        audio.play();
+        setTimeout(() => audio.pause(), 6000);
+      }
+      reset();
       return 0;
     } else {
       return timeLeft;
@@ -33,11 +47,6 @@
     return () => clearInterval(interval);
   });
 
-  const reset = () => {
-    State.resetTimer();
-    setTimeLeft(undefined);
-  };
-
   return (
     <Menu shadow="md" width={200}>
       <Menu.Target>
@@ -49,10 +58,10 @@
                 {`${timeLeft % 60}`.padStart(2, "0")}
               </Text>
             )}
             {timeLeft === 0 && <IconBellRinging color="orange" size={25} />}
             {timeLeft !== 0 && (
               <IconClock
                 color={(timeLeft ?? 0) > 0 ? "red" : undefined}
                 size={25}
               />
             )}
@@ -68,6 +77,7 @@
       )}
       {(timeLeft === 0 || timeLeft === undefined) && (
         <Menu.Dropdown>
+          <Menu.Item onClick={() => onTimerSet?.(10)}>10 seconds</Menu.Item>
           <Menu.Item onClick={() => onTimerSet?.(120)}>2 minutes</Menu.Item>
           <Menu.Item onClick={() => onTimerSet?.(5 * 60)}>5 minutes</Menu.Item>
           <Menu.Item onClick={() => onTimerSet?.(10 * 60)}>

types/asset.d.ts

@@ -0,0 +1,4 @@
+declare module "*.mp3" {
+  const value: any;
+  export default value;
+}