lib/providers/chat_call.dart

@@ -2,7 +2,6 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:livekit_client/livekit_client.dart';
-import 'package:livekit_noise_filter/livekit_noise_filter.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'package:provider/provider.dart';
 import 'package:surface/providers/sn_network.dart';
@@ -132,14 +131,10 @@ class ChatCallProvider extends ChangeNotifier {
 
   void initRoom() {
     initHardware();
-    final timeout = const Duration(seconds: 60);
     _room = Room(
-      roomOptions: RoomOptions(
+      roomOptions: const RoomOptions(
         dynacast: true,
         adaptiveStream: true,
-        defaultAudioCaptureOptions: AudioCaptureOptions(
-          processor: LiveKitNoiseFilter(),
-        ),
         defaultAudioPublishOptions: AudioPublishOptions(
           name: 'call_voice',
           stream: 'call_stream',
@@ -159,16 +154,6 @@ class ChatCallProvider extends ChangeNotifier {
           params: VideoParametersPresets.h1080_169,
         ),
       ),
-      connectOptions: ConnectOptions(
-        autoSubscribe: true,
-        timeouts: Timeouts(
-          connection: timeout,
-          debounce: timeout,
-          publish: timeout,
-          peerConnection: timeout,
-          iceRestart: timeout,
-        ),
-      ),
     );
     _listener = _room.createListener();
     WakelockPlus.enable();

lib/screens/chat/call_room.dart

@@ -32,7 +32,7 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
     }
   }
 
-  Widget _buildMeetLayout() {
+  Widget _buildListLayout() {
     final call = context.read<ChatCallProvider>();
     return Stack(
       children: [
@@ -41,7 +41,9 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
               Theme.of(context).colorScheme.surfaceContainer.withOpacity(0.75),
           child: call.focusTrack != null
               ? InteractiveParticipantWidget(
+                  isFixedAvatar: false,
                   participant: call.focusTrack!,
+                  onTap: () {},
                 )
               : const SizedBox.shrink(),
         ),
@@ -60,12 +62,16 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
                   return Container();
                 }
 
-                return SizedBox(
+                return Padding(
-                  height: 128,
+                  padding: const EdgeInsets.only(top: 8, left: 8),
-                  width: 128,
+                  child: ClipRRect(
+                    borderRadius: const BorderRadius.all(Radius.circular(8)),
                     child: InteractiveParticipantWidget(
+                      isFixedAvatar: true,
+                      width: 120,
+                      height: 120,
+                      color: Theme.of(context).cardColor,
                       participant: track,
-                    avatarSize: 32,
                       onTap: () {
                         if (track.participant.sid !=
                             call.focusTrack?.participant.sid) {
@@ -73,6 +79,7 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
                         }
                       },
                     ),
+                  ),
                 );
               },
             ),
@@ -82,26 +89,50 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
     );
   }
 
-  Widget _buildListLayout() {
+  Widget _buildGridLayout() {
     final call = context.read<ChatCallProvider>();
 
-    return LayoutBuilder(
+    return LayoutBuilder(builder: (context, constraints) {
-      builder: (context, constraints) {
+      double screenWidth = constraints.maxWidth;
-        return ListView.builder(
+      double screenHeight = constraints.maxHeight;
-          padding: EdgeInsets.zero,
+
+      int columns = (math.sqrt(call.participantTracks.length)).ceil();
+      int rows = (call.participantTracks.length / columns).ceil();
+
+      double tileWidth = screenWidth / columns;
+      double tileHeight = screenHeight / rows;
+
+      return StyledWidget(GridView.builder(
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: columns,
+          childAspectRatio: tileWidth / tileHeight,
+          crossAxisSpacing: 8,
+          mainAxisSpacing: 8,
+        ),
         itemCount: math.max(0, call.participantTracks.length),
         itemBuilder: (BuildContext context, int index) {
           final track = call.participantTracks[index];
-            return InteractiveParticipantWidget(
+          return Card(
-              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            child: ClipRRect(
-              isList: true,
+              borderRadius: const BorderRadius.all(Radius.circular(8)),
-              avatarSize: 24,
+              child: InteractiveParticipantWidget(
+                color: Theme.of(context)
+                    .colorScheme
+                    .surfaceContainerHigh
+                    .withOpacity(0.75),
                 participant: track,
+                onTap: () {
+                  if (track.participant.sid !=
+                      call.focusTrack?.participant.sid) {
+                    call.setFocusTrack(track);
+                  }
+                },
+              ),
+            ),
           );
         },
-        );
+      )).padding(all: 8);
-      },
+    });
-    );
   }
 
   @override
@@ -145,7 +176,9 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
                 ]),
               ),
             ),
