@stream-io/video-react-native-sdk 0.0.1-alpha.141

package/dist/__tests__/utils/RNTLTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RNTLTools.js","sourceRoot":"","sources":["../../../__tests__/utils/RNTLTools.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,kDAAiD;AAEjD,mDAI6B;AAC7B,0EAAqE;AACrE,gEAGuC;AAEvC,4CAAqD;AACrD,wCAAyC;AAiBzC,MAAM,uBAAuB,GAAG;IAC9B,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE;IACzB,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE;IACtB,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE;IACzB,aAAa,EAAE,IAAI,CAAC,EAAE,EAAE;IACxB,aAAa,EAAE,IAAI,CAAC,EAAE,EAAE;IACxB,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE;CACvB,CAAC;AAEF,gEAA8C;AAE9C,MAAM,OAAO,GAAG,CAAC,EACf,QAAQ,EACR,MAAM,EACN,iBAAiB,EACjB,IAAI,GAC4B,EAAE,EAAE,CAAC,CACrC,CAAC,uBAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAC1C;IAAA,CAAC,yCAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAC7B;MAAA,CAAC,kCAAsB,CAAC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CAC3D;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,kCAAsB,CAC1B;IAAA,EAAE,yCAAkB,CACtB;EAAA,EAAE,uBAAW,CAAC,CACf,CAAC;AACF,uDAAuD;AACvD,kEAAkE;AAClE,MAAM,MAAM,GAAG,CACb,SAAmC,EACnC,EACE,IAAI,EACJ,iBAAiB,GAAG,uBAAuB,EAC3C,GAAG,OAAO,KACgB,EAAE,EAChB,EAAE;IAChB,MAAM,UAAU,GAAG,IAAA,2BAAkB,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC;IAC9D,MAAM,QAAQ,GAAG,IAAI,IAAI,IAAA,eAAQ,EAAC,UAAU,CAAC,CAAC;IAC9C,OAAO,IAAA,qBAAS,EAAC,SAAS,EAAE;QAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAClB,CAAC,OAAO,CACN,IAAI,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,EACrC,CACH;QACD,GAAG,OAAO;KACX,CAAC,CAAC;AACL,CAAC,CAAC;AAEO,wBAAM"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from '@stream-io/i18n';
+export * from '@stream-io/video-client';
+export * from '@stream-io/video-react-bindings';
+export * from './src/components';
+export * from './src/contexts';
+export * from './src/hooks';
+export * from './src/theme';
+export * from './src/utils';
+export { StreamVideo, StreamCall } from './src/providers';

package/dist/index.js

