diff --git a/packages/hms_room_kit/lib/src/assets/icons/add_peer.svg b/packages/hms_room_kit/lib/src/assets/icons/add_peer.svg new file mode 100644 index 000000000..f7298ce15 --- /dev/null +++ b/packages/hms_room_kit/lib/src/assets/icons/add_peer.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/hms_room_kit/lib/src/meeting/empty_room_screen.dart b/packages/hms_room_kit/lib/src/meeting/empty_room_screen.dart new file mode 100644 index 000000000..d20fb8350 --- /dev/null +++ b/packages/hms_room_kit/lib/src/meeting/empty_room_screen.dart @@ -0,0 +1,49 @@ +library; + +///Package imports +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:hms_room_kit/hms_room_kit.dart'; + +///[EmptyRoomScreen] is a widget that is used to render the empty room screen +///This screen is shown when there is only single publisher +class EmptyRoomScreen extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + CircleAvatar( + backgroundColor: HMSThemeColors.surfaceDefault, + radius: 40, + child: SvgPicture.asset( + "packages/hms_room_kit/lib/src/assets/icons/add_peer.svg", + height: 37, + width: 37, + colorFilter: ColorFilter.mode( + HMSThemeColors.onSurfaceHighEmphasis, BlendMode.srcIn), + ), + ), + const SizedBox( + height: 24, + ), + HMSTitleText( + text: "You’re the first to join", + textColor: HMSThemeColors.onSurfaceHighEmphasis, + fontSize: 24, + lineHeight: 32, + ), + const SizedBox( + height: 8, + ), + HMSTitleText( + text: + "Sit back and relax till others join", + textColor: HMSThemeColors.onSurfaceMediumEmphasis, + fontWeight: FontWeight.w400, + maxLines: 3, + ) + ], + ); + } +} diff --git a/packages/hms_room_kit/lib/src/meeting/meeting_grid_component.dart b/packages/hms_room_kit/lib/src/meeting/meeting_grid_component.dart index 7f3a0997b..c4ffdffd2 100644 --- a/packages/hms_room_kit/lib/src/meeting/meeting_grid_component.dart +++ b/packages/hms_room_kit/lib/src/meeting/meeting_grid_component.dart @@ -5,6 +5,7 @@ import 'dart:io'; ///Package imports import 'package:flutter/material.dart'; +import 'package:hms_room_kit/src/meeting/waiting_room_screen.dart'; import 'package:hmssdk_flutter/hmssdk_flutter.dart'; import 'package:provider/provider.dart'; import 'package:tuple/tuple.dart'; @@ -43,6 +44,7 @@ class MeetingGridComponent extends StatelessWidget { color: Colors.transparent, height: double.infinity, width: double.infinity, + child: WaitingRoomScreen(), )); } return Selector>( diff --git a/packages/hms_room_kit/lib/src/meeting/waiting_room_screen.dart b/packages/hms_room_kit/lib/src/meeting/waiting_room_screen.dart new file mode 100644 index 000000000..092e4a40e --- /dev/null +++ b/packages/hms_room_kit/lib/src/meeting/waiting_room_screen.dart @@ -0,0 +1,101 @@ +library; + +///Package imports +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:provider/provider.dart'; + +///Project imports +import 'package:hms_room_kit/hms_room_kit.dart'; +import 'package:hms_room_kit/src/meeting/meeting_store.dart'; + +///[WaitingRoomScreen] is a widget that is used to render the waiting room screen +///This is rendered when the user is waiting for the host to join +///or when the user has only screenshare option +class WaitingRoomScreen extends StatelessWidget { + + ///[showScreenshareOption] is a function that returns true if the user has only screenshare option + bool showScreenshareOption(MeetingStore meetingStore) { + return (!(meetingStore.localPeer?.role.publishSettings?.allowed + .contains("video") ?? + true) && + (meetingStore.localPeer?.role.publishSettings?.allowed + .contains("screen") ?? + false) && + !(meetingStore.localPeer?.role.publishSettings?.allowed + .contains("audio") ?? + true)); + } + + @override + Widget build(BuildContext context) { + var meetingStore = context.watch(); + + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: showScreenshareOption(meetingStore) + ? [ + CircleAvatar( + backgroundColor: HMSThemeColors.surfaceDefault, + radius: 40, + child: SvgPicture.asset( + "packages/hms_room_kit/lib/src/assets/icons/screen_share.svg", + height: 37, + width: 37, + colorFilter: ColorFilter.mode( + HMSThemeColors.onSurfaceHighEmphasis, BlendMode.srcIn), + ), + ), + const SizedBox( + height: 24, + ), + HMSTitleText( + text: "Ready to present", + textColor: HMSThemeColors.onSurfaceHighEmphasis, + fontSize: 24, + lineHeight: 32, + ), + const SizedBox( + height: 8, + ), + HMSTitleText( + text: + "Select the screenshare button \nfrom the menu to start presenting.", + textColor: HMSThemeColors.onSurfaceMediumEmphasis, + fontWeight: FontWeight.w400, + maxLines: 3, + ) + ] + : [ + CircleAvatar( + backgroundColor: HMSThemeColors.surfaceDefault, + radius: 40, + child: SvgPicture.asset( + "packages/hms_room_kit/lib/src/assets/icons/add_peer.svg", + height: 37, + width: 37, + colorFilter: ColorFilter.mode( + HMSThemeColors.onSurfaceHighEmphasis, BlendMode.srcIn), + ), + ), + const SizedBox( + height: 24, + ), + HMSTitleText( + text: "Waiting for Host to join", + textColor: HMSThemeColors.onSurfaceHighEmphasis, + fontSize: 24, + lineHeight: 32, + ), + const SizedBox( + height: 8, + ), + HMSTitleText( + text: "Sit back and relax", + textColor: HMSThemeColors.onSurfaceMediumEmphasis, + fontWeight: FontWeight.w400, + ) + ], + ); + } +} diff --git a/packages/hms_room_kit/lib/src/widgets/bottom_sheets/app_utilities_bottom_sheet.dart b/packages/hms_room_kit/lib/src/widgets/bottom_sheets/app_utilities_bottom_sheet.dart index dfeee8b86..b4ebf285f 100644 --- a/packages/hms_room_kit/lib/src/widgets/bottom_sheets/app_utilities_bottom_sheet.dart +++ b/packages/hms_room_kit/lib/src/widgets/bottom_sheets/app_utilities_bottom_sheet.dart @@ -379,7 +379,7 @@ class _AppUtilitiesBottomSheetState extends State { ? "Recording" : "Record", ), - if (meetingStore.isNoiseCancellationAvailable && + if (meetingStore.isNoiseCancellationAvailable && meetingStore.localPeer?.audioTrack != null && meetingStore.isMicOn) MoreOptionItem( onTap: () async { diff --git a/packages/hms_room_kit/lib/src/widgets/meeting_modes/one_to_one_mode.dart b/packages/hms_room_kit/lib/src/widgets/meeting_modes/one_to_one_mode.dart index c5ad88889..1b61abdc0 100644 --- a/packages/hms_room_kit/lib/src/widgets/meeting_modes/one_to_one_mode.dart +++ b/packages/hms_room_kit/lib/src/widgets/meeting_modes/one_to_one_mode.dart @@ -11,9 +11,10 @@ import 'package:provider/provider.dart'; ///Project imports import 'package:hms_room_kit/src/model/peer_track_node.dart'; import 'package:hms_room_kit/src/widgets/common_widgets/inset_tile.dart'; -import 'package:hms_room_kit/src/widgets/grid_layouts/listenable_peer_widget.dart'; import 'package:hms_room_kit/src/widgets/meeting_modes/custom_one_to_one_grid.dart'; import 'package:hms_room_kit/src/widgets/peer_widgets/inset_collapsed_view.dart'; +import 'package:hms_room_kit/src/layout_api/hms_room_layout.dart'; +import 'package:hms_room_kit/src/meeting/empty_room_screen.dart'; ///[OneToOneMode] is used to render the meeting screen in inset Tile mode class OneToOneMode extends StatefulWidget { @@ -88,43 +89,49 @@ class _OneToOneModeState extends State { ) ///This handles the case where local peer is the only peer in the room with audio or video track - : (oneToOnePeer != null && widget.peerTracks.length == 1) - ? ListenablePeerWidget( - peerTracks: [oneToOnePeer!], - index: 0, - ) + // : (oneToOnePeer != null && widget.peerTracks.length == 1) + // ? ListenablePeerWidget( + // peerTracks: [oneToOnePeer!], + // index: 0, + // ) - ///This handles when the local peer is also present as well as the other peers are also there. - ///i.e. this handles the normal flow - : Stack( - children: [ - CustomOneToOneGrid( - peerTracks: widget.peerTracks, - ), - DraggableWidget( - dragAnimationScale: 1, - topMargin: 10, - bottomMargin: Platform.isIOS - ? widget.bottomMargin + 20 - : widget.bottomMargin, - horizontalSpace: 8, - child: isMinimized - ? InsetCollapsedView( + ///This handles when the local peer is also present as well as the other peers are also there. + ///i.e. this handles the normal flow + : Stack( + children: [ + ///If there is only one peer in the room and the peer is local peer + ///we show the empty room screen + ///This is the case when the local peer is the only peer in the room + ///else we show the normal grid view + (widget.peerTracks.length == 1 && oneToOnePeer != null && HMSRoomLayout.peerType==PeerRoleType.conferencing) + ? Center(child: EmptyRoomScreen()) + : CustomOneToOneGrid( + peerTracks: widget.peerTracks, + ), + DraggableWidget( + dragAnimationScale: 1, + topMargin: 10, + bottomMargin: Platform.isIOS + ? widget.bottomMargin + 20 + : widget.bottomMargin, + horizontalSpace: 8, + child: isMinimized + ? InsetCollapsedView( + callbackFunction: toggleMinimizedView, + ) + : ClipRRect( + borderRadius: BorderRadius.circular(16.0), + child: ChangeNotifierProvider.value( + key: ValueKey( + oneToOnePeer?.uid ?? "" "video_view"), + value: oneToOnePeer, + child: InsetTile( callbackFunction: toggleMinimizedView, - ) - : ClipRRect( - borderRadius: BorderRadius.circular(16.0), - child: ChangeNotifierProvider.value( - key: ValueKey(oneToOnePeer?.uid ?? - "" "video_view"), - value: oneToOnePeer, - child: InsetTile( - callbackFunction: toggleMinimizedView, - ), - ), - )) - ], - ), + ), + ), + )) + ], + ), ), ); }