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

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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/src/components/call/CallTopView/CallTopView.d.ts

@@ -0,0 +1,22 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type CallTopViewProps = {
+    /**
+     * Handler to be called when the back button is pressed in the CallTopView.
+     * @returns void
+     */
+    onBackPressed?: () => void;
+    /**
+     * Handler to be called when the Participant icon is pressed in the CallTopView.
+     * @returns
+     */
+    onParticipantInfoPress?: () => void;
+    /**
+     * Title to be rendered at the center of the Header.
+     */
+    title?: string;
+    /**
+     * Style to override the container of the CallTopView.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+export declare const CallTopView: ({ onBackPressed, onParticipantInfoPress, title, style, }: CallTopViewProps) => JSX.Element;

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

@@ -0,0 +1,106 @@
+"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.CallTopView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ParticipantsInfoBadge_1 = require("./ParticipantsInfoBadge");
+const theme_1 = require("../../../theme");
+const Back_1 = require("../../../icons/Back");
+const constants_1 = require("../../../constants");
+const icons_1 = require("../../../icons");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const video_client_1 = require("@stream-io/video-client");
+const CallTopView = ({ onBackPressed, onParticipantInfoPress, title, style, }) => {
+    const { useCallCallingState } = (0, video_react_bindings_1.useCallStateHooks)();
+    const callingState = useCallCallingState();
+    const { t } = (0, video_react_bindings_1.useI18n)();
+    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
+    const isCallReconnecting = callingState === video_client_1.CallingState.RECONNECTING;
+    const onLayout = (event) => {
+        const { height } = event.nativeEvent.layout;
+        setHeaderHeight(height);
+    };
+    return (<react_native_1.View style={[styles.container, style]}>
+      {/* Component for the background of the CallTopView. Since it has a Linear Gradient, an SVG is used to render it. */}
+      <icons_1.TopViewBackground height={headerHeight} width={'100%'}/>
+      <react_native_1.View style={styles.topView} onLayout={onLayout}>
+        <react_native_1.View style={styles.leftElement}>
+          {onBackPressed && (<react_native_1.Pressable style={({ pressed }) => [
+                theme_1.theme.icon.md,
+                styles.backIcon,
+                { opacity: pressed ? 0.2 : 1 },
+            ]} onPress={onBackPressed}>
+              <Back_1.Back color={theme_1.theme.light.static_white}/>
+            </react_native_1.Pressable>)}
+        </react_native_1.View>
+        <react_native_1.View style={styles.centerElement}>
+          {title ? (<react_native_1.Text style={styles.title} numberOfLines={1}>
+              {title}
+            </react_native_1.Text>) : (isCallReconnecting && (<react_native_1.Text style={styles.title}>{t('Reconnecting...')}</react_native_1.Text>))}
+        </react_native_1.View>
+        <react_native_1.View style={styles.rightElement}>
+          <ParticipantsInfoBadge_1.ParticipantsInfoBadge onParticipantInfoPress={onParticipantInfoPress}/>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.CallTopView = CallTopView;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        zIndex: constants_1.Z_INDEX.IN_FRONT,
+        position: 'absolute',
+        left: 0,
+        right: 0,
+    },
+    topView: {
+        position: 'absolute',
+        flexDirection: 'row',
+        paddingVertical: theme_1.theme.padding.lg,
+        alignItems: 'center',
+    },
+    backIcon: {
+        // Added to compensate the participant badge surface area
+        marginLeft: theme_1.theme.margin.sm,
+    },
+    leftElement: {
+        flex: 1,
+        alignItems: 'flex-start',
+    },
+    centerElement: {
+        flex: 1,
+        alignItems: 'center',
+        flexGrow: 3,
+    },
+    rightElement: {
+        flex: 1,
+        alignItems: 'flex-end',
+    },
+    title: {
+        ...theme_1.theme.fonts.subtitleBold,
+        color: theme_1.theme.light.static_white,
+    },
+});
+//# sourceMappingURL=CallTopView.js.map

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

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

package/dist/src/components/call/CallTopView/ParticipantsInfoBadge.d.ts

