feat(ui, llc): add backwards compatible partial state (#983)

* feat: add backwards compatible partial state

* feat: add automatic dart fixes

* fix all warnings

* update dogfooding

* Improve deprecations

* Add tests for fixes

* Add participant data in new callbacks

* Add some extra docs

* rename builder methods

* improve partial state mapper

* add unit test for `partialCallStateStream`

* Also compare list equality in partialCallStateStream

* remove local participant from `AddReactionOption`

* Add changelogs

* fix typo

Author: renefloor

.github/workflows/stream_video_flutter_workflow.yml

@@ -72,6 +72,8 @@ jobs:
         with:
           token: ${{secrets.CODECOV_TOKEN}}
           files: packages/*/coverage/lcov.info
+      - name: "Test dart fixes"
+        run: melos run test:fixes
 
   build:
     timeout-minutes: 30

dogfooding/lib/screens/call_screen.dart

@@ -130,28 +130,25 @@ class _CallScreenState extends State<CallScreen> {
               showFeedbackDialog(context, call: widget.call);
             }
           },
-          callContentBuilder: (
+          callContentWidgetBuilder: (
             BuildContext context,
             Call call,
-            CallState callState,
           ) {
             return StreamCallContent(
               call: call,
-              callState: callState,
               layoutMode: _currentLayoutMode,
               pictureInPictureConfiguration:
                   const PictureInPictureConfiguration(
                 enablePictureInPicture: true,
               ),
-              callParticipantsBuilder: (context, call, callState) {
+              callParticipantsWidgetBuilder: (context, call) {
                 return Stack(
                   children: [
                     Column(
                       children: [
                         Expanded(
                           child: StreamCallParticipants(
                             call: call,
-                            participants: callState.callParticipants,
                             layoutMode: _currentLayoutMode,
                           ),
                         ),
@@ -194,19 +191,23 @@ class _CallScreenState extends State<CallScreen> {
                         ),
                       ),
                     ],
-                    if (!_moreMenuVisible &&
-                        (call.state.valueOrNull?.otherParticipants.isEmpty ??
-                            false))
+                    if (!_moreMenuVisible)
                       Positioned(
                         bottom: 0,
                         left: 0,
                         right: 0,
-                        child: ShareCallWelcomeCard(callId: call.id),
+                        child: PartialCallStateBuilder(
+                          call: call,
+                          selector: (state) => state.otherParticipants.isEmpty,
+                          builder: (context, isEmpty) => isEmpty
+                              ? ShareCallWelcomeCard(callId: call.id)
+                              : const SizedBox.shrink(),
+                        ),
                       )
                   ],
                 );
               },
-              callAppBarBuilder: (context, call, callState) {
+              callAppBarWidgetBuilder: (context, call) {
                 return CallAppBar(
                   call: call,
                   leadingWidth: 120,
@@ -219,22 +220,25 @@ class _CallScreenState extends State<CallScreen> {
                           });
                         },
                       ),
-                      if (call.state.valueOrNull?.localParticipant != null)
-                        FlipCameraOption(
-                          call: call,
-                          localParticipant: call.state.value.localParticipant!,
-                        ),
+                      PartialCallStateBuilder(
+                        call: call,
+                        selector: (state) => state.localParticipant != null,
+                        builder: (context, hasLocalParticipant) =>
+                            hasLocalParticipant
+                                ? FlipCameraOption(
+                                    call: call,
+                                  )
+                                : const SizedBox.shrink(),
+                      ),
                     ],
                   ),
                   title: CallDurationTitle(call: call),
                 );
               },
-              callControlsBuilder: (
+              callControlsWidgetBuilder: (
                 BuildContext context,
                 Call call,
-                CallState callState,
               ) {
-                final localParticipant = callState.localParticipant!;
                 return Container(
                   padding: const EdgeInsets.only(
                     top: 16,
@@ -254,7 +258,6 @@ class _CallScreenState extends State<CallScreen> {
                           }),
                       ToggleScreenShareOption(
                         call: call,
-                        localParticipant: localParticipant,
                         screenShareConstraints: const ScreenShareConstraints(
                           useiOSBroadcastExtension: true,
                         ),
@@ -268,24 +271,28 @@ class _CallScreenState extends State<CallScreen> {
                       ),
                       ToggleMicrophoneOption(
                         call: call,
-                        localParticipant: localParticipant,
                         disabledMicrophoneBackgroundColor:
                             AppColorPalette.appRed,
                       ),
                       ToggleCameraOption(
                         call: call,
-                        localParticipant: localParticipant,
                         disabledCameraBackgroundColor: AppColorPalette.appRed,
                       ),
                       const Spacer(),
-                      BadgedCallOption(
-                        callControlOption: CallControlOption(
-                          icon: const Icon(Icons.people),
-                          onPressed: _channel != null //
-                              ? () => showParticipants(context)
-                              : null,
-                        ),
-                        badgeCount: callState.callParticipants.length,
+                      PartialCallStateBuilder(
+                        call: call,
+                        selector: (state) => state.callParticipants.length,
+                        builder: (context, length) {
+                          return BadgedCallOption(
+                            callControlOption: CallControlOption(
+                              icon: const Icon(Icons.people),
+                              onPressed: _channel != null //
+                                  ? () => showParticipants(context)
+                                  : null,
+                            ),
+                            badgeCount: length,
+                          );
+                        },
                       ),
                       _ShowChatButton(channel: _channel),
                     ]),

dogfooding/lib/screens/home_screen.dart

@@ -441,7 +441,6 @@ class _JoinForm extends StatelessWidget {
     }
 
     if (environment == Environment.livestream) {
-      // TODO: handle livestream join
       // Example: https://livestream-react-demo.vercel.app/?id=6G9bxsMaFbMiGvLWWP85d&type=livestream
       final callId = uri.queryParameters['id'];
       if (callId != null) {

melos.yaml

@@ -121,6 +121,13 @@ scripts:
       flutter: true
       dirExists: test
 
+  test:fixes:
+    run: melos exec -c 4 --fail-fast -- "cd test_fixes && dart fix --compare-to-golden"
+    description: Verify dart fixes for a specific package in this project.
+    packageFilters:
+      flutter: true
+      dirExists: test_fixes
+
   update:goldens:
     run: melos exec -c 1 --depends-on="alchemist" -- "flutter test --tags golden --update-goldens"
     description: Update golden files for all packages in this project.

packages/stream_video/CHANGELOG.md

@@ -1,3 +1,8 @@
+## Unreleased
+
+✅ Added
+* Added `call.partialState` for more specific and efficient state updates.
+
 ## 0.9.6
 
 ✅ Added

packages/stream_video/lib/src/call/call.dart

@@ -74,6 +74,7 @@ typedef SetActiveCall = Future<void> Function(Call?);
 typedef SetOutgoingCall = Future<void> Function(Call?);
 typedef GetActiveCall = Call? Function();
 typedef GetOutgoingCall = Call? Function();
+typedef CallStateSelector<T> = T Function(CallState state);
 
 const _idState = 1;
 const _idUserId = 2;
@@ -294,6 +295,10 @@ class Call {
   StateEmitter<CallState> get state => _stateManager.callStateStream;
   Stream<Duration> get callDurationStream => _stateManager.durationStream;
 
+  Stream<T> partialState<T>(CallStateSelector<T> selector) {
+    return _stateManager.partialCallStateStream(selector);
+  }
+
   SharedEmitter<({CallStats publisherStats, CallStats subscriberStats})>
       get stats => _stats;
   late final _stats = MutableSharedEmitterImpl<

packages/stream_video/lib/src/call/state/call_state_notifier.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:collection/collection.dart';
 import 'package:state_notifier/state_notifier.dart';
 
 import '../../call_state.dart';
@@ -33,6 +34,20 @@ class CallStateNotifier extends StateNotifier<CallState>
   late final MutableStateEmitterImpl<CallState> callStateStream;
   CallState get callState => callStateStream.value;
 
+  Stream<T> partialCallStateStream<T>(T Function(CallState state) selector) {
+    return callStateStream.valueStream
+        .map(selector)
+        .distinct(
+          (previous, current) =>
+              identical(previous, current) ||
+              previous == current ||
+              (previous is List &&
+                  current is List &&
+                  const ListEquality<dynamic>().equals(previous, current)),
+        )
+        .asBroadcastStream();
+  }
+
   Stream<Duration> get durationStream =>
       _durationTimerController.stream.distinct();
 

packages/stream_video/lib/stream_video.dart

@@ -28,6 +28,7 @@ export 'src/sfu/data/models/sfu_goaway_reason.dart';
 export 'src/sfu/data/models/sfu_track_type.dart';
 export 'src/sorting/call_participant_sorting_presets.dart';
 export 'src/sorting/call_participant_state_sorting.dart';
+export 'src/state_emitter.dart' show MutableStateEmitter, StateEmitter;
 export 'src/stream_video.dart';
 export 'src/token/token.dart';
 export 'src/types/other.dart';

packages/stream_video/test/src/call/state/call_state_notifier_test.dart

@@ -0,0 +1,113 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:stream_video/src/call/state/call_state_notifier.dart';
+import 'package:stream_video/stream_video.dart';
+
+void main() {
+  test('partialCallStateStream distinct filter', () async {
+    var callState = CallState(
+      callCid: StreamCallCid.from(
+        type: StreamCallType.defaultType(),
+        id: 'id',
+      ),
+      currentUserId: 'userId',
+      preferences: DefaultCallPreferences(),
+    );
+    final notifier = CallStateNotifier(callState);
+    var updates = 0;
+
+    // We only listen to status updates
+    final subscription = notifier
+        .partialCallStateStream((state) => state.status)
+        .listen((status) {
+      updates++;
+    });
+
+    // Initial state should be received from the partialCallStateStream
+    await Future<void>.delayed(Duration.zero);
+    expect(updates, 1);
+
+    // Updating status should triger partialCallStateStream
+    callState = callState.copyWith(status: CallStatus.incoming());
+    notifier.state = callState;
+    await Future<void>.delayed(Duration.zero);
+    expect(updates, 2);
+
+    // anything else should not trigger partialCallStateStream
+    callState = callState.copyWith(isRecording: true);
+    notifier.state = callState;
+    await Future<void>.delayed(Duration.zero);
+    expect(updates, 2);
+
+    await subscription.cancel();
+  });
+
+  test('partialCallStateStream mapped list', () async {
+    var callState = CallState(
+      callCid: StreamCallCid.from(
+        type: StreamCallType.defaultType(),
+        id: 'id',
+      ),
+      currentUserId: 'userId',
+      preferences: DefaultCallPreferences(),
+    ).copyWith(
+      callParticipants: [
+        CallParticipantState(
+          userId: 'userId',
+          roles: const ['participant'],
+          name: 'name',
+          custom: const {},
+          sessionId: 'sessionId',
+          trackIdPrefix: 'trackIdPrefix',
+        ),
+        CallParticipantState(
+          userId: 'userId2',
+          roles: const ['participant'],
+          name: 'name2',
+          custom: const {},
+          sessionId: 'sessionId2',
+          trackIdPrefix: 'trackIdPrefix2',
+        ),
+      ],
+    );
+
+    final notifier = CallStateNotifier(callState);
+    var updates = 0;
+
+    // We only listen to status updates
+    final subscription = notifier
+        .partialCallStateStream(
+      (state) => state.callParticipants.map((e) => e.userId).toList(),
+    )
+        .listen((status) {
+      updates++;
+    });
+
+    // Initial state should be received from the partialCallStateStream
+    await Future<void>.delayed(Duration.zero);
+    expect(updates, 1);
+
+    // Updating participant id should triger partialCallStateStream
+    callState = callState.copyWith(
+      callParticipants: [
+        callState.callParticipants[0],
+        callState.callParticipants[1].copyWith(userId: 'userId3'),
+      ],
+    );
+    notifier.state = callState;
+    await Future<void>.delayed(Duration.zero);
+    expect(updates, 2);
+
+    // anything else should not trigger partialCallStateStream
+    callState = callState.copyWith(
+      callParticipants: [
+        callState.callParticipants[0],
+        callState.callParticipants[1].copyWith(name: 'other name'),
+      ],
+    );
+    notifier.state = callState;
+    await Future<void>.delayed(Duration.zero);
+    expect(updates, 2);
+
+    await subscription.cancel();
+  });
+}

packages/stream_video_flutter/CHANGELOG.md

@@ -1,5 +1,13 @@
 ## Unreleased
 
+🔄 Partial State Updates:
+* Added `call.partialState` for more specific and efficient state updates.
+* Added callbacks in `StreamCallContainer`, `StreamCallContent`, `StreamIncomingCallContent`, and others that no longer return a state.
+By (only) using these callbacks the root widgets will use more efficient partial state updates.
+* Added `PartialCallStateBuilder` to help with making widgets that depend on `partialState`.
+* Deprecated old callbacks
+
+
 ✅ Added
 * Added `handleCallInterruptionCallbacks` method to `RtcMediaDeviceNotifier` that provides an option to handle system audio interruption like incoming calls, or other media playing. See the [documentation](https://getstream.io/video/docs/flutter/advanced/handling-system-audio-interruptions/) for details.
 * Improved the Picture-in-Picture (PiP) implementation for video calls