@100mslive/react-native-room-kit 1.0.5-beta.0 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/HMSRoomSetup.js +1 -0
- package/lib/commonjs/HMSRoomSetup.js.map +1 -1
- package/lib/commonjs/components/AvatarView.js +0 -1
- package/lib/commonjs/components/AvatarView.js.map +1 -1
- package/lib/commonjs/components/BottomSheet.js +13 -3
- package/lib/commonjs/components/BottomSheet.js.map +1 -1
- package/lib/commonjs/components/Chat/ChatBanner.js +10 -3
- package/lib/commonjs/components/Chat/ChatBanner.js.map +1 -1
- package/lib/commonjs/components/Chat/ChatFilterBottomSheetView.js +5 -1
- package/lib/commonjs/components/Chat/ChatFilterBottomSheetView.js.map +1 -1
- package/lib/commonjs/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.js +4 -1
- package/lib/commonjs/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.js.map +1 -1
- package/lib/commonjs/components/DefaultModal.js +9 -1
- package/lib/commonjs/components/DefaultModal.js.map +1 -1
- package/lib/commonjs/components/Footer.js +14 -4
- package/lib/commonjs/components/Footer.js.map +1 -1
- package/lib/commonjs/components/GridView.js +23 -9
- package/lib/commonjs/components/GridView.js.map +1 -1
- package/lib/commonjs/components/HMSHLSMessageList.js +5 -2
- package/lib/commonjs/components/HMSHLSMessageList.js.map +1 -1
- package/lib/commonjs/components/HMSKeyboardAvoidingView.android.js +42 -0
- package/lib/commonjs/components/HMSKeyboardAvoidingView.android.js.map +1 -0
- package/lib/commonjs/components/HMSManageAudioOutput.js +0 -1
- package/lib/commonjs/components/HMSManageAudioOutput.js.map +1 -1
- package/lib/commonjs/components/HMSNotifications.js +9 -1
- package/lib/commonjs/components/HMSNotifications.js.map +1 -1
- package/lib/commonjs/components/HMSRecordingIndicator.js +5 -4
- package/lib/commonjs/components/HMSRecordingIndicator.js.map +1 -1
- package/lib/commonjs/components/HMSTextInput.js +2 -3
- package/lib/commonjs/components/HMSTextInput.js.map +1 -1
- package/lib/commonjs/components/MeetingScreenContent.js +3 -1
- package/lib/commonjs/components/MeetingScreenContent.js.map +1 -1
- package/lib/commonjs/components/MiniView.js +12 -13
- package/lib/commonjs/components/MiniView.js.map +1 -1
- package/lib/commonjs/components/Participants/ParticipantsGroupHeader.js +1 -0
- package/lib/commonjs/components/Participants/ParticipantsGroupHeader.js.map +1 -1
- package/lib/commonjs/components/PeerVideoTile/PeerNameAndNetwork.js +0 -1
- package/lib/commonjs/components/PeerVideoTile/PeerNameAndNetwork.js.map +1 -1
- package/lib/commonjs/components/PeerVideoTile/VideoView.js +0 -1
- package/lib/commonjs/components/PeerVideoTile/VideoView.js.map +1 -1
- package/lib/commonjs/components/Preview.js +2 -1
- package/lib/commonjs/components/Preview.js.map +1 -1
- package/lib/commonjs/components/TilesContainer.js +3 -3
- package/lib/commonjs/components/TilesContainer.js.map +1 -1
- package/lib/commonjs/hooks-util.js +20 -3
- package/lib/commonjs/hooks-util.js.map +1 -1
- package/lib/commonjs/utils/theme.js +0 -1
- package/lib/commonjs/utils/theme.js.map +1 -1
- package/lib/commonjs/utils.js +0 -1
- package/lib/commonjs/utils.js.map +1 -1
- package/lib/module/HMSRoomSetup.js +2 -1
- package/lib/module/HMSRoomSetup.js.map +1 -1
- package/lib/module/components/AvatarView.js +0 -1
- package/lib/module/components/AvatarView.js.map +1 -1
- package/lib/module/components/BottomSheet.js +13 -3
- package/lib/module/components/BottomSheet.js.map +1 -1
- package/lib/module/components/Chat/ChatBanner.js +10 -3
- package/lib/module/components/Chat/ChatBanner.js.map +1 -1
- package/lib/module/components/Chat/ChatFilterBottomSheetView.js +5 -1
- package/lib/module/components/Chat/ChatFilterBottomSheetView.js.map +1 -1
- package/lib/module/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.js +4 -1
- package/lib/module/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.js.map +1 -1
- package/lib/module/components/DefaultModal.js +9 -1
- package/lib/module/components/DefaultModal.js.map +1 -1
- package/lib/module/components/Footer.js +14 -5
- package/lib/module/components/Footer.js.map +1 -1
- package/lib/module/components/GridView.js +24 -10
- package/lib/module/components/GridView.js.map +1 -1
- package/lib/module/components/HMSHLSMessageList.js +5 -2
- package/lib/module/components/HMSHLSMessageList.js.map +1 -1
- package/lib/module/components/HMSKeyboardAvoidingView.android.js +34 -0
- package/lib/module/components/HMSKeyboardAvoidingView.android.js.map +1 -0
- package/lib/module/components/HMSManageAudioOutput.js +0 -1
- package/lib/module/components/HMSManageAudioOutput.js.map +1 -1
- package/lib/module/components/HMSNotifications.js +9 -2
- package/lib/module/components/HMSNotifications.js.map +1 -1
- package/lib/module/components/HMSRecordingIndicator.js +5 -4
- package/lib/module/components/HMSRecordingIndicator.js.map +1 -1
- package/lib/module/components/HMSTextInput.js +2 -3
- package/lib/module/components/HMSTextInput.js.map +1 -1
- package/lib/module/components/LeaveRoomBottomSheet.js +1 -0
- package/lib/module/components/LeaveRoomBottomSheet.js.map +1 -1
- package/lib/module/components/MeetingScreenContent.js +3 -1
- package/lib/module/components/MeetingScreenContent.js.map +1 -1
- package/lib/module/components/MiniView.js +12 -13
- package/lib/module/components/MiniView.js.map +1 -1
- package/lib/module/components/Participants/ParticipantsGroupHeader.js +1 -0
- package/lib/module/components/Participants/ParticipantsGroupHeader.js.map +1 -1
- package/lib/module/components/PeerVideoTile/PeerNameAndNetwork.js +0 -1
- package/lib/module/components/PeerVideoTile/PeerNameAndNetwork.js.map +1 -1
- package/lib/module/components/PeerVideoTile/VideoView.js +0 -1
- package/lib/module/components/PeerVideoTile/VideoView.js.map +1 -1
- package/lib/module/components/Preview.js +2 -1
- package/lib/module/components/Preview.js.map +1 -1
- package/lib/module/components/TilesContainer.js +3 -3
- package/lib/module/components/TilesContainer.js.map +1 -1
- package/lib/module/hooks-util.js +20 -3
- package/lib/module/hooks-util.js.map +1 -1
- package/lib/module/utils/theme.js +0 -1
- package/lib/module/utils/theme.js.map +1 -1
- package/lib/module/utils.js +0 -1
- package/lib/module/utils.js.map +1 -1
- package/lib/typescript/HMSRoomSetup.d.ts.map +1 -1
- package/lib/typescript/components/BottomSheet.d.ts +1 -0
- package/lib/typescript/components/BottomSheet.d.ts.map +1 -1
- package/lib/typescript/components/Chat/ChatBanner.d.ts.map +1 -1
- package/lib/typescript/components/Chat/ChatFilterBottomSheetView.d.ts.map +1 -1
- package/lib/typescript/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.d.ts.map +1 -1
- package/lib/typescript/components/DefaultModal.d.ts.map +1 -1
- package/lib/typescript/components/Footer.d.ts.map +1 -1
- package/lib/typescript/components/GridView.d.ts.map +1 -1
- package/lib/typescript/components/HMSHLSMessageList.d.ts.map +1 -1
- package/lib/typescript/components/HMSKeyboardAvoidingView.android.d.ts +9 -0
- package/lib/typescript/components/HMSKeyboardAvoidingView.android.d.ts.map +1 -0
- package/lib/typescript/components/HMSNotifications.d.ts.map +1 -1
- package/lib/typescript/components/HMSRecordingIndicator.d.ts.map +1 -1
- package/lib/typescript/components/HMSTextInput.d.ts.map +1 -1
- package/lib/typescript/components/MeetingScreenContent.d.ts.map +1 -1
- package/lib/typescript/components/MiniView.d.ts +2 -3
- package/lib/typescript/components/MiniView.d.ts.map +1 -1
- package/lib/typescript/components/TilesContainer.d.ts.map +1 -1
- package/lib/typescript/hooks-util.d.ts +1 -0
- package/lib/typescript/hooks-util.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/HMSRoomSetup.tsx +3 -0
- package/src/components/BottomSheet.tsx +43 -6
- package/src/components/Chat/ChatBanner.tsx +9 -0
- package/src/components/Chat/ChatFilterBottomSheetView.tsx +7 -1
- package/src/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.tsx +6 -1
- package/src/components/DefaultModal.tsx +12 -1
- package/src/components/Footer.tsx +17 -3
- package/src/components/GridView.tsx +27 -15
- package/src/components/HMSHLSMessageList.tsx +8 -2
- package/src/components/HMSKeyboardAvoidingView.android.tsx +49 -0
- package/src/components/HMSNotifications.tsx +11 -1
- package/src/components/HMSRecordingIndicator.tsx +11 -2
- package/src/components/HMSTextInput.tsx +1 -0
- package/src/components/MeetingScreenContent.tsx +3 -1
- package/src/components/MiniView.tsx +18 -15
- package/src/components/Preview.tsx +2 -2
- package/src/components/TilesContainer.tsx +9 -5
- package/src/hooks-util.ts +26 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridView.d.ts","sourceRoot":"","sources":["../../../src/components/GridView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAErE,OAAO,EAAQ,QAAQ,
|
|
1
|
+
{"version":3,"file":"GridView.d.ts","sourceRoot":"","sources":["../../../src/components/GridView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAErE,OAAO,EAAQ,QAAQ,EAAmC,MAAM,cAAc,CAAC;AAM/E,OAAO,KAAK,EAAE,OAAO,EAAW,MAAM,6BAA6B,CAAC;AAKpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAQpD,MAAM,MAAM,aAAa,GAAG;IAC1B,mBAAmB,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACxD,WAAW,EAAE,aAAa,EAAE,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB,CAAC,IAAI,EAAE,aAAa,GAAG,GAAG,CAAC;IAChD,0BAA0B,IAAI,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;IACzE,8BAA8B,IAAI,KAAK,CAAC,SAAS,CAC/C,QAAQ,CAAC,aAAa,CAAC,CACxB,GAAG,IAAI,CAAC;CACV,CAAC;AAOF,eAAO,MAAM,QAAQ,wFAoHpB,CAAC;AAgBF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;IACjE,mBAAmB,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACxD,WAAW,EAAE,aAAa,EAAE,EAAE,CAAC;CAChC,CAAC;AA8EF,MAAM,MAAM,qBAAqB,GAAG;IAClC,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;IACjE,mBAAmB,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;CACzD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HMSHLSMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/HMSHLSMessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HMSHLSMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/HMSHLSMessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EA+CrC,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
import Animated from 'react-native-reanimated';
|
|
4
|
+
export interface HMSKeyboardAvoidingViewProps {
|
|
5
|
+
style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
|
|
6
|
+
bottomOffset?: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const HMSKeyboardAvoidingView: React.FC<HMSKeyboardAvoidingViewProps>;
|
|
9
|
+
//# sourceMappingURL=HMSKeyboardAvoidingView.android.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HMSKeyboardAvoidingView.android.d.ts","sourceRoot":"","sources":["../../../src/components/HMSKeyboardAvoidingView.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,QAIN,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,4BAA4B;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,4BAA4B,CAkC7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HMSNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/HMSNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HMSNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/HMSNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,WAAW,qBAAqB;CAAG;AAOzC,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6H5D,CAAC;AAEF,eAAO,MAAM,yBAAyB,cAcrC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HMSRecordingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/HMSRecordingIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HMSRecordingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/HMSRecordingIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,qBAAqB,gCAyCjC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HMSTextInput.d.ts","sourceRoot":"","sources":["../../../src/components/HMSTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,CACE;IACE,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C,GACD;IACE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACjD,eAAe,IAAI,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C,GACD;IAAE,SAAS,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAClD,CAAC;AAEJ,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"HMSTextInput.d.ts","sourceRoot":"","sources":["../../../src/components/HMSTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,CACE;IACE,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C,GACD;IACE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACjD,eAAe,IAAI,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C,GACD;IAAE,SAAS,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAClD,CAAC;AAEJ,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyIpD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MeetingScreenContent.d.ts","sourceRoot":"","sources":["../../../src/components/MeetingScreenContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAY7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"MeetingScreenContent.d.ts","sourceRoot":"","sources":["../../../src/components/MeetingScreenContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAY7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAapD,UAAU,yBAAyB;IACjC,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqFpE,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { MutableRefObject } from 'react';
|
|
3
|
-
import type { LayoutRectangle } from 'react-native';
|
|
4
2
|
import type { PeerVideoTileViewProps } from './PeerVideoTile/PeerVideoTileView';
|
|
5
3
|
export interface MiniViewProps extends Omit<PeerVideoTileViewProps, 'peerTrackNode'> {
|
|
6
|
-
|
|
4
|
+
boundingBoxWidth: number | null;
|
|
5
|
+
boundingBoxHeight: number | null;
|
|
7
6
|
}
|
|
8
7
|
export declare const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>>;
|
|
9
8
|
//# sourceMappingURL=MiniView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniView.d.ts","sourceRoot":"","sources":["../../../src/components/MiniView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MiniView.d.ts","sourceRoot":"","sources":["../../../src/components/MiniView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAiBhF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,eAAe,CAAC;IACrD,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CA0I/D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TilesContainer.d.ts","sourceRoot":"","sources":["../../../src/components/TilesContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAG3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAKpD,UAAU,mBAAmB;IAC3B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,mBAAmB,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACxD,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;CAClE;
|
|
1
|
+
{"version":3,"file":"TilesContainer.d.ts","sourceRoot":"","sources":["../../../src/components/TilesContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAG3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAKpD,UAAU,mBAAmB;IAC3B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,mBAAmB,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACxD,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;CAClE;AA0GD,QAAA,MAAM,cAAc,iDAA8B,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -102,5 +102,6 @@ export declare const useSavePropsToStore: (props: HMSPrebuiltProps, dispatch: Ap
|
|
|
102
102
|
export declare const useStartRecording: () => {
|
|
103
103
|
startRecording: () => void;
|
|
104
104
|
};
|
|
105
|
+
export declare const useAndroidSoftInputAdjustResize: () => void;
|
|
105
106
|
export {};
|
|
106
107
|
//# sourceMappingURL=hooks-util.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks-util.d.ts","sourceRoot":"","sources":["../../src/hooks-util.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAC1B,SAAS,EACT,YAAY,EAIZ,OAAO,EAGP,oBAAoB,EAGpB,MAAM,
|
|
1
|
+
{"version":3,"file":"hooks-util.d.ts","sourceRoot":"","sources":["../../src/hooks-util.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@100mslive/react-native-room-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"typescript": "^5.0.2"
|
|
80
80
|
},
|
|
81
81
|
"peerDependencies": {
|
|
82
|
-
"@100mslive/react-native-hms": "1.9.
|
|
82
|
+
"@100mslive/react-native-hms": "1.9.5",
|
|
83
83
|
"@react-native-community/blur": "^4.3.2",
|
|
84
84
|
"@react-native-masked-view/masked-view": "^0.2.9",
|
|
85
85
|
"@shopify/flash-list": "^1.4.3",
|
package/src/HMSRoomSetup.tsx
CHANGED
|
@@ -34,6 +34,7 @@ import {
|
|
|
34
34
|
useHMSSessionStore,
|
|
35
35
|
useLeaveMethods,
|
|
36
36
|
isPublishingAllowed,
|
|
37
|
+
useAndroidSoftInputAdjustResize,
|
|
37
38
|
} from './hooks-util';
|
|
38
39
|
import {
|
|
39
40
|
peerTrackNodeExistForPeerAndTrack,
|
|
@@ -158,6 +159,8 @@ export const HMSRoomSetup = () => {
|
|
|
158
159
|
*/
|
|
159
160
|
useHMSSessionStore();
|
|
160
161
|
|
|
162
|
+
useAndroidSoftInputAdjustResize();
|
|
163
|
+
|
|
161
164
|
const meetingJoined = meetingState === MeetingState.IN_MEETING;
|
|
162
165
|
const previewing = meetingState === MeetingState.IN_PREVIEW;
|
|
163
166
|
|
|
@@ -2,7 +2,12 @@ import * as React from 'react';
|
|
|
2
2
|
import Modal from 'react-native-modal';
|
|
3
3
|
import type { ReactNativeModal } from 'react-native-modal';
|
|
4
4
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
5
|
-
import type {
|
|
5
|
+
import type {
|
|
6
|
+
StyleProp,
|
|
7
|
+
TextProps,
|
|
8
|
+
TouchableOpacityProps,
|
|
9
|
+
ViewStyle,
|
|
10
|
+
} from 'react-native';
|
|
6
11
|
|
|
7
12
|
import { CloseIcon } from '../Icons';
|
|
8
13
|
import {
|
|
@@ -10,6 +15,7 @@ import {
|
|
|
10
15
|
useHMSRoomStyle,
|
|
11
16
|
useHMSRoomStyleSheet,
|
|
12
17
|
} from '../hooks-util';
|
|
18
|
+
import { useIsLandscapeOrientation } from '../utils/dimension';
|
|
13
19
|
|
|
14
20
|
type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
|
|
15
21
|
|
|
@@ -20,12 +26,20 @@ export type BottomSheetProps = WithRequired<
|
|
|
20
26
|
// closes modal and no action will be taken after modal has been closed
|
|
21
27
|
dismissModal(): void;
|
|
22
28
|
containerStyle?: StyleProp<ViewStyle>;
|
|
29
|
+
fullWidth?: boolean;
|
|
23
30
|
};
|
|
24
31
|
|
|
25
32
|
export const BottomSheet: React.FC<BottomSheetProps> & {
|
|
26
33
|
Header: React.FC<HeaderProps>;
|
|
27
34
|
Divider: React.FC<BottomSheetDividerProps>;
|
|
28
|
-
} = ({
|
|
35
|
+
} = ({
|
|
36
|
+
dismissModal,
|
|
37
|
+
fullWidth = false,
|
|
38
|
+
style,
|
|
39
|
+
children,
|
|
40
|
+
containerStyle,
|
|
41
|
+
...resetProps
|
|
42
|
+
}) => {
|
|
29
43
|
const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
|
|
30
44
|
|
|
31
45
|
const containerStyles = useHMSRoomStyle((theme) => ({
|
|
@@ -34,6 +48,8 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
|
|
|
34
48
|
|
|
35
49
|
const { handleModalHideAction } = useBottomSheetActionHandlers();
|
|
36
50
|
|
|
51
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
52
|
+
|
|
37
53
|
return (
|
|
38
54
|
<Modal
|
|
39
55
|
{...resetProps}
|
|
@@ -53,9 +69,17 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
|
|
|
53
69
|
supportedOrientations={
|
|
54
70
|
resetProps.supportedOrientations ?? ['portrait', 'landscape']
|
|
55
71
|
}
|
|
56
|
-
|
|
72
|
+
statusBarTranslucent={true}
|
|
57
73
|
>
|
|
58
|
-
<View
|
|
74
|
+
<View
|
|
75
|
+
style={[
|
|
76
|
+
isLandscapeOrientation && !fullWidth
|
|
77
|
+
? styles.landscapeContainer
|
|
78
|
+
: styles.container,
|
|
79
|
+
containerStyles,
|
|
80
|
+
containerStyle,
|
|
81
|
+
]}
|
|
82
|
+
>
|
|
59
83
|
{children}
|
|
60
84
|
</View>
|
|
61
85
|
</Modal>
|
|
@@ -93,12 +117,18 @@ const BottomSheetHeader: React.FC<HeaderProps> = ({
|
|
|
93
117
|
return (
|
|
94
118
|
<View style={styles.header}>
|
|
95
119
|
<View>
|
|
96
|
-
<Text
|
|
120
|
+
<Text
|
|
121
|
+
testID={headingTestID}
|
|
122
|
+
style={[styles.headerText, hmsRoomStyles.headerText]}
|
|
123
|
+
>
|
|
97
124
|
{heading}
|
|
98
125
|
</Text>
|
|
99
126
|
|
|
100
127
|
{subheading ? (
|
|
101
|
-
<Text
|
|
128
|
+
<Text
|
|
129
|
+
testID={subheadingTestID}
|
|
130
|
+
style={[styles.subheadingText, hmsRoomStyles.subheadingText]}
|
|
131
|
+
>
|
|
102
132
|
{subheading}
|
|
103
133
|
</Text>
|
|
104
134
|
) : null}
|
|
@@ -170,6 +200,13 @@ const styles = StyleSheet.create({
|
|
|
170
200
|
borderTopRightRadius: 16,
|
|
171
201
|
paddingBottom: 32,
|
|
172
202
|
},
|
|
203
|
+
landscapeContainer: {
|
|
204
|
+
borderRadius: 16,
|
|
205
|
+
paddingBottom: 32,
|
|
206
|
+
width: '60%',
|
|
207
|
+
alignSelf: 'center',
|
|
208
|
+
marginBottom: 12,
|
|
209
|
+
},
|
|
173
210
|
header: {
|
|
174
211
|
flexDirection: 'row',
|
|
175
212
|
alignItems: 'center',
|
|
@@ -2,8 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import { View, StyleSheet, Text, Image } from 'react-native';
|
|
3
3
|
|
|
4
4
|
import { useHMSRoomStyleSheet } from '../../hooks-util';
|
|
5
|
+
import { useIsLandscapeOrientation } from '../../utils/dimension';
|
|
5
6
|
|
|
6
7
|
export const ChatBanner = () => {
|
|
8
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
9
|
+
|
|
7
10
|
const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
|
|
8
11
|
title: {
|
|
9
12
|
color: theme.palette.on_surface_high,
|
|
@@ -19,6 +22,7 @@ export const ChatBanner = () => {
|
|
|
19
22
|
<View style={styles.container}>
|
|
20
23
|
<Image
|
|
21
24
|
source={require('../../assets/empty-chat-illustration/empty-chat.png')}
|
|
25
|
+
style={isLandscapeOrientation ? styles.landscapeCoverImage : null}
|
|
22
26
|
/>
|
|
23
27
|
<Text style={[styles.title, hmsRoomStyles.title]}>
|
|
24
28
|
Start a Conversation
|
|
@@ -36,8 +40,13 @@ const styles = StyleSheet.create({
|
|
|
36
40
|
flex: 1,
|
|
37
41
|
alignItems: 'center',
|
|
38
42
|
justifyContent: 'center',
|
|
43
|
+
overflow: 'hidden',
|
|
39
44
|
// transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
|
|
40
45
|
},
|
|
46
|
+
landscapeCoverImage: {
|
|
47
|
+
flexShrink: 1,
|
|
48
|
+
resizeMode: 'contain',
|
|
49
|
+
},
|
|
41
50
|
title: {
|
|
42
51
|
fontSize: 20,
|
|
43
52
|
lineHeight: 24,
|
|
@@ -8,6 +8,7 @@ import { ChatFilterView } from './ChatFilterView';
|
|
|
8
8
|
import { useHMSRoomStyleSheet } from '../../hooks-util';
|
|
9
9
|
import type { RootState } from '../../redux';
|
|
10
10
|
import { setChatFilterSheetVisible } from '../../redux/actions';
|
|
11
|
+
import { useIsLandscapeOrientation } from '../../utils/dimension';
|
|
11
12
|
|
|
12
13
|
interface ChatFilterBottomSheetViewProps {}
|
|
13
14
|
|
|
@@ -15,6 +16,7 @@ const _ChatFilterBottomSheetView: React.FC<
|
|
|
15
16
|
ChatFilterBottomSheetViewProps
|
|
16
17
|
> = ({}) => {
|
|
17
18
|
const dispatch = useDispatch();
|
|
19
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
18
20
|
const chatFilterSheetVisible = useSelector(
|
|
19
21
|
(state: RootState) => state.app.chatFilterSheetVisible
|
|
20
22
|
);
|
|
@@ -48,7 +50,11 @@ const _ChatFilterBottomSheetView: React.FC<
|
|
|
48
50
|
<Animated.View
|
|
49
51
|
entering={SlideInDown}
|
|
50
52
|
exiting={SlideOutDown}
|
|
51
|
-
style={[
|
|
53
|
+
style={[
|
|
54
|
+
styles.contentContainer,
|
|
55
|
+
hmsRoomStyles.contentContainer,
|
|
56
|
+
isLandscapeOrientation ? { maxHeight: '88%' } : null,
|
|
57
|
+
]}
|
|
52
58
|
>
|
|
53
59
|
<ChatFilterView />
|
|
54
60
|
</Animated.View>
|
|
@@ -6,9 +6,11 @@ import { BottomSheet } from '../BottomSheet';
|
|
|
6
6
|
import { useShowChatAndParticipants } from '../../hooks-util';
|
|
7
7
|
import { ChatAndParticipantsView } from './ChatAndParticipantsView';
|
|
8
8
|
import { HEADER_HEIGHT } from '../Header';
|
|
9
|
+
import { useIsLandscapeOrientation } from '../../utils/dimension';
|
|
9
10
|
|
|
10
11
|
export const ChatAndParticipantsBottomSheet = () => {
|
|
11
12
|
const { top: topSafeArea } = useSafeAreaInsets();
|
|
13
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
12
14
|
|
|
13
15
|
const { modalVisible, hide } = useShowChatAndParticipants();
|
|
14
16
|
|
|
@@ -16,12 +18,15 @@ export const ChatAndParticipantsBottomSheet = () => {
|
|
|
16
18
|
|
|
17
19
|
return (
|
|
18
20
|
<BottomSheet
|
|
21
|
+
fullWidth={true}
|
|
19
22
|
dismissModal={closeChatWindow}
|
|
20
23
|
isVisible={modalVisible}
|
|
21
24
|
avoidKeyboard={true}
|
|
22
25
|
containerStyle={[
|
|
23
26
|
styles.bottomSheet,
|
|
24
|
-
{
|
|
27
|
+
{
|
|
28
|
+
marginTop: topSafeArea + (isLandscapeOrientation ? 0 : HEADER_HEIGHT),
|
|
29
|
+
},
|
|
25
30
|
]}
|
|
26
31
|
>
|
|
27
32
|
<ChatAndParticipantsView />
|
|
@@ -8,6 +8,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
8
8
|
import { COLORS } from '../utils/theme';
|
|
9
9
|
import { CustomButton } from './CustomButton';
|
|
10
10
|
import { CloseIcon } from '../Icons';
|
|
11
|
+
import { useIsLandscapeOrientation } from '../utils/dimension';
|
|
11
12
|
|
|
12
13
|
export interface DefaultModalProps {
|
|
13
14
|
modalVisible: boolean;
|
|
@@ -32,6 +33,8 @@ export const DefaultModal: React.FC<DefaultModalProps> = ({
|
|
|
32
33
|
modalStyle,
|
|
33
34
|
}) => {
|
|
34
35
|
const { left, right } = useSafeAreaInsets();
|
|
36
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
37
|
+
|
|
35
38
|
return (
|
|
36
39
|
<Modal
|
|
37
40
|
useNativeDriver={true}
|
|
@@ -51,7 +54,9 @@ export const DefaultModal: React.FC<DefaultModalProps> = ({
|
|
|
51
54
|
>
|
|
52
55
|
<View
|
|
53
56
|
style={[
|
|
54
|
-
|
|
57
|
+
isLandscapeOrientation
|
|
58
|
+
? styles.landscapeContentContainer
|
|
59
|
+
: styles.contentContainer,
|
|
55
60
|
modalPosiion === 'flex-end' ? styles.end : styles.center,
|
|
56
61
|
viewStyle,
|
|
57
62
|
{ marginLeft: left, marginRight: right },
|
|
@@ -80,6 +85,12 @@ const styles = StyleSheet.create({
|
|
|
80
85
|
// minHeight: '20%',
|
|
81
86
|
backgroundColor: COLORS.SURFACE.DEFAULT,
|
|
82
87
|
},
|
|
88
|
+
landscapeContentContainer: {
|
|
89
|
+
maxHeight: '80%',
|
|
90
|
+
maxWidth: '60%',
|
|
91
|
+
// minHeight: '20%',
|
|
92
|
+
backgroundColor: COLORS.SURFACE.DEFAULT,
|
|
93
|
+
},
|
|
83
94
|
end: {
|
|
84
95
|
flex: 1,
|
|
85
96
|
borderTopLeftRadius: 16,
|
|
@@ -24,6 +24,7 @@ import {
|
|
|
24
24
|
} from '../hooks-sdk';
|
|
25
25
|
import { useSelector } from 'react-redux';
|
|
26
26
|
import type { RootState } from '../redux';
|
|
27
|
+
import { useIsLandscapeOrientation } from '../utils/dimension';
|
|
27
28
|
|
|
28
29
|
interface FooterProps {}
|
|
29
30
|
|
|
@@ -32,6 +33,7 @@ export const _Footer: React.FC<FooterProps> = () => {
|
|
|
32
33
|
const canPublishAudio = useCanPublishAudio();
|
|
33
34
|
const canPublishVideo = useCanPublishVideo();
|
|
34
35
|
const canPublishScreen = useCanPublishScreen();
|
|
36
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
35
37
|
|
|
36
38
|
const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
|
|
37
39
|
|
|
@@ -105,7 +107,7 @@ export const _Footer: React.FC<FooterProps> = () => {
|
|
|
105
107
|
>
|
|
106
108
|
<View
|
|
107
109
|
style={[
|
|
108
|
-
styles.container,
|
|
110
|
+
isLandscapeOrientation ? styles.landscapeContainer : styles.container,
|
|
109
111
|
isHLSViewer ? styles.hlsContainer : containerStyles,
|
|
110
112
|
]}
|
|
111
113
|
>
|
|
@@ -138,10 +140,14 @@ export const _Footer: React.FC<FooterProps> = () => {
|
|
|
138
140
|
|
|
139
141
|
export const useFooterHeight = () => {
|
|
140
142
|
const isHLSViewer = useIsHLSViewer();
|
|
143
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
141
144
|
const { bottom } = useSafeAreaInsets();
|
|
142
145
|
|
|
143
146
|
return (
|
|
144
|
-
bottom +
|
|
147
|
+
bottom +
|
|
148
|
+
(isHLSViewer ? 8 : isLandscapeOrientation ? 4 : 16) +
|
|
149
|
+
(Platform.OS === 'android' ? (isLandscapeOrientation ? 4 : 16) : 0) +
|
|
150
|
+
40
|
|
145
151
|
); // bottomSafeArea + paddingTop + marginBottom + content
|
|
146
152
|
};
|
|
147
153
|
|
|
@@ -152,7 +158,15 @@ const styles = StyleSheet.create({
|
|
|
152
158
|
flexDirection: 'row',
|
|
153
159
|
alignItems: 'center',
|
|
154
160
|
justifyContent: 'center',
|
|
155
|
-
marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide
|
|
161
|
+
marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide animation offsets because of this change
|
|
162
|
+
},
|
|
163
|
+
landscapeContainer: {
|
|
164
|
+
paddingTop: 4,
|
|
165
|
+
paddingHorizontal: 4,
|
|
166
|
+
flexDirection: 'row',
|
|
167
|
+
alignItems: 'center',
|
|
168
|
+
justifyContent: 'center',
|
|
169
|
+
marginBottom: Platform.OS === 'android' ? 4 : 0,
|
|
156
170
|
},
|
|
157
171
|
hlsContainer: {
|
|
158
172
|
paddingTop: 8,
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React, { useRef, useState, useImperativeHandle } from 'react';
|
|
2
2
|
import type { ElementRef } from 'react';
|
|
3
|
-
import { View, FlatList, StyleSheet,
|
|
3
|
+
import { View, FlatList, StyleSheet, useWindowDimensions } from 'react-native';
|
|
4
4
|
import { useDispatch, useSelector } from 'react-redux';
|
|
5
5
|
import type {
|
|
6
6
|
LayoutChangeEvent,
|
|
7
|
-
LayoutRectangle,
|
|
8
7
|
ViewToken,
|
|
9
8
|
} from 'react-native';
|
|
10
9
|
import type { HMSView, HMSPeer } from '@100mslive/react-native-hms';
|
|
@@ -18,6 +17,7 @@ import type { RootState } from '../redux';
|
|
|
18
17
|
import { PaginationDots } from './PaginationDots';
|
|
19
18
|
import { setGridViewActivePage } from '../redux/actions';
|
|
20
19
|
import { Tile } from './Tile';
|
|
20
|
+
import { useIsLandscapeOrientation } from '../utils/dimension';
|
|
21
21
|
|
|
22
22
|
export type GridViewProps = {
|
|
23
23
|
onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
|
|
@@ -46,8 +46,9 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
|
|
|
46
46
|
const hmsViewRefs = useRef<Record<string, ElementRef<typeof HMSView>>>({});
|
|
47
47
|
const regularTilesFlatlistRef = useRef<FlatList<PeerTrackNode[]>>(null);
|
|
48
48
|
const screenshareTilesFlatlistRef = useRef<FlatList<PeerTrackNode>>(null);
|
|
49
|
-
const
|
|
49
|
+
const [insetTileBoundingBox, setInsetTileBoundingBox] = useState<{ width: number | null, height: number | null }>({ width: null, height: null });
|
|
50
50
|
|
|
51
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
51
52
|
const screenshareTilesAvailable = useSelector(
|
|
52
53
|
(state: RootState) => state.app.screensharePeerTrackNodes.length > 0
|
|
53
54
|
);
|
|
@@ -104,7 +105,7 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
|
|
|
104
105
|
|
|
105
106
|
const _handleLayoutChange = React.useCallback(
|
|
106
107
|
({ nativeEvent }: LayoutChangeEvent) => {
|
|
107
|
-
|
|
108
|
+
setInsetTileBoundingBox({ width: nativeEvent.layout.width, height: nativeEvent.layout.height });
|
|
108
109
|
},
|
|
109
110
|
[]
|
|
110
111
|
);
|
|
@@ -121,16 +122,19 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
|
|
|
121
122
|
/>
|
|
122
123
|
) : null}
|
|
123
124
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
125
|
+
{screenshareTilesAvailable && isLandscapeOrientation ? null : (
|
|
126
|
+
<RegularTiles
|
|
127
|
+
ref={regularTilesFlatlistRef}
|
|
128
|
+
pairedPeers={pairedPeers}
|
|
129
|
+
setHmsViewRefs={setHmsViewRefs}
|
|
130
|
+
onPeerTileMorePress={onPeerTileMorePress}
|
|
131
|
+
/>
|
|
132
|
+
)}
|
|
130
133
|
|
|
131
134
|
{pairedPeers.length > 0 && miniviewPeerTrackNodeExists ? (
|
|
132
135
|
<MiniView
|
|
133
|
-
|
|
136
|
+
boundingBoxWidth={insetTileBoundingBox.width}
|
|
137
|
+
boundingBoxHeight={insetTileBoundingBox.height}
|
|
134
138
|
onMoreOptionsPress={onPeerTileMorePress}
|
|
135
139
|
/>
|
|
136
140
|
) : null}
|
|
@@ -183,6 +187,8 @@ const RegularTiles = React.forwardRef<
|
|
|
183
187
|
(state: RootState) => state.app.gridViewActivePage
|
|
184
188
|
);
|
|
185
189
|
|
|
190
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
191
|
+
|
|
186
192
|
const _keyExtractor = React.useCallback((item) => item[0]?.id, []);
|
|
187
193
|
|
|
188
194
|
const _handleViewableItemsChanged = React.useCallback(
|
|
@@ -234,7 +240,11 @@ const RegularTiles = React.forwardRef<
|
|
|
234
240
|
<PaginationDots
|
|
235
241
|
list={pairedPeers}
|
|
236
242
|
activeIndex={activeIndex}
|
|
237
|
-
style={
|
|
243
|
+
style={
|
|
244
|
+
screenshareTilesAvailable || isLandscapeOrientation
|
|
245
|
+
? { marginVertical: isLandscapeOrientation ? 4 : 8 }
|
|
246
|
+
: null
|
|
247
|
+
}
|
|
238
248
|
/>
|
|
239
249
|
) : null}
|
|
240
250
|
</View>
|
|
@@ -250,6 +260,8 @@ const ScreenshareTiles = React.forwardRef<
|
|
|
250
260
|
FlatList<PeerTrackNode>,
|
|
251
261
|
ScreenshareTilesProps
|
|
252
262
|
>(({ onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
|
|
263
|
+
const { width } = useWindowDimensions();
|
|
264
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
253
265
|
const [activePage, setActivePage] = useState(0);
|
|
254
266
|
const screensharePeerTrackNodes = useSelector(
|
|
255
267
|
(state: RootState) => state.app.screensharePeerTrackNodes
|
|
@@ -276,14 +288,14 @@ const ScreenshareTiles = React.forwardRef<
|
|
|
276
288
|
return (
|
|
277
289
|
<Tile
|
|
278
290
|
height={'100%'}
|
|
279
|
-
width={
|
|
291
|
+
width={width}
|
|
280
292
|
peerTrackNode={item}
|
|
281
293
|
onPeerTileMorePress={onPeerTileMorePress}
|
|
282
294
|
setHmsViewRefs={setHmsViewRefs}
|
|
283
295
|
/>
|
|
284
296
|
);
|
|
285
297
|
},
|
|
286
|
-
[onPeerTileMorePress, setHmsViewRefs]
|
|
298
|
+
[width, onPeerTileMorePress, setHmsViewRefs]
|
|
287
299
|
);
|
|
288
300
|
|
|
289
301
|
return (
|
|
@@ -308,7 +320,7 @@ const ScreenshareTiles = React.forwardRef<
|
|
|
308
320
|
<PaginationDots
|
|
309
321
|
list={screensharePeerTrackNodes}
|
|
310
322
|
activeIndex={activePage}
|
|
311
|
-
style={{ marginVertical: 8 }}
|
|
323
|
+
style={{ marginVertical: isLandscapeOrientation ? 4 : 8 }}
|
|
312
324
|
/>
|
|
313
325
|
) : null}
|
|
314
326
|
</View>
|
|
@@ -6,10 +6,12 @@ import type { HMSMessage } from '@100mslive/react-native-hms';
|
|
|
6
6
|
|
|
7
7
|
import type { RootState } from '../redux';
|
|
8
8
|
import { HMSHLSMessage } from './HMSHLSMessage';
|
|
9
|
+
import { useIsLandscapeOrientation } from '../utils/dimension';
|
|
9
10
|
|
|
10
11
|
export const HMSHLSMessageList: React.FC = () => {
|
|
11
12
|
const { height: windowHeight } = useWindowDimensions();
|
|
12
13
|
const messages = useSelector((state: RootState) => state.messages.messages);
|
|
14
|
+
const isLandscapeOrientation = useIsLandscapeOrientation();
|
|
13
15
|
|
|
14
16
|
const _keyExtractor = React.useCallback(
|
|
15
17
|
(item: HMSMessage) => item.messageId,
|
|
@@ -24,14 +26,18 @@ export const HMSHLSMessageList: React.FC = () => {
|
|
|
24
26
|
return null;
|
|
25
27
|
}
|
|
26
28
|
|
|
29
|
+
const HEIGHT_MULTIPLIER = isLandscapeOrientation ? 0.45 : 0.2;
|
|
30
|
+
|
|
27
31
|
return (
|
|
28
32
|
<View
|
|
29
33
|
style={[
|
|
30
34
|
styles.container,
|
|
31
35
|
{
|
|
32
|
-
maxHeight: windowHeight *
|
|
36
|
+
maxHeight: windowHeight * HEIGHT_MULTIPLIER,
|
|
33
37
|
height:
|
|
34
|
-
messages.length > 3
|
|
38
|
+
messages.length > 3
|
|
39
|
+
? windowHeight * HEIGHT_MULTIPLIER
|
|
40
|
+
: messages.length * 54,
|
|
35
41
|
},
|
|
36
42
|
]}
|
|
37
43
|
>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
import Animated, {
|
|
4
|
+
// useAnimatedKeyboard,
|
|
5
|
+
// useAnimatedStyle,
|
|
6
|
+
// useDerivedValue,
|
|
7
|
+
} from 'react-native-reanimated';
|
|
8
|
+
|
|
9
|
+
export interface HMSKeyboardAvoidingViewProps {
|
|
10
|
+
style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
|
|
11
|
+
bottomOffset?: number;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const HMSKeyboardAvoidingView: React.FC<
|
|
15
|
+
HMSKeyboardAvoidingViewProps
|
|
16
|
+
> = ({
|
|
17
|
+
children,
|
|
18
|
+
style,
|
|
19
|
+
// bottomOffset=0
|
|
20
|
+
}) => {
|
|
21
|
+
// const animatedKeyboard = useAnimatedKeyboard();
|
|
22
|
+
|
|
23
|
+
// const initialPageY = useDerivedValue(() => bottomOffset, [bottomOffset]);
|
|
24
|
+
|
|
25
|
+
// const keyboardAvoidStyle = useAnimatedStyle(() => {
|
|
26
|
+
// const keyboardHeight = animatedKeyboard.height.value;
|
|
27
|
+
// return {
|
|
28
|
+
// transform: [
|
|
29
|
+
// {
|
|
30
|
+
// translateY:
|
|
31
|
+
// keyboardHeight <= initialPageY.value
|
|
32
|
+
// ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
|
|
33
|
+
// : -(keyboardHeight - initialPageY.value),
|
|
34
|
+
// },
|
|
35
|
+
// ],
|
|
36
|
+
// };
|
|
37
|
+
// });
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Animated.View
|
|
41
|
+
style={[
|
|
42
|
+
style,
|
|
43
|
+
// keyboardAvoidStyle
|
|
44
|
+
]}
|
|
45
|
+
>
|
|
46
|
+
{children}
|
|
47
|
+
</Animated.View>
|
|
48
|
+
);
|
|
49
|
+
};
|