@@ -0,0 +1,39 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamCall = exports.StreamVideo = void 0;
+const video_client_1 = require("@stream-io/video-client");
+__exportStar(require("@stream-io/i18n"), exports);
+__exportStar(require("@stream-io/video-client"), exports);
+__exportStar(require("@stream-io/video-react-bindings"), exports);
+__exportStar(require("./src/components"), exports);
+__exportStar(require("./src/contexts"), exports);
+__exportStar(require("./src/hooks"), exports);
+__exportStar(require("./src/theme"), exports);
+__exportStar(require("./src/utils"), exports);
+// Overriding 'StreamVideo' from '@stream-io/video-react-bindings'
+// Explicitly re-exporting to resolve ambiguity.
+var providers_1 = require("./src/providers");
+Object.defineProperty(exports, "StreamVideo", { enumerable: true, get: function () { return providers_1.StreamVideo; } });
+Object.defineProperty(exports, "StreamCall", { enumerable: true, get: function () { return providers_1.StreamCall; } });
+// TODO: set valid version
+(0, video_client_1.setSdkInfo)({
+    type: video_client_1.SfuModels.SdkType.REACT_NATIVE,
+    major: '0',
+    minor: '0',
+    patch: '0',
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,0DAAgE;AAEhE,kDAAgC;AAChC,0DAAwC;AACxC,kEAAgD;AAChD,mDAAiC;AACjC,iDAA+B;AAC/B,8CAA4B;AAC5B,8CAA4B;AAC5B,8CAA4B;AAE5B,kEAAkE;AAClE,gDAAgD;AAChD,6CAA0D;AAAjD,wGAAA,WAAW,OAAA;AAAE,uGAAA,UAAU,OAAA;AAEhC,0BAA0B;AAC1B,IAAA,yBAAU,EAAC;IACT,IAAI,EAAE,wBAAS,CAAC,OAAO,CAAC,YAAY;IACpC,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;CACX,CAAC,CAAC"}

package/dist/jest-setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-native/extend-expect';

package/dist/jest-setup.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Import Jest Native matchers
+require("@testing-library/jest-native/extend-expect");
+const mockedMedia = {
+    getTracks: jest.fn().mockReturnValue([
+        {
+            id: 'mocked-track-id',
+            kind: 'mocked-kind',
+            label: 'mocked-label',
+            enabled: true,
+            muted: false,
+            readyState: 'mocked-ready-state',
+            stop: jest.fn(),
+        },
+    ]),
+};
+const mockedDevices = [
+    {
+        deviceId: 'mocked-device-id',
+        groupId: 'mocked-group-id',
+        kind: 'mocked-kind',
+        label: 'mocked-label',
+    },
+];
+// When mocking we implement only the needed navigator APIs, hence the suppression rule
+// @ts-ignore
+global.navigator = {
+    mediaDevices: {
+        getUserMedia: jest.fn().mockResolvedValue(mockedMedia),
+        enumerateDevices: jest.fn().mockResolvedValue(mockedDevices),
+    },
+};
+//# sourceMappingURL=jest-setup.js.map

package/dist/jest-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jest-setup.js","sourceRoot":"","sources":["../jest-setup.ts"],"names":[],"mappings":";;AAAA,8BAA8B;AAC9B,sDAAoD;AAEpD,MAAM,WAAW,GAAG;IAClB,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC;QACnC;YACE,EAAE,EAAE,iBAAiB;YACrB,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,cAAc;YACrB,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,oBAAoB;YAChC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE;SAChB;KACF,CAAC;CACH,CAAC;AACF,MAAM,aAAa,GAAG;IACpB;QACE,QAAQ,EAAE,kBAAkB;QAC5B,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,cAAc;KACtB;CACF,CAAC;AAEF,uFAAuF;AACvF,aAAa;AACb,MAAM,CAAC,SAAS,GAAG;IACjB,YAAY,EAAE;QACZ,YAAY,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC;QACtD,gBAAgB,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC;KAC7D;CACF,CAAC"}

package/dist/src/components/ActiveCall.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props to be passed for the ActiveCall component.
+ */
+export interface ActiveCallProps {
+    /**
+     * The mode of the call view. Defaults to 'grid'.
+     * Note: when there is atleast one screen share, the mode is automatically set to 'spotlight'.
+     */
+    mode?: 'grid' | 'spotlight';
+}
+/**
+ * View for an active call, includes call controls and participant handling.
+ *
+ * | 2 Participants | 3 Participants | 4 Participants | 5 Participants |
+ * | :--- | :--- | :--- | :----: |
+ * |![active-call-2](https://user-images.githubusercontent.com/25864161/217351458-6cb4b0df-6071-45f5-89b6-fe650d950502.png) | ![active-call-3](https://user-images.githubusercontent.com/25864161/217351461-908a1887-7cf0-4945-bedd-d6598902be2d.png) | ![active-call-4](https://user-images.githubusercontent.com/25864161/217351465-b2a22178-7593-4639-96dd-6fb692af2dc5.png) | ![active-call-5](https://user-images.githubusercontent.com/25864161/217351453-6547b0a3-4ecc-435f-b2d9-7d511d5d0328.png) |
+ */
+export declare const ActiveCall: (props: ActiveCallProps) => JSX.Element | null;

package/dist/src/components/ActiveCall.js

@@ -0,0 +1,117 @@
+"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.ActiveCall = void 0;
+const react_1 = __importStar(require("react"));
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const react_native_1 = require("react-native");
+const CallControlsView_1 = require("./CallControlsView");
+const CallParticipantsView_1 = require("./CallParticipantsView");
+const CallParticipantsSpotlightView_1 = require("./CallParticipantsSpotlightView");
+const theme_1 = require("../theme");
+const useIncallManager_1 = require("../hooks/useIncallManager");
+const usePublishMediaStreams_1 = require("../hooks/usePublishMediaStreams");
+const usePermissionRequest_1 = require("../hooks/usePermissionRequest");
+const CallParticipantsBadge_1 = require("./CallParticipantsBadge");
+const verifyAndroidBluetoothPermissions_1 = require("../utils/verifyAndroidBluetoothPermissions");
+const video_client_1 = require("@stream-io/video-client");
+/**
+ * View for an active call, includes call controls and participant handling.
+ *
+ * | 2 Participants | 3 Participants | 4 Participants | 5 Participants |
+ * | :--- | :--- | :--- | :----: |
+ * |![active-call-2](https://user-images.githubusercontent.com/25864161/217351458-6cb4b0df-6071-45f5-89b6-fe650d950502.png) | ![active-call-3](https://user-images.githubusercontent.com/25864161/217351461-908a1887-7cf0-4945-bedd-d6598902be2d.png) | ![active-call-4](https://user-images.githubusercontent.com/25864161/217351465-b2a22178-7593-4639-96dd-6fb692af2dc5.png) | ![active-call-5](https://user-images.githubusercontent.com/25864161/217351453-6547b0a3-4ecc-435f-b2d9-7d511d5d0328.png) |
+ */
+const ActiveCall = (props) => {
+    const activeCall = (0, video_react_bindings_1.useCall)();
+    const activeCallRef = (0, react_1.useRef)(activeCall);
+    activeCallRef.current = activeCall;
+    (0, react_1.useEffect)(() => {
+        // when the component mounts, we ask for necessary permissions.
+        (0, verifyAndroidBluetoothPermissions_1.verifyAndroidBluetoothPermissions)();
+        return () => {
+            if (activeCallRef.current?.state.callingState !== video_client_1.CallingState.LEFT) {
+                activeCallRef.current?.leave();
+            }
+        };
+    }, []);
+    if (!activeCall) {
+        return null;
+    }
+    return <InnerActiveCall {...props}/>;
+};
+exports.ActiveCall = ActiveCall;
+const InnerActiveCall = (props) => {
+    const [height, setHeight] = (0, react_1.useState)(0);
+    const { mode = 'grid' } = props;
+    const hasScreenShare = (0, video_react_bindings_1.useHasOngoingScreenShare)();
+    (0, useIncallManager_1.useIncallManager)({ media: 'video', auto: true });
+    (0, usePublishMediaStreams_1.usePublishMediaStreams)();
+    (0, usePermissionRequest_1.usePermissionRequest)();
+    const onLayout = (event) => {
+        setHeight(
+        // we're saving the CallControlsView height and subtracting an amount of padding.
+        // this is done to get the CallParticipants(Screen)View neatly underneath the
+        // rounded corners of the CallControlsView.
+        Math.trunc(event.nativeEvent.layout.height - theme_1.theme.spacing.lg * 2));
+    };
+    const showSpotLightModeView = mode === 'spotlight' || hasScreenShare;
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.iconGroup}>
+        <CallParticipantsBadge_1.CallParticipantsBadge />
+      </react_native_1.View>
+
+      <react_native_1.View style={[
+            styles.callParticipantsWrapper,
+            { paddingBottom: height + theme_1.theme.padding.lg },
+        ]}>
+        {showSpotLightModeView ? (<CallParticipantsSpotlightView_1.CallParticipantsSpotlightView />) : (<CallParticipantsView_1.CallParticipantsView />)}
+      </react_native_1.View>
+      <react_native_1.View onLayout={onLayout} style={styles.callControlsWrapper}>
+        <CallControlsView_1.CallControlsView />
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: theme_1.theme.light.static_grey,
+    },
+    callParticipantsWrapper: { flex: 1 },
+    callControlsWrapper: { position: 'absolute', bottom: 0, left: 0, right: 0 },
+    svgContainerStyle: {
+        zIndex: 2,
+        marginRight: theme_1.theme.margin.md,
+        marginTop: theme_1.theme.margin.sm,
+    },
+    iconGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignSelf: 'flex-end',
+        alignItems: 'center',
+        marginRight: theme_1.theme.margin.md,
+    },
+});
+//# sourceMappingURL=ActiveCall.js.map

