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

package/dist/src/components/CallParticipantsView.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallParticipantsView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const LocalVideoView_1 = require("./LocalVideoView");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const useDebouncedValue_1 = require("../utils/hooks/useDebouncedValue");
+const CallParticipantsList_1 = require("./CallParticipantsList");
+const CallParticipantsView = () => {
+    const _remoteParticipants = (0, video_react_bindings_1.useRemoteParticipants)();
+    const remoteParticipants = (0, useDebouncedValue_1.useDebouncedValue)(_remoteParticipants, 300); // we debounce the remote participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+    const isUserAloneInCall = remoteParticipants?.length === 0;
+    if (isUserAloneInCall) {
+        return <LocalVideoView_1.LocalVideoView layout={'fullscreen'}/>;
+    }
+    return (<react_native_1.View style={styles.container}>
+      <LocalVideoView_1.LocalVideoView layout={'floating'} zOrder={2}/>
+      <CallParticipantsList_1.CallParticipantsList participants={remoteParticipants}/>
+    </react_native_1.View>);
+};
+exports.CallParticipantsView = CallParticipantsView;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+//# sourceMappingURL=CallParticipantsView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantsView.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsView.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAgD;AAChD,qDAAkD;AAClD,0EAAwE;AACxE,wEAAqE;AACrE,iEAA8D;AAEvD,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,mBAAmB,GAAG,IAAA,4CAAqB,GAAE,CAAC;IACpD,MAAM,kBAAkB,GAAG,IAAA,qCAAiB,EAAC,mBAAmB,EAAE,GAAG,CAAC,CAAC,CAAC,2IAA2I;IAEnN,MAAM,iBAAiB,GAAG,kBAAkB,EAAE,MAAM,KAAK,CAAC,CAAC;IAE3D,IAAI,iBAAiB,EAAE;QACrB,OAAO,CAAC,+BAAc,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,EAAG,CAAC;KACjD;IAED,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,+BAAc,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAC9C;MAAA,CAAC,2CAAoB,CAAC,YAAY,CAAC,CAAC,kBAAkB,CAAC,EACzD;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,oBAAoB,wBAgB/B;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAC"}

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

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

