@stream-io/video-react-native-sdk 0.0.1-alpha.360 → 0.0.1-alpha.362

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.362](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.361...@stream-io/video-react-native-sdk-0.0.1-alpha.362) (2023-08-10)
+
+
+### Bug Fixes
+
+* **react-native:** avoid usage of image showcase in push notification docs ([b820b94](https://github.com/GetStream/stream-video-js/commit/b820b946131e5cd4f897daf5f2f18fadcd980697))
+* **react-native:** disable camera toggle face button when local video is muted ([#903](https://github.com/GetStream/stream-video-js/issues/903)) ([58150bc](https://github.com/GetStream/stream-video-js/commit/58150bc8d15e6e62654e1f0bc14dc207d51ed1f9))
+
+
+
+## [0.0.1-alpha.361](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.360...@stream-io/video-react-native-sdk-0.0.1-alpha.361) (2023-08-09)
+
+
+### Features
+
+* **react-native:** add basic reactions popup ([#913](https://github.com/GetStream/stream-video-js/issues/913)) ([3969000](https://github.com/GetStream/stream-video-js/commit/3969000025faabf8c923c1648bc19475d31e0cfb))
+
+
+
 ## [0.0.1-alpha.360](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.359...@stream-io/video-react-native-sdk-0.0.1-alpha.360) (2023-08-08)
 
 

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

@@ -58,7 +58,7 @@ describe('CallControls', () => {
         });
         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_MODAL)).toBeVisible();
+        expect(RNTLTools_1.screen.getByTestId(TestIds_1.ComponentTestIds.REACTIONS_PICKER)).toBeVisible();
     });
     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)(), [

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.js

@@ -31,29 +31,43 @@ const CallControlsButton_1 = require("../utility/internal/CallControlsButton");
 const theme_1 = require("../../theme");
 const video_client_1 = require("@stream-io/video-client");
 const video_react_bindings_1 = require("@stream-io/video-react-bindings");
-const ReactionsModal_1 = require("../utility/ReactionsModal");
 const ToggleAudioButton_1 = require("../utility/internal/ToggleAudioButton");
 const ToggleVideoButton_1 = require("../utility/internal/ToggleVideoButton");
 const TestIds_1 = require("../../constants/TestIds");
 const constants_1 = require("../../constants");
 const ToggleCameraFaceButton_1 = require("../utility/internal/ToggleCameraFaceButton");
 const HangupCallButton_1 = require("../utility/internal/HangupCallButton");
+const ReactionsPicker_1 = require("./ReactionsPicker");
+const utils_1 = require("../../utils");
 /**
  * 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 = ({ chatButton, hangUpCallButton, style, }) => {
-    const [isReactionModalActive, setIsReactionModalActive] = (0, react_1.useState)(false);
-    const onOpenReactionsModalHandler = (0, react_1.useCallback)(() => {
-        setIsReactionModalActive(true);
-    }, [setIsReactionModalActive]);
+    const [showReactionsPicker, setShowReactionsPicker] = (0, react_1.useState)(false);
+    const [reactionsButtonLayoutRectangle, setReactionsButtonLayoutRectangle] = (0, react_1.useState)();
+    // This is for the reaction popup
+    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;
+        });
+    };
     return (<react_native_1.View style={[styles.container, style]}>
       <video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.CREATE_REACTION]}>
-        <CallControlsButton_1.CallControlsButton testID={TestIds_1.ButtonTestIds.REACTION} onPress={onOpenReactionsModalHandler} color={theme_1.theme.light.static_white} style={styles.button}>
+        <CallControlsButton_1.CallControlsButton testID={TestIds_1.ButtonTestIds.REACTION} onPress={() => {
+            setShowReactionsPicker(true);
+        }} color={theme_1.theme.light.static_white} style={styles.button} onLayout={onReactionsButtonLayout}>
           <icons_1.Reaction color={theme_1.theme.light.static_black}/>
         </CallControlsButton_1.CallControlsButton>
       </video_react_bindings_1.Restricted>
-      <ReactionsModal_1.ReactionModal isReactionModalActive={isReactionModalActive} setIsReactionModalActive={setIsReactionModalActive}/>
       {chatButton && (<react_native_1.View>
           <CallControlsButton_1.CallControlsButton color={theme_1.theme.light.static_white} onPress={chatButton.onPressHandler} svgContainerStyle={styles.svgContainerStyle} style={styles.button}>
             <UnreadBadgeCountIndicator count={chatButton.unreadBadgeCountIndicator}/>
@@ -64,6 +78,10 @@ const CallControls = ({ chatButton, hangUpCallButton, style, }) => {
       <ToggleAudioButton_1.ToggleAudioButton />
       <ToggleCameraFaceButton_1.ToggleCameraFaceButton />
       <HangupCallButton_1.HangUpCallButton onPressHandler={hangUpCallButton?.onPressHandler}/>
+
+      {showReactionsPicker && (<ReactionsPicker_1.ReactionsPicker reactions={utils_1.StreamVideoRN.getConfig().supportedReactions} reactionsButtonLayoutRectangle={reactionsButtonLayoutRectangle} onRequestedClose={() => {
+                setShowReactionsPicker(false);
+            }}/>)}
     </react_native_1.View>);
 };
 exports.CallControls = CallControls;
@@ -82,6 +100,7 @@ const styles = react_native_1.StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         zIndex: constants_1.Z_INDEX.IN_FRONT,
+        backgroundColor: theme_1.theme.light.static_black,
     },
     button: {
         // For iOS

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

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

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

@@ -0,0 +1,9 @@
+import { LayoutRectangle } from 'react-native';
+import { StreamVideoConfig } from '../../utils/StreamVideoRN/types';
+interface Props {
+    reactions: StreamVideoConfig['supportedReactions'];
+    reactionsButtonLayoutRectangle?: LayoutRectangle;
+    onRequestedClose: () => void;
+}
+export declare const ReactionsPicker: ({ reactions, reactionsButtonLayoutRectangle, onRequestedClose, }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,150 @@
+"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.ReactionsPicker = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const theme_1 = require("../../theme");
+const TestIds_1 = require("../../constants/TestIds");
+const TOP_PADDING = 4;
+const REACTION_MARGIN_BOTTOM = 4;
+const ReactionsPicker = ({ reactions, reactionsButtonLayoutRectangle, onRequestedClose, }) => {
+    const call = (0, video_react_bindings_1.useCall)();
+    const size = reactionsButtonLayoutRectangle?.width ?? 0;
+    const reactionItemSize = size * 0.8;
+    const popupHeight = 
+    // the top padding
+    TOP_PADDING +
+        // take margins into account
+        REACTION_MARGIN_BOTTOM * reactions.length +
+        // the size of the reaction icon items (same size as reactions button * amount of reactions)
+        reactionItemSize * reactions.length;
+    const reactionsPopupStyle = {
+        // we should show the popup right above the reactions button and not top of it
+        top: (reactionsButtonLayoutRectangle?.y ?? 0) - popupHeight,
+        // from the same side horizontal coordinate of the reactions button
+        left: reactionsButtonLayoutRectangle?.x,
+        // the width of the popup should be the same as the reactions button
+        width: size,
+        height: popupHeight,
+        // the popup should be rounded as the reactions button
+        borderTopStartRadius: size / 2,
+        borderTopEndRadius: size / 2,
+    };
+    const elasticAnimRef = (0, react_1.useRef)(new react_native_1.Animated.Value(0.5)); // Initial value for scale: 0.5
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(elasticAnimRef.current, {
+            toValue: 1,
+            duration: 800,
+            useNativeDriver: true,
+            easing: react_native_1.Easing.elastic(3),
+        }).start();
+    }, []);
+    const reactionItemStyle = {
+        height: reactionItemSize,
+        width: reactionItemSize,
+        borderRadius: reactionItemSize / 2,
+    };
+    const reactionsButtonDimmerStyle = {
+        ...styles.reactionsButtonDimmer,
+        height: size,
+        width: size,
+        // we should show the popup right on top of the reactions button
+        top: reactionsButtonLayoutRectangle?.y ?? 0 - popupHeight + size,
+        // from the same side horizontal coordinate of the reactions button
+        left: reactionsButtonLayoutRectangle?.x,
+    };
+    const onClose = (reaction) => {
+        if (reaction) {
+            call?.sendReaction(reaction).catch((e) => {
+                console.error(e, reaction);
+            });
+        }
+        react_native_1.Animated.timing(elasticAnimRef.current, {
+            toValue: 0.2,
+            duration: 150,
+            useNativeDriver: true,
+            easing: react_native_1.Easing.linear,
+        }).start(onRequestedClose);
+    };
+    return (<>
+      <react_native_1.Pressable testID={TestIds_1.ComponentTestIds.REACTIONS_PICKER} style={[styles.reactionsPopup, reactionsPopupStyle]} onPress={() => {
+            onClose();
+        }}>
+        {/* all the reactions */}
+        {reactions.map((reaction) => (<react_native_1.Pressable key={reaction.emoji_code} style={[styles.reactionItem, reactionItemStyle]} onPress={() => {
+                onClose({
+                    type: reaction.type,
+                    custom: reaction.custom,
+                    emoji_code: reaction.emoji_code,
+                });
+            }}>
+            <react_native_1.Animated.Text style={[
+                styles.reactionText,
+                {
+                    transform: [
+                        {
+                            scaleY: elasticAnimRef.current,
+                        },
+                        {
+                            scaleX: elasticAnimRef.current,
+                        },
+                    ],
+                },
+            ]}>
+              {reaction.icon}
+            </react_native_1.Animated.Text>
+          </react_native_1.Pressable>))}
+      </react_native_1.Pressable>
+      {/* a square view with 50% opacity that semi hides the reactions button */}
+      <react_native_1.Pressable style={reactionsButtonDimmerStyle} onPress={() => onClose()}/>
+    </>);
+};
+exports.ReactionsPicker = ReactionsPicker;
+const styles = react_native_1.StyleSheet.create({
+    reactionsPopup: {
+        position: 'absolute',
+        alignItems: 'center',
+        backgroundColor: theme_1.theme.light.static_black,
+        paddingTop: TOP_PADDING,
+    },
+    reactionsButtonDimmer: {
+        position: 'absolute',
+        backgroundColor: theme_1.theme.light.static_black,
+        opacity: 0.5,
+    },
+    reactionItem: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: REACTION_MARGIN_BOTTOM,
+        // temporary background color until we have theming
+        backgroundColor: theme_1.theme.light.static_grey,
+    },
+    reactionText: {
+        fontSize: 18.5,
+    },
+});
+//# sourceMappingURL=ReactionsPicker.js.map

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

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