package/dist/src/components/ActiveCall.js.map

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

package/dist/src/components/Avatar.d.ts

@@ -0,0 +1,25 @@
+import type { StreamVideoParticipant } from '@stream-io/video-client';
+/**
+ * Props to be passed for the Avatar component.
+ */
+export interface AvatarProps {
+    /**
+     * The participant of which the avatar will be rendered
+     */
+    participant: StreamVideoParticipant;
+    /**
+     * The radius of the avatar
+     * @defaultValue
+     * The default value is `100`
+     */
+    radius?: number;
+}
+/**
+ * Shows either user's image or initials based on the user state and existence of
+ * their image.
+ *
+ * | User's Image | User's Initials |
+ * | :--- | :----: |
+ * |![avatar-1](https://user-images.githubusercontent.com/25864161/217467045-2d4c8b4e-d4ec-48c1-8ede-4468854826af.png) | ![avatar-2](https://user-images.githubusercontent.com/25864161/217467043-e7a7f2a1-70a7-4d83-8d1e-6463391194ae.png)|
+ */
+export declare const Avatar: (props: AvatarProps) => JSX.Element;

package/dist/src/components/Avatar.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const react_native_1 = require("react-native");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+const theme_1 = require("../theme");
+const A11yLabels_1 = require("../constants/A11yLabels");
+const DEFAULT_AVATAR_RADIUS = theme_1.theme.avatar.sm;
+/**
+ * Shows either user's image or initials based on the user state and existence of
+ * their image.
+ *
+ * | User's Image | User's Initials |
+ * | :--- | :----: |
+ * |![avatar-1](https://user-images.githubusercontent.com/25864161/217467045-2d4c8b4e-d4ec-48c1-8ede-4468854826af.png) | ![avatar-2](https://user-images.githubusercontent.com/25864161/217467043-e7a7f2a1-70a7-4d83-8d1e-6463391194ae.png)|
+ */
+const Avatar = (props) => {
+    const { participant: { userId, image, name }, radius = DEFAULT_AVATAR_RADIUS, } = props;
+    const userDetails = name || userId;
+    const userLabel = userDetails ? (0, utils_1.getInitialsOfName)(userDetails) : '?';
+    const imageUrl = image;
+    return (<react_native_1.View accessibilityLabel={A11yLabels_1.A11yComponents.PARTICIPANT_AVATAR} style={{
+            ...styles.container,
+            borderRadius: radius / 2,
+            height: radius,
+            width: radius,
+        }}>
+      {imageUrl ? (<react_native_1.Image accessibilityLabel={A11yLabels_1.A11yImages.AVATAR} source={{
+                uri: imageUrl,
+            }} style={styles.image}/>) : (<react_native_1.Text style={{ ...styles.text, fontSize: radius / 2 }} numberOfLines={1}>
+          {userLabel}
+        </react_native_1.Text>)}
+    </react_native_1.View>);
+};
+exports.Avatar = Avatar;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: theme_1.theme.light.primary,
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    image: {
+        flex: 1,
+    },
+    text: {
+        color: theme_1.theme.light.bars,
+        textAlign: 'center',
+        ...theme_1.theme.fonts.heading4,
+    },
+});
+//# sourceMappingURL=Avatar.js.map

