From 1e5e2c682c666bc3e123d993c778828fbc5cae2b Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Sat, 11 Oct 2025 00:24:07 -0700
Subject: [PATCH] Audio/Video indicators are getting closer

---
 client/src/MediaControl.css | 31 ++++++++++++++++++--
 client/src/MediaControl.tsx | 58 ++++++++++++++++++-------------------
 client/src/NameSetter.tsx   |  3 ++
 client/src/PlayerList.tsx   |  1 -
 client/src/RoomView.css     |  2 +-
 5 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/client/src/MediaControl.css b/client/src/MediaControl.css
index 6e45cb2..f786e27 100644
--- a/client/src/MediaControl.css
+++ b/client/src/MediaControl.css
@@ -44,7 +44,7 @@
   height: 3.75rem;
   min-width: 3.5rem;
   min-height: 1.8725rem;
-  z-index: 1200;
+  z-index: 12000; /* Above Hand and other MUI elements */
   border-radius: 0.25rem;
 }
 
@@ -78,6 +78,7 @@
   z-index: 1251; /* Above the Indicators but below active move handles */
   background-color: rgba(64, 64, 64, 64);
   backdrop-filter: blur(5px);
+  opacity: 0.85;
 }
 
 .MediaControl:hover .Controls {
@@ -97,6 +98,7 @@
   flex-direction: column;
   pointer-events: none; /* non-interactive */
   align-items: flex-start;
+  opacity: 0.5;
 }
 
 .Indicators .IndicatorRow {
@@ -108,7 +110,7 @@
   background: rgba(0, 0, 0, 0.45);
   padding: 0.12rem;
   border-radius: 999px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
   color: white;
   display: inline-flex;
   align-items: center;
@@ -143,6 +145,31 @@
   cursor: pointer;
 }
 
+/* Invert highlight behavior for control buttons:
+   - Buttons are transparent by default so they don't visually obscure the video when not hovered.
+   - On hover/focus (keyboard or pointer) they show a light background to indicate interactivity.
+   - Scope to MUI IconButton root class to avoid affecting other controls.
+*/
+.MediaControl .Controls .MuiIconButton-root {
+  background: transparent;
+  transition: background-color 120ms ease, color 120ms ease;
+  padding: 0.25rem;
+  margin: 0.08rem;
+}
+.MediaControl .Controls .MuiIconButton-root:hover,
+.MediaControl .Controls .MuiIconButton-root:focus {
+  background: rgba(255,255,255,0.5); /* subtle light highlight on hover/focus */
+}
+.MediaControl .Controls .MuiIconButton-root:active {
+  background: rgba(255,255,255,0.18);
+}
+
+/* Ensure accessible focus indicator for keyboard users */
+.MediaControl .Controls .MuiIconButton-root:focus-visible {
+  outline: 2px solid rgba(255,255,255,0.22);
+  outline-offset: 2px;
+}
+
 .moveable-control-box {
   border: none;
   --moveable-color: unset !important;
diff --git a/client/src/MediaControl.tsx b/client/src/MediaControl.tsx
index 3612363..e2c5023 100644
--- a/client/src/MediaControl.tsx
+++ b/client/src/MediaControl.tsx
@@ -1753,42 +1753,40 @@ const MediaControl: React.FC<MediaControlProps> = ({
               </>
             ) : (
               <>
-                {muted ? <VolumeOff color={colorAudio} /> : <VolumeUp color={colorAudio} />}
-                {remoteAudioMuted && <MicOff />}
+                {muted ? <VolumeOff /> : <VolumeUp />}
                 {videoOn ? <Videocam /> : <VideocamOff />}
               </>
             )}
+            {!isSelf && (
+              <>
+                {remoteAudioMuted && <MicOff color="warning" />}
+                {remoteVideoOff && <VideocamOff color="warning" />}
+              </>
+            )}
           </Box>
 
           {/* Interactive controls: rendered inside target but referenced separately */}
-          <Box className="Controls" ref={controlsRef}>
-            {isSelf ? (
-              <IconButton onClick={toggleMute}>
-                {muted ? <MicOff color={colorAudio} /> : <Mic color={colorAudio} />}
-              </IconButton>
-            ) : (
-              <Box sx={{ display: "flex", flexDirection: "row", gap: 0, alignItems: "center", p: 0, m: 0 }}>
-                <IconButton onClick={toggleMute}>
-                  {muted ? <VolumeOff color={colorAudio} /> : <VolumeUp color={colorAudio} />}
-                </IconButton>
-                {remoteAudioMuted && <MicOff color="warning" />}
-              </Box>
-            )}
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "row",
-                gap: 0,
-                alignItems: "center",
-                p: 0,
-                m: 0,
-              }}
-            >
-              <IconButton onClick={toggleVideo}>
-                {videoOn ? <Videocam color={colorVideo} /> : <VideocamOff color={colorVideo} />}
-              </IconButton>
-              {!isSelf && remoteVideoOff && <VideocamOff color="warning" />}
-            </Box>
+          <Box
+            className="Controls"
+            ref={controlsRef}
+            sx={{ display: "flex", flexDirection: "row", justifyItems: "center" }}
+          >
+            <IconButton onClick={toggleMute}>
+              {isSelf ? (
+                muted ? (
+                  <MicOff color={colorAudio} />
+                ) : (
+                  <Mic color={colorAudio} />
+                )
+              ) : muted ? (
+                <VolumeOff color={colorAudio} />
+              ) : (
+                <VolumeUp color={colorAudio} />
+              )}
+            </IconButton>
+            <IconButton onClick={toggleVideo}>
+              {videoOn ? <Videocam color={colorVideo} /> : <VideocamOff color={colorVideo} />}
+            </IconButton>
           </Box>
           {isValid ? (
             peer.attributes?.srcObject && (
diff --git a/client/src/NameSetter.tsx b/client/src/NameSetter.tsx
index a980e45..68fac1b 100644
--- a/client/src/NameSetter.tsx
+++ b/client/src/NameSetter.tsx
@@ -51,6 +51,9 @@ const NameSetter: React.FC<NameSetterProps> = ({ onNameSet, initialName = "", in
       event.preventDefault();
       if (passwordInputRef.current) {
         passwordInputRef.current.focus();
+      } else {
+        // No password input present — submit the name directly
+        handleSubmit();
       }
     }
   };
diff --git a/client/src/PlayerList.tsx b/client/src/PlayerList.tsx
index ec24127..219abf0 100644
--- a/client/src/PlayerList.tsx
+++ b/client/src/PlayerList.tsx
@@ -195,7 +195,6 @@ const PlayerList: React.FC = () => {
                 {player.name && player.live && peerObj && (player.local || player.has_media !== false) ? (
                   <>
                     <MediaControl
-                      sx={{ border: "3px solid blue" }}
                       className="Medium"
                       key={player.session_id}
                       peer={peerObj}
diff --git a/client/src/RoomView.css b/client/src/RoomView.css
index 7f47253..adb9191 100644
--- a/client/src/RoomView.css
+++ b/client/src/RoomView.css
@@ -93,7 +93,7 @@
   justify-content: space-between;
   width: 25rem;
   max-width: 25rem;
-  z-index: 5000;
+  z-index: 11500;
 }
 
 .RoomView .Sidebar .Chat {