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

package/src/components/OutgoingCallView.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { UserInfoView } from './UserInfoView';
+import { CallControlsButton } from './CallControlsButton';
+import { Mic, MicOff, PhoneDown, Video, VideoSlash } from '../icons';
+import { useStreamVideoStoreValue } from '../contexts/StreamVideoContext';
+import { VideoRenderer } from './VideoRenderer';
+import { useMutingState } from '../hooks/useMutingState';
+import { useLocalVideoStream } from '../hooks/useLocalVideoStream';
+import { theme } from '../theme';
+import { useCall, useCallCallingState } from '@stream-io/video-react-bindings';
+import { CallingState } from '@stream-io/video-client';
+
+export const OutgoingCallView = () => {
+  const { isAudioMuted, isVideoMuted, toggleAudioState, toggleVideoState } =
+    useMutingState();
+  const call = useCall();
+  const callingState = useCallCallingState();
+
+  const hangupCallHandler = async () => {
+    try {
+      if (callingState === CallingState.LEFT) {
+        return;
+      }
+      await call?.leave();
+    } catch (error) {
+      console.log('Error leaving Call', error);
+    }
+  };
+  const muteStatusColor = (status: boolean) => {
+    return status ? theme.light.overlay_dark : theme.light.static_white;
+  };
+
+  return (
+    <>
+      <View style={[StyleSheet.absoluteFill, styles.container]}>
+        <View style={styles.content}>
+          <UserInfoView />
+          <Text style={styles.callingText}>Calling...</Text>
+        </View>
+        <View style={styles.buttonGroup}>
+          <View style={styles.deviceControlButtons}>
+            <CallControlsButton
+              onPress={toggleAudioState}
+              color={muteStatusColor(isAudioMuted)}
+              style={[styles.button, theme.button.lg]}
+              svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
+            >
+              {isAudioMuted ? (
+                <MicOff color={theme.light.static_white} />
+              ) : (
+                <Mic color={theme.light.static_black} />
+              )}
+            </CallControlsButton>
+            <CallControlsButton
+              onPress={toggleVideoState}
+              color={muteStatusColor(isVideoMuted)}
+              style={[styles.button, theme.button.lg]}
+              svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
+            >
+              {isVideoMuted ? (
+                <VideoSlash color={theme.light.static_white} />
+              ) : (
+                <Video color={theme.light.static_black} />
+              )}
+            </CallControlsButton>
+          </View>
+
+          <CallControlsButton
+            onPress={hangupCallHandler}
+            color={theme.light.error}
+            style={[styles.button, styles.hangupButton, theme.button.lg]}
+            svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
+          >
+            <PhoneDown color={theme.light.static_white} />
+          </CallControlsButton>
+        </View>
+      </View>
+      <Background />
+    </>
+  );
+};
+
+const Background = () => {
+  const localVideoStream = useLocalVideoStream();
+  const isVideoMuted = useStreamVideoStoreValue((store) => store.isVideoMuted);
+
+  if (isVideoMuted || !localVideoStream) {
+    return <View style={styles.background} />;
+  }
+  return (
+    <View style={styles.background}>
+      <VideoRenderer
+        mediaStream={localVideoStream}
+        zOrder={1}
+        style={StyleSheet.absoluteFill}
+        mirror
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingVertical: 2 * theme.margin.xl,
+  },
+  background: {
+    backgroundColor: theme.light.static_grey,
+    flex: 1,
+  },
+  content: {},
+  callingText: {
+    marginTop: theme.margin.md,
+    textAlign: 'center',
+    color: theme.light.static_white,
+    ...theme.fonts.heading6,
+  },
+  buttonGroup: {},
+  deviceControlButtons: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginBottom: theme.margin.md,
+  },
+  hangupButton: {
+    alignSelf: 'center',
+  },
+  button: {},
+  svgContainerStyle: {},
+});

package/src/components/ParticipantReaction.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import { StreamReaction } from '@stream-io/video-client';
+import { StyleSheet, Text, View } from 'react-native';
+import { useCall } from '@stream-io/video-react-bindings';
+import { theme } from '../theme';
+import { StreamVideoRN } from '../utils';
+
+export type ReactionProps = {
+  reaction?: StreamReaction;
+  sessionId: string;
+  hideAfterTimeoutInMs?: number;
+};
+
+export const ParticipantReaction = (props: ReactionProps) => {
+  const { supportedReactions } = StreamVideoRN.config;
+  const { reaction, sessionId, hideAfterTimeoutInMs = 5500 } = props;
+  const call = useCall();
+  const [isShowing, setIsShowing] = useState<boolean>(false);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+    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 = <Text style={styles.reaction}>{currentReaction.icon}</Text>;
+  }
+
+  return (
+    <View style={[styles.svgContainerStyle, theme.icon.md]}>{component}</View>
+  );
+};
+
+const styles = StyleSheet.create({
+  reaction: {
+    ...theme.fonts.heading6,
+  },
+  svgContainerStyle: {},
+});

