From da0d7d8a980a4ef2dc047ce43faaae11d14868b3 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Thu, 18 Apr 2024 15:30:36 +0200 Subject: [PATCH 1/4] feat: added icons for speaker on and off --- src/assets/icons/icon.tsx | 8 ++++++++ src/assets/icons/volume_off.svg | 5 +++++ src/assets/icons/volume_on.svg | 5 +++++ 3 files changed, 18 insertions(+) create mode 100644 src/assets/icons/volume_off.svg create mode 100644 src/assets/icons/volume_on.svg diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx index 9b0233e7..17031c9e 100644 --- a/src/assets/icons/icon.tsx +++ b/src/assets/icons/icon.tsx @@ -2,6 +2,8 @@ import styled from "@emotion/styled"; import MicMute from "./mic_off.svg"; import MicUnmute from "./mic_on.svg"; import RemoveSvg from "./clear.svg"; +import VolumeOn from "./volume_on.svg"; +import VolumeOff from "./volume_off.svg"; const Icon = styled.img` width: 100%; @@ -14,3 +16,9 @@ export const MicMuted = () => ; export const MicUnmuted = () => ; export const RemoveIcon = () => ; + +export const SpeakerOff = () => ( + +); + +export const SpeakerOn = () => ; diff --git a/src/assets/icons/volume_off.svg b/src/assets/icons/volume_off.svg new file mode 100644 index 00000000..51a00d6d --- /dev/null +++ b/src/assets/icons/volume_off.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/volume_on.svg b/src/assets/icons/volume_on.svg new file mode 100644 index 00000000..821d636d --- /dev/null +++ b/src/assets/icons/volume_on.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file From bdb3a88569bf2697c81eac03f85a48439c673527 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Thu, 18 Apr 2024 15:31:34 +0200 Subject: [PATCH 2/4] feat: added button to toggle output-audio --- .../production-line/production-line.tsx | 32 +++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index 11c512c6..a6fdc9e9 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -7,7 +7,12 @@ import { useRtcConnection } from "./use-rtc-connection.ts"; import { useEstablishSession } from "./use-establish-session.ts"; import { ActionButton } from "../landing-page/form-elements.tsx"; import { UserList } from "./user-list.tsx"; -import { MicMuted, MicUnmuted } from "../../assets/icons/icon.tsx"; +import { + MicMuted, + MicUnmuted, + SpeakerOff, + SpeakerOn, +} from "../../assets/icons/icon.tsx"; import { Spinner } from "../loader/loader.tsx"; import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx"; import { DisplayContainer, FlexContainer } from "../generic-components.ts"; @@ -57,6 +62,7 @@ export const ProductionLine: FC = () => { const [{ joinProductionOptions }, dispatch] = useGlobalState(); const navigate = useNavigate(); const [isInputMuted, setIsInputMuted] = useState(true); + const [isOutputMuted, setIsOutputMuted] = useState(false); const inputAudioStream = useAudioInput({ inputId: joinProductionOptions?.audioinput ?? null, @@ -93,13 +99,24 @@ export const ProductionLine: FC = () => { dispatch, }); - const { connectionState } = useRtcConnection({ + const { connectionState, audioElements } = useRtcConnection({ inputAudioStream, sdpOffer, joinProductionOptions, sessionId, }); + const muteOutput = useCallback( + (mute: boolean) => { + audioElements.map((singleElement: HTMLAudioElement) => { + // eslint-disable-next-line no-param-reassign, no-return-assign + singleElement.muted = !mute; + return setIsOutputMuted(!mute); + }); + }, + [audioElements] + ); + const line = useLinePolling({ joinProductionOptions }); const { production, error: fetchProductionError } = useFetchProduction( @@ -178,6 +195,17 @@ export const ProductionLine: FC = () => {
Controls + + muteOutput(isOutputMuted)} + > + + {isOutputMuted ? : } + + {isOutputMuted ? "Muted" : "Unmuted"} + + {inputAudioStream && inputAudioStream !== "no-device" && ( From 00c757e0d3076719e9adcd57838bdbd50bae1659 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Fri, 19 Apr 2024 10:37:33 +0200 Subject: [PATCH 3/4] fix: updated onclick-function to mute output-audio --- .../production-line/production-line.tsx | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index a6fdc9e9..17e7c7a2 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -74,8 +74,8 @@ export const ProductionLine: FC = () => { inputAudioStream.getTracks().forEach((t) => { // eslint-disable-next-line no-param-reassign t.enabled = !mute; - setIsInputMuted(mute); }); + setIsInputMuted(mute); } }, [inputAudioStream] @@ -106,16 +106,13 @@ export const ProductionLine: FC = () => { sessionId, }); - const muteOutput = useCallback( - (mute: boolean) => { - audioElements.map((singleElement: HTMLAudioElement) => { - // eslint-disable-next-line no-param-reassign, no-return-assign - singleElement.muted = !mute; - return setIsOutputMuted(!mute); - }); - }, - [audioElements] - ); + const muteOutput = useCallback(() => { + audioElements.forEach((singleElement: HTMLAudioElement) => { + // eslint-disable-next-line no-param-reassign + singleElement.muted = !isOutputMuted; + setIsOutputMuted(!isOutputMuted); + }); + }, [audioElements, isOutputMuted]); const line = useLinePolling({ joinProductionOptions }); @@ -196,10 +193,7 @@ export const ProductionLine: FC = () => {
Controls - muteOutput(isOutputMuted)} - > + muteOutput()}> {isOutputMuted ? : } From a9ac4bbd97bb6a9d414c8bf98f402be6ee4913e6 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Fri, 19 Apr 2024 14:42:32 +0200 Subject: [PATCH 4/4] fix: moved set-state out of for-each --- src/components/production-line/production-line.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index 17e7c7a2..9a631f59 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -110,8 +110,8 @@ export const ProductionLine: FC = () => { audioElements.forEach((singleElement: HTMLAudioElement) => { // eslint-disable-next-line no-param-reassign singleElement.muted = !isOutputMuted; - setIsOutputMuted(!isOutputMuted); }); + setIsOutputMuted(!isOutputMuted); }, [audioElements, isOutputMuted]); const line = useLinePolling({ joinProductionOptions });