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

package/dist/src/components/OutgoingCallView.js

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutgoingCallView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const UserInfoView_1 = require("./UserInfoView");
+const CallControlsButton_1 = require("./CallControlsButton");
+const icons_1 = require("../icons");
+const StreamVideoContext_1 = require("../contexts/StreamVideoContext");
+const VideoRenderer_1 = require("./VideoRenderer");
+const useMutingState_1 = require("../hooks/useMutingState");
+const useLocalVideoStream_1 = require("../hooks/useLocalVideoStream");
+const theme_1 = require("../theme");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const video_client_1 = require("@stream-io/video-client");
+const OutgoingCallView = () => {
+    const { isAudioMuted, isVideoMuted, toggleAudioState, toggleVideoState } = (0, useMutingState_1.useMutingState)();
+    const call = (0, video_react_bindings_1.useCall)();
+    const callingState = (0, video_react_bindings_1.useCallCallingState)();
+    const hangupCallHandler = async () => {
+        try {
+            if (callingState === video_client_1.CallingState.LEFT) {
+                return;
+            }
+            await call?.leave();
+        }
+        catch (error) {
+            console.log('Error leaving Call', error);
+        }
+    };
+    const muteStatusColor = (status) => {
+        return status ? theme_1.theme.light.overlay_dark : theme_1.theme.light.static_white;
+    };
+    return (<>
+      <react_native_1.View style={[react_native_1.StyleSheet.absoluteFill, styles.container]}>
+        <react_native_1.View style={styles.content}>
+          <UserInfoView_1.UserInfoView />
+          <react_native_1.Text style={styles.callingText}>Calling...</react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.View style={styles.buttonGroup}>
+          <react_native_1.View style={styles.deviceControlButtons}>
+            <CallControlsButton_1.CallControlsButton onPress={toggleAudioState} color={muteStatusColor(isAudioMuted)} style={[styles.button, theme_1.theme.button.lg]} svgContainerStyle={[styles.svgContainerStyle, theme_1.theme.icon.lg]}>
+              {isAudioMuted ? (<icons_1.MicOff color={theme_1.theme.light.static_white}/>) : (<icons_1.Mic color={theme_1.theme.light.static_black}/>)}
+            </CallControlsButton_1.CallControlsButton>
+            <CallControlsButton_1.CallControlsButton onPress={toggleVideoState} color={muteStatusColor(isVideoMuted)} 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>
+          </react_native_1.View>
+
+          <CallControlsButton_1.CallControlsButton onPress={hangupCallHandler} color={theme_1.theme.light.error} style={[styles.button, styles.hangupButton, 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>
+        </react_native_1.View>
+      </react_native_1.View>
+      <Background />
+    </>);
+};
+exports.OutgoingCallView = OutgoingCallView;
+const Background = () => {
+    const localVideoStream = (0, useLocalVideoStream_1.useLocalVideoStream)();
+    const isVideoMuted = (0, StreamVideoContext_1.useStreamVideoStoreValue)((store) => store.isVideoMuted);
+    if (isVideoMuted || !localVideoStream) {
+        return <react_native_1.View style={styles.background}/>;
+    }
+    return (<react_native_1.View style={styles.background}>
+      <VideoRenderer_1.VideoRenderer mediaStream={localVideoStream} zOrder={1} style={react_native_1.StyleSheet.absoluteFill} mirror/>
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        zIndex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        paddingVertical: 2 * theme_1.theme.margin.xl,
+    },
+    background: {
+        backgroundColor: theme_1.theme.light.static_grey,
+        flex: 1,
+    },
+    content: {},
+    callingText: {
+        marginTop: theme_1.theme.margin.md,
+        textAlign: 'center',
+        color: theme_1.theme.light.static_white,
+        ...theme_1.theme.fonts.heading6,
+    },
+    buttonGroup: {},
+    deviceControlButtons: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        marginBottom: theme_1.theme.margin.md,
+    },
+    hangupButton: {
+        alignSelf: 'center',
+    },
+    button: {},
+    svgContainerStyle: {},
+});
+//# sourceMappingURL=OutgoingCallView.js.map

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

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

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