package/dist/src/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar.tsx"],"names":[],"mappings":";;;;;;AAAA,+CAA6D;AAC7D,kDAA0B;AAE1B,oCAA6C;AAC7C,oCAAiC;AACjC,wDAAqE;AAkBrE,MAAM,qBAAqB,GAAG,aAAK,CAAC,MAAM,CAAC,EAAE,CAAC;AAE9C;;;;;;;GAOG;AACI,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,WAAW,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EACpC,MAAM,GAAG,qBAAqB,GAC/B,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,IAAI,IAAI,MAAM,CAAC;IACnC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,IAAA,yBAAiB,EAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAErE,MAAM,QAAQ,GAAG,KAAK,CAAC;IACvB,OAAO,CACL,CAAC,mBAAI,CACH,kBAAkB,CAAC,CAAC,2BAAc,CAAC,kBAAkB,CAAC,CACtD,KAAK,CAAC,CAAC;YACL,GAAG,MAAM,CAAC,SAAS;YACnB,YAAY,EAAE,MAAM,GAAG,CAAC;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd,CAAC,CAEF;MAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,CAAC,oBAAK,CACJ,kBAAkB,CAAC,CAAC,uBAAU,CAAC,MAAM,CAAC,CACtC,MAAM,CAAC,CAAC;gBACN,GAAG,EAAE,QAAQ;aACd,CAAC,CACF,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC,CAChD,aAAa,CAAC,CAAC,CAAC,CAAC,CAEjB;UAAA,CAAC,SAAS,CACZ;QAAA,EAAE,mBAAI,CAAC,CACR,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,MAAM,UAsCjB;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,OAAO;QACpC,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,QAAQ;KACnB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,CAAC;KACR;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,IAAI;QACvB,SAAS,EAAE,QAAQ;QACnB,GAAG,aAAK,CAAC,KAAK,CAAC,QAAQ;KACxB;CACF,CAAC,CAAC"}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+interface CallControlsButtonProps {
+    /**
+     * `onPress` handler called when a single tap gesture is detected.
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * The background color of the button rendered.
+     */
+    color?: string;
+    /**
+     * Style to the Pressable button.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Style of the SVG rendered inside the button.
+     */
+    svgContainerStyle?: StyleProp<ViewStyle>;
+}
+export declare const CallControlsButton: (props: React.PropsWithChildren<CallControlsButtonProps>) => JSX.Element;
+export {};