package/src/components/ParticipantView.tsx

@@ -0,0 +1,315 @@
+import React, { useEffect, useRef } from 'react';
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { MediaStream, RTCView } from 'react-native-webrtc';
+import {
+  SfuModels,
+  StreamVideoLocalParticipant,
+  StreamVideoParticipant,
+  VisibilityState,
+} from '@stream-io/video-client';
+import { VideoRenderer } from './VideoRenderer';
+import { Avatar } from './Avatar';
+import { useStreamVideoStoreValue } from '../contexts';
+import { MicOff, ScreenShare, VideoSlash } from '../icons';
+import { theme } from '../theme';
+import { palette } from '../theme/constants';
+import { ParticipantReaction } from './ParticipantReaction';
+import { useCall } from '@stream-io/video-react-bindings';
+import { NetworkQualityIndicator } from './NetworkQualityIndicator';
+
+/**
+ * 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 const ParticipantView = (props: ParticipantViewProps) => {
+  const { participant, kind, isVisible = true, disableAudio } = props;
+
+  const call = useCall();
+  const pendingVideoLayoutRef = useRef<SfuModels.VideoDimension>();
+  const subscribedVideoLayoutRef = useRef<SfuModels.VideoDimension>();
+  const { isSpeaking, isLoggedInUser, publishedTracks } = participant;
+  const isPublishingVideoTrack = publishedTracks.includes(
+    kind === 'video'
+      ? SfuModels.TrackType.VIDEO
+      : SfuModels.TrackType.SCREEN_SHARE,
+  );
+  const isCameraOnFrontFacingMode = 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
+   */
+  useEffect(() => {
+    if (!call) return;
+    if (isVisible) {
+      if (participant.viewportVisibilityState !== VisibilityState.VISIBLE) {
+        call.state.updateParticipant(participant.sessionId, (p) => ({
+          ...p,
+          viewportVisibilityState: VisibilityState.VISIBLE,
+        }));
+      }
+    } else {
+      if (participant.viewportVisibilityState !== VisibilityState.INVISIBLE) {
+        call.state.updateParticipant(participant.sessionId, (p) => ({
+          ...p,
+          viewportVisibilityState: 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
+   */
+  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]);
+
+  useEffect(() => {
+    return () => {
+      subscribedVideoLayoutRef.current = undefined;
+      pendingVideoLayoutRef.current = undefined;
+    };
+  }, [kind, participant.sessionId]);
+
+  const onLayout: React.ComponentProps<typeof View>['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
+  ) as MediaStream | undefined;
+
+  const audioStream = participant.audioStream as MediaStream | undefined;
+  const isAudioMuted = !publishedTracks.includes(SfuModels.TrackType.AUDIO);
+  const isVideoMuted = !publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const hasScreenShareTrack = publishedTracks.includes(
+    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: palette.grey800,
+    borderWidth: 2,
+  };
+
+  const participantLabel = participant.userId;
+
+  return (
+    <View
+      style={[
+        styles.containerBase,
+        videoOnlyStyle,
+        props.containerStyle,
+        speakerStyle,
+      ]}
+      accessibilityLabel={`participant-${participant.userId}`}
+      accessibilityValue={{
+        text: isSpeaking
+          ? 'participant-is-speaking'
+          : 'participant-is-not-speaking',
+      }}
+      onLayout={onLayout}
+    >
+      <View style={styles.topView}>
+        <ParticipantReaction reaction={reaction} sessionId={sessionId} />
+      </View>
+      {canShowVideo ? (
+        <VideoRenderer
+          zOrder={1}
+          mirror={mirror}
+          mediaStream={videoStream as MediaStream}
+          objectFit={isScreenSharing ? 'contain' : 'cover'}
+          style={[styles.videoRenderer, props.videoRendererStyle]}
+        />
+      ) : (
+        <Avatar participant={participant} />
+      )}
+      {isAudioAvailable && (
+        <RTCView streamURL={(audioStream as MediaStream).toURL()} />
+      )}
+      <View style={styles.bottomView}>
+        {kind === 'video' && (
+          <View style={styles.status}>
+            <Text style={styles.userNameLabel} numberOfLines={1}>
+              {participantLabel}
+            </Text>
+            {isAudioMuted && (
+              <View style={[styles.svgContainerStyle, theme.icon.xs]}>
+                <MicOff color={theme.light.error} />
+              </View>
+            )}
+            {isVideoMuted && (
+              <View style={[styles.svgContainerStyle, theme.icon.xs]}>
+                <VideoSlash color={theme.light.error} />
+              </View>
+            )}
+          </View>
+        )}
+        {kind === 'screen' && (
+          <View style={styles.screenViewStatus}>
+            <View style={[{ marginRight: theme.margin.sm }, theme.icon.md]}>
+              <ScreenShare color={theme.light.static_white} />
+            </View>
+            <Text style={styles.userNameLabel} numberOfLines={1}>
+              {participant.userId} is sharing their screen.
+            </Text>
+          </View>
+        )}
+        <NetworkQualityIndicator connectionQuality={connectionQuality} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerBase: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.padding.xs,
+  },
+  topView: {
+    alignSelf: 'flex-end',
+    zIndex: 10,
+  },
+  videoRenderer: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  bottomView: {
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  status: {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.padding.sm,
+    borderRadius: theme.rounded.xs,
+    backgroundColor: theme.light.static_overlay,
+    flexShrink: 1,
+    marginRight: theme.margin.sm,
+  },
+  screenViewStatus: {
+    padding: theme.padding.sm,
+    borderRadius: theme.rounded.xs,
+    backgroundColor: theme.light.static_overlay,
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 1,
+    marginRight: theme.margin.sm,
+  },
+  userNameLabel: {
+    flexShrink: 1,
+    color: theme.light.static_white,
+    ...theme.fonts.caption,
+  },
+  svgContainerStyle: {
+    marginLeft: theme.margin.xs,
+  },
+  isSpeaking: {
+    borderColor: theme.light.primary,
+    borderWidth: 2,
+  },
+});

package/src/components/ReactionsModal.tsx

@@ -0,0 +1,90 @@
+import { StreamReaction } from '@stream-io/video-client';
+import { Pressable, StyleSheet, View, Text, Modal } from 'react-native';
+
+import { theme } from '../theme';
+import { useCallback } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+import { StreamVideoRN } from '../utils';
+import { Cross } from '../icons';
+
+type ReactionModalType = {
+  isReactionModalActive: boolean;
+  setIsReactionModalActive: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const ReactionModal = (props: ReactionModalType) => {
+  const { isReactionModalActive, setIsReactionModalActive } = props;
+  const onCloseReactionsModal = useCallback(() => {
+    setIsReactionModalActive(false);
+  }, [setIsReactionModalActive]);
+  const call = useCall();
+  const { supportedReactions } = StreamVideoRN.config;
+
+  const sendReaction = async (reaction: StreamReaction) => {
+    await call?.sendReaction(reaction);
+    setIsReactionModalActive(false);
+  };
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={isReactionModalActive}
+      onRequestClose={onCloseReactionsModal}
+    >
+      <View style={styles.container}>
+        <View style={styles.menu}>
+          <View style={styles.reactions}>
+            {supportedReactions.map((reaction) => (
+              <Pressable
+                onPress={() => sendReaction(reaction)}
+                key={reaction.emoji_code}
+                style={styles.reaction}
+              >
+                <Text>
+                  {reaction.emoji_code &&
+                    supportedReactions.find(
+                      (supportedReaction) =>
+                        supportedReaction.emoji_code === reaction.emoji_code,
+                    )?.icon}
+                </Text>
+              </Pressable>
+            ))}
+            <Pressable
+              style={[styles.closeIcon, theme.icon.sm]}
+              onPress={onCloseReactionsModal}
+            >
+              <Cross color={theme.light.primary} />
+            </Pressable>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  menu: {
+    backgroundColor: theme.light.bars,
+    borderRadius: theme.rounded.md,
+  },
+  reactions: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.padding.md,
+  },
+  reaction: {
+    marginHorizontal: theme.margin.md,
+  },
+  svgContainerStyle: {},
+  closeIcon: {
+    marginLeft: theme.margin.md,
+  },
+});

package/src/components/ToggleAudioButton.tsx

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