@@ -0,0 +1,7 @@
+import { StreamReaction } from '@stream-io/video-client';
+export type ReactionProps = {
+    reaction?: StreamReaction;
+    sessionId: string;
+    hideAfterTimeoutInMs?: number;
+};
+export declare const ParticipantReaction: (props: ReactionProps) => JSX.Element;

package/dist/src/components/ParticipantReaction.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParticipantReaction = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const theme_1 = require("../theme");
+const utils_1 = require("../utils");
+const ParticipantReaction = (props) => {
+    const { supportedReactions } = utils_1.StreamVideoRN.config;
+    const { reaction, sessionId, hideAfterTimeoutInMs = 5500 } = props;
+    const call = (0, video_react_bindings_1.useCall)();
+    const [isShowing, setIsShowing] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        let timeoutId;
+        if (call) {
+            setIsShowing(true);
+            timeoutId = setTimeout(() => {
+                setIsShowing(false);
+                call.resetReaction(sessionId);
+            }, hideAfterTimeoutInMs);
+        }
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [call, hideAfterTimeoutInMs, sessionId, reaction]);
+    const currentReaction = reaction &&
+        supportedReactions.find((supportedReaction) => supportedReaction.emoji_code === reaction.emoji_code);
+    let component;
+    if (isShowing) {
+        if (typeof currentReaction?.icon !== 'string')
+            component = currentReaction?.icon;
+        else
+            component = <react_native_1.Text style={styles.reaction}>{currentReaction.icon}</react_native_1.Text>;
+    }
+    return (<react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.md]}>{component}</react_native_1.View>);
+};
+exports.ParticipantReaction = ParticipantReaction;
+const styles = react_native_1.StyleSheet.create({
+    reaction: {
+        ...theme_1.theme.fonts.heading6,
+    },
+    svgContainerStyle: {},
+});
+//# sourceMappingURL=ParticipantReaction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantReaction.js","sourceRoot":"","sources":["../../../src/components/ParticipantReaction.tsx"],"names":[],"mappings":";;;AAAA,iCAA4C;AAE5C,+CAAsD;AACtD,0EAA0D;AAC1D,oCAAiC;AACjC,oCAAyC;AAQlC,MAAM,mBAAmB,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC1D,MAAM,EAAE,kBAAkB,EAAE,GAAG,qBAAa,CAAC,MAAM,CAAC;IACpD,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,oBAAoB,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE3D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAyB,CAAC;QAC9B,IAAI,IAAI,EAAE;YACR,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAChC,CAAC,EAAE,oBAAoB,CAAC,CAAC;SAC1B;QACD,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtD,MAAM,eAAe,GACnB,QAAQ;QACR,kBAAkB,CAAC,IAAI,CACrB,CAAC,iBAAiB,EAAE,EAAE,CACpB,iBAAiB,CAAC,UAAU,KAAK,QAAQ,CAAC,UAAU,CACvD,CAAC;IAEJ,IAAI,SAAS,CAAC;IACd,IAAI,SAAS,EAAE;QACb,IAAI,OAAO,eAAe,EAAE,IAAI,KAAK,QAAQ;YAC3C,SAAS,GAAG,eAAe,EAAE,IAAI,CAAC;;YAElC,SAAS,GAAG,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,mBAAI,CAAC,CAAC;KAC3E;IAED,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,mBAAI,CAAC,CAC3E,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,mBAAmB,uBAsC9B;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,QAAQ,EAAE;QACR,GAAG,aAAK,CAAC,KAAK,CAAC,QAAQ;KACxB;IACD,iBAAiB,EAAE,EAAE;CACtB,CAAC,CAAC"}

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

