ptt panel

web/src/components/PttPanel.jsx

@@ -1,51 +1,38 @@
-export default function PttPanel({
-  groups, floors, selected, setSelected,
-  onTalkStart, onTalkStop, talking, muted, setMuted,
-}) {
+export default function PttPanel({ groups, floors, selected, onSelect, talking, muted, setMuted, onTalkStart, onTalkStop }) {
   const floor = selected != null ? floors[selected] : null;
-  const busy = floor && floor.memberId !== 0;
+  const canTalk = selected != null && (!floor || floor.memberId === 0);
 
   return (
-    <section className="panel ptt-panel">
+    <section className="panel">
       <h2>Push to talk</h2>
       <div className="chips">
         {groups.map((g) => (
-          <button
-            key={g.id}
-            className={`chip ${selected === g.id ? 'active' : ''}`}
-            style={{ '--c': g.color }}
-            onClick={() => setSelected(g.id)}
-          >
-            {g.name}{floors[g.id] ? ' ●' : ''}
+          <button key={g.id} className={`chip ${selected === g.id ? 'active' : ''}`} onClick={() => onSelect(g.id)}>
+            {g.name}
           </button>
         ))}
       </div>
       <div className="floor">
-        {floor ? (
-          <span className="talking">🎙 {floor.name} is talking</span>
-        ) : (
-          <span className="muted">Floor open</span>
-        )}
+        {floor ? <span className="talking">🎙 {floor.name} is talking</span> : 'Floor open'}
       </div>
       <button
-        className="ptt"
-        disabled={!selected || busy}
+        className={`ptt-btn ${talking ? 'talking' : ''}`}
+        disabled={!canTalk}
         onMouseDown={onTalkStart}
         onMouseUp={onTalkStop}
         onMouseLeave={() => talking && onTalkStop()}
         onTouchStart={(e) => { e.preventDefault(); onTalkStart(); }}
         onTouchEnd={(e) => { e.preventDefault(); onTalkStop(); }}
       >
-        {talking ? '● TALKING' : 'HOLD TO TALK'}
+        {talking ? '● TRANSMITTING' : 'HOLD TO TALK'}
       </button>
-      <p className="muted small">
-        Select a talkgroup, then hold the button. One speaker per group —
-        the floor indicator shows who has it.
-      </p>
-      <label className="muted small">
-        <input type="checkbox" style={{ width: 'auto' }} checked={muted} onChange={(e) => setMuted(e.target.checked)} />{' '}
-        Mute incoming audio
+      <label className="mute-row">
+        <input type="checkbox" checked={muted} onChange={(e) => setMuted(e.target.checked)} />
+        Mute incoming audio & alarms
       </label>
+      <p className="muted" style={{ marginTop: 8 }}>
+        16 kHz PCM relayed over WebSocket. Hold to request the floor; release to yield it.
+      </p>
     </section>
   );
 }