Fixed Moveable

client/src/MediaControl.css

@@ -7,6 +7,13 @@
   opacity: 1;
 }
 
+.MediaControlContainer {
+  position: relative; /* CRITICAL: This creates the positioning context */
+  display: inline-block;
+  width: max-content; /* Ensure container sizes to content */
+  height: max-content;
+}
+
 .MediaControlSpacer {
   display: flex;
   position: relative;
@@ -30,25 +37,34 @@
 
 .MediaControl {
   display: flex;
-  position: absolute;
-  align-items: center;
+  position: absolute; /* Out of flow */
+  top: 0; /* Start at top of container */
+  left: 0; /* Start at left of container */
   width: 5rem;
   height: 3.75rem;
   min-width: 5rem;
   min-height: 3.75rem;
   z-index: 50000;
   border-radius: 0.25rem;
+  border: 1px solid green;
 }
 
 .MediaControl .Video {
-  position: relative;
+  display: flex;
   width: 100%;
   height: 100%;
+  position: relative;
+  top: 0;
+  left: 0;
   background-color: #444;
   border-radius: 0.25rem;
   border: 1px solid black;
 }
 
+video {
+  border: 5px solid purple;
+}
+
 .MediaControl.Medium {
   width: 11.5em;
   height: 8.625em;
@@ -56,37 +72,25 @@
   min-height: 8.625em;
 }
 
-.MediaControl > div {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-right: 0.25rem;
-}
-
 .MediaControl .Controls {
   display: flex;
   position: absolute;
-  left: 0.5em;
-  bottom: 0.5em;
-  justify-content: flex-end;
+  gap: 0;
+  left: 0;
+  bottom: 0;
+  flex-direction: column;
   z-index: 1;
+  align-items: center;
+  justify-content: center
 }
 
 .MediaControl.Small .Controls {
-  left: 0;
-  bottom: unset;
   justify-content: center;
 }
 
 .MediaControl .Controls > div {
-  display: flex;
   border-radius: 0.25em;
   cursor: pointer;
-  padding: 0.25em;
 }
 
 .MediaControl .Controls > div:hover {

client/src/MediaControl.tsx

@@ -1308,6 +1308,7 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
     width?: number;
     height?: number;
   }>({ translate: [0, 0] });
+  const containerRef = useRef<HTMLDivElement>(null);
   const targetRef = useRef<HTMLDivElement>(null);
   const spacerRef = useRef<HTMLDivElement>(null);
   const moveableRef = useRef<any>(null);
@@ -1319,6 +1320,15 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
     setVideoOn(peer.video_on);
   }, [peer]);
 
+  // Initialize size to match spacer
+  useEffect(() => {
+    if (spacerRef.current && targetRef.current && !frame.width) {
+      const spacerRect = spacerRef.current.getBoundingClientRect();
+      targetRef.current.style.width = `${spacerRect.width}px`;
+      targetRef.current.style.height = `${spacerRect.height}px`;
+    }
+  }, [frame.width]);
+
   useEffect(() => {
     if (!peer || peer.dead || !peer.attributes?.srcObject) {
       console.log(
@@ -1457,13 +1467,30 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
   const colorVideo = isValid ? "primary" : "disabled";
 
   return (
-    <div className="MediaControlContainer">
-      {/* Drop target / spacer that stays in place */}
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        minWidth: "200px",
+        minHeight: "100px",
+      }}
+    >
+      <div
+        ref={containerRef}
+        className="MediaControlContainer"
+        style={{
+          position: "relative", // Ensure this is set inline too
+          width: "max-content",
+          height: "max-content",
+        }}
+      >
+        {/* Drop target spacer */}
         <div
           ref={spacerRef}
           className={`MediaControlSpacer ${className}`}
           style={{
-          opacity: isDragging ? 1 : 0.3, // Make more visible when dragging
+            opacity: isDragging ? 1 : 0.3,
             transition: "opacity 0.2s",
           }}
         >
@@ -1476,6 +1503,7 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
                 transform: "translate(-50%, -50%)",
                 fontSize: "0.7em",
                 color: "#888",
+                pointerEvents: "none",
               }}
             >
               Drop here
@@ -1483,36 +1511,36 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
           )}
         </div>
 
-      {/* Moveable element - now absolute positioned */}
+        {/* Moveable element - positioned absolute relative to container */}
         <div
           ref={targetRef}
           className={`MediaControl ${className}`}
           data-peer={peer.session_id}
           style={{
-          left: "0px",
+            position: "absolute", // Ensure this is set
             top: "0px",
+            left: "0px",
             width: frame.width ? `${frame.width}px` : undefined,
             height: frame.height ? `${frame.height}px` : undefined,
             transform: `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`,
           }}
         >
-        <div className="Controls">
+          <Box className="Controls">
             {isSelf ? (
-            <div onTouchStart={toggleMute} onClick={toggleMute}>
-              {muted ? <MicOff color={colorAudio} /> : <Mic color={colorAudio} />}
-            </div>
+              // onTouchStart={toggleMute}
+              <div onClick={toggleMute}>{muted ? <MicOff color={colorAudio} /> : <Mic color={colorAudio} />}</div>
             ) : (
-            <div onTouchStart={toggleMute} onClick={toggleMute}>
+              <div onClick={toggleMute}>
                 {muted ? <VolumeOff color={colorAudio} /> : <VolumeUp color={colorAudio} />}
               </div>
             )}
-          <div onTouchStart={toggleVideo} onClick={toggleVideo}>
+            <div onClick={toggleVideo}>
               {videoOn ? <Videocam color={colorVideo} /> : <VideocamOff color={colorVideo} />}
             </div>
-        </div>
+          </Box>
           {isValid ? (
             peer.attributes?.srcObject && (
-            <Box sx={{ position: "relative" }}>
+              <>
                 <Video
                   key={`video-${peer.session_id}-${peer.attributes.srcObject.id}`}
                   className="Video"
@@ -1523,19 +1551,20 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
                   muted={peer.local || muted}
                 />
                 <WebRTCStatus isNegotiating={peer.isNegotiating || false} connectionState={peer.connectionState} />
-            </Box>
+              </>
             )
           ) : (
-          <Box sx={{ position: "relative" }}>
+            <>
               <div className="Video">Waiting for media…</div>
               <WebRTCStatus isNegotiating={peer.isNegotiating || false} connectionState={peer.connectionState} />
-          </Box>
+            </>
           )}
         </div>
 
         <Moveable
           ref={moveableRef}
           flushSync={flushSync}
+          container={containerRef.current} // Constrain to container if needed
           pinchable={true}
           draggable={true}
           target={targetRef.current}
@@ -1622,6 +1651,7 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
           }}
         />
       </div>
+    </Box>
   );
 };