feat(ui): livestream player improvements (#1118)

* livestream player improvements

* tweaks

* option to hide list of recordings

* Update packages/stream_video_flutter/lib/src/livestream/livestream_player.dart

---------

Co-authored-by: Sahil Kumar <[email protected]>

Author: Brazol

packages/stream_video_flutter/CHANGELOG.md

@@ -1,3 +1,11 @@
+## Unreleased
+
+#### LivestreamPlayer Improvements
+* Added support for Picture in Picture (PiP) mode, configurable via the `pictureInPictureConfiguration` parameter. For platform-specific setup, refer to the [documentation](https://getstream.io/video/docs/flutter/advanced/picture_in_picture/).
+* Introduced the `joinBehaviour` parameter, allowing control over whether and when the `LivestreamPlayer` automatically connects the user to a call.
+* Added the `showRecordingsWhenEnded` parameter to `LivestreamPlayer`, which enables you to show or hide the recordings list in the default livestream ended UI.
+* Refactored `LivestreamPlayer` to leverage `call.partialState` for more efficient state management. New builder methods have been introduced to accommodate this change, and some previous builder methods are now deprecated.
+
 ## 1.0.0
 
 ### 🚧 Breaking changes

packages/stream_video_flutter/lib/src/livestream/livestream_backstage_content.dart

@@ -7,10 +7,10 @@ import '../l10n/localization_extension.dart';
 class LivestreamBackstageContent extends StatefulWidget {
   const LivestreamBackstageContent({
     super.key,
-    required this.callState,
+    required this.call,
   });
 
-  final CallState callState;
+  final Call call;
 
   @override
   State<LivestreamBackstageContent> createState() =>
@@ -20,39 +20,42 @@ class LivestreamBackstageContent extends StatefulWidget {
 class _LivestreamBackstageContentState
     extends State<LivestreamBackstageContent> {
   Timer? _timer;
+  StreamSubscription<DateTime?>? _startsAtSubscription;
   Duration _timeLeft = Duration.zero;
 
   @override
   void initState() {
     super.initState();
 
-    _updateTimeLeft();
     _startTimer();
+
+    _startsAtSubscription = widget.call
+        .partialState(
+          (state) => state.startsAt,
+        )
+        .listen(_updateTimeLeft);
   }
 
   @override
   void dispose() {
     _timer?.cancel();
+    _startsAtSubscription?.cancel();
     super.dispose();
   }
 
-  @override
-  void didUpdateWidget(LivestreamBackstageContent oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (oldWidget.callState.startsAt != widget.callState.startsAt) {
-      _updateTimeLeft();
-    }
-  }
-
   void _startTimer() {
     _timer = Timer.periodic(const Duration(seconds: 1), (_) {
-      _updateTimeLeft();
+      setState(() {
+        _timeLeft -= const Duration(seconds: 1);
+        if (_timeLeft <= Duration.zero) {
+          _timeLeft = Duration.zero;
+          _timer?.cancel();
+        }
+      });
     });
   }
 
-  void _updateTimeLeft() {
-    final startsAt = widget.callState.startsAt;
-
+  void _updateTimeLeft(DateTime? startsAt) {
     if (startsAt != null) {
       final now = DateTime.now();
       if (startsAt.isAfter(now)) {
@@ -92,40 +95,47 @@ class _LivestreamBackstageContentState
     final liveTheme = theme.livestreamTheme;
     final translations = context.translations;
 
-    final participants = widget.callState.callParticipants;
-    final startsAt = widget.callState.startsAt;
-
-    return Scaffold(
-      backgroundColor: theme.colorTheme.livestreamBackground,
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Text(
-              startsAt == null || _timeLeft <= Duration.zero
-                  ? translations.livestreamBackstageStartingSoon
-                  : translations.livestreamBackstageStartingIn,
-              style: liveTheme.backstageTextStyle,
-            ),
-            if (startsAt != null && _timeLeft > Duration.zero) ...[
-              const SizedBox(height: 12),
-              Text(
-                _formatDuration(_timeLeft),
-                style: liveTheme.backstageCounterTextStyle,
-              ),
-            ],
-            if (participants.isNotEmpty) ...[
-              const SizedBox(height: 12),
-              Text(
-                translations.livestreamBackstageParticipants(
-                  participants.length,
+    return PartialCallStateBuilder(
+      call: widget.call,
+      selector: (state) =>
+          (callParticipants: state.callParticipants, startsAt: state.startsAt),
+      builder: (context, callData) {
+        final participants = callData.callParticipants;
+        final startsAt = callData.startsAt;
+
+        return Scaffold(
+          backgroundColor: theme.colorTheme.livestreamBackground,
+          body: Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(
+                  startsAt == null || _timeLeft <= Duration.zero
+                      ? translations.livestreamBackstageStartingSoon
+                      : translations.livestreamBackstageStartingIn,
+                  style: liveTheme.backstageTextStyle,
                 ),
-                style: liveTheme.backstageParticipantsTextStyle,
-              ),
-            ],
-          ],
-        ),
-      ),
+                if (startsAt != null && _timeLeft > Duration.zero) ...[
+                  const SizedBox(height: 12),
+                  Text(
+                    _formatDuration(_timeLeft),
+                    style: liveTheme.backstageCounterTextStyle,
+                  ),
+                ],
+                if (participants.isNotEmpty) ...[
+                  const SizedBox(height: 12),
+                  Text(
+                    translations.livestreamBackstageParticipants(
+                      participants.length,
+                    ),
+                    style: liveTheme.backstageParticipantsTextStyle,
+                  ),
+                ],
+              ],
+            ),
+          ),
+        );
+      },
     );
   }
 }