@@ -0,0 +1,42 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { StreamVideoLocalParticipant, StreamVideoParticipant } from '@stream-io/video-client';
+/**
+ * Props to be passed for the ParticipantView component.
+ */
+interface ParticipantViewProps {
+    /**
+     * The participant that will be displayed
+     */
+    participant: StreamVideoParticipant | StreamVideoLocalParticipant;
+    /**
+     * The video kind that will be displayed
+     */
+    kind: 'video' | 'screen';
+    /**
+     * Any custom style to be merged with the participant view
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Any custom style to be merged with the VideoRenderer
+     */
+    videoRendererStyle?: StyleProp<ViewStyle>;
+    /**
+     * When set to false, the video stream will not be shown even if it is available.
+     */
+    isVisible?: boolean;
+    /**
+     * When set to true, the audio stream will not be played even if it is available.
+     */
+    disableAudio?: boolean;
+}
+/**
+ * Renders either the participants' video track or screenShare track
+ * and additional info, by an absence of a video track or when disableVideo is truthy,
+ * only an avatar and audio track will be rendered.
+ *
+ * | When Video is Enabled | When Video is Disabled |
+ * | :--- | :----: |
+ * |![participant-view-1](https://user-images.githubusercontent.com/25864161/217489213-d4532ca1-49ee-4ef5-940c-af2e55bc0a5f.png)|![participant-view-2](https://user-images.githubusercontent.com/25864161/217489207-fb20c124-8bce-4c2b-87f9-4fe67bc50438.png)|
+ */
+export declare const ParticipantView: (props: ParticipantViewProps) => JSX.Element;
+export {};

package/dist/src/components/ParticipantView.js

