Refine media controls

public/app.js

@@ -10,7 +10,6 @@ const micSelect = document.querySelector("#mic-select");
 const cameraButton = document.querySelector("#camera-button");
 const micButton = document.querySelector("#mic-button");
 const shareButton = document.querySelector("#share-button");
-const leaveButton = document.querySelector("#leave-button");
 
 const roomId = "main";
 const nameStorageKey = "kkkmeet.displayName";
@@ -321,6 +320,11 @@ function setTrackEnabled(kind, enabled) {
   });
 }
 
+function updateToggleButton(button, enabled, enabledLabel, disabledLabel) {
+  button.setAttribute("aria-pressed", String(enabled));
+  button.textContent = enabled ? enabledLabel : disabledLabel;
+}
+
 nameForm.addEventListener("submit", (event) => {
   event.preventDefault();
   setDisplayName(nameInput.value);
@@ -342,13 +346,13 @@ nameInput.addEventListener("change", () => {
 
 cameraButton.addEventListener("click", () => {
   const enabled = cameraButton.getAttribute("aria-pressed") !== "true";
-  cameraButton.setAttribute("aria-pressed", String(enabled));
+  updateToggleButton(cameraButton, enabled, "📷 Camera on", "🚫 Camera off");
   setTrackEnabled("video", enabled);
 });
 
 micButton.addEventListener("click", () => {
   const enabled = micButton.getAttribute("aria-pressed") !== "true";
-  micButton.setAttribute("aria-pressed", String(enabled));
+  updateToggleButton(micButton, enabled, "🎙️ Mic on", "🔇 Mic muted");
   setTrackEnabled("audio", enabled);
 });
 
@@ -389,8 +393,6 @@ shareButton.addEventListener("click", async () => {
   };
 });
 
-leaveButton.addEventListener("click", leaveCall);
-
 const savedName = localStorage.getItem(nameStorageKey);
 if (savedName) {
   setDisplayName(savedName);

public/index.html

@@ -28,20 +28,23 @@
       <footer class="controls">
         <div class="control-panel">
           <div class="device-controls" aria-label="Media devices">
-            <label>
-              Camera
-              <select id="camera-select"></select>
-            </label>
-            <label>
-              Microphone
-              <select id="mic-select"></select>
-            </label>
+            <div class="device-row">
+              <button id="camera-button" type="button" aria-pressed="true">📷 Camera on</button>
+              <label>
+                <span>Camera</span>
+                <select id="camera-select"></select>
+              </label>
+            </div>
+            <div class="device-row">
+              <button id="mic-button" type="button" aria-pressed="true">🎙️ Mic on</button>
+              <label>
+                <span>Microphone</span>
+                <select id="mic-select"></select>
+              </label>
+            </div>
           </div>
           <div class="control-actions" aria-label="Call controls">
-            <button id="camera-button" type="button" aria-pressed="true">Camera</button>
-            <button id="mic-button" type="button" aria-pressed="true">Mic</button>
             <button id="share-button" type="button">Share Screen</button>
-            <button id="leave-button" type="button" class="danger">Leave</button>
           </div>
         </div>
         <article class="self-preview">

public/styles.css

@@ -102,10 +102,6 @@ button[aria-pressed="false"] {
   background: #4a535f;
 }
 
-button.danger {
-  background: #c73838;
-}
-
 .stage {
   display: grid;
   min-height: 0;
@@ -184,15 +180,36 @@ button.danger {
 }
 
 .device-controls {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(220px, 360px));
   justify-content: center;
-  flex-wrap: wrap;
   gap: 12px;
 }
 
-.device-controls label {
+.device-row {
+  display: grid;
+  grid-template-columns: 132px minmax(0, 1fr);
+  align-items: end;
+  gap: 10px;
+  min-width: 0;
+}
+
+.device-row button {
+  height: 48px;
+  min-width: 0;
+}
+
+.device-row button[aria-pressed="false"] {
+  background: #5a6470;
+}
+
+.device-row label {
   display: grid;
   gap: 6px;
+  min-width: 0;
+}
+
+.device-row label span {
   color: #aeb7c3;
   font-size: 12px;
   font-weight: 650;
@@ -291,8 +308,12 @@ button.danger {
     grid-template-columns: 1fr;
   }
 
+  .device-row {
+    grid-template-columns: 120px minmax(0, 1fr);
+  }
+
   .control-actions button {
-    min-width: calc(50% - 6px);
+    min-width: min(100%, 180px);
   }
 
   .self-preview {