package/dist/src/components/CallControlsButton.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallControlsButton = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+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 } = props;
+    const pressableStyle = ({ pressed }) => [
+        DEFAULT_BUTTON_SIZE,
+        styles.container,
+        {
+            backgroundColor: color,
+            opacity: pressed ? 0.2 : 1,
+        },
+        style ? style : null,
+    ];
+    return (<react_native_1.Pressable style={pressableStyle} onPress={onPress}>
+      <react_native_1.View style={[
+            styles.svgContainerStyle,
+            DEFAULT_ICON_SIZE,
+            svgContainerStyle ?? null,
+        ]}>
+        {children}
+      </react_native_1.View>
+    </react_native_1.Pressable>);
+};
+exports.CallControlsButton = CallControlsButton;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: theme_1.theme.light.content_bg,
+        alignItems: 'center',
+    },
+    svgContainerStyle: {},
+});
+//# sourceMappingURL=CallControlsButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlsButton.js","sourceRoot":"","sources":["../../../src/components/CallControlsButton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAOsB;AACtB,oCAAiC;AAqBjC,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,GAAG,KAAK,CAAC;IAErE,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,CACjD;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"}

package/dist/src/components/CallControlsView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shows a list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
+ * the user can trigger within an active call.
+ *
+ * | Call Controls |
+ * | :--- |
+ * | ![call-controls-view](https://user-images.githubusercontent.com/25864161/217349666-af0f3278-393e-449d-b30e-2d1b196abe5e.png) |
+ */
+export declare const CallControlsView: () => JSX.Element;

package/dist/src/components/CallControlsView.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallControlsView = void 0;
+const react_native_1 = require("react-native");
+const useCallControls_1 = require("../hooks/useCallControls");
+const icons_1 = require("../icons");
+const CallControlsButton_1 = require("./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 react_1 = require("react");
+const ReactionsModal_1 = require("./ReactionsModal");
+const ToggleAudioButton_1 = require("./ToggleAudioButton");
+const ToggleVideoButton_1 = require("./ToggleVideoButton");
+/**
+ * Shows a list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
+ * the user can trigger within an active call.
+ *
+ * | Call Controls |
+ * | :--- |
+ * | ![call-controls-view](https://user-images.githubusercontent.com/25864161/217349666-af0f3278-393e-449d-b30e-2d1b196abe5e.png) |
+ */
+const CallControlsView = () => {
+    const [isReactionModalActive, setIsReactionModalActive] = (0, react_1.useState)(false);
+    const { isCameraOnFrontFacingMode, toggleCameraFacingMode } = (0, useCallControls_1.useCallControls)();
+    const call = (0, video_react_bindings_1.useCall)();
+    const callingState = (0, video_react_bindings_1.useCallCallingState)();
+    const onCallHangup = async () => {
+        try {
+            if (callingState === video_client_1.CallingState.LEFT)
+                return;
+            await call?.leave();
+        }
+        catch (err) {
+            console.log('Error Leaving call:', err);
+        }
+    };
+    const muteStatusColor = (status) => {
+        return status ? theme_1.theme.light.overlay_dark : theme_1.theme.light.static_white;
+    };
+    const onOpenReactionsModalHandler = (0, react_1.useCallback)(() => {
+        setIsReactionModalActive(true);
+    }, [setIsReactionModalActive]);
+    return (<react_native_1.View style={styles.container}>
+      <video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.CREATE_REACTION]}>
+        <CallControlsButton_1.CallControlsButton onPress={onOpenReactionsModalHandler} color={theme_1.theme.light.static_white} style={styles.button}>
+          <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}/>
+      <CallControlsButton_1.CallControlsButton color={theme_1.theme.light.static_white} onPress={() => null} svgContainerStyle={styles.svgContainerStyle} style={styles.button}>
+        <icons_1.Chat color={theme_1.theme.light.static_black}/>
+      </CallControlsButton_1.CallControlsButton>
+      <ToggleVideoButton_1.ToggleVideoButton />
+      <ToggleAudioButton_1.ToggleAudioButton />
+      <video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.SEND_VIDEO]}>
+        <CallControlsButton_1.CallControlsButton onPress={toggleCameraFacingMode} color={muteStatusColor(!isCameraOnFrontFacingMode)} style={isCameraOnFrontFacingMode ? styles.button : null}>
+          <icons_1.CameraSwitch color={isCameraOnFrontFacingMode
+            ? theme_1.theme.light.static_black
+            : theme_1.theme.light.static_white}/>
+        </CallControlsButton_1.CallControlsButton>
+      </video_react_bindings_1.Restricted>
+      <CallControlsButton_1.CallControlsButton onPress={onCallHangup} color={theme_1.theme.light.error} style={[styles.button, { shadowColor: theme_1.theme.light.error }]}>
+        <icons_1.PhoneDown color={theme_1.theme.light.static_white}/>
+      </CallControlsButton_1.CallControlsButton>
+    </react_native_1.View>);
+};
+exports.CallControlsView = CallControlsView;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'space-evenly',
+        paddingVertical: theme_1.theme.padding.lg,
+        paddingHorizontal: theme_1.theme.padding.md,
+        borderTopLeftRadius: theme_1.theme.rounded.lg,
+        borderTopRightRadius: theme_1.theme.rounded.lg,
+        backgroundColor: theme_1.theme.light.controls_bg,
+        zIndex: 2,
+    },
+    button: {
+        // For iOS
+        shadowOffset: {
+            width: 0,
+            height: 6,
+        },
+        shadowOpacity: 0.37,
+        shadowRadius: 7.49,
+        // For android
+        elevation: 6,
+    },
+    svgContainerStyle: {
+        paddingTop: theme_1.theme.padding.xs,
+    },
+});
+//# sourceMappingURL=CallControlsView.js.map

