diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index ef194e9f..080ecd6e 100644 --- a/src/components/production-line/production-line.tsx +++ b/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(() => { diff --git a/src/components/production-line/use-rtc-connection.ts b/src/components/production-line/use-rtc-connection.ts index 051fe042..519f4f48 100644 --- a/src/components/production-line/use-rtc-connection.ts +++ b/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( () => 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