package/dist/src/components/IncomingCallView.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IncomingCallView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const CallControlsButton_1 = require("./CallControlsButton");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const UserInfoView_1 = require("./UserInfoView");
+const icons_1 = require("../icons");
+const theme_1 = require("../theme");
+const useMutingState_1 = require("../hooks/useMutingState");
+const video_client_1 = require("@stream-io/video-client");
+const IncomingCallView = () => {
+    const { isVideoMuted, toggleVideoState } = (0, useMutingState_1.useMutingState)();
+    const call = (0, video_react_bindings_1.useCall)();
+    const callingState = (0, video_react_bindings_1.useCallCallingState)();
+    const answerCallHandler = async () => {
+        try {
+            await call?.join();
+        }
+        catch (error) {
+            console.log('Error joining Call', error);
+        }
+    };
+    const rejectCallHandler = async () => {
+        try {
+            if (callingState === video_client_1.CallingState.LEFT)
+                return;
+            await call?.leave({ reject: true });
+        }
+        catch (error) {
+            console.log('Error leaving Call', error);
+        }
+    };
+    return (<Background>
+      <react_native_1.View style={styles.content}>
+        <UserInfoView_1.UserInfoView />
+        <react_native_1.Text style={styles.incomingCallText}>Incoming Call...</react_native_1.Text>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.buttonGroup}>
+        <CallControlsButton_1.CallControlsButton onPress={rejectCallHandler} color={theme_1.theme.light.error} style={[styles.button, theme_1.theme.button.lg]} svgContainerStyle={[styles.svgContainerStyle, theme_1.theme.icon.lg]}>
+          <icons_1.PhoneDown color={theme_1.theme.light.static_white}/>
+        </CallControlsButton_1.CallControlsButton>
+        <CallControlsButton_1.CallControlsButton onPress={toggleVideoState} color={!isVideoMuted ? theme_1.theme.light.static_white : theme_1.theme.light.overlay_dark} style={[styles.button, theme_1.theme.button.lg]} svgContainerStyle={[styles.svgContainerStyle, theme_1.theme.icon.lg]}>
+          {isVideoMuted ? (<icons_1.VideoSlash color={theme_1.theme.light.static_white}/>) : (<icons_1.Video color={theme_1.theme.light.static_black}/>)}
+        </CallControlsButton_1.CallControlsButton>
+        <CallControlsButton_1.CallControlsButton onPress={answerCallHandler} color={theme_1.theme.light.info} style={[styles.button, theme_1.theme.button.lg]} svgContainerStyle={[styles.svgContainerStyle, theme_1.theme.icon.lg]}>
+          <icons_1.Phone color={theme_1.theme.light.static_white}/>
+        </CallControlsButton_1.CallControlsButton>
+      </react_native_1.View>
+    </Background>);
+};
+exports.IncomingCallView = IncomingCallView;
+const Background = ({ children, }) => {
+    const connectedUser = (0, video_react_bindings_1.useConnectedUser)();
+    const members = (0, video_react_bindings_1.useCallMembers)();
+    const includeSelf = false;
+    // take the first N members to show their avatars
+    const membersToShow = (members || [])
+        .map(({ user }) => user)
+        .filter((user) => user.id !== connectedUser?.id || includeSelf);
+    if (members.length) {
+        return (<react_native_1.ImageBackground blurRadius={10} source={{
+                uri: membersToShow[0].image,
+            }} style={[react_native_1.StyleSheet.absoluteFill, styles.background]}>
+        {children}
+      </react_native_1.ImageBackground>);
+    }
+    return (<react_native_1.View style={[react_native_1.StyleSheet.absoluteFill, styles.background]}>{children}</react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    background: {
+        backgroundColor: theme_1.theme.light.static_grey,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        paddingVertical: 2 * theme_1.theme.margin.xl,
+    },
+    content: {},
+    incomingCallText: {
+        marginTop: theme_1.theme.margin.md,
+        textAlign: 'center',
+        color: theme_1.theme.light.static_white,
+        ...theme_1.theme.fonts.heading6,
+    },
+    buttonGroup: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: theme_1.theme.padding.xl,
+    },
+    button: {},
+    svgContainerStyle: {},
+});
+//# sourceMappingURL=IncomingCallView.js.map

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

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

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

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

package/dist/src/components/LobbyView.js

