@stream-io/video-react-native-sdk 0.0.1-alpha.366 → 0.0.1-alpha.368

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.368](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.367...@stream-io/video-react-native-sdk-0.0.1-alpha.368) (2023-08-11)
+
+
+### Features
+
+* **react-native:** CallControls customization ([#920](https://github.com/GetStream/stream-video-js/issues/920)) ([91f6a9d](https://github.com/GetStream/stream-video-js/commit/91f6a9d5723f29b547bd3fdb0c1dfca7b8cab925))
+
+
+
+## [0.0.1-alpha.367](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.366...@stream-io/video-react-native-sdk-0.0.1-alpha.367) (2023-08-11)
+
+
+### Features
+
+* **react-native:** add CallTopView component ([#921](https://github.com/GetStream/stream-video-js/issues/921)) ([252adf3](https://github.com/GetStream/stream-video-js/commit/252adf36216c7bd291fccd4ecbdf95c9cdb31a18))
+
+
+
 ## [0.0.1-alpha.366](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.365...@stream-io/video-react-native-sdk-0.0.1-alpha.366) (2023-08-11)
 
 

package/dist/__tests__/components/CallControls.test.js

@@ -17,7 +17,7 @@ var P_IDS;
 (function (P_IDS) {
     P_IDS["LOCAL_1"] = "local-1";
 })(P_IDS || (P_IDS = {}));
-describe('CallControls', () => {
+describe('ChatButton', () => {
     it('should render an unread badge indicator when the value is defined in the chatButton prop', async () => {
         const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [
             (0, participant_1.default)({
@@ -26,7 +26,7 @@ describe('CallControls', () => {
                 userId: P_IDS.LOCAL_1,
             }),
         ]);
-        (0, RNTLTools_1.render)(<components_1.CallControls chatButton={{ onPressHandler: jest.fn(), unreadBadgeCountIndicator: 1 }}/>, {
+        (0, RNTLTools_1.render)(<components_1.ChatButton onPressHandler={jest.fn()} unreadBadgeCount={1}/>, {
             call,
         });
         const indicator = await RNTLTools_1.screen.findByText('1');
@@ -40,11 +40,13 @@ describe('CallControls', () => {
                 userId: P_IDS.LOCAL_1,
             }),
         ]);
-        (0, RNTLTools_1.render)(<components_1.CallControls chatButton={{ onPressHandler: jest.fn(), unreadBadgeCountIndicator: 0 }}/>, {
+        (0, RNTLTools_1.render)(<components_1.ChatButton onPressHandler={jest.fn()} unreadBadgeCount={0}/>, {
             call,
         });
         await (0, RNTLTools_1.waitFor)(() => expect(() => RNTLTools_1.screen.getByTestId(TestIds_1.ComponentTestIds.CHAT_UNREAD_BADGE_COUNT_INDICATOR)).toThrow(/Unable to find an element with testID: chat-unread-badge-count-indicator/i));
     });
+});
+describe('ReactionButton', () => {
     it('render reaction button in call controls component', async () => {
         const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [
             (0, participant_1.default)({
@@ -53,13 +55,15 @@ describe('CallControls', () => {
                 userId: P_IDS.LOCAL_1,
             }),
         ], [video_client_1.OwnCapability.CREATE_REACTION]);
-        (0, RNTLTools_1.render)(<components_1.CallControls />, {
+        (0, RNTLTools_1.render)(<components_1.ReactionButton />, {
             call,
         });
         const button = await RNTLTools_1.screen.findByTestId(TestIds_1.ButtonTestIds.REACTION);
         RNTLTools_1.fireEvent.press(button);
         expect(RNTLTools_1.screen.getByTestId(TestIds_1.ComponentTestIds.REACTIONS_PICKER)).toBeVisible();
     });
+});
+describe('HangupCallButton', () => {
     it('execute onPressHandler when its passed to hangup call button when its pressed in call controls component', async () => {
         const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [
             (0, participant_1.default)({
@@ -68,13 +72,13 @@ describe('CallControls', () => {
                 userId: P_IDS.LOCAL_1,
             }),
         ]);
-        const hangUpCallButton = { onPressHandler: jest.fn() };
-        (0, RNTLTools_1.render)(<components_1.CallControls hangUpCallButton={hangUpCallButton}/>, {
+        const onHangupCallHandler = jest.fn();
+        (0, RNTLTools_1.render)(<components_1.CallControls onHangupCallHandler={onHangupCallHandler}/>, {
             call,
         });
         const button = await RNTLTools_1.screen.findByTestId(TestIds_1.ButtonTestIds.HANG_UP_CALL);
         RNTLTools_1.fireEvent.press(button);
-        expect(hangUpCallButton.onPressHandler).toHaveBeenCalled();
+        expect(onHangupCallHandler).toHaveBeenCalled();
     });
     it('execute call.leave when hangup button is pressed with no custom handler in call controls component', async () => {
         const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [

package/dist/__tests__/components/CallControls.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallControls.test.js","sourceRoot":"","sources":["../../../__tests__/components/CallControls.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CallControls.test.js","sourceRoot":"","sources":["../../../__tests__/components/CallControls.test.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/call/CallControls/AcceptCallButton.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The props for the Accept Call button.
+ */
+type AcceptCallButtonProps = {
+    /**
+     * Handler to be called when the accept call button is pressed.
+     */
+    onPressHandler?: () => void;
+    /**
+     * Handler to be called after the incoming call is accepted.
+     *
+     * Note: If the `onPressHandler` is passed this handler will not be executed.
+     */
+    onAcceptHandler?: () => void;
+};
+/**
+ * Button to accept a call.
+ *
+ * Mostly calls call.join() internally.
+ */
+export declare const AcceptCallButton: ({ onPressHandler, onAcceptHandler, }: AcceptCallButtonProps) => JSX.Element;
+export {};

package/dist/src/components/call/CallControls/AcceptCallButton.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AcceptCallButton = void 0;
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const react_1 = __importDefault(require("react"));
+const CallControlsButton_1 = require("./CallControlsButton");
+const theme_1 = require("../../../theme");
+const icons_1 = require("../../../icons");
+/**
+ * Button to accept a call.
+ *
+ * Mostly calls call.join() internally.
+ */
+const AcceptCallButton = ({ onPressHandler, onAcceptHandler, }) => {
+    const call = (0, video_react_bindings_1.useCall)();
+    const acceptCallHandler = async () => {
+        if (onPressHandler) {
+            onPressHandler();
+            return;
+        }
+        try {
+            await call?.join();
+            if (onAcceptHandler) {
+                onAcceptHandler();
+            }
+        }
+        catch (error) {
+            console.log('Error joining Call', error);
+        }
+    };
+    return (<CallControlsButton_1.CallControlsButton onPress={acceptCallHandler} color={theme_1.theme.light.info} style={theme_1.theme.button.lg} svgContainerStyle={theme_1.theme.icon.lg}>
+      <icons_1.Phone color={theme_1.theme.light.static_white}/>
+    </CallControlsButton_1.CallControlsButton>);
+};
+exports.AcceptCallButton = AcceptCallButton;
+//# sourceMappingURL=AcceptCallButton.js.map

package/dist/src/components/call/CallControls/AcceptCallButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AcceptCallButton.js","sourceRoot":"","sources":["../../../../../src/components/call/CallControls/AcceptCallButton.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAA0D;AAC1D,kDAA0B;AAC1B,6DAA0D;AAC1D,0CAAuC;AACvC,0CAAuC;AAkBvC;;;;GAIG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,cAAc,EACd,eAAe,GACO,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;QACnC,IAAI,cAAc,EAAE;YAClB,cAAc,EAAE,CAAC;YACjB,OAAO;SACR;QACD,IAAI;YACF,MAAM,IAAI,EAAE,IAAI,EAAE,CAAC;YACnB,IAAI,eAAe,EAAE;gBACnB,eAAe,EAAE,CAAC;aACnB;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;SAC1C;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uCAAkB,CACjB,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAC3B,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CACxB,KAAK,CAAC,CAAC,aAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CACvB,iBAAiB,CAAC,CAAC,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAEjC;MAAA,CAAC,aAAK,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EACzC;IAAA,EAAE,uCAAkB,CAAC,CACtB,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,gBAAgB,oBA8B3B"}

package/dist/src/components/call/CallControls/CallControls.d.ts

@@ -0,0 +1,16 @@
+import { ViewProps } from 'react-native';
+/**
+ * Props for the CallControls Component.
+ */
+export interface CallControlsType extends Pick<ViewProps, 'style'> {
+    /**
+     * Handler to override the hang up handler when the hangup button is pressed.
+     * @returns void
+     */
+    onHangupCallHandler?: () => void;
+}
+/**
+ * A list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
+ * the user can trigger within an active call.
+ */
+export declare const CallControls: ({ onHangupCallHandler, style, }: CallControlsType) => JSX.Element;

package/dist/src/components/call/CallControls/CallControls.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallControls = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../../theme");
+const ToggleAudioPublishingButton_1 = require("./ToggleAudioPublishingButton");
+const ToggleVideoPublishingButton_1 = require("./ToggleVideoPublishingButton");
+const ToggleCameraFaceButton_1 = require("./ToggleCameraFaceButton");
+const constants_1 = require("../../../constants");
+const HangupCallButton_1 = require("./HangupCallButton");
+/**
+ * A list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
+ * the user can trigger within an active call.
+ */
+const CallControls = ({ onHangupCallHandler, style, }) => {
+    return (<react_native_1.View style={[styles.container, style]}>
+      <ToggleVideoPublishingButton_1.ToggleVideoPublishingButton />
+      <ToggleAudioPublishingButton_1.ToggleAudioPublishingButton />
+      <ToggleCameraFaceButton_1.ToggleCameraFaceButton />
+      <HangupCallButton_1.HangUpCallButton onPressHandler={onHangupCallHandler}/>
+    </react_native_1.View>);
+};
+exports.CallControls = CallControls;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        paddingTop: theme_1.theme.padding.md,
+        paddingBottom: theme_1.theme.padding.lg,
+        flexDirection: 'row',
+        justifyContent: 'space-evenly',
+        zIndex: constants_1.Z_INDEX.IN_FRONT,
+        backgroundColor: theme_1.theme.light.static_grey,
+    },
+});
+//# sourceMappingURL=CallControls.js.map

package/dist/src/components/call/CallControls/CallControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../../src/components/call/CallControls/CallControls.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAA2D;AAC3D,0CAAuC;AACvC,+EAA4E;AAC5E,+EAA4E;AAC5E,qEAAkE;AAClE,kDAA6C;AAC7C,yDAAsD;AAatD;;;GAGG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,mBAAmB,EACnB,KAAK,GACY,EAAE,EAAE;IACrB,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,yDAA2B,CAAC,AAAD,EAC5B;MAAA,CAAC,yDAA2B,CAAC,AAAD,EAC5B;MAAA,CAAC,+CAAsB,CAAC,AAAD,EACvB;MAAA,CAAC,mCAAgB,CAAC,cAAc,CAAC,CAAC,mBAAmB,CAAC,EACxD;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,YAAY,gBAYvB;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,UAAU,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC5B,aAAa,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC/B,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,cAAc;QAC9B,MAAM,EAAE,mBAAO,CAAC,QAAQ;QACxB,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,WAAW;KACzC;CACF,CAAC,CAAC"}

package/dist/src/components/{utility/internal → call/CallControls}/CallControlsButton.d.ts

@@ -10,7 +10,7 @@ interface CallControlsButtonProps {
      */
     color?: string;
     /**
-     * Boolean to enable/enable the button
+     * Boolean to enable/disable the button
      */
     disabled?: boolean;
     /**
@@ -25,6 +25,10 @@ interface CallControlsButtonProps {
      * Accessibility label for the button.
      */
     testID?: string;
+    /**
+     * Invoked on mount and layout changes with
+     * {nativeEvent: { layout: {x, y, width, height}}}.
+     */
     onLayout?: View['props']['onLayout'];
 }
 export declare const CallControlsButton: (props: React.PropsWithChildren<CallControlsButtonProps>) => JSX.Element;

package/dist/src/components/{utility/internal → call/CallControls}/CallControlsButton.js

@@ -18,15 +18,11 @@ const CallControlsButton = (props) => {
             backgroundColor: color,
             opacity: pressed ? 0.2 : 1,
         },
-        style ? style : null,
+        style,
         disabled ? styles.disabledStyle : null,
     ];
     return (<react_native_1.Pressable disabled={disabled} style={pressableStyle} onPress={onPress} testID={testID} onLayout={onLayout}>
-      <react_native_1.View style={[
-            styles.svgContainerStyle,
-            DEFAULT_ICON_SIZE,
-            svgContainerStyle ?? null,
-        ]}>
+      <react_native_1.View style={[DEFAULT_ICON_SIZE, svgContainerStyle ?? null]}>
         {children}
       </react_native_1.View>
     </react_native_1.Pressable>);
@@ -38,8 +34,17 @@ const styles = react_native_1.StyleSheet.create({
         borderWidth: 1,
         borderColor: theme_1.theme.light.content_bg,
         alignItems: 'center',
+        // For iOS
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 8,
+        // For android
+        elevation: 6,
     },
-    svgContainerStyle: {},
     disabledStyle: {
         backgroundColor: theme_1.theme.light.disabled,
     },

package/dist/src/components/call/CallControls/CallControlsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlsButton.js","sourceRoot":"","sources":["../../../../../src/components/call/CallControls/CallControlsButton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAOsB;AACtB,0CAAuC;AAkCvC,MAAM,iBAAiB,GAAG,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC;AACxC,MAAM,mBAAmB,GAAG,aAAK,CAAC,MAAM,CAAC,EAAE,CAAC;AAErC,MAAM,kBAAkB,GAAG,CAChC,KAAuD,EACvD,EAAE;IACF,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,MAAM,EACN,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,cAAc,GAA4B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QAC/D,mBAAmB;QACnB,MAAM,CAAC,SAAS;QAChB;YACE,eAAe,EAAE,KAAK;YACtB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC3B;QACD,KAAK;QACL,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI;KACvC,CAAC;IAEF,OAAO,CACL,CAAC,wBAAS,CACR,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,cAAc,CAAC,CACtB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,iBAAiB,IAAI,IAAI,CAAC,CAAC,CAC1D;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,kBAAkB,sBAsC7B;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,aAAK,CAAC,KAAK,CAAC,UAAU;QACnC,UAAU,EAAE,QAAQ;QACpB,UAAU;QACV,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,CAAC;QAEf,cAAc;QACd,SAAS,EAAE,CAAC;KACb;IACD,aAAa,EAAE;QACb,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,QAAQ;KACtC;CACF,CAAC,CAAC"}

package/dist/src/components/call/CallControls/ChatButton.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The props for the Chat Button in the Call Controls.
+ */
+export type ChatButtonProps = {
+    /**
+     * Handler to be called when the chat button is pressed.
+     * @returns void
+     */
+    onPressHandler?: () => void;
+    /**
+     * The count of the current unread message to be displayed above on the Chat button.
+     */
+    unreadBadgeCount?: number;
+};
+/**
+ * Button to open the Chat window while in the call.
+ *
+ * This call also display the unread count indicator/badge is there messages that are unread.
+ */
+export declare const ChatButton: ({ onPressHandler, unreadBadgeCount, }: ChatButtonProps) => JSX.Element;

package/dist/src/components/call/CallControls/ChatButton.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatButton = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const CallControlsButton_1 = require("./CallControlsButton");
+const theme_1 = require("../../../theme");
+const icons_1 = require("../../../icons");
+const TestIds_1 = require("../../../constants/TestIds");
+const constants_1 = require("../../../constants");
+/**
+ * Button to open the Chat window while in the call.
+ *
+ * This call also display the unread count indicator/badge is there messages that are unread.
+ */
+const ChatButton = ({ onPressHandler, unreadBadgeCount, }) => {
+    return (<react_native_1.View>
+      <CallControlsButton_1.CallControlsButton color={theme_1.theme.light.static_white} onPress={onPressHandler} svgContainerStyle={styles.svgContainerStyle}>
+        <UnreadBadgeCountIndicator count={unreadBadgeCount}/>
+        <icons_1.Chat color={theme_1.theme.light.static_black}/>
+      </CallControlsButton_1.CallControlsButton>
+    </react_native_1.View>);
+};
+exports.ChatButton = ChatButton;
+const UnreadBadgeCountIndicator = ({ count, }) => {
+    // Don't show badge if count is 0 or undefined
+    if (!count) {
+        return null;
+    }
+    return (<react_native_1.View testID={TestIds_1.ComponentTestIds.CHAT_UNREAD_BADGE_COUNT_INDICATOR} style={styles.chatBadge}>
+      <react_native_1.Text style={styles.chatBadgeText}>{count}</react_native_1.Text>
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    svgContainerStyle: {
+        paddingTop: theme_1.theme.padding.xs,
+    },
+    chatBadge: {
+        backgroundColor: theme_1.theme.light.error,
+        borderRadius: theme_1.theme.rounded.xl,
+        position: 'absolute',
+        left: 15,
+        bottom: 20,
+        zIndex: constants_1.Z_INDEX.IN_FRONT,
+        height: 30,
+        width: 30,
+        justifyContent: 'center',
+    },
+    chatBadgeText: {
+        color: theme_1.theme.light.static_white,
+        textAlign: 'center',
+        ...theme_1.theme.fonts.bodyBold,
+    },
+});
+//# sourceMappingURL=ChatButton.js.map

package/dist/src/components/call/CallControls/ChatButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatButton.js","sourceRoot":"","sources":["../../../../../src/components/call/CallControls/ChatButton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAsD;AACtD,6DAA0D;AAC1D,0CAAuC;AACvC,0CAAsC;AACtC,wDAA8D;AAC9D,kDAA6C;AAiB7C;;;;GAIG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,cAAc,EACd,gBAAgB,GACA,EAAE,EAAE;IACpB,OAAO,CACL,CAAC,mBAAI,CACH;MAAA,CAAC,uCAAkB,CACjB,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAChC,OAAO,CAAC,CAAC,cAAc,CAAC,CACxB,iBAAiB,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAE5C;QAAA,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,EACnD;QAAA,CAAC,YAAI,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EACxC;MAAA,EAAE,uCAAkB,CACtB;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,UAAU,cAgBrB;AAEF,MAAM,yBAAyB,GAAG,CAAC,EACjC,KAAK,GAGN,EAAE,EAAE;IACH,8CAA8C;IAC9C,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,mBAAI,CACH,MAAM,CAAC,CAAC,0BAAgB,CAAC,iCAAiC,CAAC,CAC3D,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAExB;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,mBAAI,CAClD;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,iBAAiB,EAAE;QACjB,UAAU,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KAC7B;IACD,SAAS,EAAE;QACT,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,KAAK;QAClC,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,mBAAO,CAAC,QAAQ;QACxB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,cAAc,EAAE,QAAQ;KACzB;IACD,aAAa,EAAE;QACb,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY;QAC/B,SAAS,EAAE,QAAQ;QACnB,GAAG,aAAK,CAAC,KAAK,CAAC,QAAQ;KACxB;CACF,CAAC,CAAC"}

package/dist/src/components/{utility/internal → call/CallControls}/HangupCallButton.d.ts

@@ -8,9 +8,20 @@ export type HangUpCallButtonProps = {
      * @returns void
      */
     onPressHandler?: () => void;
+    /**
+     * Handler to be called when the call is hanged up.
+     *
+     * Note: If the `onPressHandler` is passed this handler will not be executed.
+     */
+    onHangUpCall?: () => void;
     /**
      * Style of the Button Container
      */
     style?: StyleProp<ViewStyle>;
 };
-export declare const HangUpCallButton: ({ onPressHandler, style, }: HangUpCallButtonProps) => JSX.Element;
+/**
+ * Button to hangup a call.
+ *
+ * Mostly calls call.leave() internally.
+ */
+export declare const HangUpCallButton: ({ onPressHandler, onHangUpCall, style, }: HangUpCallButtonProps) => JSX.Element;

package/dist/src/components/{utility/internal → call/CallControls}/HangupCallButton.js

@@ -27,12 +27,16 @@ exports.HangUpCallButton = void 0;
 const react_1 = __importStar(require("react"));
 const CallControlsButton_1 = require("./CallControlsButton");
 const theme_1 = require("../../../theme");
-const react_native_1 = require("react-native");
 const icons_1 = require("../../../icons");
 const TestIds_1 = require("../../../constants/TestIds");
 const video_react_bindings_1 = require("@stream-io/video-react-bindings");
 const video_client_1 = require("@stream-io/video-client");
-const HangUpCallButton = ({ onPressHandler, style, }) => {
+/**
+ * Button to hangup a call.
+ *
+ * Mostly calls call.leave() internally.
+ */
+const HangUpCallButton = ({ onPressHandler, onHangUpCall, style, }) => {
     const call = (0, video_react_bindings_1.useCall)();
     const { useCallCallingState } = (0, video_react_bindings_1.useCallStateHooks)();
     const callingState = useCallCallingState();
@@ -46,28 +50,18 @@ const HangUpCallButton = ({ onPressHandler, style, }) => {
                 return;
             }
             await call?.leave();
+            if (onHangUpCall) {
+                onHangUpCall();
+            }
         }
         catch (error) {
             console.error('Error leaving call:', error);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [call]);
-    return (<CallControlsButton_1.CallControlsButton onPress={hangUpCallHandler} color={theme_1.theme.light.error} style={[styles.button, { shadowColor: theme_1.theme.light.error }, style]} testID={TestIds_1.ButtonTestIds.HANG_UP_CALL}>
+    return (<CallControlsButton_1.CallControlsButton onPress={hangUpCallHandler} color={theme_1.theme.light.error} style={[{ shadowColor: theme_1.theme.light.error }, style]} testID={TestIds_1.ButtonTestIds.HANG_UP_CALL}>
       <icons_1.PhoneDown color={theme_1.theme.light.static_white}/>
     </CallControlsButton_1.CallControlsButton>);
 };
 exports.HangUpCallButton = HangUpCallButton;
-const styles = react_native_1.StyleSheet.create({
-    button: {
-        // For iOS
-        shadowOffset: {
-            width: 0,
-            height: 6,
-        },
-        shadowOpacity: 0.37,
-        shadowRadius: 7.49,
-        // For android
-        elevation: 6,
-    },
-});
 //# sourceMappingURL=HangupCallButton.js.map

package/dist/src/components/call/CallControls/HangupCallButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HangupCallButton.js","sourceRoot":"","sources":["../../../../../src/components/call/CallControls/HangupCallButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,6DAA0D;AAC1D,0CAAuC;AAEvC,0CAA2C;AAC3C,wDAA2D;AAC3D,0EAA6E;AAC7E,0DAAuD;AAuBvD;;;;GAIG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,cAAc,EACd,YAAY,EACZ,KAAK,GACiB,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAA,wCAAiB,GAAE,CAAC;IACpD,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAE3C,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC/C,IAAI,cAAc,EAAE;YAClB,cAAc,EAAE,CAAC;YACjB,OAAO;SACR;QACD,IAAI;YACF,IAAI,YAAY,KAAK,2BAAY,CAAC,IAAI,EAAE;gBACtC,OAAO;aACR;YACD,MAAM,IAAI,EAAE,KAAK,EAAE,CAAC;YACpB,IAAI,YAAY,EAAE;gBAChB,YAAY,EAAE,CAAC;aAChB;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;SAC7C;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,CAAC,uCAAkB,CACjB,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAC3B,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CACzB,KAAK,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,aAAK,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC,CACnD,MAAM,CAAC,CAAC,uBAAa,CAAC,YAAY,CAAC,CAEnC;MAAA,CAAC,iBAAS,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAC7C;IAAA,EAAE,uCAAkB,CAAC,CACtB,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,gBAAgB,oBAsC3B"}

package/dist/src/components/call/CallControls/ReactionButton.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Props for the Reaction button
+ */
+export type ReactionButtonProps = {
+    /**
+     * Handler to be called when the reaction button is pressed.
+     */
+    onPressHandler?: () => void;
+};
+/**
+ * Button to display the list of Reactions supported in the call.
+ * On press, it opens a view that can be used to send Reaction.
+ */
+export declare const ReactionButton: ({ onPressHandler }: ReactionButtonProps) => JSX.Element;

package/dist/src/components/call/CallControls/ReactionButton.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactionButton = void 0;
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const react_1 = __importStar(require("react"));
+const CallControlsButton_1 = require("./CallControlsButton");
+const video_client_1 = require("@stream-io/video-client");
+const TestIds_1 = require("../../../constants/TestIds");
+const theme_1 = require("../../../theme");
+const icons_1 = require("../../../icons");
+const ReactionsPicker_1 = require("../ReactionsPicker");
+const utils_1 = require("../../../utils");
+/**
+ * Button to display the list of Reactions supported in the call.
+ * On press, it opens a view that can be used to send Reaction.
+ */
+const ReactionButton = ({ onPressHandler }) => {
+    const [showReactionsPicker, setShowReactionsPicker] = (0, react_1.useState)(false);
+    const [reactionsButtonLayoutRectangle, setReactionsButtonLayoutRectangle] = (0, react_1.useState)();
+    // This is for the reaction picker
+    const onReactionsButtonLayout = (event) => {
+        const layout = event.nativeEvent.layout;
+        setReactionsButtonLayoutRectangle((prev) => {
+            if (prev &&
+                prev.width === layout.width &&
+                prev.height === layout.height &&
+                prev.x === layout.x &&
+                prev.y === layout.y) {
+                return prev;
+            }
+            return layout;
+        });
+    };
+    const reactionButtonHandler = () => {
+        if (onPressHandler) {
+            onPressHandler();
+            return;
+        }
+        setShowReactionsPicker(true);
+    };
+    return (<>
+      <video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.CREATE_REACTION]}>
+        <CallControlsButton_1.CallControlsButton testID={TestIds_1.ButtonTestIds.REACTION} onPress={reactionButtonHandler} color={theme_1.theme.light.static_white} onLayout={onReactionsButtonLayout}>
+          <icons_1.Reaction color={theme_1.theme.light.static_black}/>
+        </CallControlsButton_1.CallControlsButton>
+      </video_react_bindings_1.Restricted>
+      {showReactionsPicker && (<ReactionsPicker_1.ReactionsPicker reactions={utils_1.StreamVideoRN.getConfig().supportedReactions} reactionsButtonLayoutRectangle={reactionsButtonLayoutRectangle} onRequestedClose={() => {
+                setShowReactionsPicker(false);
+            }}/>)}
+    </>);
+};
+exports.ReactionButton = ReactionButton;
+//# sourceMappingURL=ReactionButton.js.map

package/dist/src/components/call/CallControls/ReactionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../src/components/call/CallControls/ReactionButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0EAA6D;AAC7D,+CAAwC;AACxC,6DAA0D;AAC1D,0DAAwD;AACxD,wDAA2D;AAC3D,0CAAuC;AACvC,0CAA0C;AAC1C,wDAAqD;AACrD,0CAA+C;AAa/C;;;GAGG;AACI,MAAM,cAAc,GAAG,CAAC,EAAE,cAAc,EAAuB,EAAE,EAAE;IACxE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GACjD,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAC3B,MAAM,CAAC,8BAA8B,EAAE,iCAAiC,CAAC,GACvE,IAAA,gBAAQ,GAAmB,CAAC;IAE9B,kCAAkC;IAClC,MAAM,uBAAuB,GAAG,CAAC,KAAwB,EAAE,EAAE;QAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QACxC,iCAAiC,CAAC,CAAC,IAAI,EAAE,EAAE;YACzC,IACE,IAAI;gBACJ,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;gBAC3B,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;gBAC7B,IAAI,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;gBACnB,IAAI,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,EACnB;gBACA,OAAO,IAAI,CAAC;aACb;YACD,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,cAAc,EAAE;YAClB,cAAc,EAAE,CAAC;YACjB,OAAO;SACR;QACD,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,EACE;MAAA,CAAC,iCAAU,CAAC,cAAc,CAAC,CAAC,CAAC,4BAAa,CAAC,eAAe,CAAC,CAAC,CAC1D;QAAA,CAAC,uCAAkB,CACjB,MAAM,CAAC,CAAC,uBAAa,CAAC,QAAQ,CAAC,CAC/B,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAC/B,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAChC,QAAQ,CAAC,CAAC,uBAAuB,CAAC,CAElC;UAAA,CAAC,gBAAQ,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAC5C;QAAA,EAAE,uCAAkB,CACtB;MAAA,EAAE,iCAAU,CACZ;MAAA,CAAC,mBAAmB,IAAI,CACtB,CAAC,iCAAe,CACd,SAAS,CAAC,CAAC,qBAAa,CAAC,SAAS,EAAE,CAAC,kBAAkB,CAAC,CACxD,8BAA8B,CAAC,CAAC,8BAA8B,CAAC,CAC/D,gBAAgB,CAAC,CAAC,GAAG,EAAE;gBACrB,sBAAsB,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC,CAAC,EACF,CACH,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAtDW,QAAA,cAAc,kBAsDzB"}

package/dist/src/components/call/CallControls/RejectCallButton.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The props for the Reject Call button.
+ */
+type RejectCallButtonProps = {
+    /**
+     * Handler to be called when the accept call button is pressed.
+     * @returns void
+     */
+    onPressHandler?: () => void;
+    /**
+     * Handler to be called when the reject call button is pressed.
+     *
+     * Note: If the `onPressHandler` is passed this handler will not be executed.
+     */
+    onRejectHandler?: () => void;
+};
+/**
+ * Button to reject a call.
+ *
+ * Mostly calls call.leave({ reject: true }) internally.
+ */
+export declare const RejectCallButton: ({ onPressHandler, onRejectHandler, }: RejectCallButtonProps) => JSX.Element;
+export {};

package/dist/src/components/call/CallControls/RejectCallButton.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RejectCallButton = void 0;
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const react_1 = __importDefault(require("react"));
+const CallControlsButton_1 = require("./CallControlsButton");
+const theme_1 = require("../../../theme");
+const icons_1 = require("../../../icons");
+const video_client_1 = require("@stream-io/video-client");
+/**
+ * Button to reject a call.
+ *
+ * Mostly calls call.leave({ reject: true }) internally.
+ */
+const RejectCallButton = ({ onPressHandler, onRejectHandler, }) => {
+    const call = (0, video_react_bindings_1.useCall)();
+    const { useCallCallingState } = (0, video_react_bindings_1.useCallStateHooks)();
+    const callingState = useCallCallingState();
+    const rejectCallHandler = async () => {
+        if (onPressHandler) {
+            onPressHandler();
+            return;
+        }
+        try {
+            if (callingState === video_client_1.CallingState.LEFT) {
+                return;
+            }
+            await call?.leave({ reject: true });
+            if (onRejectHandler) {
+                onRejectHandler();
+            }
+        }
+        catch (error) {
+            console.log('Error rejecting Call', error);
+        }
+    };
+    return (<CallControlsButton_1.CallControlsButton onPress={rejectCallHandler} color={theme_1.theme.light.error} style={theme_1.theme.button.lg} svgContainerStyle={theme_1.theme.icon.lg}>
+      <icons_1.PhoneDown color={theme_1.theme.light.static_white}/>
+    </CallControlsButton_1.CallControlsButton>);
+};
+exports.RejectCallButton = RejectCallButton;
+//# sourceMappingURL=RejectCallButton.js.map

package/dist/src/components/call/CallControls/RejectCallButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RejectCallButton.js","sourceRoot":"","sources":["../../../../../src/components/call/CallControls/RejectCallButton.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAA6E;AAC7E,kDAA0B;AAC1B,6DAA0D;AAC1D,0CAAuC;AACvC,0CAA2C;AAC3C,0DAAuD;AAmBvD;;;;GAIG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,cAAc,EACd,eAAe,GACO,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAA,wCAAiB,GAAE,CAAC;IACpD,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAC3C,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;QACnC,IAAI,cAAc,EAAE;YAClB,cAAc,EAAE,CAAC;YACjB,OAAO;SACR;QACD,IAAI;YACF,IAAI,YAAY,KAAK,2BAAY,CAAC,IAAI,EAAE;gBACtC,OAAO;aACR;YACD,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;YACpC,IAAI,eAAe,EAAE;gBACnB,eAAe,EAAE,CAAC;aACnB;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;SAC5C;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uCAAkB,CACjB,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAC3B,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CACzB,KAAK,CAAC,CAAC,aAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CACvB,iBAAiB,CAAC,CAAC,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAEjC;MAAA,CAAC,iBAAS,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAC7C;IAAA,EAAE,uCAAkB,CAAC,CACtB,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,gBAAgB,oBAmC3B"}