Fixed reconnection handling in android and iOS (#1753)

packages/hms_room_kit/lib/src/hls_viewer/hls_player.dart

@@ -82,12 +82,12 @@ class HLSPlayer extends StatelessWidget {
                 selector: (_, hlsPlayerStore) =>
                     hlsPlayerStore.playerPlaybackState,
                 builder: (_, state, __) {
-                  return state == HMSHLSPlaybackState.BUFFERING
+                  return state == HMSHLSPlaybackState.BUFFERING || state == HMSHLSPlaybackState.FAILED
                       ? Align(
                           alignment: Alignment.center,
                           child: CircularProgressIndicator(
                             color: HMSThemeColors.primaryDefault,
-                            strokeWidth: 1,
+                            strokeWidth: 2,
                           ),
                         )
                       : const SizedBox();

packages/hms_room_kit/lib/src/hls_viewer/hls_player_store.dart

@@ -39,6 +39,9 @@ class HLSPlayerStore extends ChangeNotifier
   ///This is done to avoid multiple timers running at the same time
   bool _isTimerActive = false;
 
+  ///This variable stores whether there is some error in playing stream
+  bool isPlayerFailed = false;
+
   ///HLS Player Stats
 
   HMSHLSPlayerStats? hlsPlayerStats;
@@ -154,13 +157,16 @@ class HLSPlayerStore extends ChangeNotifier
   @override
   void onPlaybackFailure({required String? error}) {
     log("Playback failure $error");
+    isPlayerFailed = true;
+    notifyListeners();
   }
 
   @override
   void onPlaybackStateChanged({required HMSHLSPlaybackState playbackState}) {
     log("Playback state changed to ${playbackState.name}");
     playerPlaybackState = playbackState;
     if (playerPlaybackState == HMSHLSPlaybackState.PLAYING) {
+      isPlayerFailed = false;
       areClosedCaptionsSupported();
     }
     notifyListeners();

packages/hms_room_kit/lib/src/hls_viewer/hls_viewer_page.dart

@@ -10,6 +10,7 @@ import 'package:tuple/tuple.dart';
 import 'package:hmssdk_flutter/hmssdk_flutter.dart';
 
 ///Project imports
+import 'package:hms_room_kit/src/widgets/bottom_sheets/refresh_stream_bottom_sheet.dart';
 import 'package:hms_room_kit/src/hls_viewer/hls_player_desktop_controls.dart';
 import 'package:hms_room_kit/src/widgets/toasts/toast_widget.dart';
 import 'package:hms_room_kit/src/widgets/app_dialogs/audio_device_change_dialog.dart';
@@ -270,6 +271,7 @@ class _HLSViewerPageState extends State<HLSViewerPage> {
                                           return Container();
                                         }),
 
+                                    ///This renders toasts
                                     Selector<MeetingStore,
                                             HMSTrackChangeRequest?>(
                                         selector: (_, meetingStore) =>
@@ -378,6 +380,7 @@ class _HLSViewerPageState extends State<HLSViewerPage> {
                                           }).toList());
                                         }),
 
+                                    ///This renders the reconnection dialog
                                     Selector<MeetingStore, bool>(
                                         selector: (_, meetingStore) =>
                                             meetingStore.reconnecting,
@@ -389,6 +392,21 @@ class _HLSViewerPageState extends State<HLSViewerPage> {
                                           }
                                           return const SizedBox();
                                         }),
+
+                                    ///This renders the bottom sheet for the stream error 
+                                    ///with a button refresh the stream
+                                    Selector<HLSPlayerStore, bool>(
+                                      selector: (_, hlsPlayerStore) =>
+                                          hlsPlayerStore.isPlayerFailed,
+                                      builder: (_, isPlayerFailed, __) {
+                                        return Positioned(
+                                            bottom: 0,
+                                            child: isPlayerFailed?RefreshStreamBottomSheet():const SizedBox());
+                                      },
+                                    ),
+
+                                    ///Renders the error toast with a leave button since the 
+                                    ///error is irrecoverable
                                     if (failureData.item2 != null &&
                                         (failureData.item2?.code?.errorCode ==
                                                 1003 ||

packages/hms_room_kit/lib/src/widgets/bottom_sheets/refresh_stream_bottom_sheet.dart

@@ -0,0 +1,118 @@
+library;
+
+///Package imports
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:hmssdk_flutter/hmssdk_flutter.dart';
+import 'package:provider/provider.dart';
+
+///Project imports
+import 'package:hms_room_kit/src/layout_api/hms_theme_colors.dart';
+import 'package:hms_room_kit/src/meeting/meeting_store.dart';
+import 'package:hms_room_kit/src/widgets/common_widgets/hms_subheading_text.dart';
+import 'package:hms_room_kit/src/widgets/common_widgets/hms_title_text.dart';
+
+
+///[RefreshStreamBottomSheet] is a bottom sheet that is used to render the bottom sheet to refresh the stream
+class RefreshStreamBottomSheet extends StatefulWidget {
+  const RefreshStreamBottomSheet({super.key});
+
+  @override
+  State<RefreshStreamBottomSheet> createState() =>
+      _RefreshStreamBottomSheetState();
+}
+
+class _RefreshStreamBottomSheetState extends State<RefreshStreamBottomSheet> {
+  @override
+  void initState() {
+    super.initState();
+    context.read<MeetingStore>().addBottomSheet(context);
+  }
+
+  @override
+  void deactivate() {
+    context.read<MeetingStore>().removeBottomSheet(context);
+    super.deactivate();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 192,
+      decoration: BoxDecoration(
+        color: HMSThemeColors.surfaceDim,
+        borderRadius: BorderRadius.only(
+            topLeft: Radius.circular(16), topRight: Radius.circular(16)),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.only(top: 16.0, left: 20, right: 20),
+        child: Container(
+          width: MediaQuery.of(context).size.width - 40,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Row(
+                    children: [
+                      SvgPicture.asset(
+                        "packages/hms_room_kit/lib/src/assets/icons/end_warning.svg",
+                        height: 20,
+                        width: 20,
+                        colorFilter: ColorFilter.mode(
+                            HMSThemeColors.alertErrorDefault, BlendMode.srcIn),
+                      ),
+                      const SizedBox(
+                        width: 8,
+                      ),
+                      HMSTitleText(
+                        text: "Playback Error",
+                        textColor: HMSThemeColors.alertErrorDefault,
+                        letterSpacing: 0.15,
+                        fontSize: 20,
+                      )
+                    ],
+                  ),
+                ],
+              ),
+              const SizedBox(
+                height: 8,
+              ),
+              HMSSubheadingText(
+                text:
+                    "Something went wrong with the stream. Please tap on ‘Refresh Stream’ to retry.",
+                maxLines: 3,
+                textColor: HMSThemeColors.onSurfaceMediumEmphasis,
+              ),
+              const SizedBox(
+                height: 16,
+              ),
+              ElevatedButton(
+                  style: ButtonStyle(
+                      shadowColor:
+                          MaterialStateProperty.all(HMSThemeColors.surfaceDim),
+                      backgroundColor: MaterialStateProperty.all(
+                          HMSThemeColors.primaryDefault),
+                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                          RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(8.0),
+                      ))),
+                  onPressed: () {
+                    HMSHLSPlayerController.start();
+                  },
+                  child: SizedBox(
+                    height: 48,
+                    child: Center(
+                      child: HMSTitleText(
+                          text: "Refresh Stream",
+                          textColor: HMSThemeColors.baseWhite),
+                    ),
+                  ))
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}