-            body: Column(
+            body: GestureDetector(
+              behavior: HitTestBehavior.translucent,
+              child: Column(
                 children: [
                   SizedBox(
                     width: MediaQuery.of(context).size.width,
@@ -219,7 +252,6 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
                                         child: CircularProgressIndicator(
                                           color: Colors.white,
                                           strokeWidth: 2,
-                                        padding: EdgeInsets.zero,
                                         ),
                                       ).padding(all: 3),
                                   ],
@@ -250,9 +282,9 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
                         builder: (context) {
                           switch (_layoutMode) {
                             case 1:
-                            return _buildListLayout();
+                              return _buildGridLayout();
                             default:
-                            return _buildMeetLayout();
+                              return _buildListLayout();
                           }
                         },
                       ),
@@ -266,9 +298,10 @@ class _CallRoomScreenState extends State<CallRoomScreen> {
                         call.room.localParticipant!,
                       ),
                     ),
-                Gap(MediaQuery.of(context).padding.bottom),
                 ],
               ),
+              onTap: () {},
+            ),
           );
         });
   }

lib/widgets/account/account_image.dart

@@ -54,15 +54,11 @@ class AccountImage extends StatelessWidget {
                             ))
                         .center(),
                   )
-                : UniversalImage(
+                : AutoResizeUniversalImage(
                     sn.getAttachmentUrl(url),
                     filterQuality: filterQuality,
                     key: Key('attachment-${content.hashCode}'),
                     fit: BoxFit.cover,
-                    width: (radius != null ? radius! : 20) * 2,
-                    height: (radius != null ? radius! : 20) * 2,
-                    cacheWidth: (radius != null ? radius! : 20) * 2,
-                    cacheHeight: (radius != null ? radius! : 20) * 2,
                   ),
           ),
         ),

lib/widgets/chat/call/call_no_content.dart