@@ -0,0 +1,7 @@
+import { CallTopViewProps } from '..';
+export type ParticipantsInfoBadgeProps = Pick<CallTopViewProps, 'onParticipantInfoPress'>;
+/**
+ * Badge that shows the number of participants in the call.
+ * When pressed, it opens the ParticipantsInfoList.
+ */
+export declare const ParticipantsInfoBadge: ({ onParticipantInfoPress, }: ParticipantsInfoBadgeProps) => JSX.Element;

package/dist/src/components/call/CallTopView/ParticipantsInfoBadge.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParticipantsInfoBadge = void 0;
+const react_1 = __importDefault(require("react"));
+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 constants_1 = require("../../../constants");
+/**
+ * Badge that shows the number of participants in the call.
+ * When pressed, it opens the ParticipantsInfoList.
+ */
+const ParticipantsInfoBadge = ({ onParticipantInfoPress, }) => {
+    const { useParticipantCount } = (0, video_react_bindings_1.useCallStateHooks)();
+    const participantCount = useParticipantCount();
+    return (<react_native_1.Pressable onPress={onParticipantInfoPress} style={({ pressed }) => [
+            { ...styles.container, opacity: pressed ? 0.2 : 1 },
+        ]} disabled={!onParticipantInfoPress}>
+      <react_native_1.View style={theme_1.theme.icon.md}>
+        <icons_1.Participants color={theme_1.theme.light.static_white}/>
+      </react_native_1.View>
+      <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.Pressable>);
+};
+exports.ParticipantsInfoBadge = ParticipantsInfoBadge;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+    },
+    badge: {
+        justifyContent: 'center',
+        paddingHorizontal: theme_1.theme.padding.sm,
+        backgroundColor: theme_1.theme.light.text_low_emphasis,
+        borderRadius: theme_1.theme.rounded.xl,
+        zIndex: constants_1.Z_INDEX.IN_FRONT,
+        bottom: theme_1.theme.spacing.xl,
+        right: theme_1.theme.spacing.xl,
+    },
+    badgeText: {
+        includeFontPadding: false,
+        color: theme_1.theme.light.static_white,
+        textAlign: 'center',
+        ...theme_1.theme.fonts.subtitle,
+    },
+});
+//# sourceMappingURL=ParticipantsInfoBadge.js.map

package/dist/src/components/call/CallTopView/ParticipantsInfoBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantsInfoBadge.js","sourceRoot":"","sources":["../../../../../src/components/call/CallTopView/ParticipantsInfoBadge.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAiE;AACjE,0CAA8C;AAC9C,0EAAoE;AACpE,0CAAuC;AACvC,kDAA6C;AAQ7C;;;GAGG;AACI,MAAM,qBAAqB,GAAG,CAAC,EACpC,sBAAsB,GACK,EAAE,EAAE;IAC/B,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAA,wCAAiB,GAAE,CAAC;IACpD,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAE/C,OAAO,CACL,CAAC,wBAAS,CACR,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAChC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;YACtB,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;SACpD,CAAC,CACF,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAElC;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CACzB;QAAA,CAAC,oBAAY,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAChD;MAAA,EAAE,mBAAI,CACN;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,CACR;IAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,qBAAqB,yBAsBhC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,QAAQ;QACxB,iBAAiB,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACnC,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,iBAAiB;QAC9C,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,MAAM,EAAE,mBAAO,CAAC,QAAQ;QACxB,MAAM,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACxB,KAAK,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KACxB;IACD,SAAS,EAAE;QACT,kBAAkB,EAAE,KAAK;QACzB,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/call/CallTopView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CallTopView';
+export * from './ParticipantsInfoBadge';

package/dist/src/components/call/CallTopView/index.js

