wip: poc for playing a sound on time end

cpvalente · Oct 7, 2024 · d02940b · d02940b
1 parent 86e6f8b
commit d02940b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/apps/client/src/assets/sounds/buzzer.mp3 b/apps/client/src/assets/sounds/buzzer.mp3
diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts
@@ -176,6 +176,14 @@ export const useTimer = () => {
   return useRuntimeStore(featureSelector);
 };
 
+export const useTimerPhase = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    phase: state.timer.phase,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
 export const useClock = () => {
   const featureSelector = (state: RuntimeStore) => ({
     clock: state.clock,

diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx
@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { usePrevious } from '@mantine/hooks';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
   CustomFields,
@@ -12,12 +14,14 @@ import {
   ViewSettings,
 } from 'ontime-types';
 
+import sound from '../../../assets/sounds/buzzer.mp3';
 import { overrideStylesURL } from '../../../common/api/constants';
 import { FitText } from '../../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import TitleCard from '../../../common/components/title-card/TitleCard';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useTimerPhase } from '../../../common/hooks/useSocket';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
@@ -59,12 +63,28 @@ interface TimerProps {
   viewSettings: ViewSettings;
 }
 
+const usePhaseEvent = () => {
+  const { phase } = useTimerPhase();
+  const previousValue = usePrevious(phase);
+
+  const audio = useMemo(() => new Audio(sound), []);
+
+  if (previousValue !== TimerPhase.None && previousValue !== phase && phase === TimerPhase.Overtime) {
+    try {
+      audio.play();
+    } catch (error) {
+      console.error('Audio playback prevented', error);
+    }
+  }
+};
+
 export default function Timer(props: TimerProps) {
   const { auxTimer, customFields, eventNow, eventNext, isMirrored, message, settings, time, viewSettings } = props;
 
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [searchParams] = useSearchParams();
+  usePhaseEvent();
 
   useWindowTitle('Timer');
 
@@ -172,6 +192,7 @@ export default function Timer(props: TimerProps) {
   return (
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
       <ViewParamsEditor viewOptions={timerOptions} />
+      <audio controls src='../../assets/sounds/buzzer.mp3' />
       <div className={message.timer.blackout ? 'blackout blackout--active' : 'blackout'} />
       {!userOptions.hideMessage && (
         <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>