fix: remote video not showing — Room ChangeNotifier not listened to

_RemoteVideoView and _LocalVideoPip watched the Riverpod provider but
not the LiveKit Room's ChangeNotifier. When a remote participant joined
or published a track, notifyListeners() fired but no widget rebuilt.

Fix: wrap both views in ListenableBuilder(listenable: room) so they
rebuild on every Room event (participant connect, track subscribe, etc).

Added _AudioOnlyPlaceholder for when remote has audio but no video.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

lib/features/calls/presentation/call_screen.dart

@@ -1,4 +1,4 @@
-// Version: 1.2.1 | Created: 2026-04-01 | Updated: 2026-04-03
+// Version: 1.3.0 | Created: 2026-04-01 | Updated: 2026-04-03
 // Full call screen with LiveKit video/audio.
 // - Remote video: full screen background
 // - Local video: picture-in-picture overlay (bottom right)
@@ -107,6 +107,8 @@ class _CallScreenState extends ConsumerState<CallScreen> {
 // Remote video view
 // ---------------------------------------------------------------------------
 
+/// Listens to the LiveKit Room's ChangeNotifier so it rebuilds when
+/// remote participants join/leave or publish/unpublish tracks.
 class _RemoteVideoView extends ConsumerWidget {
   const _RemoteVideoView();
 
@@ -117,23 +119,28 @@ class _RemoteVideoView extends ConsumerWidget {
       return const _NoVideoPlaceholder();
     }
 
-    final remoteParticipants = room.remoteParticipants.values.toList();
+    // Room extends ChangeNotifier — rebuilds on every participant/track event.
-    if (remoteParticipants.isEmpty) {
+    return ListenableBuilder(
-      return const _NoVideoPlaceholder();
+      listenable: room,
-    }
+      builder: (context, _) {
+        final remoteParticipants = room.remoteParticipants.values.toList();
+        if (remoteParticipants.isEmpty) {
+          return const _NoVideoPlaceholder();
+        }
 
-    // Show the first remote participant's first video track.
+        final firstParticipant = remoteParticipants.first;
-    final firstParticipant = remoteParticipants.first;
+        final videoPubs = firstParticipant.videoTrackPublications;
-    final videoPubs = firstParticipant.videoTrackPublications;
+        if (videoPubs.isEmpty || videoPubs.first.track == null) {
-    if (videoPubs.isEmpty || videoPubs.first.track == null) {
+          // Participant joined but no video track yet — show audio indicator.
-      return const _NoVideoPlaceholder();
+          return _AudioOnlyPlaceholder(name: firstParticipant.identity);
-    }
+        }
 
-    // safe: checked non-null above
+        final videoTrack = videoPubs.first.track!;
-    final videoTrack = videoPubs.first.track!;
+        return VideoTrackRenderer(
-    return VideoTrackRenderer(
+          videoTrack,
-      videoTrack,
+          fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
-      fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
+        );
+      },
     );
   }
 }
@@ -148,32 +155,38 @@ class _LocalVideoPip extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final room = ref.watch(liveKitServiceProvider).activeRoom;
-    final local = room?.localParticipant;
+    if (room == null) return const SizedBox.shrink();
-    if (local == null) return const SizedBox.shrink();
 
-    final videoPubs = local.videoTrackPublications;
+    return ListenableBuilder(
-    if (videoPubs.isEmpty || videoPubs.first.track == null) {
+      listenable: room,
-      return const SizedBox.shrink();
+      builder: (context, _) {
-    }
+        final local = room.localParticipant;
+        if (local == null) return const SizedBox.shrink();
 
-    // safe: checked non-null above
+        final videoPubs = local.videoTrackPublications;
-    final localTrack = videoPubs.first.track!;
+        if (videoPubs.isEmpty || videoPubs.first.track == null) {
-    return Positioned(
+          return const SizedBox.shrink();
-      right: 16,
+        }
-      bottom: 120,
+
-      child: Container(
+        final localTrack = videoPubs.first.track!;
-        width: 100,
+        return Positioned(
-        height: 150,
+          right: 16,
-        decoration: BoxDecoration(
+          bottom: 120,
-          borderRadius: BorderRadius.circular(12),
+          child: Container(
-          border: Border.all(color: Colors.white38, width: 1),
+            width: 100,
-        ),
+            height: 150,
-        clipBehavior: Clip.hardEdge,
+            decoration: BoxDecoration(
-        child: VideoTrackRenderer(
+              borderRadius: BorderRadius.circular(12),
-          localTrack,
+              border: Border.all(color: Colors.white38, width: 1),
-          mirrorMode: VideoViewMirrorMode.mirror,
+            ),
-        ),
+            clipBehavior: Clip.hardEdge,
-      ),
+            child: VideoTrackRenderer(
+              localTrack,
+              mirrorMode: VideoViewMirrorMode.mirror,
+            ),
+          ),
+        );
+      },
     );
   }
 }
@@ -182,6 +195,39 @@ class _LocalVideoPip extends ConsumerWidget {
 // Placeholders and overlays
 // ---------------------------------------------------------------------------
 
+class _AudioOnlyPlaceholder extends StatelessWidget {
+  const _AudioOnlyPlaceholder({required this.name});
+  final String name;
+
+  @override
+  Widget build(BuildContext context) {
+    final initials = name.isNotEmpty ? name[0].toUpperCase() : '?';
+    return Container(
+      color: const Color(0xFF1A1A2E),
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            CircleAvatar(
+              radius: 48,
+              backgroundColor: const Color(0xFF5C35C9),
+              child: Text(initials,
+                  style: const TextStyle(fontSize: 36, color: Colors.white)),
+            ),
+            const SizedBox(height: 16),
+            Text(name,
+                style: const TextStyle(color: Colors.white, fontSize: 18)),
+            const SizedBox(height: 8),
+            Text('Audio only',
+                style: TextStyle(
+                    color: Colors.white.withAlpha(153), fontSize: 14)),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class _NoVideoPlaceholder extends StatelessWidget {
   const _NoVideoPlaceholder();