@@ -0,0 +1,215 @@
+"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.LobbyView = void 0;
+const react_1 = __importStar(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 StreamVideoContext_1 = require("../contexts/StreamVideoContext");
+const CallControlsButton_1 = require("./CallControlsButton");
+const theme_1 = require("../theme");
+const useMutingState_1 = require("../hooks/useMutingState");
+const hooks_1 = require("../hooks");
+const VideoRenderer_1 = require("./VideoRenderer");
+const Avatar_1 = require("./Avatar");
+const video_client_1 = require("@stream-io/video-client");
+const constants_1 = require("../constants");
+const ParticipantStatus = () => {
+    const connectedUser = (0, video_react_bindings_1.useConnectedUser)();
+    const { isAudioMuted, isVideoMuted } = (0, useMutingState_1.useMutingState)();
+    return (<react_native_1.View style={styles.status}>
+      <react_native_1.Text style={styles.userNameLabel} numberOfLines={1}>
+        {connectedUser?.id}
+      </react_native_1.Text>
+      {isAudioMuted && (<react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.xs]}>
+          <icons_1.MicOff color={theme_1.theme.light.error}/>
+        </react_native_1.View>)}
+      {isVideoMuted && (<react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.xs]}>
+          <icons_1.VideoSlash color={theme_1.theme.light.error}/>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+const LobbyView = () => {
+    const localVideoStream = (0, hooks_1.useLocalVideoStream)();
+    const connectedUser = (0, video_react_bindings_1.useConnectedUser)();
+    const { isAudioMuted, isVideoMuted, toggleAudioState, toggleVideoState } = (0, useMutingState_1.useMutingState)();
+    const isCameraOnFrontFacingMode = (0, StreamVideoContext_1.useStreamVideoStoreValue)((store) => store.isCameraOnFrontFacingMode);
+    const isVideoAvailable = !!localVideoStream && !isVideoMuted;
+    const count = (0, video_react_bindings_1.useParticipantCount)();
+    const call = (0, video_react_bindings_1.useCall)();
+    const MicIcon = isAudioMuted ? (<icons_1.MicOff color={theme_1.theme.light.static_white}/>) : (<icons_1.Mic color={theme_1.theme.light.static_black}/>);
+    const VideoIcon = isVideoMuted ? (<icons_1.VideoSlash color={theme_1.theme.light.static_white}/>) : (<icons_1.Video color={theme_1.theme.light.static_black}/>);
+    const onJoinCallHandler = (0, react_1.useCallback)(async () => {
+        try {
+            await call?.join({ create: true });
+        }
+        catch (error) {
+            console.log('Error joining call:', error);
+            if (error instanceof video_client_1.AxiosError) {
+                react_native_1.Alert.alert(error.response?.data.message);
+            }
+        }
+    }, [call]);
+    const connectedUserAsParticipant = {
+        userId: connectedUser?.id,
+        image: connectedUser?.image,
+        name: connectedUser?.name,
+    };
+    const muteStatusColor = (status) => {
+        return !status ? theme_1.theme.light.static_white : theme_1.theme.light.static_black;
+    };
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.content}>
+        {connectedUser && (<>
+            <react_native_1.Text style={styles.heading}>Before Joining</react_native_1.Text>
+            <react_native_1.Text style={styles.subHeading}>Setup your audio and video</react_native_1.Text>
+            <react_native_1.View style={styles.videoView}>
+              <react_native_1.View style={styles.topView}/>
+              {isVideoAvailable ? (<VideoRenderer_1.VideoRenderer mirror={isCameraOnFrontFacingMode} mediaStream={localVideoStream} objectFit="cover" style={react_native_1.StyleSheet.absoluteFillObject}/>) : (<Avatar_1.Avatar participant={connectedUserAsParticipant}/>)}
+              <ParticipantStatus />
+            </react_native_1.View>
+            <react_native_1.View style={styles.buttonGroup}>
+              <CallControlsButton_1.CallControlsButton onPress={toggleAudioState} color={muteStatusColor(isAudioMuted)} style={[
+                styles.button,
+                theme_1.theme.button.md,
+                {
+                    shadowColor: muteStatusColor(isAudioMuted),
+                },
+            ]}>
+                {MicIcon}
+              </CallControlsButton_1.CallControlsButton>
+              <CallControlsButton_1.CallControlsButton onPress={toggleVideoState} color={muteStatusColor(isVideoMuted)} style={[
+                styles.button,
+                theme_1.theme.button.md,
+                {
+                    shadowColor: muteStatusColor(isVideoMuted),
+                },
+            ]}>
+                {VideoIcon}
+              </CallControlsButton_1.CallControlsButton>
+            </react_native_1.View>
+          </>)}
+        <react_native_1.View style={styles.info}>
+          <react_native_1.Text style={styles.infoText}>
+            You are about to join a call with id {call?.id} at Stream.{' '}
+            {count
+            ? `${count}  more people are in the call now.`
+            : 'You are first to Join the call.'}
+          </react_native_1.Text>
+          <react_native_1.Pressable style={styles.joinButton} onPress={onJoinCallHandler}>
+            <react_native_1.Text style={styles.joinButtonText}>Join</react_native_1.Text>
+          </react_native_1.Pressable>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.LobbyView = LobbyView;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: theme_1.theme.light.static_grey,
+        justifyContent: 'center',
+    },
+    content: {
+        alignItems: 'center',
+        paddingHorizontal: theme_1.theme.padding.md,
+    },
+    heading: {
+        color: theme_1.theme.light.static_white,
+        ...theme_1.theme.fonts.heading4,
+    },
+    subHeading: {
+        color: theme_1.theme.light.text_low_emphasis,
+        ...theme_1.theme.fonts.subtitle,
+        marginBottom: theme_1.theme.margin.sm,
+    },
+    videoView: {
+        backgroundColor: theme_1.theme.light.disabled,
+        height: constants_1.LOCAL_VIDEO_VIEW_STYLE.height * 2,
+        borderRadius: constants_1.LOCAL_VIDEO_VIEW_STYLE.borderRadius * 2,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        overflow: 'hidden',
+        marginVertical: theme_1.theme.margin.md,
+        width: '100%',
+        padding: theme_1.theme.padding.sm,
+    },
+    topView: {},
+    buttonGroup: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginBottom: theme_1.theme.margin.md,
+    },
+    button: {
+        marginHorizontal: theme_1.theme.margin.sm,
+    },
+    info: {
+        backgroundColor: theme_1.theme.light.static_overlay,
+        padding: theme_1.theme.padding.md,
+        borderRadius: theme_1.theme.rounded.sm,
+        width: '100%',
+    },
+    infoText: {
+        color: theme_1.theme.light.static_white,
+        ...theme_1.theme.fonts.subtitleBold,
+    },
+    joinButton: {
+        backgroundColor: theme_1.theme.light.primary,
+        borderRadius: theme_1.theme.rounded.sm,
+        marginTop: theme_1.theme.margin.md,
+        justifyContent: 'center',
+        paddingVertical: theme_1.theme.padding.sm,
+    },
+    joinButtonText: {
+        color: theme_1.theme.light.static_white,
+        textAlign: 'center',
+        ...theme_1.theme.fonts.subtitleBold,
+    },
+    status: {
+        alignSelf: 'flex-start',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: theme_1.theme.padding.sm,
+        borderRadius: theme_1.theme.rounded.xs,
+        backgroundColor: theme_1.theme.light.static_overlay,
+        zIndex: 10,
+    },
+    avatar: {
+        height: theme_1.theme.avatar.sm,
+        width: theme_1.theme.avatar.sm,
+        borderRadius: theme_1.theme.avatar.sm / 2,
+        alignSelf: 'center',
+    },
+    userNameLabel: {
+        flexShrink: 1,
+        color: theme_1.theme.light.static_white,
+        ...theme_1.theme.fonts.caption,
+    },
+    svgContainerStyle: {
+        marginLeft: theme_1.theme.margin.sm,
+    },
+});
+//# sourceMappingURL=LobbyView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LobbyView.js","sourceRoot":"","sources":["../../../src/components/LobbyView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,+CAAwE;AACxE,oCAA0D;AAC1D,0EAIyC;AACzC,uEAA0E;AAC1E,6DAA0D;AAC1D,oCAAiC;AACjC,4DAAyD;AACzD,oCAA+C;AAC/C,mDAAgD;AAChD,qCAAkC;AAClC,0DAA6E;AAC7E,4CAAsD;AAEtD,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,aAAa,GAAG,IAAA,uCAAgB,GAAE,CAAC;IACzC,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAA,+BAAc,GAAE,CAAC;IACxD,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAClD;QAAA,CAAC,aAAa,EAAE,EAAE,CACpB;MAAA,EAAE,mBAAI,CACN;MAAA,CAAC,YAAY,IAAI,CACf,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CACrD;UAAA,CAAC,cAAM,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EACnC;QAAA,EAAE,mBAAI,CAAC,CACR,CACD;MAAA,CAAC,YAAY,IAAI,CACf,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CACrD;UAAA,CAAC,kBAAU,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EACvC;QAAA,EAAE,mBAAI,CAAC,CACR,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,gBAAgB,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAA,uCAAgB,GAAE,CAAC;IACzC,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GACtE,IAAA,+BAAc,GAAE,CAAC;IACnB,MAAM,yBAAyB,GAAG,IAAA,6CAAwB,EACxD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,yBAAyB,CAC3C,CAAC;IACF,MAAM,gBAAgB,GAAG,CAAC,CAAC,gBAAgB,IAAI,CAAC,YAAY,CAAC;IAC7D,MAAM,KAAK,GAAG,IAAA,0CAAmB,GAAE,CAAC;IACpC,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IAEvB,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,CAC7B,CAAC,cAAM,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAG,CAC5C,CAAC,CAAC,CAAC,CACF,CAAC,WAAG,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAG,CACzC,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,CAC/B,CAAC,kBAAU,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAG,CAChD,CAAC,CAAC,CAAC,CACF,CAAC,aAAK,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAG,CAC3C,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC/C,IAAI;YACF,MAAM,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;SACpC;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;YAC1C,IAAI,KAAK,YAAY,yBAAU,EAAE;gBAC/B,oBAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;aAC3C;SACF;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,0BAA0B,GAAG;QACjC,MAAM,EAAE,aAAa,EAAE,EAAE;QACzB,KAAK,EAAE,aAAa,EAAE,KAAK;QAC3B,IAAI,EAAE,aAAa,EAAE,IAAI;KACA,CAAC;IAE5B,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,EAAE;QAC1C,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC;IACvE,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,aAAa,IAAI,CAChB,EACE;YAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,mBAAI,CACjD;YAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,0BAA0B,EAAE,mBAAI,CAChE;YAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;cAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAC5B;cAAA,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAClB,CAAC,6BAAa,CACZ,MAAM,CAAC,CAAC,yBAAyB,CAAC,CAClC,WAAW,CAAC,CAAC,gBAAgB,CAAC,CAC9B,SAAS,CAAC,OAAO,CACjB,KAAK,CAAC,CAAC,yBAAU,CAAC,kBAAkB,CAAC,EACrC,CACH,CAAC,CAAC,CAAC,CACF,CAAC,eAAM,CAAC,WAAW,CAAC,CAAC,0BAA0B,CAAC,EAAG,CACpD,CACD;cAAA,CAAC,iBAAiB,CAAC,AAAD,EACpB;YAAA,EAAE,mBAAI,CACN;YAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC9B;cAAA,CAAC,uCAAkB,CACjB,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAC1B,KAAK,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CACrC,KAAK,CAAC,CAAC;gBACL,MAAM,CAAC,MAAM;gBACb,aAAK,CAAC,MAAM,CAAC,EAAE;gBACf;oBACE,WAAW,EAAE,eAAe,CAAC,YAAY,CAAC;iBAC3C;aACF,CAAC,CAEF;gBAAA,CAAC,OAAO,CACV;cAAA,EAAE,uCAAkB,CACpB;cAAA,CAAC,uCAAkB,CACjB,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAC1B,KAAK,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CACrC,KAAK,CAAC,CAAC;gBACL,MAAM,CAAC,MAAM;gBACb,aAAK,CAAC,MAAM,CAAC,EAAE;gBACf;oBACE,WAAW,EAAE,eAAe,CAAC,YAAY,CAAC;iBAC3C;aACF,CAAC,CAEF;gBAAA,CAAC,SAAS,CACZ;cAAA,EAAE,uCAAkB,CACtB;YAAA,EAAE,mBAAI,CACR;UAAA,GAAG,CACJ,CACD;QAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACvB;UAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC3B;iDAAqC,CAAC,IAAI,EAAE,EAAE,CAAE,WAAU,CAAC,GAAG,CAC9D;YAAA,CAAC,KAAK;YACJ,CAAC,CAAC,GAAG,KAAK,oCAAoC;YAC9C,CAAC,CAAC,iCAAiC,CACvC;UAAA,EAAE,mBAAI,CACN;UAAA,CAAC,wBAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAC9D;YAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,IAAI,EAAE,mBAAI,CAChD;UAAA,EAAE,wBAAS,CACb;QAAA,EAAE,mBAAI,CACR;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA7GW,QAAA,SAAS,aA6GpB;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,WAAW;QACxC,cAAc,EAAE,QAAQ;KACzB;IACD,OAAO,EAAE;QACP,UAAU,EAAE,QAAQ;QACpB,iBAAiB,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KACpC;IACD,OAAO,EAAE;QACP,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY;QAC/B,GAAG,aAAK,CAAC,KAAK,CAAC,QAAQ;KACxB;IACD,UAAU,EAAE;QACV,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,iBAAiB;QACpC,GAAG,aAAK,CAAC,KAAK,CAAC,QAAQ;QACvB,YAAY,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE;KAC9B;IACD,SAAS,EAAE;QACT,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,QAAQ;QACrC,MAAM,EAAE,kCAAsB,CAAC,MAAM,GAAG,CAAC;QACzC,YAAY,EAAE,kCAAsB,CAAC,YAAY,GAAG,CAAC;QACrD,cAAc,EAAE,eAAe;QAC/B,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,cAAc,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE;QAC/B,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KAC1B;IACD,OAAO,EAAE,EAAE;IACX,WAAW,EAAE;QACX,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,QAAQ;QACxB,YAAY,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE;KAC9B;IACD,MAAM,EAAE;QACN,gBAAgB,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE;KAClC;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,cAAc;QAC3C,OAAO,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACzB,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,KAAK,EAAE,MAAM;KACd;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY;QAC/B,GAAG,aAAK,CAAC,KAAK,CAAC,YAAY;KAC5B;IACD,UAAU,EAAE;QACV,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,OAAO;QACpC,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,SAAS,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE;QAC1B,cAAc,EAAE,QAAQ;QACxB,eAAe,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KAClC;IACD,cAAc,EAAE;QACd,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY;QAC/B,SAAS,EAAE,QAAQ;QACnB,GAAG,aAAK,CAAC,KAAK,CAAC,YAAY;KAC5B;IACD,MAAM,EAAE;QACN,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACzB,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,cAAc;QAC3C,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE;QACN,MAAM,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE;QACvB,KAAK,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE;QACtB,YAAY,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC;QACjC,SAAS,EAAE,QAAQ;KACpB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,CAAC;QACb,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY;QAC/B,GAAG,aAAK,CAAC,KAAK,CAAC,OAAO;KACvB;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,aAAK,CAAC,MAAM,CAAC,EAAE;KAC5B;CACF,CAAC,CAAC"}

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

