Add audio

Author: Pascal Wegner

packages/pwa/public/BeepBreak.mp3

@@ -0,0 +1,9 @@
+export const useAudio = (url: string) => {
+  /* istanbul ignore next */
+  if (typeof window === undefined) {
+    return { audio: undefined };
+  }
+
+  const audio = new Audio(url);
+  return { audio };
+};

packages/pwa/public/BeepBreakLong.mp3

@@ -0,0 +1,13 @@
+import { useAudio } from './useAudio';
+export const useBeep = () => {
+  const { audio: beepBreak } = useAudio('/BeepBreak.mp3');
+  const { audio: beepWork } = useAudio('/BeepWork.mp3');
+  const { audio: beepBreakLong } = useAudio('/BeepBreakLong.mp3');
+  const { audio: beepWorkLong } = useAudio('/BeepWorkLong.mp3');
+  return {
+    beepBreak,
+    beepBreakLong,
+    beepWork,
+    beepWorkLong,
+  };
+};

packages/pwa/public/BeepWork.mp3

@@ -1,11 +1,32 @@
 import { FormFields } from '../components/FormFields/FormFields';
-import { timerMachine, timerStates, TTimerStates } from '@interval-timer/core';
+import { timerMachine, timerStates } from '@interval-timer/core';
 import { useMachine } from '@xstate/react';
 import * as React from 'react';
 import { Counter } from '../components/Counter/Counter';
+import { useBeep } from '../hooks/useBeep';
 
 export default function Home() {
-  const [state, send, service] = useMachine(timerMachine);
+  const { beepBreak, beepBreakLong, beepWork, beepWorkLong } = useBeep();
+  const [state, send, service] = useMachine(timerMachine, {
+    actions: {
+      initBreakEffect: () => {
+        beepBreakLong.play();
+      },
+      initWorkEffect: () => {
+        beepWorkLong.play();
+      },
+      countDownLastWorkEffect: () => {
+        beepWork.pause();
+        beepWork.currentTime = 0;
+        beepWork.play();
+      },
+      countDownLastBreakEffect: () => {
+        beepBreak.pause();
+        beepBreak.currentTime = 0;
+        beepBreak.play();
+      },
+    },
+  });
 
   React.useEffect(() => {
     const intervalWorker = new Worker('/intervalWorker.js');