From 7de4906ad2e996a86bc29fe419886a0efc4658cf Mon Sep 17 00:00:00 2001 From: Decoder07 Date: Mon, 22 Jul 2024 16:04:52 +0530 Subject: [PATCH] Added Change Role option in prebuilt --- .../change_role_option_dialog.dart | 211 ------------------ .../participants_bottom_sheet.dart | 52 ++++- .../remote_peer_bottom_sheet.dart | 50 +++++ .../widgets/common_widgets/hms_dropdown.dart | 57 +++-- 4 files changed, 135 insertions(+), 235 deletions(-) delete mode 100644 packages/hms_room_kit/lib/src/widgets/app_dialogs/change_role_option_dialog.dart diff --git a/packages/hms_room_kit/lib/src/widgets/app_dialogs/change_role_option_dialog.dart b/packages/hms_room_kit/lib/src/widgets/app_dialogs/change_role_option_dialog.dart deleted file mode 100644 index 5fe15ce12..000000000 --- a/packages/hms_room_kit/lib/src/widgets/app_dialogs/change_role_option_dialog.dart +++ /dev/null @@ -1,211 +0,0 @@ -//Package imports -import 'package:dropdown_button2/dropdown_button2.dart'; -import 'package:flutter/material.dart'; -import 'package:collection/collection.dart'; - -//Project imports -import 'package:hmssdk_flutter/hmssdk_flutter.dart'; - -import 'package:hms_room_kit/src/common/app_color.dart'; -import 'package:hms_room_kit/src/common/utility_functions.dart'; -import 'package:hms_room_kit/src/widgets/common_widgets/hms_dropdown.dart'; -import 'package:hms_room_kit/src/widgets/common_widgets/hms_subtitle_text.dart'; -import 'package:hms_room_kit/src/widgets/common_widgets/hms_text_style.dart'; -import 'package:hms_room_kit/src/widgets/common_widgets/hms_title_text.dart'; - -class ChangeRoleOptionDialog extends StatefulWidget { - final String peerName; - final List roles; - final Function(HMSRole, bool) changeRole; - final bool force; - final HMSPeer peer; - const ChangeRoleOptionDialog({ - super.key, - required this.peerName, - required this.roles, - required this.changeRole, - required this.peer, - this.force = true, - }); - - @override - ChangeRoleOptionDialogState createState() => ChangeRoleOptionDialogState(); -} - -class ChangeRoleOptionDialogState extends State { - late bool askPermission; - HMSRole? valueChoose; - - void _updateDropDownValue(dynamic newValue) { - valueChoose = newValue; - } - - @override - void initState() { - super.initState(); - askPermission = !widget.force; - valueChoose = widget.roles[0]; - } - - @override - Widget build(BuildContext context) { - String message = "Change the role of ‘${widget.peerName}’ to"; - double width = MediaQuery.of(context).size.width; - return AlertDialog( - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), - actionsPadding: const EdgeInsets.only(left: 20, right: 20, bottom: 10), - backgroundColor: themeBottomSheetColor, - insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8), - contentPadding: - const EdgeInsets.only(top: 20, bottom: 15, left: 24, right: 24), - title: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - HMSTitleText( - text: "Change Role", - fontSize: 20, - letterSpacing: 0.15, - textColor: themeDefaultColor, - ), - const SizedBox( - height: 8, - ), - HMSSubtitleText(text: message, textColor: themeSubHeadingColor), - ], - ), - content: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Container( - padding: const EdgeInsets.only(left: 10, right: 5), - decoration: BoxDecoration( - color: themeSurfaceColor, - borderRadius: BorderRadius.circular(10.0), - border: Border.all( - color: borderColor, style: BorderStyle.solid, width: 0.80), - ), - child: DropdownButtonHideUnderline( - child: HMSDropDown( - dropDownItems: [ - ...widget.roles - .sortedBy((element) => element.priority.toString()) - .map((role) => DropdownMenuItem( - value: role, - child: HMSTitleText( - text: role.name, - textColor: themeDefaultColor, - fontWeight: FontWeight.w400, - ), - )) - .toList(), - ], - iconStyleData: IconStyleData( - icon: const Icon(Icons.keyboard_arrow_down), - iconEnabledColor: themeDefaultColor, - ), - selectedValue: valueChoose, - updateSelectedValue: _updateDropDownValue)), - ), - const SizedBox( - height: 15, - ), - if (!widget.peer.isLocal) - Row( - children: [ - SizedBox( - width: 25, - height: 25, - child: Checkbox( - value: askPermission, - activeColor: Colors.blue, - onChanged: (bool? value) { - if (value != null) { - askPermission = value; - setState(() {}); - } - }), - ), - const SizedBox( - width: 10.5, - ), - SizedBox( - width: width * 0.5, - child: Text( - "Request permission from the user", - style: HMSTextStyle.setTextStyle( - color: themeDefaultColor, - fontSize: 14, - height: 20 / 14, - letterSpacing: 0.25, - ), - )), - ], - ), - ], - ), - actions: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - ElevatedButton( - style: ButtonStyle( - shadowColor: MaterialStateProperty.all(themeSurfaceColor), - backgroundColor: - MaterialStateProperty.all(themeBottomSheetColor), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - side: const BorderSide( - width: 1, color: Color.fromRGBO(107, 125, 153, 1)), - borderRadius: BorderRadius.circular(8.0), - ))), - onPressed: () => Navigator.pop(context, false), - child: Padding( - padding: - const EdgeInsets.symmetric(vertical: 12, horizontal: 10), - child: Text('Cancel', - style: HMSTextStyle.setTextStyle( - color: themeDefaultColor, - fontSize: 16, - fontWeight: FontWeight.w600, - letterSpacing: 0.50)), - )), - ElevatedButton( - style: ButtonStyle( - shadowColor: MaterialStateProperty.all(themeSurfaceColor), - backgroundColor: MaterialStateProperty.all(hmsdefaultColor), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - side: BorderSide(width: 1, color: hmsdefaultColor), - borderRadius: BorderRadius.circular(8.0), - ))), - onPressed: () => { - if (valueChoose == null) - { - Utilities.showToast("Please select a role"), - } - else - { - Navigator.pop(context), - widget.changeRole(valueChoose!, !askPermission) - } - }, - child: Padding( - padding: - const EdgeInsets.symmetric(vertical: 12, horizontal: 10), - child: Text( - 'Change', - style: HMSTextStyle.setTextStyle( - color: themeDefaultColor, - fontSize: 16, - fontWeight: FontWeight.w600, - letterSpacing: 0.50), - ), - ), - ), - ], - ) - ], - ); - } -} diff --git a/packages/hms_room_kit/lib/src/widgets/bottom_sheets/participants_bottom_sheet.dart b/packages/hms_room_kit/lib/src/widgets/bottom_sheets/participants_bottom_sheet.dart index df5b53833..758621ae5 100644 --- a/packages/hms_room_kit/lib/src/widgets/bottom_sheets/participants_bottom_sheet.dart +++ b/packages/hms_room_kit/lib/src/widgets/bottom_sheets/participants_bottom_sheet.dart @@ -14,6 +14,7 @@ import 'package:hmssdk_flutter/hmssdk_flutter.dart'; ///Project imports import 'package:hms_room_kit/hms_room_kit.dart'; +import 'package:hms_room_kit/src/widgets/bottom_sheets/change_role_bottom_sheet.dart'; import 'package:hms_room_kit/src/widgets/toasts/hms_toasts_type.dart'; import 'package:hms_room_kit/src/layout_api/hms_room_layout.dart'; import 'package:hms_room_kit/src/model/participant_store.dart'; @@ -177,6 +178,34 @@ class _ParticipantsBottomSheetState extends State { break; case 5: + ///This is called when someone clicks on switch Role + Navigator.pop(context); + showModalBottomSheet( + isScrollControlled: true, + backgroundColor: HMSThemeColors.surfaceDim, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(16), + topRight: Radius.circular(16)), + ), + context: context, + builder: (ctx) => ChangeNotifierProvider.value( + value: meetingStore, + child: Padding( + padding: EdgeInsets.only( + bottom: MediaQuery.of(ctx).viewInsets.bottom), + child: ChangeRoleBottomSheet( + peerName: peer.name, + roles: meetingStore.roles, + peer: peer, + changeRole: (newRole, isForceChange) => + meetingStore.changeRoleOfPeer( + peer: peer, + roleName: newRole, + forceChange: true)))), + ); + case 6: + ///This is called when someone clicks on remove Participant meetingStore.removePeerFromRoom(peer); break; @@ -299,9 +328,30 @@ class _ParticipantsBottomSheetState extends State { ), ]), ), - if (removePeerPermission) + if (changeRolePermission) PopupMenuItem( value: 5, + child: Row(children: [ + SvgPicture.asset( + "packages/hms_room_kit/lib/src/assets/icons/peer_settings.svg", + colorFilter: ColorFilter.mode( + HMSThemeColors.onSurfaceHighEmphasis, + BlendMode.srcIn)), + const SizedBox( + width: 8, + ), + HMSTitleText( + text: "Switch Role", + textColor: HMSThemeColors.onSurfaceHighEmphasis, + fontSize: 14, + lineHeight: 20, + letterSpacing: 0.1, + ), + ]), + ), + if (removePeerPermission) + PopupMenuItem( + value: 6, child: Row(children: [ SvgPicture.asset( "packages/hms_room_kit/lib/src/assets/icons/peer_remove.svg", diff --git a/packages/hms_room_kit/lib/src/widgets/bottom_sheets/remote_peer_bottom_sheet.dart b/packages/hms_room_kit/lib/src/widgets/bottom_sheets/remote_peer_bottom_sheet.dart index 30e5525cb..81857294f 100644 --- a/packages/hms_room_kit/lib/src/widgets/bottom_sheets/remote_peer_bottom_sheet.dart +++ b/packages/hms_room_kit/lib/src/widgets/bottom_sheets/remote_peer_bottom_sheet.dart @@ -8,6 +8,7 @@ import 'package:flutter_svg/flutter_svg.dart'; import 'package:hms_room_kit/hms_room_kit.dart'; import 'package:hms_room_kit/src/meeting/meeting_store.dart'; import 'package:hms_room_kit/src/model/peer_track_node.dart'; +import 'package:hms_room_kit/src/widgets/bottom_sheets/change_role_bottom_sheet.dart'; import 'package:hms_room_kit/src/widgets/common_widgets/hms_cross_button.dart'; import 'package:hms_room_kit/src/widgets/common_widgets/hms_subheading_text.dart'; import 'package:hmssdk_flutter/hmssdk_flutter.dart'; @@ -220,6 +221,55 @@ class _RemotePeerBottomSheetState extends State { textColor: widget.peerTrackNode.track == null ? HMSThemeColors.onSurfaceLowEmphasis : HMSThemeColors.onSurfaceHighEmphasis)), + if (widget.meetingStore.localPeer?.role.permissions + .changeRole ?? + false) + ListTile( + horizontalTitleGap: 2, + onTap: () async { + Navigator.pop(context); + showModalBottomSheet( + isScrollControlled: true, + backgroundColor: HMSThemeColors.surfaceDim, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(16), + topRight: Radius.circular(16)), + ), + context: context, + builder: (ctx) => ChangeNotifierProvider.value( + value: widget.meetingStore, + child: Padding( + padding: EdgeInsets.only( + bottom: MediaQuery.of(ctx) + .viewInsets + .bottom), + child: ChangeRoleBottomSheet( + peerName: + widget.peerTrackNode.peer.name, + roles: widget.meetingStore.roles, + peer: widget.peerTrackNode.peer, + changeRole: (newRole, isForceChange) => + widget.meetingStore + .changeRoleOfPeer( + peer: widget + .peerTrackNode.peer, + roleName: newRole, + forceChange: + isForceChange)))), + ); + }, + contentPadding: EdgeInsets.zero, + leading: SvgPicture.asset( + "packages/hms_room_kit/lib/src/assets/icons/peer_settings.svg", + semanticsLabel: "fl_change_role", + colorFilter: ColorFilter.mode( + HMSThemeColors.onSurfaceHighEmphasis, + BlendMode.srcIn), + ), + title: HMSSubheadingText( + text: "Switch Role", + textColor: HMSThemeColors.onSurfaceHighEmphasis)), // ListTile( // horizontalTitleGap: 2, // onTap: () async { diff --git a/packages/hms_room_kit/lib/src/widgets/common_widgets/hms_dropdown.dart b/packages/hms_room_kit/lib/src/widgets/common_widgets/hms_dropdown.dart index 41380e833..dfdd2b4d6 100644 --- a/packages/hms_room_kit/lib/src/widgets/common_widgets/hms_dropdown.dart +++ b/packages/hms_room_kit/lib/src/widgets/common_widgets/hms_dropdown.dart @@ -1,7 +1,14 @@ +library; + +///Package imports import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:flutter/material.dart'; -import 'package:hms_room_kit/src/common/app_color.dart'; +///Project imports +import 'package:hms_room_kit/hms_room_kit.dart'; + +///[HMSDropDown] is a dropdown that allows the user to select an item from a list of items +///It is wrapper around the [DropdownButton2] widget and uses 100ms default themes class HMSDropDown extends StatefulWidget { final Key? dropdownKey; final Widget? dropdownHint; @@ -14,19 +21,22 @@ class HMSDropDown extends StatefulWidget { final dynamic selectedValue; final Function(dynamic) updateSelectedValue; final bool isExpanded; - const HMSDropDown( - {super.key, - this.dropdownKey, - this.dropdownHint, - this.dropdownButton, - this.buttonStyleData, - this.dropdownStyleData, - this.menuItemStyleData, - required this.dropDownItems, - this.iconStyleData, - required this.selectedValue, - this.isExpanded = true, - required this.updateSelectedValue}); + final double dropdownWidth; + const HMSDropDown({ + super.key, + this.dropdownKey, + this.dropdownHint, + this.dropdownButton, + this.buttonStyleData, + this.dropdownStyleData, + this.menuItemStyleData, + required this.dropDownItems, + this.iconStyleData, + required this.selectedValue, + this.isExpanded = true, + this.dropdownWidth = 48, + required this.updateSelectedValue, + }); @override State createState() => _HMSDropDownState(); } @@ -42,7 +52,7 @@ class _HMSDropDownState extends State { @override Widget build(BuildContext context) { - final width = MediaQuery.of(context).size.width; + final width = MediaQuery.of(context).size.width - widget.dropdownWidth; return DropdownButton2( key: widget.dropdownKey, hint: widget.dropdownHint, @@ -58,25 +68,26 @@ class _HMSDropDownState extends State { customButton: widget.dropdownButton, dropdownStyleData: widget.dropdownStyleData == null ? DropdownStyleData( - width: width * 0.7, + width: width, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), - color: themeSurfaceColor, - border: Border.all(color: borderColor)), - offset: const Offset(-10, -10), + borderRadius: BorderRadius.circular(8), + color: HMSThemeColors.surfaceDefault, + ), ) : widget.dropdownStyleData!, iconStyleData: widget.iconStyleData == null ? IconStyleData( icon: const Icon(Icons.keyboard_arrow_down), - iconEnabledColor: iconColor) + iconEnabledColor: HMSThemeColors.onSurfaceHighEmphasis) : widget.iconStyleData!, buttonStyleData: widget.buttonStyleData == null ? ButtonStyleData( - width: width * 0.7, + width: width, height: 48, + padding: EdgeInsets.symmetric(horizontal: 16), decoration: BoxDecoration( - color: themeSurfaceColor, + color: HMSThemeColors.surfaceDefault, + borderRadius: BorderRadius.circular(8), ), ) : widget.buttonStyleData!,