@@ -0,0 +1,34 @@
+import { StyleProp, ViewStyle } from 'react-native';
+/**
+ * Props to be passed for the LocalVideoView component.
+ */
+export interface LocalVideoViewProps {
+    /**
+     * An optional style object to be applied to the local video view
+     * @defaultValue
+     * The default is `{
+     *     position: 'absolute',
+     *     height: 140,
+     *     width: 80,
+     *     right: 2 * theme.spacing.lg,
+     *     top: 100,
+     *     borderRadius: theme.rounded.sm,
+     *     zIndex: 1,
+     *   }`
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The layout of the local video view controls weather the local participant's video will be rendered in full screen or floating
+     * @defaultValue 'floating'
+     */
+    layout?: 'floating' | 'fullscreen';
+    zOrder?: number;
+}
+/**
+ * Shows a floating participant UI that can be dragged (to be implemented) within certain bounds.
+ *
+ * | Local Video | Local Video in relation to active call screen |
+ * | :---- | :----: |
+ * |![local-video-view-1](https://user-images.githubusercontent.com/25864161/217491433-60848d95-1a14-422e-b4e1-7540f3ba30b4.png)|![local-video-view-2](https://user-images.githubusercontent.com/25864161/217491438-75bad10c-8850-49f5-b3bd-af22995e11c2.png)|
+ */
+export declare const LocalVideoView: (props: LocalVideoViewProps) => JSX.Element | null;

