Grey out Call/Leave buttons while disabled so calling before joining is clearly blocked
1 changed file+26−8
src/App.tsxmodified+26−8View file
@@ -26,6 +26,13 @@ const dangerBtn: React.CSSProperties = {
2626 color: '#fff'
2727 }
2828
29+// Merged into a button's style whenever it is disabled, so the explicit
30+// background colors above don't leave a disabled button looking clickable.
31+const disabledStyle: React.CSSProperties = {
32+ opacity: 0.4,
33+ cursor: 'not-allowed'
34+}
35+
2936 function VideoView({
3037 stream,
3138 muted,
@@ -116,7 +123,12 @@ export default function App() {
116123 You are <strong>{name}</strong>{' '}
117124 <code style={{color: '#999'}}>{short(selfId)}</code>{' '}
118125 <button
119- style={{...btn, fontSize: '0.85rem', padding: '0.2rem 0.6rem'}}
126+ style={{
127+ ...btn,
128+ fontSize: '0.85rem',
129+ padding: '0.2rem 0.6rem',
130+ ...(inCall ? disabledStyle : null)
131+ }}
120132 onClick={() => network.leave()}
121133 disabled={inCall}
122134 >
@@ -244,13 +256,19 @@ export default function App() {
244256 {p.busy ? 'in a call' : 'available'}
245257 </td>
246258 <td style={{padding: '0.4rem', textAlign: 'right'}}>
247- <button
248- style={primaryBtn}
249- disabled={!name || call !== null || p.busy}
250- onClick={() => network.callPeer(p.peerId)}
251- >
252- Call
253- </button>
259+ {(() => {
260+ const disabled = !name || call !== null || p.busy
261+ return (
262+ <button
263+ style={disabled ? {...primaryBtn, ...disabledStyle} : primaryBtn}
264+ disabled={disabled}
265+ title={!name ? 'Enter an ID above to call' : undefined}
266+ onClick={() => network.callPeer(p.peerId)}
267+ >
268+ Call
269+ </button>
270+ )
271+ })()}
254272 </td>
255273 </tr>
256274 ))}