feat: auto subscribe on app join

apps/client/src/pages/App.tsx

@@ -56,6 +56,7 @@ function App() {
   const videoRef = useRef<HTMLVideoElement>(null)
 
   const [relaySubscribed, setRelaySubscribed] = useState(false)
+  const hasAutoSubscribedRef = useRef(false)
 
   // Routing state
   const [currentPage, setCurrentPage] = useState<'lobby' | 'room'>('lobby')
@@ -132,6 +133,22 @@ function App() {
     }
   }, [])
 
+  // Auto-subscribe to relay once when app loads
+  useEffect(() => {
+    const autoSubscribe = async () => {
+      if (!hasAutoSubscribedRef.current && isWebTransportSupported) {
+        try {
+          await subscribeToDemo()
+          setRelaySubscribed(true)
+          hasAutoSubscribedRef.current = true
+        } catch (err) {
+          console.error('[App] Auto-subscribe failed:', err)
+        }
+      }
+    }
+    autoSubscribe()
+  }, [isWebTransportSupported])
+
   // Update URL when page changes
   useEffect(() => {
     if (currentPage === 'lobby') {
@@ -522,22 +539,6 @@ function App() {
     }
   }, []) // Empty dependency array - only create service once
 
-  // Handle relay subscription
-  const handleSubscribeClick = async () => {
-    try {
-      setRequestState({ isLoading: true, error: null })
-      await subscribeToDemo()
-      setRelaySubscribed(true)
-      setRequestState({ isLoading: false, error: null })
-    } catch (err) {
-      console.error('[App] Subscribe failed', err)
-      setRequestState({
-        isLoading: false,
-        error: err instanceof Error ? err.message : String(err),
-      })
-    }
-  }
-
   const handleRequestRooms = useCallback(() => {
     if (syncService && syncService.isConnected()) {
       syncService.requestRoomsList()
@@ -600,11 +601,6 @@ function App() {
       setCurrentRoomId(roomId)
       setCurrentPage('room')
 
-      if (!relaySubscribed) {
-        await subscribeToDemo()
-        setRelaySubscribed(true)
-      }
-
       await handleJoinRoomClick(role)
 
     } catch (err) {
@@ -1051,38 +1047,6 @@ function App() {
                 </div>
               )}
 
-              {/* Optional Subscribe Button */}
-              <div
-                style={{
-                  padding: '16px',
-                  backgroundColor: '#f8f9fa',
-                  borderRadius: '8px',
-                  border: '1px solid #dee2e6',
-                  maxWidth: '500px',
-                  margin: '0 auto 20px',
-                  textAlign: 'center',
-                }}
-              >
-                <button
-                  type="button"
-                  onClick={handleSubscribeClick}
-                  disabled={requestState.isLoading || relaySubscribed || !isWebTransportSupported}
-                  className="mp4-requester-button"
-                  style={{
-                    backgroundColor: relaySubscribed ? '#28a745' : '#577B9F',
-                    cursor: relaySubscribed || !isWebTransportSupported ? 'default' : 'pointer',
-                    opacity: relaySubscribed || !isWebTransportSupported ? 0.7 : 1,
-                  }}
-                >
-                  {relaySubscribed ? '✓ Subscribed to Relay' : 'Subscribe to Relay (Optional)'}
-                </button>
-                <p style={{ fontSize: '0.85em', color: '#6c757d', marginTop: '8px', marginBottom: 0 }}>
-                  {relaySubscribed
-                    ? 'Relay connection established'
-                    : 'Subscribe manually if needed (auto-subscribes on join)'}
-                </p>
-              </div>
-
               <RoomControls
                 onJoinRoom={handleJoinRoom}
                 onRequestRooms={handleRequestRooms}