@@ -0,0 +1,19 @@
+"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 });
+__exportStar(require("./CallTopView"), exports);
+__exportStar(require("./ParticipantsInfoBadge"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/components/call/CallTopView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/call/CallTopView/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,0DAAwC"}

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

@@ -129,8 +129,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     buttonGroup: {
         flexDirection: 'row',
-        justifyContent: 'space-between',
-        paddingHorizontal: theme_1.theme.padding.xl,
+        justifyContent: 'space-evenly',
     },
     button: {},
     svgContainerStyle: {},

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

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

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

@@ -4,3 +4,4 @@ export * from './CallParticipantsList';
 export * from './IncomingCall';
 export * from './OutgoingCall';
 export * from './Lobby';
+export * from './CallTopView';

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

@@ -20,4 +20,5 @@ __exportStar(require("./CallParticipantsList"), exports);
 __exportStar(require("./IncomingCall"), exports);
 __exportStar(require("./OutgoingCall"), exports);
 __exportStar(require("./Lobby"), exports);
+__exportStar(require("./CallTopView"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/call/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,iDAA+B;AAC/B,yDAAuC;AACvC,iDAA+B;AAC/B,iDAA+B;AAC/B,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/call/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,iDAA+B;AAC/B,yDAAuC;AACvC,iDAA+B;AAC/B,iDAA+B;AAC/B,0CAAwB;AACxB,gDAA8B"}

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

@@ -1,4 +1,2 @@
 export * from './LocalParticipantView';
-export * from './ParticipantsInfoBadge';
 export * from './Participant';
-export * from './ParticipantsInfoList';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/participants/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC;AACvC,0DAAwC;AACxC,gDAA8B;AAC9B,yDAAuC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/participants/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC;AACvC,gDAA8B"}

package/dist/src/icons/Back.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    color: string;
+};
+export declare const Back: ({ color }: Props) => JSX.Element;
+export {};

package/dist/src/icons/Back.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Back = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = require("react-native-svg");
+const Back = ({ color }) => (<react_native_svg_1.Svg viewBox="0 0 24 26">
+    <react_native_svg_1.Path d="M 8.36621 11.6543 C 8.36621 11.9531 8.48047 12.208 8.71777 12.4365 L 15.5732 19.1426 C 15.7578 19.3359 16.0039 19.4326 16.2852 19.4326 C 16.8564 19.4326 17.3047 18.9932 17.3047 18.4131 C 17.3047 18.1318 17.1904 17.877 16.9971 17.6836 L 10.8184 11.6543 L 16.9971 5.625 C 17.1904 5.42285 17.3047 5.16797 17.3047 4.88672 C 17.3047 4.31543 16.8564 3.87598 16.2852 3.87598 C 16.0039 3.87598 15.7578 3.97266 15.5732 4.16602 L 8.71777 10.8721 C 8.48047 11.1006 8.375 11.3555 8.36621 11.6543 Z" fill={color}/>
+  </react_native_svg_1.Svg>);
+exports.Back = Back;
+//# sourceMappingURL=Back.js.map

package/dist/src/icons/Back.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Back.js","sourceRoot":"","sources":["../../../src/icons/Back.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAA6C;AAMtC,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACxC,CAAC,sBAAG,CAAC,OAAO,CAAC,WAAW,CACtB;IAAA,CAAC,uBAAI,CACH,CAAC,CAAC,ueAAue,CACze,IAAI,CAAC,CAAC,KAAK,CAAC,EAEhB;EAAA,EAAE,sBAAG,CAAC,CACP,CAAC;AAPW,QAAA,IAAI,QAOf"}

package/dist/src/icons/TopViewBackground.d.ts

@@ -0,0 +1,13 @@
+import { NumberProp } from 'react-native-svg';
+type Props = {
+    /**
+     * Height of the SVG container
+     */
+    height?: NumberProp;
+    /**
+     * Width of the SVG container
+     */
+    width?: NumberProp;
+};
+export declare const TopViewBackground: ({ height, width }: Props) => JSX.Element;
+export {};

package/dist/src/icons/TopViewBackground.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopViewBackground = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_svg_1 = require("react-native-svg");
+const TopViewBackground = ({ height, width }) => (<react_native_svg_1.Svg width={width} height={height} fill={'none'}>
+    <react_native_svg_1.Defs>
+      <react_native_svg_1.LinearGradient id="paint0_linear_8092_98095" x1={3} y1={0} x2={3} y2={height} gradientUnits="userSpaceOnUse">
+        <react_native_svg_1.Stop stopOpacity={0.2}/>
+        <react_native_svg_1.Stop offset={1} stopOpacity={0}/>
+      </react_native_svg_1.LinearGradient>
+    </react_native_svg_1.Defs>
+    <react_native_svg_1.Rect width={width} height={height} fill={'url(#paint0_linear_8092_98095)'}/>
+  </react_native_svg_1.Svg>);
+exports.TopViewBackground = TopViewBackground;
+//# sourceMappingURL=TopViewBackground.js.map

package/dist/src/icons/TopViewBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopViewBackground.js","sourceRoot":"","sources":["../../../src/icons/TopViewBackground.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAO0B;AAanB,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CAC7D,CAAC,sBAAG,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAC9C;IAAA,CAAC,uBAAI,CACH;MAAA,CAAC,iCAAc,CACb,EAAE,CAAC,0BAA0B,CAC7B,EAAE,CAAC,CAAC,CAAC,CAAC,CACN,EAAE,CAAC,CAAC,CAAC,CAAC,CACN,EAAE,CAAC,CAAC,CAAC,CAAC,CACN,EAAE,CAAC,CAAC,MAAM,CAAC,CACX,aAAa,CAAC,gBAAgB,CAE9B;QAAA,CAAC,uBAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,EACvB;QAAA,CAAC,uBAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAClC;MAAA,EAAE,iCAAc,CAClB;IAAA,EAAE,uBAAI,CACN;IAAA,CAAC,uBAAI,CACH,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,gCAAgC,CAAC,EAE3C;EAAA,EAAE,sBAAG,CAAC,CACP,CAAC;AArBW,QAAA,iBAAiB,qBAqB5B"}

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

@@ -9,11 +9,8 @@ export * from './VideoSlash';
 export * from './Chat';
 export * from './Participants';
 export * from './ThreeDots';
-export * from './Pin';
 export * from './PinVertical';
 export * from './Spotlight';
-export * from './Cross';
 export * from './ScreenShare';
-export * from './ArrowRight';
 export * from './Reaction';
-export * from './VideoDisabled';
+export * from './TopViewBackground';

package/dist/src/icons/index.js

@@ -25,12 +25,9 @@ __exportStar(require("./VideoSlash"), exports);
 __exportStar(require("./Chat"), exports);
 __exportStar(require("./Participants"), exports);
 __exportStar(require("./ThreeDots"), exports);
-__exportStar(require("./Pin"), exports);
 __exportStar(require("./PinVertical"), exports);
 __exportStar(require("./Spotlight"), exports);
-__exportStar(require("./Cross"), exports);
 __exportStar(require("./ScreenShare"), exports);
-__exportStar(require("./ArrowRight"), exports);
 __exportStar(require("./Reaction"), exports);
-__exportStar(require("./VideoDisabled"), exports);
+__exportStar(require("./TopViewBackground"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icons/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B;AAC/B,wCAAsB;AACtB,2CAAyB;AACzB,0CAAwB;AACxB,8CAA4B;AAC5B,6CAA2B;AAC3B,0CAAwB;AACxB,+CAA6B;AAC7B,yCAAuB;AACvB,iDAA+B;AAC/B,8CAA4B;AAC5B,wCAAsB;AACtB,gDAA8B;AAC9B,8CAA4B;AAC5B,0CAAwB;AACxB,gDAA8B;AAC9B,+CAA6B;AAC7B,6CAA2B;AAC3B,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icons/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B;AAC/B,wCAAsB;AACtB,2CAAyB;AACzB,0CAAwB;AACxB,8CAA4B;AAC5B,6CAA2B;AAC3B,0CAAwB;AACxB,+CAA6B;AAC7B,yCAAuB;AACvB,iDAA+B;AAC/B,8CAA4B;AAC5B,gDAA8B;AAC9B,8CAA4B;AAC5B,gDAA8B;AAC9B,6CAA2B;AAC3B,sDAAoC"}

package/dist/src/theme/padding.js

@@ -4,7 +4,7 @@ exports.padding = void 0;
 exports.padding = {
     xs: 4,
     sm: 8,
-    md: 16,
+    md: 12,
     lg: 24,
     xl: 32,
 };

package/dist/src/translations/en.json

@@ -5,6 +5,7 @@
     "Invite": "Invite",
     "Join": "Join",
     "You": "You",
+    "Reconnecting...": "Reconnecting...",
     "Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
     "{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen"
 }

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

@@ -6,6 +6,7 @@ export declare const translations: {
         Invite: string;
         Join: string;
         You: string;
+        "Reconnecting...": string;
         "Participants ({{ numberOfParticipants }})": string;
         "{{ userName }} is sharing their screen": string;
     };

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.1-alpha.366";
+export declare const version = "0.0.1-alpha.367";

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.366';
+exports.version = '0.0.1-alpha.367';
 //# sourceMappingURL=version.js.map

package/package.json

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

package/src/components/call/CallTopView/CallTopView.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  StyleProp,
+  ViewStyle,
+  Pressable,
+} from 'react-native';
+import { ParticipantsInfoBadge } from './ParticipantsInfoBadge';
+import { theme } from '../../../theme';
+import { Back } from '../../../icons/Back';
+import { Z_INDEX } from '../../../constants';
+import { TopViewBackground } from '../../../icons';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { CallingState } from '@stream-io/video-client';
+
+export type CallTopViewProps = {
+  /**
+   * Handler to be called when the back button is pressed in the CallTopView.
+   * @returns void
+   */
+  onBackPressed?: () => void;
+  /**
+   * Handler to be called when the Participant icon is pressed in the CallTopView.
+   * @returns
+   */
+  onParticipantInfoPress?: () => void;
+  /**
+   * Title to be rendered at the center of the Header.
+   */
+  title?: string;
+  /**
+   * Style to override the container of the CallTopView.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+export const CallTopView = ({
+  onBackPressed,
+  onParticipantInfoPress,
+  title,
+  style,
+}: CallTopViewProps) => {
+  const { useCallCallingState } = useCallStateHooks();
+  const callingState = useCallCallingState();
+  const { t } = useI18n();
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
+  const isCallReconnecting = callingState === CallingState.RECONNECTING;
+
+  const onLayout: React.ComponentProps<typeof View>['onLayout'] = (event) => {
+    const { height } = event.nativeEvent.layout;
+    setHeaderHeight(height);
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Component for the background of the CallTopView. Since it has a Linear Gradient, an SVG is used to render it. */}
+      <TopViewBackground height={headerHeight} width={'100%'} />
+      <View style={styles.topView} onLayout={onLayout}>
+        <View style={styles.leftElement}>
+          {onBackPressed && (
+            <Pressable
+              style={({ pressed }) => [
+                theme.icon.md,
+                styles.backIcon,
+                { opacity: pressed ? 0.2 : 1 },
+              ]}
+              onPress={onBackPressed}
+            >
+              <Back color={theme.light.static_white} />
+            </Pressable>
+          )}
+        </View>
+        <View style={styles.centerElement}>
+          {title ? (
+            <Text style={styles.title} numberOfLines={1}>
+              {title}
+            </Text>
+          ) : (
+            isCallReconnecting && (
+              <Text style={styles.title}>{t('Reconnecting...')}</Text>
+            )
+          )}
+        </View>
+        <View style={styles.rightElement}>
+          <ParticipantsInfoBadge
+            onParticipantInfoPress={onParticipantInfoPress}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: Z_INDEX.IN_FRONT,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  topView: {
+    position: 'absolute',
+    flexDirection: 'row',
+    paddingVertical: theme.padding.lg,
+    alignItems: 'center',
+  },
+  backIcon: {
+    // Added to compensate the participant badge surface area
+    marginLeft: theme.margin.sm,
+  },
+  leftElement: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  centerElement: {
+    flex: 1,
+    alignItems: 'center',
+    flexGrow: 3,
+  },
+  rightElement: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+  title: {
+    ...theme.fonts.subtitleBold,
+    color: theme.light.static_white,
+  },
+});