From 2026932b60cc7285fd6fe0c260445a4bad87b1b1 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Mon, 8 Apr 2024 14:16:10 +0200 Subject: [PATCH 01/16] feat: added icons-folder with microphone-icons and file to import and style the icons --- src/icons/icon.tsx | 17 +++++++++++++++++ src/icons/microphone-green.png | Bin 0 -> 1358 bytes src/icons/microphone-off-red.png | Bin 0 -> 1600 bytes 3 files changed, 17 insertions(+) create mode 100644 src/icons/icon.tsx create mode 100644 src/icons/microphone-green.png create mode 100644 src/icons/microphone-off-red.png diff --git a/src/icons/icon.tsx b/src/icons/icon.tsx new file mode 100644 index 00000000..8a12cccc --- /dev/null +++ b/src/icons/icon.tsx @@ -0,0 +1,17 @@ +import styled from "@emotion/styled"; +import MicMute from "./microphone-off-red.png"; +import MicUnmute from "./microphone-green.png"; + +const Icon = styled.img` + width: 5rem; + padding-right: 1em; + pointer-events: none; +`; + +export const MicMuted = () => ( + +); + +export const MicUnmuted = () => ( + +); diff --git a/src/icons/microphone-green.png b/src/icons/microphone-green.png new file mode 100644 index 0000000000000000000000000000000000000000..d53521a5f4ae7b586b196132599f381f83fe3d96 GIT binary patch literal 1358 zcmV-U1+n^xP)Px)2uVaiRCr$PnSE#*br{FL&n0*1rgKbXOogF1rw-SGt6SU4Rs>&Qf`ZEaSsB>o zq7xA(8zM59uM^a6GT3a={85}QI6)lvf+&_Yzjg)7rjr$QDuSC8|B!8ethr0>k!v$Z zF3EB)xhU)1pO@$5`+V;Cz2!%k=MT;E`Vj&MJ7As@X!;Ns;5CaSeZfY6ZzTz_B)66p3MRW@FA~K&KOIqLT+)VlBZ6| zO6x8f&b#w-XB{|zRIckGBKpXktT}5o@j$Xg9QNYt)F*fVy1I{mC!7i@wPRpUQV~yk z@pbAGIDoXS9tUunQ$aSnqnaXa_vq`$tr-B=k&+rlnj!+#7-(>-rnIhx0KyLNK_DCg z;T#Z7f`Lxdfd&s(fp8fN_W|KXDBKB#TjB655FUnn90l;dJPQmO>a)yzZ&_hXLW_y# z?8T;Z^$Y=5c!9vc*`y*CSH#SzuM%-r*?XcdG+DgnHjk&BU`ki}3D{;!Hm)h6Toizm zu8tBAcPp%DKcXq3+wPmz;}Za{Eq~8%YRcGlw|Tq)FyhY;vz_)Ynj%(I=>Q-93G!P> zW$dX+0P61mmY4m1NZ65-#T!ilkk;c{03Na@Gi18*amxNv`aYw_+f48=x58%aS!&Z_ zqu-bM9^kH}QG@=n$0MfAiCFeMw|P8uz}qt$Zi+~SpDILvwj`A7I}PfBy_zEI!wiFZ zyqCcldk)FKb$yqK(@gq zWbt6VT(y4p1t4Xt?Ndmyq8VS!a;l+HEGW9_0=lBvi&k6ACc)z@AJfc7HMxkTt z!tqn}3as~gLjYJwGBfJUCgB?puBnrBga}`QaT*f;iM%A4lDUi+*D}#v4$ciHB?H}F zHa*pJH4K0i{J{B+>!Xp#R{(CTN8a1-bUZ3Y?|FoVr@i@CdNmY)6~3Q47c4U9C4j6$ zOr$|Vbt1e{h|cVOlqQV^#hhD18X2rKR!Z->gFt%#sD5$~<8YoM+aGHg`PomLTE2k+ zxR5YosCSx-T>v(?DS(+im8h^Yp^P7Ob@d3s??2fG1W}0Bm>~eKPx)`bk7VRCr$Pn_FxYRT#(r->_Y)sR|^DzQ`rO%xsmQpb|>yDv64OU_^ZJ^1vH0 zMx#*@6JPW}MH3_dQ;ExR7c-u9L`aq#$V*qxN5C;`x zr!ArkfLE+Ap=tY(Om3qSCoY8X%(}h`MEw8~ihAR4oVAq6{GccwSxgB4o8}5Ie+%FS z04LGX(y0o8Q>i2zM|Q*r6(x~{MT=HZU*C8ry^z9z09enaugh zl#enT8WMm41RIXCp%xGt7C>AO8X7ppy&*IOfOdu z|IU*TkNDgN`~~1T-+<)Z-{s3`8Xo@L>+C?beaOdd4}gWPXNO3L*Ht?{Ar}?E9x%V) za+ZS-R}nDfZL|NCnmbk-i9{C-4E(0j0ZykAID7W893d|GeI&#)D*A4jr~sY?^WHLN z<8aCLxY`q_M0CsNU}@LGZk3 zCc2L->&tim==!xFDzD)&zeBeDl+Sn#b2FTUrghTb;90-Uu&%!kq9@9px3(^zeOb@`4 zC9P;}9rUR8_mB{>CaBza&6;a)@!}y6b$UWbBsx|13Cd0@HWFd5XWR*Ea)lW@^fZG|H<^eE2?i0Xa5bY<+s@yzziU*X`edmO*otN@8$pD2+ zm=GBQvrO?mXxedTT0e3*4T*#a$1%Zt7l+G}mD}Q*JZz1WDo~Lj)CIugkVvI& zhvU2oU`s?02cc!xh> zvtp^3qoZ5t^yz>7=#&msUwED;B4$GD07?^OH-Pdh zG@@>@tVe@}3Rl}F06)WVI>JnhO$VR=un0jO$GtwF3I(Al0Tdt Date: Mon, 8 Apr 2024 14:18:05 +0200 Subject: [PATCH 02/16] feat: added mic mute and unmute functionality --- .../production-line/production-line.tsx | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index dbb04072..5e91af76 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -9,16 +9,26 @@ import { ActionButton } from "../landing-page/form-elements.tsx"; import { UserList } from "./user-list.tsx"; import { API } from "../../api/api.ts"; import { noop } from "../../helpers.ts"; +import { MicMuted, MicUnmuted } from "../../icons/icon.tsx"; import { Spinner } from "../loader/loader.tsx"; const TempDiv = styled.div` padding: 1rem; `; + +const UserControlBtn = styled.button` + background-color: transparent; + border-color: transparent; + z-index: 100; + position: relative; +`; + export const ProductionLine: FC = () => { // const { productionId, lineId } = useParams(); const [{ joinProductionOptions }, dispatch] = useGlobalState(); const navigate = useNavigate(); const audioContainerRef = useRef(null); + const [micMute, setMicMute] = useState(true); const [participants, setParticipants] = useState< { name: string; sessionid: string }[] | null >(null); @@ -81,7 +91,18 @@ export const ProductionLine: FC = () => { navigate("/"); }; - // Mute/Unmute mic + useEffect(() => { + const audioTracks = + inputAudioStream !== "no-device" && inputAudioStream !== null + ? inputAudioStream.getAudioTracks() + : null; + + audioTracks?.forEach((track) => { + // eslint-disable-next-line no-param-reassign + track.enabled = !micMute; + }); + }, [inputAudioStream, micMute]); + // Mute/Unmute speaker // Show active sink and mic // Exit button (link to /, clear production from state) @@ -95,6 +116,11 @@ export const ProductionLine: FC = () => { {!loading && ( <> Production View + + setMicMute(!micMute)}> + {micMute ? : } + + {audioElements.length && ( Incoming Audio Channels: {audioElements.length} From 9bcef641cff64c9ca154a6eb849c567b63779277 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Mon, 8 Apr 2024 14:25:29 +0200 Subject: [PATCH 03/16] fix: removed unnecessary styling --- src/components/production-line/production-line.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index 5e91af76..ac40e4a3 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -19,8 +19,6 @@ const TempDiv = styled.div` const UserControlBtn = styled.button` background-color: transparent; border-color: transparent; - z-index: 100; - position: relative; `; export const ProductionLine: FC = () => { From 0b2e46a825dcf0649c5dfe0495333d19e0dfdcee Mon Sep 17 00:00:00 2001 From: malmen237 Date: Mon, 8 Apr 2024 14:48:31 +0200 Subject: [PATCH 04/16] feat: added mediastreamtrack as a global state --- src/global-state/global-state-actions.ts | 8 +++++++- src/global-state/global-state-reducer.ts | 6 ++++++ src/global-state/types.ts | 1 + 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/global-state/global-state-actions.ts b/src/global-state/global-state-actions.ts index b81f5c55..e70d5e87 100644 --- a/src/global-state/global-state-actions.ts +++ b/src/global-state/global-state-actions.ts @@ -5,7 +5,8 @@ export type TGlobalStateAction = | TProductionCreated | TProductionListFetched | TUpdateDevicesAction - | TUpdateJoinProductionOptions; + | TUpdateJoinProductionOptions + | TMediaStreamTrack; export type TPublishError = { type: "ERROR"; @@ -29,3 +30,8 @@ export type TUpdateJoinProductionOptions = { type: "UPDATE_JOIN_PRODUCTION_OPTIONS"; payload: TJoinProductionOptions | null; }; + +export type TMediaStreamTrack = { + type: "CONNECTED_MEDIASTREAM_TRACK"; + payload: MediaStreamTrack | null; +}; diff --git a/src/global-state/global-state-reducer.ts b/src/global-state/global-state-reducer.ts index b397fbd2..1b23e0ce 100644 --- a/src/global-state/global-state-reducer.ts +++ b/src/global-state/global-state-reducer.ts @@ -9,6 +9,7 @@ const initialGlobalState: TGlobalState = { reloadProductionList: true, devices: null, joinProductionOptions: null, + audioInput: null, }; const globalReducer: Reducer = ( @@ -43,6 +44,11 @@ const globalReducer: Reducer = ( ...state, joinProductionOptions: action.payload, }; + case "CONNECTED_MEDIASTREAM_TRACK": + return { + ...state, + audioInput: action.payload, + }; default: return state; } diff --git a/src/global-state/types.ts b/src/global-state/types.ts index acadd021..aefc66e3 100644 --- a/src/global-state/types.ts +++ b/src/global-state/types.ts @@ -9,4 +9,5 @@ export type TGlobalState = { reloadProductionList: boolean; devices: MediaDeviceInfo[] | null; joinProductionOptions: TJoinProductionOptions | null; + audioInput: MediaStreamTrack | null; }; From e353d53f40d9b201553471bbb11cdbf43e91e2e1 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Mon, 8 Apr 2024 14:49:58 +0200 Subject: [PATCH 05/16] feat: added dispatch to when the mediastream track is connected --- .../production-line/use-rtc-connection.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/production-line/use-rtc-connection.ts b/src/components/production-line/use-rtc-connection.ts index 04fc2438..67c26301 100644 --- a/src/components/production-line/use-rtc-connection.ts +++ b/src/components/production-line/use-rtc-connection.ts @@ -25,15 +25,21 @@ type TEstablishConnection = { type TAttachAudioStream = { inputAudioStream: MediaStream; rtcPeerConnection: RTCPeerConnection; + dispatch: Dispatch; }; const attachInputAudioToPeerConnection = ({ inputAudioStream, rtcPeerConnection, + dispatch, }: TAttachAudioStream) => - inputAudioStream - .getTracks() - .forEach((track) => rtcPeerConnection.addTrack(track)); + inputAudioStream.getTracks().forEach((track) => { + rtcPeerConnection.addTrack(track); + dispatch({ + type: "CONNECTED_MEDIASTREAM_TRACK", + payload: track, + }); + }); const establishConnection = ({ rtcPeerConnection, @@ -197,6 +203,7 @@ export const useRtcConnection = ({ attachInputAudioToPeerConnection({ rtcPeerConnection, inputAudioStream, + dispatch, }); } From 95766c35521ab5cb6355854fc9a4a6a28ccd49e7 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Mon, 8 Apr 2024 14:51:37 +0200 Subject: [PATCH 06/16] feat: updated the mute-function to use global state --- .../production-line/production-line.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index ac40e4a3..1d050cd9 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -23,7 +23,7 @@ const UserControlBtn = styled.button` export const ProductionLine: FC = () => { // const { productionId, lineId } = useParams(); - const [{ joinProductionOptions }, dispatch] = useGlobalState(); + const [{ joinProductionOptions, audioInput }, dispatch] = useGlobalState(); const navigate = useNavigate(); const audioContainerRef = useRef(null); const [micMute, setMicMute] = useState(true); @@ -90,16 +90,10 @@ export const ProductionLine: FC = () => { }; useEffect(() => { - const audioTracks = - inputAudioStream !== "no-device" && inputAudioStream !== null - ? inputAudioStream.getAudioTracks() - : null; - - audioTracks?.forEach((track) => { - // eslint-disable-next-line no-param-reassign - track.enabled = !micMute; - }); - }, [inputAudioStream, micMute]); + if (audioInput) { + audioInput.enabled = !micMute; + } + }, [audioInput, micMute]); // Mute/Unmute speaker // Show active sink and mic From 793e3ac978204b7501e53d2968f702209cd04a56 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Tue, 9 Apr 2024 13:31:13 +0200 Subject: [PATCH 07/16] fix: updated global state to mediastream instead of mediastream-track --- src/global-state/global-state-actions.ts | 8 ++++---- src/global-state/global-state-reducer.ts | 6 +++--- src/global-state/types.ts | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/global-state/global-state-actions.ts b/src/global-state/global-state-actions.ts index e70d5e87..53522e7b 100644 --- a/src/global-state/global-state-actions.ts +++ b/src/global-state/global-state-actions.ts @@ -6,7 +6,7 @@ export type TGlobalStateAction = | TProductionListFetched | TUpdateDevicesAction | TUpdateJoinProductionOptions - | TMediaStreamTrack; + | TMediaStream; export type TPublishError = { type: "ERROR"; @@ -31,7 +31,7 @@ export type TUpdateJoinProductionOptions = { payload: TJoinProductionOptions | null; }; -export type TMediaStreamTrack = { - type: "CONNECTED_MEDIASTREAM_TRACK"; - payload: MediaStreamTrack | null; +export type TMediaStream = { + type: "CONNECTED_MEDIASTREAM"; + payload: MediaStream | null; }; diff --git a/src/global-state/global-state-reducer.ts b/src/global-state/global-state-reducer.ts index 1b23e0ce..ed1a95e8 100644 --- a/src/global-state/global-state-reducer.ts +++ b/src/global-state/global-state-reducer.ts @@ -9,7 +9,7 @@ const initialGlobalState: TGlobalState = { reloadProductionList: true, devices: null, joinProductionOptions: null, - audioInput: null, + mediaStreamInput: null, }; const globalReducer: Reducer = ( @@ -44,10 +44,10 @@ const globalReducer: Reducer = ( ...state, joinProductionOptions: action.payload, }; - case "CONNECTED_MEDIASTREAM_TRACK": + case "CONNECTED_MEDIASTREAM": return { ...state, - audioInput: action.payload, + mediaStreamInput: action.payload, }; default: return state; diff --git a/src/global-state/types.ts b/src/global-state/types.ts index aefc66e3..8eb0b69c 100644 --- a/src/global-state/types.ts +++ b/src/global-state/types.ts @@ -9,5 +9,5 @@ export type TGlobalState = { reloadProductionList: boolean; devices: MediaDeviceInfo[] | null; joinProductionOptions: TJoinProductionOptions | null; - audioInput: MediaStreamTrack | null; + mediaStreamInput: MediaStream | null; }; From 65cb309e1e9eecb5656385fede73d9d466f06fcc Mon Sep 17 00:00:00 2001 From: malmen237 Date: Tue, 9 Apr 2024 13:33:05 +0200 Subject: [PATCH 08/16] fix: updated function that saves the global state --- src/components/production-line/use-rtc-connection.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/production-line/use-rtc-connection.ts b/src/components/production-line/use-rtc-connection.ts index 67c26301..af441db0 100644 --- a/src/components/production-line/use-rtc-connection.ts +++ b/src/components/production-line/use-rtc-connection.ts @@ -32,14 +32,15 @@ const attachInputAudioToPeerConnection = ({ inputAudioStream, rtcPeerConnection, dispatch, -}: TAttachAudioStream) => +}: TAttachAudioStream) => { inputAudioStream.getTracks().forEach((track) => { rtcPeerConnection.addTrack(track); - dispatch({ - type: "CONNECTED_MEDIASTREAM_TRACK", - payload: track, - }); }); + dispatch({ + type: "CONNECTED_MEDIASTREAM", + payload: inputAudioStream, + }); +}; const establishConnection = ({ rtcPeerConnection, From 61ba23be7173fb0471054188a8f916ae5adba09a Mon Sep 17 00:00:00 2001 From: malmen237 Date: Tue, 9 Apr 2024 13:35:14 +0200 Subject: [PATCH 09/16] fix: updated mic-mute toggle --- src/components/production-line/production-line.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index 1d050cd9..17cb0ee7 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -23,7 +23,8 @@ const UserControlBtn = styled.button` export const ProductionLine: FC = () => { // const { productionId, lineId } = useParams(); - const [{ joinProductionOptions, audioInput }, dispatch] = useGlobalState(); + const [{ joinProductionOptions, mediaStreamInput }, dispatch] = + useGlobalState(); const navigate = useNavigate(); const audioContainerRef = useRef(null); const [micMute, setMicMute] = useState(true); @@ -90,10 +91,13 @@ export const ProductionLine: FC = () => { }; useEffect(() => { - if (audioInput) { - audioInput.enabled = !micMute; + if (mediaStreamInput) { + mediaStreamInput.getTracks().forEach((track) => { + // eslint-disable-next-line no-param-reassign + track.enabled = !micMute; + }); } - }, [audioInput, micMute]); + }, [mediaStreamInput, micMute]); // Mute/Unmute speaker // Show active sink and mic From 382f4068b98f313023d4f317c4ee9710130a37e2 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Wed, 10 Apr 2024 14:55:30 +0200 Subject: [PATCH 10/16] fix: moved dispatch of mediastream and added clean-up --- .../production-line/use-rtc-connection.ts | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/production-line/use-rtc-connection.ts b/src/components/production-line/use-rtc-connection.ts index af441db0..864b330f 100644 --- a/src/components/production-line/use-rtc-connection.ts +++ b/src/components/production-line/use-rtc-connection.ts @@ -25,21 +25,15 @@ type TEstablishConnection = { type TAttachAudioStream = { inputAudioStream: MediaStream; rtcPeerConnection: RTCPeerConnection; - dispatch: Dispatch; }; const attachInputAudioToPeerConnection = ({ inputAudioStream, rtcPeerConnection, - dispatch, }: TAttachAudioStream) => { inputAudioStream.getTracks().forEach((track) => { rtcPeerConnection.addTrack(track); }); - dispatch({ - type: "CONNECTED_MEDIASTREAM", - payload: inputAudioStream, - }); }; const establishConnection = ({ @@ -167,14 +161,28 @@ export const useRtcConnection = ({ // Teardown useEffect( () => () => { + if (inputAudioStream !== "no-device") { + // TODO remove check-log + console.log("Dispatch of mediastream"); + dispatch({ + type: "CONNECTED_MEDIASTREAM", + payload: inputAudioStream, + }); + } audioElements.forEach((el) => { console.log("Tearing down audio element"); el.pause(); // eslint-disable-next-line no-param-reassign el.srcObject = null; + // TODO remove check-log + console.log("Remove mediastream"); + dispatch({ + type: "CONNECTED_MEDIASTREAM", + payload: null, + }); }); }, - [audioElements] + [audioElements, dispatch, inputAudioStream] ); useEffect(() => { @@ -204,7 +212,6 @@ export const useRtcConnection = ({ attachInputAudioToPeerConnection({ rtcPeerConnection, inputAudioStream, - dispatch, }); } From acf3f9fd3862ffa1483e7fc6ed3c1e894fd0d32c Mon Sep 17 00:00:00 2001 From: malmen237 Date: Thu, 11 Apr 2024 11:10:11 +0200 Subject: [PATCH 11/16] fix: moved dispatch to correct position --- .../production-line/use-rtc-connection.ts | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/components/production-line/use-rtc-connection.ts b/src/components/production-line/use-rtc-connection.ts index 864b330f..7293f06d 100644 --- a/src/components/production-line/use-rtc-connection.ts +++ b/src/components/production-line/use-rtc-connection.ts @@ -161,28 +161,14 @@ export const useRtcConnection = ({ // Teardown useEffect( () => () => { - if (inputAudioStream !== "no-device") { - // TODO remove check-log - console.log("Dispatch of mediastream"); - dispatch({ - type: "CONNECTED_MEDIASTREAM", - payload: inputAudioStream, - }); - } audioElements.forEach((el) => { console.log("Tearing down audio element"); el.pause(); // eslint-disable-next-line no-param-reassign el.srcObject = null; - // TODO remove check-log - console.log("Remove mediastream"); - dispatch({ - type: "CONNECTED_MEDIASTREAM", - payload: null, - }); }); }, - [audioElements, dispatch, inputAudioStream] + [audioElements, dispatch] ); useEffect(() => { @@ -213,6 +199,11 @@ export const useRtcConnection = ({ rtcPeerConnection, inputAudioStream, }); + + dispatch({ + type: "CONNECTED_MEDIASTREAM", + payload: inputAudioStream, + }); } const { teardown } = establishConnection({ @@ -232,6 +223,11 @@ export const useRtcConnection = ({ onConnectionStateChange ); + dispatch({ + type: "CONNECTED_MEDIASTREAM", + payload: null, + }); + rtcPeerConnection.close(); }; }, [ From 04e00f866c149393c90a47c99799095d2f455b50 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Thu, 11 Apr 2024 11:54:18 +0200 Subject: [PATCH 12/16] fix: removed some unused and unnecessary code --- src/components/production-line/use-rtc-connection.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/production-line/use-rtc-connection.ts b/src/components/production-line/use-rtc-connection.ts index 7293f06d..a19860b2 100644 --- a/src/components/production-line/use-rtc-connection.ts +++ b/src/components/production-line/use-rtc-connection.ts @@ -30,11 +30,10 @@ type TAttachAudioStream = { const attachInputAudioToPeerConnection = ({ inputAudioStream, rtcPeerConnection, -}: TAttachAudioStream) => { - inputAudioStream.getTracks().forEach((track) => { - rtcPeerConnection.addTrack(track); - }); -}; +}: TAttachAudioStream) => + inputAudioStream + .getTracks() + .forEach((track) => rtcPeerConnection.addTrack(track)); const establishConnection = ({ rtcPeerConnection, @@ -168,7 +167,7 @@ export const useRtcConnection = ({ el.srcObject = null; }); }, - [audioElements, dispatch] + [audioElements] ); useEffect(() => { From 58fff05cb6546ab2150ab381ca80e8b91e4e85fe Mon Sep 17 00:00:00 2001 From: malmen237 Date: Thu, 11 Apr 2024 11:55:09 +0200 Subject: [PATCH 13/16] fix: removed unused classname --- src/icons/icon.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/icons/icon.tsx b/src/icons/icon.tsx index 8a12cccc..024afc43 100644 --- a/src/icons/icon.tsx +++ b/src/icons/icon.tsx @@ -8,10 +8,6 @@ const Icon = styled.img` pointer-events: none; `; -export const MicMuted = () => ( - -); +export const MicMuted = () => ; -export const MicUnmuted = () => ( - -); +export const MicUnmuted = () => ; From 21352423421ec53a593c956f3cc1266c04cb1a57 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Thu, 11 Apr 2024 13:50:29 +0200 Subject: [PATCH 14/16] fix: changed icons to svg and moved folder-position --- src/{ => assets}/icons/icon.tsx | 4 ++-- src/assets/icons/mic_off_24dp.svg | 1 + src/assets/icons/mic_on_24dp.svg | 1 + .../production-line/production-line.tsx | 2 +- src/icons/microphone-green.png | Bin 1358 -> 0 bytes src/icons/microphone-off-red.png | Bin 1600 -> 0 bytes 6 files changed, 5 insertions(+), 3 deletions(-) rename src/{ => assets}/icons/icon.tsx (74%) create mode 100644 src/assets/icons/mic_off_24dp.svg create mode 100644 src/assets/icons/mic_on_24dp.svg delete mode 100644 src/icons/microphone-green.png delete mode 100644 src/icons/microphone-off-red.png diff --git a/src/icons/icon.tsx b/src/assets/icons/icon.tsx similarity index 74% rename from src/icons/icon.tsx rename to src/assets/icons/icon.tsx index 024afc43..40500e1d 100644 --- a/src/icons/icon.tsx +++ b/src/assets/icons/icon.tsx @@ -1,6 +1,6 @@ import styled from "@emotion/styled"; -import MicMute from "./microphone-off-red.png"; -import MicUnmute from "./microphone-green.png"; +import MicMute from "./mic_off_24dp.svg"; +import MicUnmute from "./mic_on_24dp.svg"; const Icon = styled.img` width: 5rem; diff --git a/src/assets/icons/mic_off_24dp.svg b/src/assets/icons/mic_off_24dp.svg new file mode 100644 index 00000000..2379a5bb --- /dev/null +++ b/src/assets/icons/mic_off_24dp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mic_on_24dp.svg b/src/assets/icons/mic_on_24dp.svg new file mode 100644 index 00000000..2c7173fb --- /dev/null +++ b/src/assets/icons/mic_on_24dp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index 17cb0ee7..6ea0672d 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -9,7 +9,7 @@ import { ActionButton } from "../landing-page/form-elements.tsx"; import { UserList } from "./user-list.tsx"; import { API } from "../../api/api.ts"; import { noop } from "../../helpers.ts"; -import { MicMuted, MicUnmuted } from "../../icons/icon.tsx"; +import { MicMuted, MicUnmuted } from "../../assets/icons/icon.tsx"; import { Spinner } from "../loader/loader.tsx"; const TempDiv = styled.div` diff --git a/src/icons/microphone-green.png b/src/icons/microphone-green.png deleted file mode 100644 index d53521a5f4ae7b586b196132599f381f83fe3d96..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1358 zcmV-U1+n^xP)Px)2uVaiRCr$PnSE#*br{FL&n0*1rgKbXOogF1rw-SGt6SU4Rs>&Qf`ZEaSsB>o zq7xA(8zM59uM^a6GT3a={85}QI6)lvf+&_Yzjg)7rjr$QDuSC8|B!8ethr0>k!v$Z zF3EB)xhU)1pO@$5`+V;Cz2!%k=MT;E`Vj&MJ7As@X!;Ns;5CaSeZfY6ZzTz_B)66p3MRW@FA~K&KOIqLT+)VlBZ6| zO6x8f&b#w-XB{|zRIckGBKpXktT}5o@j$Xg9QNYt)F*fVy1I{mC!7i@wPRpUQV~yk z@pbAGIDoXS9tUunQ$aSnqnaXa_vq`$tr-B=k&+rlnj!+#7-(>-rnIhx0KyLNK_DCg z;T#Z7f`Lxdfd&s(fp8fN_W|KXDBKB#TjB655FUnn90l;dJPQmO>a)yzZ&_hXLW_y# z?8T;Z^$Y=5c!9vc*`y*CSH#SzuM%-r*?XcdG+DgnHjk&BU`ki}3D{;!Hm)h6Toizm zu8tBAcPp%DKcXq3+wPmz;}Za{Eq~8%YRcGlw|Tq)FyhY;vz_)Ynj%(I=>Q-93G!P> zW$dX+0P61mmY4m1NZ65-#T!ilkk;c{03Na@Gi18*amxNv`aYw_+f48=x58%aS!&Z_ zqu-bM9^kH}QG@=n$0MfAiCFeMw|P8uz}qt$Zi+~SpDILvwj`A7I}PfBy_zEI!wiFZ zyqCcldk)FKb$yqK(@gq zWbt6VT(y4p1t4Xt?Ndmyq8VS!a;l+HEGW9_0=lBvi&k6ACc)z@AJfc7HMxkTt z!tqn}3as~gLjYJwGBfJUCgB?puBnrBga}`QaT*f;iM%A4lDUi+*D}#v4$ciHB?H}F zHa*pJH4K0i{J{B+>!Xp#R{(CTN8a1-bUZ3Y?|FoVr@i@CdNmY)6~3Q47c4U9C4j6$ zOr$|Vbt1e{h|cVOlqQV^#hhD18X2rKR!Z->gFt%#sD5$~<8YoM+aGHg`PomLTE2k+ zxR5YosCSx-T>v(?DS(+im8h^Yp^P7Ob@d3s??2fG1W}0Bm>~eKPx)`bk7VRCr$Pn_FxYRT#(r->_Y)sR|^DzQ`rO%xsmQpb|>yDv64OU_^ZJ^1vH0 zMx#*@6JPW}MH3_dQ;ExR7c-u9L`aq#$V*qxN5C;`x zr!ArkfLE+Ap=tY(Om3qSCoY8X%(}h`MEw8~ihAR4oVAq6{GccwSxgB4o8}5Ie+%FS z04LGX(y0o8Q>i2zM|Q*r6(x~{MT=HZU*C8ry^z9z09enaugh zl#enT8WMm41RIXCp%xGt7C>AO8X7ppy&*IOfOdu z|IU*TkNDgN`~~1T-+<)Z-{s3`8Xo@L>+C?beaOdd4}gWPXNO3L*Ht?{Ar}?E9x%V) za+ZS-R}nDfZL|NCnmbk-i9{C-4E(0j0ZykAID7W893d|GeI&#)D*A4jr~sY?^WHLN z<8aCLxY`q_M0CsNU}@LGZk3 zCc2L->&tim==!xFDzD)&zeBeDl+Sn#b2FTUrghTb;90-Uu&%!kq9@9px3(^zeOb@`4 zC9P;}9rUR8_mB{>CaBza&6;a)@!}y6b$UWbBsx|13Cd0@HWFd5XWR*Ea)lW@^fZG|H<^eE2?i0Xa5bY<+s@yzziU*X`edmO*otN@8$pD2+ zm=GBQvrO?mXxedTT0e3*4T*#a$1%Zt7l+G}mD}Q*JZz1WDo~Lj)CIugkVvI& zhvU2oU`s?02cc!xh> zvtp^3qoZ5t^yz>7=#&msUwED;B4$GD07?^OH-Pdh zG@@>@tVe@}3Rl}F06)WVI>JnhO$VR=un0jO$GtwF3I(Al0Tdt Date: Thu, 11 Apr 2024 15:47:06 +0200 Subject: [PATCH 15/16] fix: changed svg-icons and removed unused css --- src/assets/icons/icon.tsx | 15 ++++----------- src/assets/icons/mic_off.svg | 5 +++++ src/assets/icons/mic_off_24dp.svg | 1 - src/assets/icons/mic_on.svg | 10 ++++++++++ src/assets/icons/mic_on_24dp.svg | 1 - 5 files changed, 19 insertions(+), 13 deletions(-) create mode 100644 src/assets/icons/mic_off.svg delete mode 100644 src/assets/icons/mic_off_24dp.svg create mode 100644 src/assets/icons/mic_on.svg delete mode 100644 src/assets/icons/mic_on_24dp.svg diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx index 40500e1d..e0ff9682 100644 --- a/src/assets/icons/icon.tsx +++ b/src/assets/icons/icon.tsx @@ -1,13 +1,6 @@ -import styled from "@emotion/styled"; -import MicMute from "./mic_off_24dp.svg"; -import MicUnmute from "./mic_on_24dp.svg"; +import MicMute from "./mic_off.svg"; +import MicUnmute from "./mic_on.svg"; -const Icon = styled.img` - width: 5rem; - padding-right: 1em; - pointer-events: none; -`; +export const MicMuted = () => off-microphone; -export const MicMuted = () => ; - -export const MicUnmuted = () => ; +export const MicUnmuted = () => on-microphone; diff --git a/src/assets/icons/mic_off.svg b/src/assets/icons/mic_off.svg new file mode 100644 index 00000000..e8243b03 --- /dev/null +++ b/src/assets/icons/mic_off.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/mic_off_24dp.svg b/src/assets/icons/mic_off_24dp.svg deleted file mode 100644 index 2379a5bb..00000000 --- a/src/assets/icons/mic_off_24dp.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/icons/mic_on.svg b/src/assets/icons/mic_on.svg new file mode 100644 index 00000000..97259022 --- /dev/null +++ b/src/assets/icons/mic_on.svg @@ -0,0 +1,10 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/mic_on_24dp.svg b/src/assets/icons/mic_on_24dp.svg deleted file mode 100644 index 2c7173fb..00000000 --- a/src/assets/icons/mic_on_24dp.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 22e7e7756b30b57df279a6fa08b0056de46e02c8 Mon Sep 17 00:00:00 2001 From: malmen237 Date: Thu, 11 Apr 2024 16:59:02 +0200 Subject: [PATCH 16/16] fix: cleaned the svg-files, added color and added css --- src/assets/icons/icon.tsx | 10 ++++++++-- src/assets/icons/mic_off.svg | 8 ++++---- src/assets/icons/mic_on.svg | 17 ++++++++--------- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx index e0ff9682..e84bf61a 100644 --- a/src/assets/icons/icon.tsx +++ b/src/assets/icons/icon.tsx @@ -1,6 +1,12 @@ +import styled from "@emotion/styled"; import MicMute from "./mic_off.svg"; import MicUnmute from "./mic_on.svg"; -export const MicMuted = () => off-microphone; +const Icon = styled.img` + width: 8rem; + padding-right: 1em; +`; -export const MicUnmuted = () => on-microphone; +export const MicMuted = () => ; + +export const MicUnmuted = () => ; diff --git a/src/assets/icons/mic_off.svg b/src/assets/icons/mic_off.svg index e8243b03..3b7b7b8a 100644 --- a/src/assets/icons/mic_off.svg +++ b/src/assets/icons/mic_off.svg @@ -1,5 +1,5 @@ - - - + + + \ No newline at end of file diff --git a/src/assets/icons/mic_on.svg b/src/assets/icons/mic_on.svg index 97259022..eafe0658 100644 --- a/src/assets/icons/mic_on.svg +++ b/src/assets/icons/mic_on.svg @@ -1,10 +1,9 @@ - - - - - - - - + + + + + + + + \ No newline at end of file