package/dist/src/components/utility/index.d.ts

@@ -1,2 +1 @@
 export * from './Avatar';
-export * from './ReactionsModal';

package/dist/src/components/utility/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Avatar"), exports);
-__exportStar(require("./ReactionsModal"), exports);
 //# sourceMappingURL=index.js.map

package/dist/src/components/utility/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/utility/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,mDAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/utility/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB"}

package/dist/src/components/utility/internal/CallControlsButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import { PressableProps, StyleProp, View, ViewStyle } from 'react-native';
 interface CallControlsButtonProps {
     /**
      * `onPress` handler called when a single tap gesture is detected.
@@ -9,6 +9,10 @@ interface CallControlsButtonProps {
      * The background color of the button rendered.
      */
     color?: string;
+    /**
+     * Boolean to enable/enable the button
+     */
+    disabled?: boolean;
     /**
      * Style to the Pressable button.
      */
@@ -21,6 +25,7 @@ interface CallControlsButtonProps {
      * Accessibility label for the button.
      */
     testID?: string;
+    onLayout?: View['props']['onLayout'];
 }
 export declare const CallControlsButton: (props: React.PropsWithChildren<CallControlsButtonProps>) => JSX.Element;
 export {};

package/dist/src/components/utility/internal/CallControlsButton.js

@@ -10,7 +10,7 @@ const theme_1 = require("../../../theme");
 const DEFAULT_ICON_SIZE = theme_1.theme.icon.md;
 const DEFAULT_BUTTON_SIZE = theme_1.theme.button.sm;
 const CallControlsButton = (props) => {
-    const { onPress, children, color, style, svgContainerStyle, testID } = props;
+    const { onPress, children, disabled, color, style, svgContainerStyle, testID, onLayout, } = props;
     const pressableStyle = ({ pressed }) => [
         DEFAULT_BUTTON_SIZE,
         styles.container,
@@ -19,8 +19,9 @@ const CallControlsButton = (props) => {
             opacity: pressed ? 0.2 : 1,
         },
         style ? style : null,
+        disabled ? styles.disabledStyle : null,
     ];
-    return (<react_native_1.Pressable style={pressableStyle} onPress={onPress} testID={testID}>
+    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,
@@ -39,5 +40,8 @@ const styles = react_native_1.StyleSheet.create({
         alignItems: 'center',
     },
     svgContainerStyle: {},
+    disabledStyle: {
+        backgroundColor: theme_1.theme.light.disabled,
+    },
 });
 //# sourceMappingURL=CallControlsButton.js.map

package/dist/src/components/utility/internal/CallControlsButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallControlsButton.js","sourceRoot":"","sources":["../../../../../src/components/utility/internal/CallControlsButton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAOsB;AACtB,0CAAuC;AAyBvC,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,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE7E,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,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;KACrB,CAAC;IAEF,OAAO,CACL,CAAC,wBAAS,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACjE;MAAA,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,iBAAiB;YACxB,iBAAiB;YACjB,iBAAiB,IAAI,IAAI;SAC1B,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,kBAAkB,sBA4B7B;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;KACrB;IACD,iBAAiB,EAAE,EAAE;CACtB,CAAC,CAAC"}
+{"version":3,"file":"CallControlsButton.js","sourceRoot":"","sources":["../../../../../src/components/utility/internal/CallControlsButton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAOsB;AACtB,0CAAuC;AA8BvC,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,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QACpB,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,CACH,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,iBAAiB;YACxB,iBAAiB;YACjB,iBAAiB,IAAI,IAAI;SAC1B,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,kBAAkB,sBA4C7B;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;KACrB;IACD,iBAAiB,EAAE,EAAE;IACrB,aAAa,EAAE;QACb,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,QAAQ;KACtC;CACF,CAAC,CAAC"}

package/dist/src/components/utility/internal/ToggleCameraFaceButton.js

@@ -14,9 +14,9 @@ const icons_1 = require("../../../icons");
 const theme_1 = require("../../../theme");
 const react_native_1 = require("react-native");
 const ToggleCameraFaceButton = () => {
-    const { isCameraOnFrontFacingMode, toggleCameraFacingMode } = (0, MediaStreamManagement_1.useMediaStreamManagement)();
+    const { isVideoMuted, isCameraOnFrontFacingMode, toggleCameraFacingMode } = (0, MediaStreamManagement_1.useMediaStreamManagement)();
     return (<video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.SEND_VIDEO]}>
-      <CallControlsButton_1.CallControlsButton onPress={toggleCameraFacingMode} color={(0, utils_1.muteStatusColor)(!isCameraOnFrontFacingMode)} style={isCameraOnFrontFacingMode ? styles.button : null}>
+      <CallControlsButton_1.CallControlsButton disabled={isVideoMuted} onPress={toggleCameraFacingMode} color={(0, utils_1.muteStatusColor)(!isCameraOnFrontFacingMode)} style={isCameraOnFrontFacingMode ? styles.button : null}>
         <icons_1.CameraSwitch color={isCameraOnFrontFacingMode
             ? theme_1.theme.light.static_black
             : theme_1.theme.light.static_white}/>

package/dist/src/components/utility/internal/ToggleCameraFaceButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleCameraFaceButton.js","sourceRoot":"","sources":["../../../../../src/components/utility/internal/ToggleCameraFaceButton.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAwD;AACxD,0EAA6D;AAC7D,kDAA0B;AAC1B,6DAA0D;AAC1D,oFAAoF;AACpF,0CAAiD;AACjD,0CAA8C;AAC9C,0CAAuC;AACvC,+CAA0C;AAEnC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,GACzD,IAAA,gDAAwB,GAAE,CAAC;IAE7B,OAAO,CACL,CAAC,iCAAU,CAAC,cAAc,CAAC,CAAC,CAAC,4BAAa,CAAC,UAAU,CAAC,CAAC,CACrD;MAAA,CAAC,uCAAkB,CACjB,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAChC,KAAK,CAAC,CAAC,IAAA,uBAAe,EAAC,CAAC,yBAAyB,CAAC,CAAC,CACnD,KAAK,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAExD;QAAA,CAAC,oBAAY,CACX,KAAK,CAAC,CACJ,yBAAyB;YACvB,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY;YAC1B,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAC7B,EAEL;MAAA,EAAE,uCAAkB,CACtB;IAAA,EAAE,iCAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,sBAAsB,0BAqBjC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,MAAM,EAAE;QACN,UAAU;QACV,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,IAAI;QAElB,cAAc;QACd,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC"}
+{"version":3,"file":"ToggleCameraFaceButton.js","sourceRoot":"","sources":["../../../../../src/components/utility/internal/ToggleCameraFaceButton.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAwD;AACxD,0EAA6D;AAC7D,kDAA0B;AAC1B,6DAA0D;AAC1D,oFAAoF;AACpF,0CAAiD;AACjD,0CAA8C;AAC9C,0CAAuC;AACvC,+CAA0C;AAEnC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,EAAE,YAAY,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,GACvE,IAAA,gDAAwB,GAAE,CAAC;IAE7B,OAAO,CACL,CAAC,iCAAU,CAAC,cAAc,CAAC,CAAC,CAAC,4BAAa,CAAC,UAAU,CAAC,CAAC,CACrD;MAAA,CAAC,uCAAkB,CACjB,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAChC,KAAK,CAAC,CAAC,IAAA,uBAAe,EAAC,CAAC,yBAAyB,CAAC,CAAC,CACnD,KAAK,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAExD;QAAA,CAAC,oBAAY,CACX,KAAK,CAAC,CACJ,yBAAyB;YACvB,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY;YAC1B,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAC7B,EAEL;MAAA,EAAE,uCAAkB,CACtB;IAAA,EAAE,iCAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,sBAAsB,0BAsBjC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,MAAM,EAAE;QACN,UAAU;QACV,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,IAAI;QAElB,cAAc;QACd,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC"}

package/dist/src/constants/TestIds.d.ts

@@ -13,7 +13,7 @@ export declare enum ComponentTestIds {
     PARTICIPANT_MEDIA_STREAM = "participant-media-stream",
     PARTICIPANTS_INFO = "participants-info",
     PARTICIPANT_SCREEN_SHARING = "participant-screen-sharing",
-    REACTIONS_MODAL = "reactions-modal",
+    REACTIONS_PICKER = "reactions-picker",
     CHAT_UNREAD_BADGE_COUNT_INDICATOR = "chat-unread-badge-count-indicator"
 }
 export declare enum ButtonTestIds {

package/dist/src/constants/TestIds.js

@@ -18,7 +18,7 @@ var ComponentTestIds;
     ComponentTestIds["PARTICIPANT_MEDIA_STREAM"] = "participant-media-stream";
     ComponentTestIds["PARTICIPANTS_INFO"] = "participants-info";
     ComponentTestIds["PARTICIPANT_SCREEN_SHARING"] = "participant-screen-sharing";
-    ComponentTestIds["REACTIONS_MODAL"] = "reactions-modal";
+    ComponentTestIds["REACTIONS_PICKER"] = "reactions-picker";
     ComponentTestIds["CHAT_UNREAD_BADGE_COUNT_INDICATOR"] = "chat-unread-badge-count-indicator";
 })(ComponentTestIds = exports.ComponentTestIds || (exports.ComponentTestIds = {}));
 var ButtonTestIds;

package/dist/src/constants/TestIds.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestIds.js","sourceRoot":"","sources":["../../../src/constants/TestIds.ts"],"names":[],"mappings":";;;AAAA,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,+CAAgC,CAAA;IAChC,iDAAkC,CAAA;IAClC,iDAAkC,CAAA;AACpC,CAAC,EAJW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAItB;AAED,IAAY,gBAYX;AAZD,WAAY,gBAAgB;IAC1B,6DAAyC,CAAA;IACzC,qEAAiD,CAAA;IACjD,+EAA2D,CAAA;IAC3D,qEAAiD,CAAA;IACjD,2DAAuC,CAAA;IACvC,kFAA8D,CAAA;IAC9D,yEAAqD,CAAA;IACrD,2DAAuC,CAAA;IACvC,6EAAyD,CAAA;IACzD,uDAAmC,CAAA;IACnC,2FAAuE,CAAA;AACzE,CAAC,EAZW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAY3B;AAED,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,+DAA8C,CAAA;IAC9C,kEAAiD,CAAA;IACjD,8CAA6B,CAAA;IAC7B,oDAAmC,CAAA;AACrC,CAAC,EALW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAKxB;AAED,IAAY,YAEX;AAFD,WAAY,YAAY;IACtB,oEAAoD,CAAA;AACtD,CAAC,EAFW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAEvB;AAED,IAAY,YAEX;AAFD,WAAY,YAAY;IACtB,uCAAuB,CAAA;AACzB,CAAC,EAFW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAEvB"}
+{"version":3,"file":"TestIds.js","sourceRoot":"","sources":["../../../src/constants/TestIds.ts"],"names":[],"mappings":";;;AAAA,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,+CAAgC,CAAA;IAChC,iDAAkC,CAAA;IAClC,iDAAkC,CAAA;AACpC,CAAC,EAJW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAItB;AAED,IAAY,gBAYX;AAZD,WAAY,gBAAgB;IAC1B,6DAAyC,CAAA;IACzC,qEAAiD,CAAA;IACjD,+EAA2D,CAAA;IAC3D,qEAAiD,CAAA;IACjD,2DAAuC,CAAA;IACvC,kFAA8D,CAAA;IAC9D,yEAAqD,CAAA;IACrD,2DAAuC,CAAA;IACvC,6EAAyD,CAAA;IACzD,yDAAqC,CAAA;IACrC,2FAAuE,CAAA;AACzE,CAAC,EAZW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAY3B;AAED,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,+DAA8C,CAAA;IAC9C,kEAAiD,CAAA;IACjD,8CAA6B,CAAA;IAC7B,oDAAmC,CAAA;AACrC,CAAC,EALW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAKxB;AAED,IAAY,YAEX;AAFD,WAAY,YAAY;IACtB,oEAAoD,CAAA;AACtD,CAAC,EAFW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAEvB;AAED,IAAY,YAEX;AAFD,WAAY,YAAY;IACtB,uCAAuB,CAAA;AACzB,CAAC,EAFW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAEvB"}

package/dist/src/constants/index.d.ts

@@ -1,14 +1,10 @@
+import { StreamVideoConfig } from '../utils/StreamVideoRN/types';
 export declare const LOCAL_VIDEO_VIEW_STYLE: {
     height: number;
     width: number;
     borderRadius: number;
 };
-export declare const defaultEmojiReactions: {
-    type: string;
-    emoji_code: string;
-    custom: {};
-    icon: string;
-}[];
+export declare const defaultEmojiReactions: StreamVideoConfig['supportedReactions'];
 export declare const Z_INDEX: {
     IN_BACK: number;
     IN_MIDDLE: number;

package/dist/src/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":";;;AAAA,oCAAiC;AAEpB,QAAA,sBAAsB,GAAG;IACpC,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,EAAE;IACT,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;CAC/B,CAAC;AAEW,QAAA,qBAAqB,GAAG;IACnC;QACE,IAAI,EAAE,UAAU;QAChB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,aAAa;QACnB,UAAU,EAAE,cAAc;QAC1B,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,GAAG;KACV;IACD;QACE,IAAI,EAAE,UAAU;QAChB,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,IAAI;KACX;CACF,CAAC;AAEW,QAAA,OAAO,GAAG;IACrB,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC;CACZ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":";;;AAAA,oCAAiC;AAGpB,QAAA,sBAAsB,GAAG;IACpC,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,EAAE;IACT,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;CAC/B,CAAC;AAEW,QAAA,qBAAqB,GAA4C;IAC5E;QACE,IAAI,EAAE,UAAU;QAChB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,IAAI;KACX;IACD;QACE,IAAI,EAAE,aAAa;QACnB,UAAU,EAAE,cAAc;QAC1B,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,GAAG;KACV;IACD;QACE,IAAI,EAAE,UAAU;QAChB,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,IAAI;KACX;CACF,CAAC;AAEW,QAAA,OAAO,GAAG;IACrB,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC;CACZ,CAAC"}

package/dist/src/utils/StreamVideoRN/types.d.ts

@@ -1,6 +1,6 @@
 import { StreamReaction, StreamVideoClient } from '@stream-io/video-client';
 import { AndroidChannel } from '@notifee/react-native';
-type StreamReactionType = StreamReaction & {
+type StreamReactionType = Required<StreamReaction> & {
     icon: string | JSX.Element;
 };
 export type StreamVideoConfig = {

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.1-alpha.360";
+export declare const version = "0.0.1-alpha.362";

package/dist/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = void 0;
-exports.version = '0.0.1-alpha.360';
+exports.version = '0.0.1-alpha.362';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.0.1-alpha.360",
+  "version": "0.0.1-alpha.362",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/call/CallControls.tsx

@@ -1,11 +1,17 @@
-import React, { useCallback, useState } from 'react';
-import { StyleSheet, Text, View, ViewProps } from 'react-native';
+import React, { useState } from 'react';
+import {
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleSheet,
+  Text,
+  View,
+  ViewProps,
+} from 'react-native';
 import { Chat, Reaction } from '../../icons';
 import { CallControlsButton } from '../utility/internal/CallControlsButton';
 import { theme } from '../../theme';
 import { OwnCapability } from '@stream-io/video-client';
 import { Restricted } from '@stream-io/video-react-bindings';
-import { ReactionModal } from '../utility/ReactionsModal';
 import { ToggleAudioButton } from '../utility/internal/ToggleAudioButton';
 import { ToggleVideoButton } from '../utility/internal/ToggleVideoButton';
 import { ButtonTestIds, ComponentTestIds } from '../../constants/TestIds';
@@ -15,6 +21,8 @@ import {
   HangUpCallButton,
   HangUpCallButtonProps,
 } from '../utility/internal/HangupCallButton';
+import { ReactionsPicker } from './ReactionsPicker';
+import { StreamVideoRN } from '../../utils';
 
 /**
  * The props for the Chat Button in the Call Controls.
@@ -54,29 +62,44 @@ export const CallControls = ({
   hangUpCallButton,
   style,
 }: CallControlsType) => {
-  const [isReactionModalActive, setIsReactionModalActive] =
+  const [showReactionsPicker, setShowReactionsPicker] =
     useState<boolean>(false);
 
-  const onOpenReactionsModalHandler = useCallback(() => {
-    setIsReactionModalActive(true);
-  }, [setIsReactionModalActive]);
+  const [reactionsButtonLayoutRectangle, setReactionsButtonLayoutRectangle] =
+    useState<LayoutRectangle>();
+
+  // This is for the reaction popup
+  const onReactionsButtonLayout = (event: LayoutChangeEvent) => {
+    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;
+    });
+  };
 
   return (
     <View style={[styles.container, style]}>
       <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
         <CallControlsButton
           testID={ButtonTestIds.REACTION}
-          onPress={onOpenReactionsModalHandler}
+          onPress={() => {
+            setShowReactionsPicker(true);
+          }}
           color={theme.light.static_white}
           style={styles.button}
+          onLayout={onReactionsButtonLayout}
         >
           <Reaction color={theme.light.static_black} />
         </CallControlsButton>
       </Restricted>
-      <ReactionModal
-        isReactionModalActive={isReactionModalActive}
-        setIsReactionModalActive={setIsReactionModalActive}
-      />
       {chatButton && (
         <View>
           <CallControlsButton
@@ -96,6 +119,16 @@ export const CallControls = ({
       <ToggleAudioButton />
       <ToggleCameraFaceButton />
       <HangUpCallButton onPressHandler={hangUpCallButton?.onPressHandler} />
+
+      {showReactionsPicker && (
+        <ReactionsPicker
+          reactions={StreamVideoRN.getConfig().supportedReactions}
+          reactionsButtonLayoutRectangle={reactionsButtonLayoutRectangle}
+          onRequestedClose={() => {
+            setShowReactionsPicker(false);
+          }}
+        />
+      )}
     </View>
   );
 };
@@ -126,6 +159,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     zIndex: Z_INDEX.IN_FRONT,
+    backgroundColor: theme.light.static_black,
   },
   button: {
     // For iOS

package/src/components/call/ReactionsPicker.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  LayoutRectangle,
+  Pressable,
+  StyleSheet,
+  Animated,
+  Easing,
+} from 'react-native';
+import { StreamVideoConfig } from '../../utils/StreamVideoRN/types';
+import { useCall } from '@stream-io/video-react-bindings';
+import { SendReactionRequest } from '@stream-io/video-client';
+import { theme } from '../../theme';
+import { ComponentTestIds } from '../../constants/TestIds';
+
+interface Props {
+  reactions: StreamVideoConfig['supportedReactions'];
+  reactionsButtonLayoutRectangle?: LayoutRectangle;
+  onRequestedClose: () => void;
+}
+
+const TOP_PADDING = 4;
+const REACTION_MARGIN_BOTTOM = 4;
+
+export const ReactionsPicker = ({
+  reactions,
+  reactionsButtonLayoutRectangle,
+  onRequestedClose,
+}: Props) => {
+  const call = useCall();
+  const size = reactionsButtonLayoutRectangle?.width ?? 0;
+  const reactionItemSize = size * 0.8;
+
+  const popupHeight =
+    // the top padding
+    TOP_PADDING +
+    // take margins into account
+    REACTION_MARGIN_BOTTOM * reactions.length +
+    // the size of the reaction icon items (same size as reactions button * amount of reactions)
+    reactionItemSize * reactions.length;
+
+  const reactionsPopupStyle = {
+    // we should show the popup right above the reactions button and not top of it
+    top: (reactionsButtonLayoutRectangle?.y ?? 0) - popupHeight,
+    // from the same side horizontal coordinate of the reactions button
+    left: reactionsButtonLayoutRectangle?.x,
+    // the width of the popup should be the same as the reactions button
+    width: size,
+    height: popupHeight,
+    // the popup should be rounded as the reactions button
+    borderTopStartRadius: size / 2,
+    borderTopEndRadius: size / 2,
+  };
+
+  const elasticAnimRef = useRef(new Animated.Value(0.5)); // Initial value for scale: 0.5
+
+  useEffect(() => {
+    Animated.timing(elasticAnimRef.current, {
+      toValue: 1,
+      duration: 800,
+      useNativeDriver: true,
+      easing: Easing.elastic(3),
+    }).start();
+  }, []);
+
+  const reactionItemStyle = {
+    height: reactionItemSize,
+    width: reactionItemSize,
+    borderRadius: reactionItemSize / 2,
+  };
+
+  const reactionsButtonDimmerStyle = {
+    ...styles.reactionsButtonDimmer,
+    height: size,
+    width: size,
+    // we should show the popup right on top of the reactions button
+    top: reactionsButtonLayoutRectangle?.y ?? 0 - popupHeight + size,
+    // from the same side horizontal coordinate of the reactions button
+    left: reactionsButtonLayoutRectangle?.x,
+  };
+
+  const onClose = (reaction?: SendReactionRequest) => {
+    if (reaction) {
+      call?.sendReaction(reaction).catch((e) => {
+        console.error(e, reaction);
+      });
+    }
+    Animated.timing(elasticAnimRef.current, {
+      toValue: 0.2,
+      duration: 150,
+      useNativeDriver: true,
+      easing: Easing.linear,
+    }).start(onRequestedClose);
+  };
+
+  return (
+    <>
+      <Pressable
+        testID={ComponentTestIds.REACTIONS_PICKER}
+        style={[styles.reactionsPopup, reactionsPopupStyle]}
+        onPress={() => {
+          onClose();
+        }}
+      >
+        {/* all the reactions */}
+        {reactions.map((reaction) => (
+          <Pressable
+            key={reaction.emoji_code}
+            style={[styles.reactionItem, reactionItemStyle]}
+            onPress={() => {
+              onClose({
+                type: reaction.type,
+                custom: reaction.custom,
+                emoji_code: reaction.emoji_code,
+              });
+            }}
+          >
+            <Animated.Text
+              style={[
+                styles.reactionText,
+                {
+                  transform: [
+                    {
+                      scaleY: elasticAnimRef.current,
+                    },
+                    {
+                      scaleX: elasticAnimRef.current,
+                    },
+                  ],
+                },
+              ]}
+            >
+              {reaction.icon}
+            </Animated.Text>
+          </Pressable>
+        ))}
+      </Pressable>
+      {/* a square view with 50% opacity that semi hides the reactions button */}
+      <Pressable style={reactionsButtonDimmerStyle} onPress={() => onClose()} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  reactionsPopup: {
+    position: 'absolute',
+    alignItems: 'center',
+    backgroundColor: theme.light.static_black,
+    paddingTop: TOP_PADDING,
+  },
+  reactionsButtonDimmer: {
+    position: 'absolute',
+    backgroundColor: theme.light.static_black,
+    opacity: 0.5,
+  },
+  reactionItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: REACTION_MARGIN_BOTTOM,
+    // temporary background color until we have theming
+    backgroundColor: theme.light.static_grey,
+  },
+  reactionText: {
+    fontSize: 18.5,
+  },
+});

package/src/components/utility/index.ts

@@ -1,2 +1 @@
 export * from './Avatar';
-export * from './ReactionsModal';

package/src/components/utility/internal/CallControlsButton.tsx

@@ -18,6 +18,10 @@ interface CallControlsButtonProps {
    * The background color of the button rendered.
    */
   color?: string;
+  /**
+   * Boolean to enable/enable the button
+   */
+  disabled?: boolean;
   /**
    * Style to the Pressable button.
    */
@@ -30,6 +34,7 @@ interface CallControlsButtonProps {
    * Accessibility label for the button.
    */
   testID?: string;
+  onLayout?: View['props']['onLayout'];
 }
 
 const DEFAULT_ICON_SIZE = theme.icon.md;
@@ -38,7 +43,16 @@ const DEFAULT_BUTTON_SIZE = theme.button.sm;
 export const CallControlsButton = (
   props: React.PropsWithChildren<CallControlsButtonProps>,
 ) => {
-  const { onPress, children, color, style, svgContainerStyle, testID } = props;
+  const {
+    onPress,
+    children,
+    disabled,
+    color,
+    style,
+    svgContainerStyle,
+    testID,
+    onLayout,
+  } = props;
 
   const pressableStyle: PressableProps['style'] = ({ pressed }) => [
     DEFAULT_BUTTON_SIZE,
@@ -48,10 +62,17 @@ export const CallControlsButton = (
       opacity: pressed ? 0.2 : 1,
     },
     style ? style : null,
+    disabled ? styles.disabledStyle : null,
   ];
 
   return (
-    <Pressable style={pressableStyle} onPress={onPress} testID={testID}>
+    <Pressable
+      disabled={disabled}
+      style={pressableStyle}
+      onPress={onPress}
+      testID={testID}
+      onLayout={onLayout}
+    >
       <View
         style={[
           styles.svgContainerStyle,
@@ -73,4 +94,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   svgContainerStyle: {},
+  disabledStyle: {
+    backgroundColor: theme.light.disabled,
+  },
 });

package/src/components/utility/internal/ToggleCameraFaceButton.tsx

@@ -9,12 +9,13 @@ import { theme } from '../../../theme';
 import { StyleSheet } from 'react-native';
 
 export const ToggleCameraFaceButton = () => {
-  const { isCameraOnFrontFacingMode, toggleCameraFacingMode } =
+  const { isVideoMuted, isCameraOnFrontFacingMode, toggleCameraFacingMode } =
     useMediaStreamManagement();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
+        disabled={isVideoMuted}
         onPress={toggleCameraFacingMode}
         color={muteStatusColor(!isCameraOnFrontFacingMode)}
         style={isCameraOnFrontFacingMode ? styles.button : null}

package/src/constants/TestIds.ts

@@ -14,7 +14,7 @@ export enum ComponentTestIds {
   PARTICIPANT_MEDIA_STREAM = 'participant-media-stream',
   PARTICIPANTS_INFO = 'participants-info',
   PARTICIPANT_SCREEN_SHARING = 'participant-screen-sharing',
-  REACTIONS_MODAL = 'reactions-modal',
+  REACTIONS_PICKER = 'reactions-picker',
   CHAT_UNREAD_BADGE_COUNT_INDICATOR = 'chat-unread-badge-count-indicator',
 }
 

package/src/constants/index.ts

@@ -1,4 +1,5 @@
 import { theme } from '../theme';
+import { StreamVideoConfig } from '../utils/StreamVideoRN/types';
 
 export const LOCAL_VIDEO_VIEW_STYLE = {
   height: 140,
@@ -6,7 +7,7 @@ export const LOCAL_VIDEO_VIEW_STYLE = {
   borderRadius: theme.rounded.sm,
 };
 
-export const defaultEmojiReactions = [
+export const defaultEmojiReactions: StreamVideoConfig['supportedReactions'] = [
   {
     type: 'reaction',
     emoji_code: ':like:',

package/src/utils/StreamVideoRN/types.ts

@@ -1,7 +1,7 @@
 import { StreamReaction, StreamVideoClient } from '@stream-io/video-client';
 import { AndroidChannel } from '@notifee/react-native';
 
-type StreamReactionType = StreamReaction & {
+type StreamReactionType = Required<StreamReaction> & {
   icon: string | JSX.Element;
 };
 

package/dist/src/components/utility/ReactionsModal.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-type ReactionModalProps = {
-    isReactionModalActive: boolean;
-    setIsReactionModalActive: React.Dispatch<React.SetStateAction<boolean>>;
-};
-/**
- * A component that shows a list of reactions that can be sent in a call.
- */
-export declare const ReactionModal: (props: ReactionModalProps) => JSX.Element;
-export {};

package/dist/src/components/utility/ReactionsModal.js

@@ -1,89 +0,0 @@
-"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.ReactionModal = void 0;
-const react_native_1 = require("react-native");
-const theme_1 = require("../../theme");
-const react_1 = __importStar(require("react"));
-const video_react_bindings_1 = require("@stream-io/video-react-bindings");
-const utils_1 = require("../../utils");
-const TestIds_1 = require("../../constants/TestIds");
-/**
- * A component that shows a list of reactions that can be sent in a call.
- */
-const ReactionModal = (props) => {
-    const { isReactionModalActive, setIsReactionModalActive } = props;
-    const onCloseReactionsModal = (0, react_1.useCallback)(() => {
-        setIsReactionModalActive(false);
-    }, [setIsReactionModalActive]);
-    const call = (0, video_react_bindings_1.useCall)();
-    const { supportedReactions } = utils_1.StreamVideoRN.getConfig();
-    const sendReaction = async (reaction) => {
-        await call?.sendReaction(reaction);
-        setIsReactionModalActive(false);
-    };
-    return (<react_native_1.Modal testID={TestIds_1.ComponentTestIds.REACTIONS_MODAL} animationType="slide" transparent={true} visible={isReactionModalActive} onRequestClose={onCloseReactionsModal}>
-      <react_native_1.Pressable style={styles.container} onPress={() => setIsReactionModalActive(false)}>
-        <react_native_1.View style={styles.menu} onStartShouldSetResponder={() => true}>
-          <react_native_1.View style={styles.reactions}>
-            {supportedReactions.map((reaction) => (<react_native_1.Pressable onPress={() => sendReaction(reaction)} key={reaction.emoji_code} style={styles.reaction}>
-                <react_native_1.Text>
-                  {reaction.emoji_code &&
-                supportedReactions.find((supportedReaction) => supportedReaction.emoji_code === reaction.emoji_code)?.icon}
-                </react_native_1.Text>
-              </react_native_1.Pressable>))}
-          </react_native_1.View>
-        </react_native_1.View>
-      </react_native_1.Pressable>
-    </react_native_1.Modal>);
-};
-exports.ReactionModal = ReactionModal;
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: theme_1.theme.light.overlay,
-    },
-    menu: {
-        backgroundColor: theme_1.theme.light.bars,
-        borderRadius: theme_1.theme.rounded.md,
-    },
-    reactions: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: theme_1.theme.padding.md,
-    },
-    reaction: {
-        marginHorizontal: theme_1.theme.margin.md,
-    },
-    svgContainerStyle: {},
-    closeIcon: {
-        marginLeft: theme_1.theme.margin.md,
-    },
-});
-//# sourceMappingURL=ReactionsModal.js.map

package/dist/src/components/utility/ReactionsModal.js.map

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

package/src/components/utility/ReactionsModal.tsx

@@ -1,91 +0,0 @@
-import { StreamReaction } from '@stream-io/video-client';
-import { Pressable, StyleSheet, View, Text, Modal } from 'react-native';
-import { theme } from '../../theme';
-import React, { useCallback } from 'react';
-import { useCall } from '@stream-io/video-react-bindings';
-import { StreamVideoRN } from '../../utils';
-import { ComponentTestIds } from '../../constants/TestIds';
-
-type ReactionModalProps = {
-  isReactionModalActive: boolean;
-  setIsReactionModalActive: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-/**
- * A component that shows a list of reactions that can be sent in a call.
- */
-export const ReactionModal = (props: ReactionModalProps) => {
-  const { isReactionModalActive, setIsReactionModalActive } = props;
-  const onCloseReactionsModal = useCallback(() => {
-    setIsReactionModalActive(false);
-  }, [setIsReactionModalActive]);
-  const call = useCall();
-  const { supportedReactions } = StreamVideoRN.getConfig();
-
-  const sendReaction = async (reaction: StreamReaction) => {
-    await call?.sendReaction(reaction);
-    setIsReactionModalActive(false);
-  };
-
-  return (
-    <Modal
-      testID={ComponentTestIds.REACTIONS_MODAL}
-      animationType="slide"
-      transparent={true}
-      visible={isReactionModalActive}
-      onRequestClose={onCloseReactionsModal}
-    >
-      <Pressable
-        style={styles.container}
-        onPress={() => setIsReactionModalActive(false)}
-      >
-        <View style={styles.menu} onStartShouldSetResponder={() => true}>
-          <View style={styles.reactions}>
-            {supportedReactions.map((reaction) => (
-              <Pressable
-                onPress={() => sendReaction(reaction)}
-                key={reaction.emoji_code}
-                style={styles.reaction}
-              >
-                <Text>
-                  {reaction.emoji_code &&
-                    supportedReactions.find(
-                      (supportedReaction) =>
-                        supportedReaction.emoji_code === reaction.emoji_code,
-                    )?.icon}
-                </Text>
-              </Pressable>
-            ))}
-          </View>
-        </View>
-      </Pressable>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: theme.light.overlay,
-  },
-  menu: {
-    backgroundColor: theme.light.bars,
-    borderRadius: theme.rounded.md,
-  },
-  reactions: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: theme.padding.md,
-  },
-  reaction: {
-    marginHorizontal: theme.margin.md,
-  },
-  svgContainerStyle: {},
-  closeIcon: {
-    marginLeft: theme.margin.md,
-  },
-});