💄 Redesign the video of the call

lib/pods/chat/call.dart

@@ -217,7 +217,9 @@ class CallNotifier extends _$CallNotifier {
 
   Future<void> joinRoom(SnChatRoom room) async {
     var roomId = room.id;
-    if (_roomId == roomId && _room != null) {
+    if (_roomId == roomId &&
+        _room != null &&
+        _room?.connectionState == lk.ConnectionState.connected) {
       talker.info('[Call] Call skipped. Already has data');
       return;
     } else if (_room != null) {

lib/widgets/chat/call_content.dart

@@ -67,7 +67,9 @@ class CallContent extends HookConsumerWidget {
     if (mainSpeakers.isEmpty && participants.isNotEmpty) {
       mainSpeakers.add(participants.first);
     }
-    return Column(
+    return Wrap(
+      alignment: WrapAlignment.center,
+      runAlignment: WrapAlignment.center,
       children: [
         for (final speaker in mainSpeakers)
           Expanded(child: CallParticipantTile(live: speaker)),

lib/widgets/chat/call_participant_tile.dart

@@ -8,6 +8,59 @@ import 'package:livekit_client/livekit_client.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:styled_widget/styled_widget.dart';
 
+class SpeakingRipple extends StatelessWidget {
+  final double size;
+  final double audioLevel;
+  final bool isSpeaking;
+  final Widget child;
+
+  const SpeakingRipple({
+    super.key,
+    required this.size,
+    required this.audioLevel,
+    required this.isSpeaking,
+    required this.child,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final avatarRadius = size / 2;
+    final clampedLevel = audioLevel.clamp(0.0, 1.0);
+    final rippleRadius = avatarRadius + clampedLevel * (size * 0.333);
+
+    return SizedBox(
+      width: size + 8,
+      height: size + 8,
+      child: TweenAnimationBuilder<double>(
+        tween: Tween<double>(
+          begin: avatarRadius,
+          end: isSpeaking ? rippleRadius : avatarRadius,
+        ),
+        duration: const Duration(milliseconds: 250),
+        curve: Curves.easeOut,
+        builder: (context, animatedRadius, child) {
+          return Stack(
+            alignment: Alignment.center,
+            children: [
+              if (isSpeaking)
+                Container(
+                  width: animatedRadius * 2,
+                  height: animatedRadius * 2,
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: Colors.green.withOpacity(0.75 + 0.25 * clampedLevel),
+                  ),
+                ),
+              child!,
+            ],
+          );
+        },
+        child: SizedBox(width: size, height: size, child: child),
+      ),
+    );
+  }
+}
+
 class SpeakingRippleAvatar extends HookConsumerWidget {
   final CallParticipantLive live;
   final double size;
@@ -18,79 +71,58 @@ class SpeakingRippleAvatar extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final account = ref.watch(accountProvider(live.participant.identity));
 
-    final avatarRadius = size / 2;
+    return SpeakingRipple(
-    final clampedLevel = live.remoteParticipant.audioLevel.clamp(0.0, 1.0);
+      size: size,
-    final rippleRadius = avatarRadius + clampedLevel * (size * 0.333);
+      audioLevel: live.remoteParticipant.audioLevel,
-    return SizedBox(
+      isSpeaking: live.remoteParticipant.isSpeaking,
-      width: size + 8,
+      child: Stack(
-      height: size + 8,
+        children: [
-      child: TweenAnimationBuilder<double>(
+          Container(
-        tween: Tween<double>(
+            width: size,
-          begin: avatarRadius,
+            height: size,
-          end: live.remoteParticipant.isSpeaking ? rippleRadius : avatarRadius,
-        ),
-        duration: const Duration(milliseconds: 250),
-        curve: Curves.easeOut,
-        builder: (context, animatedRadius, child) {
-          return Stack(
             alignment: Alignment.center,
-            children: [
+            decoration: const BoxDecoration(shape: BoxShape.circle),
-              if (live.remoteParticipant.isSpeaking)
+            child: account.when(
-                Container(
+              data:
-                  width: animatedRadius * 2,
+                  (value) => CallParticipantGestureDetector(
-                  height: animatedRadius * 2,
+                    participant: live,
-                  decoration: BoxDecoration(
+                    child: ProfilePictureWidget(
-                    shape: BoxShape.circle,
+                      file: value.profile.picture,
-                    color: Colors.green.withOpacity(0.75 + 0.25 * clampedLevel),
+                      radius: size / 2,
+                    ),
                   ),
+              error:
+                  (_, _) => CircleAvatar(
+                    radius: size / 2,
+                    child: const Icon(Symbols.person_remove),
+                  ),
+              loading:
+                  () => CircleAvatar(
+                    radius: size / 2,
+                    child: CircularProgressIndicator(),
+                  ),
+            ),
+          ),
+          if (live.remoteParticipant.isMuted)
+            Positioned(
+              bottom: 0,
+              right: 0,
+              child: Container(
+                width: 24,
+                height: 24,
+                decoration: BoxDecoration(
+                  color: Colors.red,
+                  borderRadius: BorderRadius.circular(12),
+                  border: Border.all(color: Colors.white, width: 2),
                 ),
-              Container(
+                child: const Icon(
-                width: size,
+                  Symbols.mic_off,
-                height: size,
+                  size: 14,
-                alignment: Alignment.center,
+                  color: Colors.white,
-                decoration: BoxDecoration(shape: BoxShape.circle),
-                child: account.when(
-                  data:
-                      (value) => CallParticipantGestureDetector(
-                        participant: live,
-                        child: ProfilePictureWidget(
-                          file: value.profile.picture,
-                          radius: size / 2,
-                        ),
-                      ),
-                  error:
-                      (_, _) => CircleAvatar(
-                        radius: size / 2,
-                        child: const Icon(Symbols.person_remove),
-                      ),
-                  loading:
-                      () => CircleAvatar(
-                        radius: size / 2,
-                        child: CircularProgressIndicator(),
-                      ),
                 ),
               ),
-              if (live.remoteParticipant.isMuted)
+            ),
-                Positioned(
+        ],
-                  bottom: 4,
-                  right: 4,
-                  child: Container(
-                    width: 20,
-                    height: 20,
-                    decoration: BoxDecoration(
-                      color: Colors.red,
-                      borderRadius: BorderRadius.all(Radius.circular(10)),
-                    ),
-                    child: const Icon(
-                      Symbols.mic_off,
-                      size: 14,
-                      fill: 1,
-                    ).padding(left: 1.5, top: 1.5),
-                  ),
-                ),
-            ],
-          );
-        },
       ),
     );
   }
@@ -103,6 +135,8 @@ class CallParticipantTile extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final userInfo = ref.watch(accountProvider(live.participant.name));
+
     final hasVideo =
         live.hasVideo &&
         live.remoteParticipant.trackPublications.values
@@ -110,42 +144,92 @@ class CallParticipantTile extends HookConsumerWidget {
             .isNotEmpty;
 
     if (hasVideo) {
-      return Stack(
+      return Padding(
-        fit: StackFit.loose,
+        padding: const EdgeInsets.all(8),
-        children: [
+        child: LayoutBuilder(
-          AspectRatio(
+          builder: (context, constraints) {
-            aspectRatio: 16 / 9,
+            // Use the smaller dimension to determine the "size" for the ripple calculation
-            child: VideoTrackRenderer(
+            // effectively making the ripple relative to the tile size.
-              live.remoteParticipant.trackPublications.values
+            // However, for a rectangular video, we might want a different approach.
-                      .where((track) => track.kind == TrackType.VIDEO)
+            // The user asked for "speaking ripple to the video as well".
-                      .first
+            // If we use the extracted SpeakingRipple, it expects a size and assumes a circle.
-                      .track
+            // We need to adapt it or create a rectangular version.
-                  as VideoTrack,
+            // Given the "image" likely shows a rectangular video with rounded corners,
-              renderMode: VideoRenderMode.platformView,
+            // let's create a specific wrapper for the video tile that adds a border/glow when speaking.
-            ),
+
-          ),
+            final isSpeaking = live.remoteParticipant.isSpeaking;
-          Positioned(
+            final audioLevel = live.remoteParticipant.audioLevel;
-            left: 8,
+
-            right: 8,
+            return AnimatedContainer(
-            bottom: 8,
+              duration: const Duration(milliseconds: 200),
-            child: Text(
+              decoration: BoxDecoration(
-              '@${live.participant.name}',
+                color: Theme.of(context).colorScheme.surfaceContainerHighest,
-              textAlign: TextAlign.center,
+                borderRadius: BorderRadius.circular(16),
-              style: const TextStyle(
+                border: Border.all(
-                fontSize: 14,
+                  color:
-                color: Colors.white,
+                      isSpeaking
-                shadows: [
+                          ? Colors.green.withOpacity(
-                  BoxShadow(
+                            0.5 + 0.5 * audioLevel.clamp(0.0, 1.0),
-                    color: Colors.black54,
+                          )
-                    offset: Offset(1, 1),
+                          : Theme.of(context).colorScheme.outlineVariant,
-                    spreadRadius: 8,
+                  width: isSpeaking ? 4 : 1,
-                    blurRadius: 8,
+                ),
-                  ),
-                ],
               ),
-            ),
+              child: ClipRRect(
-          ),
+                borderRadius: BorderRadius.circular(12),
-        ],
+                child: AspectRatio(
+                  aspectRatio: 16 / 9,
+                  child: Stack(
+                    fit: StackFit.expand,
+                    children: [
+                      VideoTrackRenderer(
+                        live.remoteParticipant.trackPublications.values
+                                .where((track) => track.kind == TrackType.VIDEO)
+                                .first
+                                .track
+                            as VideoTrack,
+                        renderMode: VideoRenderMode.platformView,
+                      ),
+                      Positioned(
+                        left: 8,
+                        bottom: 8,
+                        child: Container(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 8,
+                            vertical: 4,
+                          ),
+                          decoration: BoxDecoration(
+                            color: Colors.black.withOpacity(0.6),
+                            borderRadius: BorderRadius.circular(12),
+                          ),
+                          child: Row(
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              if (live.remoteParticipant.isMuted)
+                                const Icon(
+                                  Symbols.mic_off,
+                                  size: 14,
+                                  color: Colors.redAccent,
+                                ).padding(right: 4),
+                              Text(
+                                userInfo.value?.nick ?? live.participant.name,
+                                style: const TextStyle(
+                                  fontSize: 12,
+                                  color: Colors.white,
+                                  fontWeight: FontWeight.w500,
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            );
+          },
+        ),
       );
     } else {
       return SpeakingRippleAvatar(size: 84, live: live);