From e61dfe1922374464439cd4dae7827cca3ff8afd0 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Thu, 24 Mar 2022 14:59:48 -0700
Subject: [PATCH] All video windows are now moveable!

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/MediaControl.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/MediaControl.js b/client/src/MediaControl.js
index e702950..29dbd27 100644
--- a/client/src/MediaControl.js
+++ b/client/src/MediaControl.js
@@ -571,8 +571,11 @@ const MediaControl = ({isSelf, peer, className}) => {
   });
 
   useEffect(() => {
-    setTarget(document.querySelectorAll(".MediaControl")[0]);
-  }, []);
+    if (peer && peer.name) {
+      setTarget(document.querySelector(
+        `.MediaControl[data-peer="${peer.name}"]`));
+    }
+  }, [setTarget, peer]);
 
   /* local state is used to trigger re-renders, and the global
    * state is kept up to date in the peers object so re-assignment
@@ -635,9 +638,13 @@ const MediaControl = ({isSelf, peer, className}) => {
     colorAudio = (isValid && media.hasAudio) ? 'primary' : 'disabled',
     colorVideo = (isValid && media.hasVideo) ? 'primary' : 'disabled';
 
+  if (!peer) {
+    return <></>;
+  }
+
   return <>
     <div className="MediaControlSpacer"/>
-    <div className={`MediaControl ${className}`}>
+    <div className={`MediaControl ${className}`} data-peer={peer.name}>
       <div className="Controls" >
       { isSelf && <div onClick={toggleMute}>
           { muted && <MicOff color={colorAudio}/> }