package/dist/src/components/CallControlsView.js.map

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

package/dist/src/components/CallParticipantsBadge.d.ts

@@ -0,0 +1 @@
+export declare const CallParticipantsBadge: () => JSX.Element;

package/dist/src/components/CallParticipantsBadge.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallParticipantsBadge = void 0;
+const react_native_1 = require("react-native");
+const icons_1 = require("../icons");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const theme_1 = require("../theme");
+const react_1 = require("react");
+const CallParticipantsInfoView_1 = require("./CallParticipantsInfoView");
+const A11yLabels_1 = require("../constants/A11yLabels");
+const CallParticipantsBadge = () => {
+    const participantCount = (0, video_react_bindings_1.useParticipantCount)();
+    const [isCallParticipantsViewVisible, setIsCallParticipantsViewVisible] = (0, react_1.useState)(false);
+    const onOpenCallParticipantsInfoView = (0, react_1.useCallback)(() => {
+        setIsCallParticipantsViewVisible(true);
+    }, [setIsCallParticipantsViewVisible]);
+    return (<react_native_1.Pressable style={styles.participantIcon} onPress={onOpenCallParticipantsInfoView} accessibilityLabel={A11yLabels_1.A11yButtons.PARTICIPANTS_INFO}>
+      <react_native_1.View style={styles.badge}>
+        <react_native_1.Text style={styles.badgeText}>{participantCount}</react_native_1.Text>
+      </react_native_1.View>
+      <react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.md]}>
+        <icons_1.Participants color={theme_1.theme.light.static_white}/>
+      </react_native_1.View>
+      <CallParticipantsInfoView_1.CallParticipantsInfoView isCallParticipantsViewVisible={isCallParticipantsViewVisible} setIsCallParticipantsViewVisible={setIsCallParticipantsViewVisible}/>
+    </react_native_1.Pressable>);
+};
+exports.CallParticipantsBadge = CallParticipantsBadge;
+const styles = react_native_1.StyleSheet.create({
+    participantIcon: {
+        zIndex: 2,
+    },
+    svgContainerStyle: {},
+    badge: {
+        backgroundColor: theme_1.theme.light.text_low_emphasis,
+        borderRadius: theme_1.theme.rounded.xl,
+        padding: theme_1.theme.padding.xs,
+        position: 'relative',
+        left: theme_1.theme.spacing.lg,
+        top: theme_1.theme.spacing.lg,
+        zIndex: 2,
+    },
+    badgeText: {
+        color: theme_1.theme.light.static_white,
+        textAlign: 'center',
+        ...theme_1.theme.fonts.caption,
+    },
+});
+//# sourceMappingURL=CallParticipantsBadge.js.map

