From 50a16adbcd253ac943d37110e0e3a2a55439984d Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Thu, 12 May 2022 14:10:13 -0400
Subject: fix: gives recording box unique id to allow multiple streams at the
 same time'

---
 src/client/views/nodes/RecordingBox/RecordingView.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index e9450a5dd..87716e9cc 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -18,6 +18,7 @@ interface MediaSegment {
 interface IRecordingViewProps {
       setResult: (info: Upload.FileInformation, trackScreen: boolean) => void
       setDuration: (seconds: number) => void
+      id: string
 }
 
 const MAXTIME = 100000;
@@ -88,7 +89,7 @@ export function RecordingView(props: IRecordingViewProps) {
 
       useEffect(() => {
             // get access to the video element on every render
-            videoElementRef.current = document.getElementById('video') as HTMLVideoElement;
+            videoElementRef.current = document.getElementById(`video-${props.id}`) as HTMLVideoElement;
       })
 
       useEffect(() => {
@@ -225,7 +226,7 @@ export function RecordingView(props: IRecordingViewProps) {
       return (
             <div className="recording-container">
                   <div className="video-wrapper">
-                        <video id="video"
+                        <video id={`video-${props.id}`}
                               autoPlay
                               muted
                               onTimeUpdate={handleOnTimeUpdate}
-- 
cgit v1.2.3-70-g09d2