@@ -8,12 +8,12 @@ import 'package:surface/widgets/account/account_image.dart';
 class NoContentWidget extends StatefulWidget {
   final SnAccount? userinfo;
   final bool isSpeaking;
-  final double? avatarSize;
+  final bool isFixed;
 
   const NoContentWidget({
     super.key,
     this.userinfo,
-    this.avatarSize,
+    this.isFixed = false,
     required this.isSpeaking,
   });
 
@@ -45,13 +45,17 @@ class _NoContentWidgetState extends State<NoContentWidget>
 
   @override
   Widget build(BuildContext context) {
-    final double radius = widget.avatarSize ??
+    final double radius = widget.isFixed
-        math.min(
+        ? 32
+        : math.min(
             MediaQuery.of(context).size.width * 0.1,
             MediaQuery.of(context).size.height * 0.1,
           );
 
-    return Animate(
+    return Container(
+      alignment: Alignment.center,
+      child: Center(
+        child: Animate(
           autoPlay: false,
           controller: _animationController,
           effects: [
@@ -75,6 +79,8 @@ class _NoContentWidgetState extends State<NoContentWidget>
             content: widget.userinfo?.avatar,
             radius: radius,
           ),
+        ),
+      ),
     );
   }
 

lib/widgets/chat/call/call_participant.dart

@@ -2,9 +2,7 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_webrtc/flutter_webrtc.dart';
-import 'package:gap/gap.dart';
 import 'package:livekit_client/livekit_client.dart';
-import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/types/account.dart';
 import 'package:surface/types/chat.dart';
 import 'package:surface/widgets/chat/call/call_no_content.dart';
@@ -13,32 +11,23 @@ import 'package:surface/widgets/chat/call/call_participant_menu.dart';
 import 'package:surface/widgets/chat/call/call_participant_stats.dart';
 
 abstract class ParticipantWidget extends StatefulWidget {
-  static ParticipantWidget widgetFor(
+  static ParticipantWidget widgetFor(ParticipantTrack participantTrack,
-    ParticipantTrack participantTrack, {
+      {bool isFixed = false, bool showStatsLayer = false}) {
-    double? avatarSize,
-    EdgeInsets? padding,
-    bool showStatsLayer = false,
-    bool isList = false,
-  }) {
     if (participantTrack.participant is LocalParticipant) {
       return LocalParticipantWidget(
         participantTrack.participant as LocalParticipant,
         participantTrack.videoTrack,
-        avatarSize,
+        isFixed,
         participantTrack.isScreenShare,
         showStatsLayer,
-        isList,
-        padding,
       );
     } else if (participantTrack.participant is RemoteParticipant) {
       return RemoteParticipantWidget(
         participantTrack.participant as RemoteParticipant,
         participantTrack.videoTrack,
-        avatarSize,
+        isFixed,
         participantTrack.isScreenShare,
         showStatsLayer,
-        isList,
-        padding,
       );
     }
     throw UnimplementedError('Unknown participant type');
@@ -47,10 +36,8 @@ abstract class ParticipantWidget extends StatefulWidget {
   abstract final Participant participant;
   abstract final VideoTrack? videoTrack;
   abstract final bool isScreenShare;
-  abstract final double? avatarSize;
+  abstract final bool isFixed;
   abstract final bool showStatsLayer;
-  abstract final bool isList;
-  abstract final EdgeInsets? padding;
   final VideoQuality quality;
 
   const ParticipantWidget({
@@ -65,24 +52,18 @@ class LocalParticipantWidget extends ParticipantWidget {
   @override
   final VideoTrack? videoTrack;
   @override
-  final double? avatarSize;
+  final bool isFixed;
   @override
   final bool isScreenShare;
   @override
   final bool showStatsLayer;
-  @override
-  final bool isList;
-  @override
-  final EdgeInsets? padding;
 
   const LocalParticipantWidget(
     this.participant,
     this.videoTrack,
-    this.avatarSize,
+    this.isFixed,
     this.isScreenShare,
-    this.showStatsLayer,
+    this.showStatsLayer, {
-    this.isList,
-    this.padding, {
     super.key,
   });
 
@@ -96,24 +77,18 @@ class RemoteParticipantWidget extends ParticipantWidget {
   @override
   final VideoTrack? videoTrack;
   @override
-  final double? avatarSize;
+  final bool isFixed;
   @override
   final bool isScreenShare;
   @override
   final bool showStatsLayer;
-  @override
-  final bool isList;
-  @override
-  final EdgeInsets? padding;
 
   const RemoteParticipantWidget(
     this.participant,
     this.videoTrack,
-    this.avatarSize,
+    this.isFixed,
     this.isScreenShare,
-    this.showStatsLayer,
+    this.showStatsLayer, {
-    this.isList,
-    this.padding, {
     super.key,
   });
 
@@ -161,82 +136,19 @@ abstract class _ParticipantWidgetState<T extends ParticipantWidget>
   }
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext ctx) {
-    if (widget.isList) {
-      return Padding(
-        padding: widget.padding ?? EdgeInsets.zero,
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Row(
-              children: [
-                SizedBox(
-                  width: (widget.avatarSize ?? 32) * 2,
-                  height: (widget.avatarSize ?? 32) * 2,
-                  child: Center(
-                    child: NoContentWidget(
-                      userinfo: _userinfoMetadata,
-                      avatarSize: widget.avatarSize,
-                      isSpeaking: widget.participant.isSpeaking,
-                    ),
-                  ),
-                ),
-                const Gap(8),
-                Expanded(
-                  child: SizedBox(
-                    height: (widget.avatarSize ?? 32) * 2,
-                    child: ParticipantInfoWidget(
-                      isList: true,
-                      title: widget.participant.name.isNotEmpty
-                          ? widget.participant.name
-                          : widget.participant.identity,
-                      audioAvailable: _firstAudioPublication?.muted == false &&
-                          _firstAudioPublication?.subscribed == true,
-                      connectionQuality: widget.participant.connectionQuality,
-                      isScreenShare: widget.isScreenShare,
-                    ),
-                  ),
-                ),
-              ],
-            ),
-            if (_activeVideoTrack != null && !_activeVideoTrack!.muted)
-              ClipRRect(
-                borderRadius: const BorderRadius.all(Radius.circular(8)),
-                child: AspectRatio(
-                  aspectRatio: 16 / 9,
-                  child: Material(
-                    borderRadius: const BorderRadius.all(Radius.circular(8)),
-                    color: Theme.of(context)
-                        .colorScheme
-                        .surfaceContainer
-                        .withOpacity(0.75),
-                    child: VideoTrackRenderer(
-                      _activeVideoTrack!,
-                      fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
-                    ),
-                  ),
-                ).padding(top: 8),
-              ),
-          ],
-        ),
-      );
-    }
-
     return Stack(
       children: [
-        if (_activeVideoTrack != null && !_activeVideoTrack!.muted)
+        _activeVideoTrack != null && !_activeVideoTrack!.muted
-          VideoTrackRenderer(
+            ? VideoTrackRenderer(
                 _activeVideoTrack!,
                 fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
               )
-        else
+            : NoContentWidget(
-          Center(
-            child: NoContentWidget(
                 userinfo: _userinfoMetadata,
-              avatarSize: widget.avatarSize,
+                isFixed: widget.isFixed,
                 isSpeaking: widget.participant.isSpeaking,
               ),
-          ),
         if (widget.showStatsLayer)
           Positioned(
             top: 30,
@@ -287,31 +199,33 @@ class _RemoteParticipantWidgetState
 }
 
 class InteractiveParticipantWidget extends StatelessWidget {
-  final double? avatarSize;
+  final double? width;
-  final bool isList;
+  final double? height;
+  final Color? color;
+  final bool isFixedAvatar;
   final ParticipantTrack participant;
-  final Function? onTap;
+  final Function() onTap;
-  final EdgeInsets? padding;
 
   const InteractiveParticipantWidget({
     super.key,
-    this.avatarSize,
+    this.width,
-    this.isList = false,
+    this.height,
-    this.padding,
+    this.color,
+    this.isFixedAvatar = false,
     required this.participant,
-    this.onTap,
+    required this.onTap,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Material(
+    return GestureDetector(
-      color: Colors.transparent,
+      child: Container(
-      child: InkWell(
+        width: width,
-        onTap: onTap != null
+        height: height,
-            ? () {
+        color: color,
-                onTap?.call();
+        child: ParticipantWidget.widgetFor(participant, isFixed: isFixedAvatar),
-              }
+      ),
-            : null,
+      onTap: () => onTap(),
       onLongPress: () {
         if (participant.participant is LocalParticipant) return;
         showModalBottomSheet(
@@ -323,15 +237,6 @@ class InteractiveParticipantWidget extends StatelessWidget {
           ),
         );
       },
-        child: Container(
-          child: ParticipantWidget.widgetFor(
-            participant,
-            avatarSize: avatarSize,
-            isList: isList,
-            padding: padding,
-          ),
-        ),
-      ),
     );
   }
 }

lib/widgets/chat/call/call_participant_info.dart

@@ -9,7 +9,6 @@ class ParticipantInfoWidget extends StatelessWidget {
   final bool audioAvailable;
   final ConnectionQuality connectionQuality;
   final bool isScreenShare;
-  final bool isList;
 
   const ParticipantInfoWidget({
     super.key,
@@ -17,69 +16,10 @@ class ParticipantInfoWidget extends StatelessWidget {
     this.audioAvailable = true,
     this.connectionQuality = ConnectionQuality.unknown,
     this.isScreenShare = false,
-    this.isList = false,
   });
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context) => Container(
-    if (isList) {
-      return Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          if (title != null)
-            Text(
-              title!,
-              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(
-                color: Colors.white,
-                fontWeight: FontWeight.bold,
-              ),
-            ).padding(left: 2),
-          Row(
-            children: [
-              isScreenShare
-                  ? const Icon(
-                      Symbols.monitor,
-                      color: Colors.white,
-                      size: 16,
-                    )
-                  : Icon(
-                      audioAvailable ? Symbols.mic : Symbols.mic_off,
-                      color: audioAvailable ? Colors.white : Colors.red,
-                      size: 16,
-                    ),
-              const Gap(3),
-              if (connectionQuality != ConnectionQuality.unknown)
-                Icon(
-                  {
-                    ConnectionQuality.excellent: Symbols.signal_cellular_alt,
-                    ConnectionQuality.good: Symbols.signal_cellular_alt_2_bar,
-                    ConnectionQuality.poor: Symbols.signal_cellular_alt_1_bar,
-                  }[connectionQuality],
-                  color: {
-                    ConnectionQuality.excellent: Colors.green,
-                    ConnectionQuality.good: Colors.orange,
-                    ConnectionQuality.poor: Colors.red,
-                  }[connectionQuality],
-                  size: 16,
-                )
-              else
-                const SizedBox(
-                  width: 12,
-                  height: 12,
-                  child: CircularProgressIndicator(
-                    color: Colors.white,
-                    strokeWidth: 2,
-                  ),
-                ).padding(all: 3),
-            ],
-          )
-        ],
-      );
-    }
-
-    return Container(
         color: Theme.of(context).colorScheme.onSurface.withOpacity(0.75),
         padding: const EdgeInsets.symmetric(
           vertical: 7,
@@ -136,5 +76,4 @@ class ParticipantInfoWidget extends StatelessWidget {
           ],
         ),
       );
-  }
 }

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -24,7 +24,6 @@ import gal
 import hotkey_manager_macos
 import in_app_review
 import livekit_client
-import livekit_noise_filter
 import local_notifier
 import media_kit_libs_macos_video
 import media_kit_video
@@ -61,7 +60,6 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   HotkeyManagerMacosPlugin.register(with: registry.registrar(forPlugin: "HotkeyManagerMacosPlugin"))
   InAppReviewPlugin.register(with: registry.registrar(forPlugin: "InAppReviewPlugin"))
   LiveKitPlugin.register(with: registry.registrar(forPlugin: "LiveKitPlugin"))
-  LiveKitKrispNoiseFilterPlugin.register(with: registry.registrar(forPlugin: "LiveKitKrispNoiseFilterPlugin"))
   LocalNotifierPlugin.register(with: registry.registrar(forPlugin: "LocalNotifierPlugin"))
   MediaKitLibsMacosVideoPlugin.register(with: registry.registrar(forPlugin: "MediaKitLibsMacosVideoPlugin"))
   MediaKitVideoPlugin.register(with: registry.registrar(forPlugin: "MediaKitVideoPlugin"))

macos/Podfile.lock

@@ -152,11 +152,6 @@ PODS:
     - flutter_webrtc
     - FlutterMacOS
     - WebRTC-SDK (= 125.6422.06)
-  - livekit_noise_filter (0.0.1):
-    - flutter_webrtc
-    - FlutterMacOS
-    - LiveKitKrispNoiseFilter (= 0.0.7)
-  - LiveKitKrispNoiseFilter (0.0.7)
   - local_notifier (0.1.0):
     - FlutterMacOS
   - media_kit_libs_macos_video (1.0.4):
@@ -242,7 +237,6 @@ DEPENDENCIES:
   - hotkey_manager_macos (from `Flutter/ephemeral/.symlinks/plugins/hotkey_manager_macos/macos`)
   - in_app_review (from `Flutter/ephemeral/.symlinks/plugins/in_app_review/macos`)
   - livekit_client (from `Flutter/ephemeral/.symlinks/plugins/livekit_client/macos`)
-  - livekit_noise_filter (from `Flutter/ephemeral/.symlinks/plugins/livekit_noise_filter/macos`)
   - local_notifier (from `Flutter/ephemeral/.symlinks/plugins/local_notifier/macos`)
   - media_kit_libs_macos_video (from `Flutter/ephemeral/.symlinks/plugins/media_kit_libs_macos_video/macos`)
   - media_kit_video (from `Flutter/ephemeral/.symlinks/plugins/media_kit_video/macos`)
@@ -271,7 +265,6 @@ SPEC REPOS:
     - GoogleDataTransport
     - GoogleUtilities
     - HotKey
-    - LiveKitKrispNoiseFilter
     - nanopb
     - OrderedSet
     - PromisesObjC
@@ -322,8 +315,6 @@ EXTERNAL SOURCES:
     :path: Flutter/ephemeral/.symlinks/plugins/in_app_review/macos
   livekit_client:
     :path: Flutter/ephemeral/.symlinks/plugins/livekit_client/macos
-  livekit_noise_filter:
-    :path: Flutter/ephemeral/.symlinks/plugins/livekit_noise_filter/macos
   local_notifier:
     :path: Flutter/ephemeral/.symlinks/plugins/local_notifier/macos
   media_kit_libs_macos_video:
@@ -387,8 +378,6 @@ SPEC CHECKSUMS:
   hotkey_manager_macos: a4317849af96d2430fa89944d3c58977ca089fbe
   in_app_review: 0599bccaed5e02f6bed2b0d30d16f86b63ed8638
   livekit_client: 35690bf9861be6325a6f7d11bb38d50c7c9fed80
-  livekit_noise_filter: c5710c0871ef3621b48c0b44d3c3ff938ba414b2
-  LiveKitKrispNoiseFilter: efe418ceca28163ace0ff222bd2cc02384645d84
   local_notifier: ebf072651e35ae5e47280ad52e2707375cb2ae4e
   media_kit_libs_macos_video: 85a23e549b5f480e72cae3e5634b5514bc692f65
   media_kit_video: fa6564e3799a0a28bff39442334817088b7ca758

pubspec.lock

@@ -1381,14 +1381,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.4.1"
-  livekit_noise_filter:
-    dependency: "direct main"
-    description:
-      name: livekit_noise_filter
-      sha256: "398bfd1cc63ada9dee9fd7ea415e2fc1e51e091a6d217aad3649b882c35c7fcb"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.1.0"
   local_notifier:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -144,7 +144,6 @@ dependencies:
   latlong2: ^0.9.1
   crypto: ^3.0.6
   audioplayers: ^6.4.0
-  livekit_noise_filter: ^0.1.0
 
 dev_dependencies:
   flutter_test: