feat: added functions to get a start-notification sound and a stop-no…

…tification sound

src/components/production-line/production-line.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { useAudioInput } from "./use-audio-input.ts";
@@ -27,6 +27,9 @@ import { useFetchProduction } from "../landing-page/use-fetch-production.ts";
 import { useIsLoading } from "./use-is-loading.ts";
 import { useCheckBadLineData } from "./use-check-bad-line-data.ts";
 import { NavigateToRootButton } from "../navigate-to-root-button/navigate-to-root-button.tsx";
+// TODO update audio to non-questionable-licensed-audio
+import connectionStart from "../../assets/sounds/start-connection.mp3";
+import connectionStop from "../../assets/sounds/stop-connection.mp3";
 
 const TempDiv = styled.div`
   padding: 0 0 2rem 0;
@@ -102,6 +105,18 @@ export const ProductionLine: FC = () => {
   const [isInputMuted, setIsInputMuted] = useState(true);
   const [isOutputMuted, setIsOutputMuted] = useState(false);
 
+  const onEnterNotificationSound = useMemo(() => {
+    const audio = new Audio(connectionStart);
+    audio.load();
+    return audio;
+  }, []);
+
+  const onExitNotificationSound = useMemo(() => {
+    const audio = new Audio(connectionStop);
+    audio.load();
+    return audio;
+  }, []);
+
   const inputAudioStream = useAudioInput({
     inputId: joinProductionOptions?.audioinput ?? null,
   });
@@ -120,11 +135,12 @@ export const ProductionLine: FC = () => {
   );
 
   const exit = useCallback(() => {
+    onExitNotificationSound.play();
     dispatch({
       type: "UPDATE_JOIN_PRODUCTION_OPTIONS",
       payload: null,
     });
-  }, [dispatch]);
+  }, [dispatch, onExitNotificationSound]);
 
   useLineHotkeys({
     muteInput,
@@ -141,6 +157,7 @@ export const ProductionLine: FC = () => {
     sdpOffer,
     joinProductionOptions,
     sessionId,
+    onEnterNotificationSound,
   });
 
   const muteOutput = useCallback(() => {

src/components/production-line/use-rtc-connection.ts

@@ -19,6 +19,7 @@ type TRtcConnectionOptions = {
   sdpOffer: string | null;
   joinProductionOptions: TJoinProductionOptions | null;
   sessionId: string | null;
+  onEnterNotificationSound: HTMLAudioElement;
 };
 
 type TEstablishConnection = {
@@ -213,6 +214,7 @@ export const useRtcConnection = ({
   sdpOffer,
   joinProductionOptions,
   sessionId,
+  onEnterNotificationSound,
 }: TRtcConnectionOptions) => {
   const [rtcPeerConnection] = useState<RTCPeerConnection>(
     () => new RTCPeerConnection()
@@ -260,6 +262,9 @@ export const useRtcConnection = ({
 
     const onConnectionStateChange = () => {
       setConnectionState(rtcPeerConnection.connectionState);
+      if (rtcPeerConnection.connectionState === "connected") {
+        onEnterNotificationSound.play();
+      }
     };
 
     rtcPeerConnection.addEventListener(
@@ -312,6 +317,7 @@ export const useRtcConnection = ({
     joinProductionOptions,
     rtcPeerConnection,
     dispatch,
+    onEnterNotificationSound,
   ]);
 
   // Debug hook for logging RTC events TODO remove