@@ -0,0 +1,256 @@
+"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.ParticipantView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_webrtc_1 = require("react-native-webrtc");
+const video_client_1 = require("@stream-io/video-client");
+const VideoRenderer_1 = require("./VideoRenderer");
+const Avatar_1 = require("./Avatar");
+const contexts_1 = require("../contexts");
+const icons_1 = require("../icons");
+const theme_1 = require("../theme");
+const constants_1 = require("../theme/constants");
+const ParticipantReaction_1 = require("./ParticipantReaction");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const NetworkQualityIndicator_1 = require("./NetworkQualityIndicator");
+/**
+ * Renders either the participants' video track or screenShare track
+ * and additional info, by an absence of a video track or when disableVideo is truthy,
+ * only an avatar and audio track will be rendered.
+ *
+ * | When Video is Enabled | When Video is Disabled |
+ * | :--- | :----: |
+ * |![participant-view-1](https://user-images.githubusercontent.com/25864161/217489213-d4532ca1-49ee-4ef5-940c-af2e55bc0a5f.png)|![participant-view-2](https://user-images.githubusercontent.com/25864161/217489207-fb20c124-8bce-4c2b-87f9-4fe67bc50438.png)|
+ */
+const ParticipantView = (props) => {
+    const { participant, kind, isVisible = true, disableAudio } = props;
+    const call = (0, video_react_bindings_1.useCall)();
+    const pendingVideoLayoutRef = (0, react_1.useRef)();
+    const subscribedVideoLayoutRef = (0, react_1.useRef)();
+    const { isSpeaking, isLoggedInUser, publishedTracks } = participant;
+    const isPublishingVideoTrack = publishedTracks.includes(kind === 'video'
+        ? video_client_1.SfuModels.TrackType.VIDEO
+        : video_client_1.SfuModels.TrackType.SCREEN_SHARE);
+    const isCameraOnFrontFacingMode = (0, contexts_1.useStreamVideoStoreValue)((store) => store.isCameraOnFrontFacingMode);
+    const { connectionQuality, reaction, sessionId } = participant;
+    /**
+     * This effect updates the participant's viewportVisibilityState
+     * Additionally makes sure that when this view becomes visible again, the layout to subscribe is known
+     */
+    (0, react_1.useEffect)(() => {
+        if (!call)
+            return;
+        if (isVisible) {
+            if (participant.viewportVisibilityState !== video_client_1.VisibilityState.VISIBLE) {
+                call.state.updateParticipant(participant.sessionId, (p) => ({
+                    ...p,
+                    viewportVisibilityState: video_client_1.VisibilityState.VISIBLE,
+                }));
+            }
+        }
+        else {
+            if (participant.viewportVisibilityState !== video_client_1.VisibilityState.INVISIBLE) {
+                call.state.updateParticipant(participant.sessionId, (p) => ({
+                    ...p,
+                    viewportVisibilityState: video_client_1.VisibilityState.INVISIBLE,
+                }));
+            }
+            if (subscribedVideoLayoutRef.current) {
+                // when video is enabled again, we want to use the last subscribed dimension to resubscribe
+                pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
+                subscribedVideoLayoutRef.current = undefined;
+            }
+        }
+    }, [
+        participant.sessionId,
+        participant.viewportVisibilityState,
+        isVisible,
+        call,
+    ]);
+    /**
+     * This effect updates the subscription either
+     * 1. when video tracks are published and was unpublished before
+     * 2. when the view's visibility changes
+     */
+    (0, react_1.useEffect)(() => {
+        // NOTE: We only want to update the subscription if the pendingVideoLayoutRef is set
+        const updateIsNeeded = pendingVideoLayoutRef.current;
+        if (!updateIsNeeded || !call || !isPublishingVideoTrack)
+            return;
+        // NOTE: When the view is not visible, we want to subscribe to audio only.
+        // We unsubscribe their video by setting the dimension to undefined
+        const dimension = isVisible ? pendingVideoLayoutRef.current : undefined;
+        call.updateSubscriptionsPartial(kind, {
+            [participant.sessionId]: { dimension },
+        });
+        if (dimension) {
+            subscribedVideoLayoutRef.current = pendingVideoLayoutRef.current;
+            pendingVideoLayoutRef.current = undefined;
+        }
+    }, [call, isPublishingVideoTrack, kind, participant.sessionId, isVisible]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            subscribedVideoLayoutRef.current = undefined;
+            pendingVideoLayoutRef.current = undefined;
+        };
+    }, [kind, participant.sessionId]);
+    const onLayout = (event) => {
+        const dimension = {
+            width: Math.trunc(event.nativeEvent.layout.width),
+            height: Math.trunc(event.nativeEvent.layout.height),
+        };
+        // NOTE: If the participant hasn't published a video track yet,
+        // or the view is not viewable, we store the dimensions and handle it
+        // when the track is published or the video is enabled.
+        if (!call || !isPublishingVideoTrack || !isVisible) {
+            pendingVideoLayoutRef.current = dimension;
+            return;
+        }
+        // NOTE: We don't want to update the subscription if the dimension hasn't changed
+        if (subscribedVideoLayoutRef.current?.width === dimension.width &&
+            subscribedVideoLayoutRef.current?.height === dimension.height) {
+            return;
+        }
+        call.updateSubscriptionsPartial(kind, {
+            [participant.sessionId]: {
+                dimension,
+            },
+        });
+        subscribedVideoLayoutRef.current = dimension;
+        pendingVideoLayoutRef.current = undefined;
+    };
+    // NOTE: We have to cast to MediaStream type from webrtc
+    // as JS client sends the web navigators' mediastream type instead
+    const videoStream = (kind === 'video' ? participant.videoStream : participant.screenShareStream);
+    const audioStream = participant.audioStream;
+    const isAudioMuted = !publishedTracks.includes(video_client_1.SfuModels.TrackType.AUDIO);
+    const isVideoMuted = !publishedTracks.includes(video_client_1.SfuModels.TrackType.VIDEO);
+    const hasScreenShareTrack = publishedTracks.includes(video_client_1.SfuModels.TrackType.SCREEN_SHARE);
+    const isScreenSharing = kind === 'screen';
+    const hasVideoTrack = isScreenSharing ? hasScreenShareTrack : !isVideoMuted;
+    const mirror = isLoggedInUser && isCameraOnFrontFacingMode;
+    const isAudioAvailable = kind === 'video' && !!audioStream && !isAudioMuted && !disableAudio;
+    const canShowVideo = !!videoStream && isVisible && hasVideoTrack;
+    const applySpeakerStyle = isSpeaking && !isScreenSharing;
+    const speakerStyle = applySpeakerStyle && styles.isSpeaking;
+    const videoOnlyStyle = {
+        borderColor: constants_1.palette.grey800,
+        borderWidth: 2,
+    };
+    const participantLabel = participant.userId;
+    return (<react_native_1.View style={[
+            styles.containerBase,
+            videoOnlyStyle,
+            props.containerStyle,
+            speakerStyle,
+        ]} accessibilityLabel={`participant-${participant.userId}`} accessibilityValue={{
+            text: isSpeaking
+                ? 'participant-is-speaking'
+                : 'participant-is-not-speaking',
+        }} onLayout={onLayout}>
+      <react_native_1.View style={styles.topView}>
+        <ParticipantReaction_1.ParticipantReaction reaction={reaction} sessionId={sessionId}/>
+      </react_native_1.View>
+      {canShowVideo ? (<VideoRenderer_1.VideoRenderer zOrder={1} mirror={mirror} mediaStream={videoStream} objectFit={isScreenSharing ? 'contain' : 'cover'} style={[styles.videoRenderer, props.videoRendererStyle]}/>) : (<Avatar_1.Avatar participant={participant}/>)}
+      {isAudioAvailable && (<react_native_webrtc_1.RTCView streamURL={audioStream.toURL()}/>)}
+      <react_native_1.View style={styles.bottomView}>
+        {kind === 'video' && (<react_native_1.View style={styles.status}>
+            <react_native_1.Text style={styles.userNameLabel} numberOfLines={1}>
+              {participantLabel}
+            </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>)}
+        {kind === 'screen' && (<react_native_1.View style={styles.screenViewStatus}>
+            <react_native_1.View style={[{ marginRight: theme_1.theme.margin.sm }, theme_1.theme.icon.md]}>
+              <icons_1.ScreenShare color={theme_1.theme.light.static_white}/>
+            </react_native_1.View>
+            <react_native_1.Text style={styles.userNameLabel} numberOfLines={1}>
+              {participant.userId} is sharing their screen.
+            </react_native_1.Text>
+          </react_native_1.View>)}
+        <NetworkQualityIndicator_1.NetworkQualityIndicator connectionQuality={connectionQuality}/>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.ParticipantView = ParticipantView;
+const styles = react_native_1.StyleSheet.create({
+    containerBase: {
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: theme_1.theme.padding.xs,
+    },
+    topView: {
+        alignSelf: 'flex-end',
+        zIndex: 10,
+    },
+    videoRenderer: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+    bottomView: {
+        alignSelf: 'stretch',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    status: {
+        display: 'flex',
+        flexDirection: 'row',
+        padding: theme_1.theme.padding.sm,
+        borderRadius: theme_1.theme.rounded.xs,
+        backgroundColor: theme_1.theme.light.static_overlay,
+        flexShrink: 1,
+        marginRight: theme_1.theme.margin.sm,
+    },
+    screenViewStatus: {
+        padding: theme_1.theme.padding.sm,
+        borderRadius: theme_1.theme.rounded.xs,
+        backgroundColor: theme_1.theme.light.static_overlay,
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexShrink: 1,
+        marginRight: theme_1.theme.margin.sm,
+    },
+    userNameLabel: {
+        flexShrink: 1,
+        color: theme_1.theme.light.static_white,
+        ...theme_1.theme.fonts.caption,
+    },
+    svgContainerStyle: {
+        marginLeft: theme_1.theme.margin.xs,
+    },
+    isSpeaking: {
+        borderColor: theme_1.theme.light.primary,
+        borderWidth: 2,
+    },
+});
+//# sourceMappingURL=ParticipantView.js.map

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ReactionModalType = {
+    isReactionModalActive: boolean;
+    setIsReactionModalActive: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const ReactionModal: (props: ReactionModalType) => JSX.Element;
+export {};

package/dist/src/components/ReactionsModal.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactionModal = void 0;
+const react_native_1 = require("react-native");
+const theme_1 = require("../theme");
+const react_1 = require("react");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const utils_1 = require("../utils");
+const icons_1 = require("../icons");
+const ReactionModal = (props) => {
+    const { isReactionModalActive, setIsReactionModalActive } = props;
+    const onCloseReactionsModal = (0, react_1.useCallback)(() => {
+        setIsReactionModalActive(false);
+    }, [setIsReactionModalActive]);
+    const call = (0, video_react_bindings_1.useCall)();
+    const { supportedReactions } = utils_1.StreamVideoRN.config;
+    const sendReaction = async (reaction) => {
+        await call?.sendReaction(reaction);
+        setIsReactionModalActive(false);
+    };
+    return (<react_native_1.Modal animationType="slide" transparent={true} visible={isReactionModalActive} onRequestClose={onCloseReactionsModal}>
+      <react_native_1.View style={styles.container}>
+        <react_native_1.View style={styles.menu}>
+          <react_native_1.View style={styles.reactions}>
+            {supportedReactions.map((reaction) => (<react_native_1.Pressable onPress={() => sendReaction(reaction)} key={reaction.emoji_code} style={styles.reaction}>
+                <react_native_1.Text>
+                  {reaction.emoji_code &&
+                supportedReactions.find((supportedReaction) => supportedReaction.emoji_code === reaction.emoji_code)?.icon}
+                </react_native_1.Text>
+              </react_native_1.Pressable>))}
+            <react_native_1.Pressable style={[styles.closeIcon, theme_1.theme.icon.sm]} onPress={onCloseReactionsModal}>
+              <icons_1.Cross color={theme_1.theme.light.primary}/>
+            </react_native_1.Pressable>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+exports.ReactionModal = ReactionModal;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    menu: {
+        backgroundColor: theme_1.theme.light.bars,
+        borderRadius: theme_1.theme.rounded.md,
+    },
+    reactions: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: theme_1.theme.padding.md,
+    },
+    reaction: {
+        marginHorizontal: theme_1.theme.margin.md,
+    },
+    svgContainerStyle: {},
+    closeIcon: {
+        marginLeft: theme_1.theme.margin.md,
+    },
+});
+//# sourceMappingURL=ReactionsModal.js.map

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

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

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

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

package/dist/src/components/ToggleAudioButton.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleAudioButton = void 0;
+const video_client_1 = require("@stream-io/video-client");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const CallControlsButton_1 = require("./CallControlsButton");
+const hooks_1 = require("../hooks");
+const theme_1 = require("../theme");
+const icons_1 = require("../icons");
+const react_native_1 = require("react-native");
+const utils_1 = require("../utils");
+const react_1 = require("react");
+const ToggleAudioButton = () => {
+    const [isAwaitingApproval, setIsAwaitingApproval] = (0, react_1.useState)(false);
+    const { toggleAudioMuted, isAudioPublished } = (0, hooks_1.useCallControls)();
+    const userHasSendAudioCapability = (0, video_react_bindings_1.useHasPermissions)(video_client_1.OwnCapability.SEND_AUDIO);
+    const isAudioMuted = !isAudioPublished;
+    (0, hooks_1.usePermissionNotification)({
+        permission: video_client_1.OwnCapability.SEND_AUDIO,
+        messageApproved: 'You can now speak.',
+        messageRevoked: 'You can no longer speak.',
+    });
+    const call = (0, video_react_bindings_1.useCall)();
+    (0, react_1.useEffect)(() => {
+        if (userHasSendAudioCapability) {
+            setIsAwaitingApproval(false);
+        }
+    }, [userHasSendAudioCapability]);
+    const handleRequestPermission = (0, react_1.useCallback)(async (permission) => {
+        if (!call?.permissionsContext.canRequest(permission)) {
+            return;
+        }
+        setIsAwaitingApproval(true);
+        try {
+            await call.requestPermissions({ permissions: [permission] });
+        }
+        catch (error) {
+            if (error instanceof video_client_1.AxiosError) {
+                console.log('RequestPermissions failed', error.response?.data.message);
+            }
+        }
+    }, [call]);
+    const handleToggleAudioButton = async () => {
+        if (userHasSendAudioCapability) {
+            await toggleAudioMuted();
+            return;
+        }
+        if (!isAwaitingApproval) {
+            await handleRequestPermission(video_client_1.OwnCapability.SEND_AUDIO);
+        }
+        else {
+            react_native_1.Alert.alert('Awaiting for an approval to speak.');
+        }
+    };
+    return (<video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.SEND_AUDIO]}>
+      <CallControlsButton_1.CallControlsButton onPress={handleToggleAudioButton} color={(0, utils_1.muteStatusColor)(isAudioMuted)} style={!isAudioMuted ? styles.button : null}>
+        {isAudioMuted ? (<icons_1.MicOff color={theme_1.theme.light.static_white}/>) : (<icons_1.Mic color={theme_1.theme.light.static_black}/>)}
+      </CallControlsButton_1.CallControlsButton>
+    </video_react_bindings_1.Restricted>);
+};
+exports.ToggleAudioButton = ToggleAudioButton;
+const styles = react_native_1.StyleSheet.create({
+    button: {
+        // For iOS
+        shadowOffset: {
+            width: 0,
+            height: 6,
+        },
+        shadowOpacity: 0.37,
+        shadowRadius: 7.49,
+        // For android
+        elevation: 6,
+    },
+    svgContainerStyle: {
+        paddingTop: theme_1.theme.padding.xs,
+    },
+});
+//# sourceMappingURL=ToggleAudioButton.js.map