package/dist/src/components/LocalVideoView.js

@@ -0,0 +1,100 @@
+"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.LocalVideoView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const VideoRenderer_1 = require("./VideoRenderer");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const video_client_1 = require("@stream-io/video-client");
+const contexts_1 = require("../contexts");
+const theme_1 = require("../theme");
+const icons_1 = require("../icons");
+const constants_1 = require("../constants");
+const A11yLabels_1 = require("../constants/A11yLabels");
+/**
+ * Shows a floating participant UI that can be dragged (to be implemented) within certain bounds.
+ *
+ * | Local Video | Local Video in relation to active call screen |
+ * | :---- | :----: |
+ * |![local-video-view-1](https://user-images.githubusercontent.com/25864161/217491433-60848d95-1a14-422e-b4e1-7540f3ba30b4.png)|![local-video-view-2](https://user-images.githubusercontent.com/25864161/217491438-75bad10c-8850-49f5-b3bd-af22995e11c2.png)|
+ */
+const LocalVideoView = (props) => {
+    const { layout = 'floating', zOrder = 1 } = props;
+    const containerStyle = layout === 'floating'
+        ? styles.floatingContainer
+        : styles.fullScreenContainer;
+    const { style = containerStyle } = props;
+    const localParticipant = (0, video_react_bindings_1.useLocalParticipant)();
+    const isCameraOnFrontFacingMode = (0, contexts_1.useStreamVideoStoreValue)((store) => store.isCameraOnFrontFacingMode);
+    const pan = (0, react_1.useRef)(new react_native_1.Animated.ValueXY()).current;
+    const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderMove: react_native_1.Animated.event([null, { dx: pan.x, dy: pan.y }], {
+            useNativeDriver: false,
+        }),
+        onPanResponderRelease: () => {
+            pan.extractOffset();
+        },
+    })).current;
+    if (!localParticipant)
+        return null;
+    const isVideoMuted = !localParticipant.publishedTracks.includes(video_client_1.SfuModels.TrackType.VIDEO);
+    if (layout === 'fullscreen') {
+        return (<VideoRenderer_1.VideoRenderer mirror={isCameraOnFrontFacingMode} mediaStream={localParticipant.videoStream} style={style} zOrder={zOrder}/>);
+    }
+    return (<react_native_1.Animated.View accessibilityLabel={A11yLabels_1.A11yComponents.LOCAL_PARTICIPANT} style={{
+            zIndex: 5,
+            transform: [{ translateX: pan.x }, { translateY: pan.y }],
+        }} {...panResponder.panHandlers}>
+      {isVideoMuted ? (<react_native_1.View style={style}>
+          <react_native_1.View style={theme_1.theme.icon.md}>
+            <icons_1.VideoSlash color={theme_1.theme.light.static_white}/>
+          </react_native_1.View>
+        </react_native_1.View>) : (<VideoRenderer_1.VideoRenderer mirror={isCameraOnFrontFacingMode} mediaStream={localParticipant.videoStream} style={style} zOrder={zOrder}/>)}
+    </react_native_1.Animated.View>);
+};
+exports.LocalVideoView = LocalVideoView;
+const styles = react_native_1.StyleSheet.create({
+    floatingContainer: {
+        position: 'absolute',
+        height: constants_1.LOCAL_VIDEO_VIEW_STYLE.height,
+        width: constants_1.LOCAL_VIDEO_VIEW_STYLE.width,
+        right: theme_1.theme.spacing.lg * 2,
+        top: theme_1.theme.margin.md,
+        borderRadius: constants_1.LOCAL_VIDEO_VIEW_STYLE.borderRadius,
+        zIndex: 1,
+        overflow: 'hidden',
+        backgroundColor: theme_1.theme.light.disabled,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fullScreenContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+//# sourceMappingURL=LocalVideoView.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { SfuModels } from '@stream-io/video-client';
+/**
+ * Props to be passed for the NetworkQualityIndicator component.
+ */
+export type NetworkQualityIndicatorType = {
+    connectionQuality: SfuModels.ConnectionQuality;
+};
+export declare const NetworkQualityIndicator: ({ connectionQuality, }: NetworkQualityIndicatorType) => JSX.Element | null;

package/dist/src/components/NetworkQualityIndicator.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NetworkQualityIndicator = void 0;
+const react_native_1 = require("react-native");
+const react_native_svg_1 = require("react-native-svg");
+const theme_1 = require("../theme");
+const connectionQualitySignalColors = {
+    0: [
+        theme_1.theme.light.static_white,
+        theme_1.theme.light.static_white,
+        theme_1.theme.light.static_white,
+    ],
+    1: [theme_1.theme.light.error, theme_1.theme.light.static_white, theme_1.theme.light.static_white],
+    2: [theme_1.theme.light.primary, theme_1.theme.light.primary, theme_1.theme.light.static_white],
+    3: [theme_1.theme.light.primary, theme_1.theme.light.primary, theme_1.theme.light.primary],
+};
+const NetworkQualityIndicator = ({ connectionQuality, }) => {
+    if (!connectionQuality)
+        return null;
+    const connectionQualityColors = connectionQualitySignalColors[connectionQuality];
+    return (<react_native_1.View style={[styles.container, theme_1.theme.icon.lg]}>
+      <react_native_svg_1.Svg viewBox="0 0 34 34" fill={'none'}>
+        <react_native_svg_1.Path d="M 9.97559 22.3379 L 9.97559 19.616" stroke={connectionQualityColors[0]} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill={connectionQualityColors[0]}/>
+        <react_native_svg_1.Path d="M 16.7808 22.3379 L 16.7808 15.5331" stroke={connectionQualityColors[1]} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill={connectionQualityColors[1]}/>
+        <react_native_svg_1.Path d="M 23.5854 22.3379 L 23.5854 11.4502" stroke={connectionQualityColors[2]} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill={connectionQualityColors[2]}/>
+      </react_native_svg_1.Svg>
+    </react_native_1.View>);
+};
+exports.NetworkQualityIndicator = NetworkQualityIndicator;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: theme_1.theme.light.static_overlay,
+        borderRadius: theme_1.theme.rounded.xs,
+    },
+});
+//# sourceMappingURL=NetworkQualityIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkQualityIndicator.js","sourceRoot":"","sources":["../../../src/components/NetworkQualityIndicator.tsx"],"names":[],"mappings":";;;AAAA,+CAAgD;AAChD,uDAA6C;AAC7C,oCAAiC;AAUjC,MAAM,6BAA6B,GAG/B;IACF,CAAC,EAAE;QACD,aAAK,CAAC,KAAK,CAAC,YAAY;QACxB,aAAK,CAAC,KAAK,CAAC,YAAY;QACxB,aAAK,CAAC,KAAK,CAAC,YAAY;KACzB;IACD,CAAC,EAAE,CAAC,aAAK,CAAC,KAAK,CAAC,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC;IAC1E,CAAC,EAAE,CAAC,aAAK,CAAC,KAAK,CAAC,OAAO,EAAE,aAAK,CAAC,KAAK,CAAC,OAAO,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC;IACvE,CAAC,EAAE,CAAC,aAAK,CAAC,KAAK,CAAC,OAAO,EAAE,aAAK,CAAC,KAAK,CAAC,OAAO,EAAE,aAAK,CAAC,KAAK,CAAC,OAAO,CAAC;CACnE,CAAC;AAEK,MAAM,uBAAuB,GAAG,CAAC,EACtC,iBAAiB,GACW,EAAE,EAAE;IAChC,IAAI,CAAC,iBAAiB;QAAE,OAAO,IAAI,CAAC;IAEpC,MAAM,uBAAuB,GAC3B,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;IAEnD,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAC7C;MAAA,CAAC,sBAAG,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CACpC;QAAA,CAAC,uBAAI,CACH,CAAC,CAAC,oCAAoC,CACtC,MAAM,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CACnC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,aAAa,CAAC,OAAO,CACrB,cAAc,CAAC,OAAO,CACtB,IAAI,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,EAEnC;QAAA,CAAC,uBAAI,CACH,CAAC,CAAC,qCAAqC,CACvC,MAAM,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CACnC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,aAAa,CAAC,OAAO,CACrB,cAAc,CAAC,OAAO,CACtB,IAAI,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,EAEnC;QAAA,CAAC,uBAAI,CACH,CAAC,CAAC,qCAAqC,CACvC,MAAM,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,CACnC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,aAAa,CAAC,OAAO,CACrB,cAAc,CAAC,OAAO,CACtB,IAAI,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,EAErC;MAAA,EAAE,sBAAG,CACP;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,uBAAuB,2BAsClC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,cAAc;QAC3C,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KAC/B;CACF,CAAC,CAAC"}

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

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