package/dist/src/components/CallParticipantsBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantsBadge.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsBadge.tsx"],"names":[],"mappings":";;;AAAA,+CAAiE;AACjE,oCAAwC;AACxC,0EAAsE;AACtE,oCAAiC;AACjC,iCAA8C;AAC9C,yEAAsE;AACtE,wDAAsD;AAE/C,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,gBAAgB,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC/C,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GACrE,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE3B,MAAM,8BAA8B,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACtD,gCAAgC,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,CAAC,wBAAS,CACR,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAC9B,OAAO,CAAC,CAAC,8BAA8B,CAAC,CACxC,kBAAkB,CAAC,CAAC,wBAAW,CAAC,iBAAiB,CAAC,CAElD;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;QAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,mBAAI,CACzD;MAAA,EAAE,mBAAI,CACN;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CACrD;QAAA,CAAC,oBAAY,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAChD;MAAA,EAAE,mBAAI,CACN;MAAA,CAAC,mDAAwB,CACvB,6BAA6B,CAAC,CAAC,6BAA6B,CAAC,CAC7D,gCAAgC,CAAC,CAAC,gCAAgC,CAAC,EAEvE;IAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,qBAAqB,yBA2BhC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,eAAe,EAAE;QACf,MAAM,EAAE,CAAC;KACV;IACD,iBAAiB,EAAE,EAAE;IACrB,KAAK,EAAE;QACL,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,iBAAiB;QAC9C,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,OAAO,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACzB,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACtB,GAAG,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACrB,MAAM,EAAE,CAAC;KACV;IACD,SAAS,EAAE;QACT,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY;QAC/B,SAAS,EAAE,QAAQ;QACnB,GAAG,aAAK,CAAC,KAAK,CAAC,OAAO;KACvB;CACF,CAAC,CAAC"}

package/dist/src/components/CallParticipantsInfoView.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface CallParticipantsInfoViewType {
+    /**
+     * Boolean that decided whether the CallPartcipantsInfoView modal should be open or not.
+     */
+    isCallParticipantsViewVisible: boolean;
+    /**
+     * SetState function to set the value of the boolean field `isCallParticipantsViewVisible` depending upon whether the CallPartcipantsInfoView modal should be open or not.
+     */
+    setIsCallParticipantsViewVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+/**
+ * Shows information about the call, it's participants in the call and
+ * their mute states, handler to trigger options (TBD, permissions not impl)
+ * and options to invite more people to the call.
+ *
+ * | Participants List | Options Modal is Open |
+ * | :--- | :----: |
+ * |![call-participants-info-view-1](https://user-images.githubusercontent.com/25864161/217341952-1e875bc3-e31f-42eb-918b-307eace116b1.png) | ![call-participants-info-view-2](https://user-images.githubusercontent.com/25864161/217341960-5016b678-d1a5-4ecf-bb4b-e463987b9cae.png)|
+ **/
+export declare const CallParticipantsInfoView: ({ isCallParticipantsViewVisible, setIsCallParticipantsViewVisible, }: CallParticipantsInfoViewType) => JSX.Element;