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

package/src/components/CallParticipantsSpotlightView.tsx

@@ -0,0 +1,53 @@
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { useParticipants } from '@stream-io/video-react-bindings';
+import { StyleSheet, View } from 'react-native';
+import { ParticipantView } from './ParticipantView';
+import { theme } from '../theme';
+import { useDebouncedValue } from '../utils/hooks/useDebouncedValue';
+import { CallParticipantsList } from './CallParticipantsList';
+import { speakerLayoutSortPreset } from '@stream-io/video-client';
+
+const hasScreenShare = (p: StreamVideoParticipant) =>
+  p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+
+export const CallParticipantsSpotlightView = () => {
+  const _allParticipants = useParticipants({
+    sortBy: speakerLayoutSortPreset,
+  });
+  const allParticipants = useDebouncedValue(_allParticipants, 300); // we debounce the participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+  const [participantInSpotlight, ...otherParticipants] = allParticipants;
+  const isScreenShareOnSpotlight = hasScreenShare(participantInSpotlight);
+
+  return (
+    <View style={styles.container}>
+      {participantInSpotlight && (
+        <ParticipantView
+          participant={participantInSpotlight}
+          containerStyle={styles.participantView}
+          kind={isScreenShareOnSpotlight ? 'screen' : 'video'}
+        />
+      )}
+      <View style={styles.participantVideoContainer}>
+        <CallParticipantsList
+          participants={
+            isScreenShareOnSpotlight ? allParticipants : otherParticipants
+          }
+          horizontal
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  participantView: {
+    flex: 1,
+    overflow: 'hidden',
+    borderRadius: theme.rounded.sm,
+    marginHorizontal: theme.padding.sm,
+  },
+  participantVideoContainer: {
+    paddingVertical: theme.padding.sm,
+  },
+});

package/src/components/CallParticipantsView.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { LocalVideoView } from './LocalVideoView';
+import { useRemoteParticipants } from '@stream-io/video-react-bindings';
+import { useDebouncedValue } from '../utils/hooks/useDebouncedValue';
+import { CallParticipantsList } from './CallParticipantsList';
+
+export const CallParticipantsView = () => {
+  const _remoteParticipants = useRemoteParticipants();
+  const remoteParticipants = 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 layout={'fullscreen'} />;
+  }
+
+  return (
+    <View style={styles.container}>
+      <LocalVideoView layout={'floating'} zOrder={2} />
+      <CallParticipantsList participants={remoteParticipants} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/IncomingCallView.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { ImageBackground, StyleSheet, Text, View } from 'react-native';
+import { CallControlsButton } from './CallControlsButton';
+import {
+  useCall,
+  useCallCallingState,
+  useCallMembers,
+  useConnectedUser,
+} from '@stream-io/video-react-bindings';
+import { UserInfoView } from './UserInfoView';
+import { Phone, PhoneDown, Video, VideoSlash } from '../icons';
+import { theme } from '../theme';
+import { useMutingState } from '../hooks/useMutingState';
+import { CallingState, UserResponse } from '@stream-io/video-client';
+
+export const IncomingCallView = () => {
+  const { isVideoMuted, toggleVideoState } = useMutingState();
+  const call = useCall();
+  const callingState = useCallCallingState();
+
+  const answerCallHandler = async () => {
+    try {
+      await call?.join();
+    } catch (error) {
+      console.log('Error joining Call', error);
+    }
+  };
+
+  const rejectCallHandler = async () => {
+    try {
+      if (callingState === CallingState.LEFT) return;
+      await call?.leave({ reject: true });
+    } catch (error) {
+      console.log('Error leaving Call', error);
+    }
+  };
+
+  return (
+    <Background>
+      <View style={styles.content}>
+        <UserInfoView />
+        <Text style={styles.incomingCallText}>Incoming Call...</Text>
+      </View>
+
+      <View style={styles.buttonGroup}>
+        <CallControlsButton
+          onPress={rejectCallHandler}
+          color={theme.light.error}
+          style={[styles.button, theme.button.lg]}
+          svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
+        >
+          <PhoneDown color={theme.light.static_white} />
+        </CallControlsButton>
+        <CallControlsButton
+          onPress={toggleVideoState}
+          color={
+            !isVideoMuted ? theme.light.static_white : theme.light.overlay_dark
+          }
+          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>
+        <CallControlsButton
+          onPress={answerCallHandler}
+          color={theme.light.info}
+          style={[styles.button, theme.button.lg]}
+          svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
+        >
+          <Phone color={theme.light.static_white} />
+        </CallControlsButton>
+      </View>
+    </Background>
+  );
+};
+
+const Background: React.FunctionComponent<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const connectedUser = useConnectedUser();
+  const members = useCallMembers();
+  const includeSelf = false;
+
+  // take the first N members to show their avatars
+  const membersToShow: UserResponse[] = (members || [])
+    .map(({ user }) => user)
+    .filter((user) => user.id !== connectedUser?.id || includeSelf);
+
+  if (members.length) {
+    return (
+      <ImageBackground
+        blurRadius={10}
+        source={{
+          uri: membersToShow[0].image,
+        }}
+        style={[StyleSheet.absoluteFill, styles.background]}
+      >
+        {children}
+      </ImageBackground>
+    );
+  }
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.background]}>{children}</View>
+  );
+};
+
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: theme.light.static_grey,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingVertical: 2 * theme.margin.xl,
+  },
+  content: {},
+  incomingCallText: {
+    marginTop: theme.margin.md,
+    textAlign: 'center',
+    color: theme.light.static_white,
+    ...theme.fonts.heading6,
+  },
+  buttonGroup: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: theme.padding.xl,
+  },
+  button: {},
+  svgContainerStyle: {},
+});

package/src/components/LobbyView.tsx

@@ -0,0 +1,236 @@
+import React, { useCallback } from 'react';
+import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Mic, MicOff, Video, VideoSlash } from '../icons';
+import {
+  useCall,
+  useConnectedUser,
+  useParticipantCount,
+} from '@stream-io/video-react-bindings';
+import { useStreamVideoStoreValue } from '../contexts/StreamVideoContext';
+import { CallControlsButton } from './CallControlsButton';
+import { theme } from '../theme';
+import { useMutingState } from '../hooks/useMutingState';
+import { useLocalVideoStream } from '../hooks';
+import { VideoRenderer } from './VideoRenderer';
+import { Avatar } from './Avatar';
+import { AxiosError, StreamVideoParticipant } from '@stream-io/video-client';
+import { LOCAL_VIDEO_VIEW_STYLE } from '../constants';
+
+const ParticipantStatus = () => {
+  const connectedUser = useConnectedUser();
+  const { isAudioMuted, isVideoMuted } = useMutingState();
+  return (
+    <View style={styles.status}>
+      <Text style={styles.userNameLabel} numberOfLines={1}>
+        {connectedUser?.id}
+      </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>
+  );
+};
+
+export const LobbyView = () => {
+  const localVideoStream = useLocalVideoStream();
+  const connectedUser = useConnectedUser();
+  const { isAudioMuted, isVideoMuted, toggleAudioState, toggleVideoState } =
+    useMutingState();
+  const isCameraOnFrontFacingMode = useStreamVideoStoreValue(
+    (store) => store.isCameraOnFrontFacingMode,
+  );
+  const isVideoAvailable = !!localVideoStream && !isVideoMuted;
+  const count = useParticipantCount();
+  const call = useCall();
+
+  const MicIcon = isAudioMuted ? (
+    <MicOff color={theme.light.static_white} />
+  ) : (
+    <Mic color={theme.light.static_black} />
+  );
+  const VideoIcon = isVideoMuted ? (
+    <VideoSlash color={theme.light.static_white} />
+  ) : (
+    <Video color={theme.light.static_black} />
+  );
+
+  const onJoinCallHandler = useCallback(async () => {
+    try {
+      await call?.join({ create: true });
+    } catch (error) {
+      console.log('Error joining call:', error);
+      if (error instanceof AxiosError) {
+        Alert.alert(error.response?.data.message);
+      }
+    }
+  }, [call]);
+
+  const connectedUserAsParticipant = {
+    userId: connectedUser?.id,
+    image: connectedUser?.image,
+    name: connectedUser?.name,
+  } as StreamVideoParticipant;
+
+  const muteStatusColor = (status: boolean) => {
+    return !status ? theme.light.static_white : theme.light.static_black;
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        {connectedUser && (
+          <>
+            <Text style={styles.heading}>Before Joining</Text>
+            <Text style={styles.subHeading}>Setup your audio and video</Text>
+            <View style={styles.videoView}>
+              <View style={styles.topView} />
+              {isVideoAvailable ? (
+                <VideoRenderer
+                  mirror={isCameraOnFrontFacingMode}
+                  mediaStream={localVideoStream}
+                  objectFit="cover"
+                  style={StyleSheet.absoluteFillObject}
+                />
+              ) : (
+                <Avatar participant={connectedUserAsParticipant} />
+              )}
+              <ParticipantStatus />
+            </View>
+            <View style={styles.buttonGroup}>
+              <CallControlsButton
+                onPress={toggleAudioState}
+                color={muteStatusColor(isAudioMuted)}
+                style={[
+                  styles.button,
+                  theme.button.md,
+                  {
+                    shadowColor: muteStatusColor(isAudioMuted),
+                  },
+                ]}
+              >
+                {MicIcon}
+              </CallControlsButton>
+              <CallControlsButton
+                onPress={toggleVideoState}
+                color={muteStatusColor(isVideoMuted)}
+                style={[
+                  styles.button,
+                  theme.button.md,
+                  {
+                    shadowColor: muteStatusColor(isVideoMuted),
+                  },
+                ]}
+              >
+                {VideoIcon}
+              </CallControlsButton>
+            </View>
+          </>
+        )}
+        <View style={styles.info}>
+          <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.'}
+          </Text>
+          <Pressable style={styles.joinButton} onPress={onJoinCallHandler}>
+            <Text style={styles.joinButtonText}>Join</Text>
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.light.static_grey,
+    justifyContent: 'center',
+  },
+  content: {
+    alignItems: 'center',
+    paddingHorizontal: theme.padding.md,
+  },
+  heading: {
+    color: theme.light.static_white,
+    ...theme.fonts.heading4,
+  },
+  subHeading: {
+    color: theme.light.text_low_emphasis,
+    ...theme.fonts.subtitle,
+    marginBottom: theme.margin.sm,
+  },
+  videoView: {
+    backgroundColor: theme.light.disabled,
+    height: LOCAL_VIDEO_VIEW_STYLE.height * 2,
+    borderRadius: LOCAL_VIDEO_VIEW_STYLE.borderRadius * 2,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    overflow: 'hidden',
+    marginVertical: theme.margin.md,
+    width: '100%',
+    padding: theme.padding.sm,
+  },
+  topView: {},
+  buttonGroup: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: theme.margin.md,
+  },
+  button: {
+    marginHorizontal: theme.margin.sm,
+  },
+  info: {
+    backgroundColor: theme.light.static_overlay,
+    padding: theme.padding.md,
+    borderRadius: theme.rounded.sm,
+    width: '100%',
+  },
+  infoText: {
+    color: theme.light.static_white,
+    ...theme.fonts.subtitleBold,
+  },
+  joinButton: {
+    backgroundColor: theme.light.primary,
+    borderRadius: theme.rounded.sm,
+    marginTop: theme.margin.md,
+    justifyContent: 'center',
+    paddingVertical: theme.padding.sm,
+  },
+  joinButtonText: {
+    color: theme.light.static_white,
+    textAlign: 'center',
+    ...theme.fonts.subtitleBold,
+  },
+  status: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: theme.padding.sm,
+    borderRadius: theme.rounded.xs,
+    backgroundColor: theme.light.static_overlay,
+    zIndex: 10,
+  },
+  avatar: {
+    height: theme.avatar.sm,
+    width: theme.avatar.sm,
+    borderRadius: theme.avatar.sm / 2,
+    alignSelf: 'center',
+  },
+  userNameLabel: {
+    flexShrink: 1,
+    color: theme.light.static_white,
+    ...theme.fonts.caption,
+  },
+  svgContainerStyle: {
+    marginLeft: theme.margin.sm,
+  },
+});

package/src/components/LocalVideoView.tsx

@@ -0,0 +1,141 @@
+import React, { useRef } from 'react';
+import {
+  Animated,
+  PanResponder,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { VideoRenderer } from './VideoRenderer';
+import { useLocalParticipant } from '@stream-io/video-react-bindings';
+import { SfuModels } from '@stream-io/video-client';
+import { useStreamVideoStoreValue } from '../contexts';
+import { theme } from '../theme';
+import { VideoSlash } from '../icons';
+import { LOCAL_VIDEO_VIEW_STYLE } from '../constants';
+import { A11yComponents } from '../constants/A11yLabels';
+
+/**
+ * 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 const LocalVideoView = (props: LocalVideoViewProps) => {
+  const { layout = 'floating', zOrder = 1 } = props;
+  const containerStyle =
+    layout === 'floating'
+      ? styles.floatingContainer
+      : styles.fullScreenContainer;
+  const { style = containerStyle } = props;
+  const localParticipant = useLocalParticipant();
+  const isCameraOnFrontFacingMode = useStreamVideoStoreValue(
+    (store) => store.isCameraOnFrontFacingMode,
+  );
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
+        useNativeDriver: false,
+      }),
+      onPanResponderRelease: () => {
+        pan.extractOffset();
+      },
+    }),
+  ).current;
+
+  if (!localParticipant) return null;
+
+  const isVideoMuted = !localParticipant.publishedTracks.includes(
+    SfuModels.TrackType.VIDEO,
+  );
+
+  if (layout === 'fullscreen') {
+    return (
+      <VideoRenderer
+        mirror={isCameraOnFrontFacingMode}
+        mediaStream={localParticipant.videoStream}
+        style={style}
+        zOrder={zOrder}
+      />
+    );
+  }
+
+  return (
+    <Animated.View
+      accessibilityLabel={A11yComponents.LOCAL_PARTICIPANT}
+      style={{
+        zIndex: 5,
+        transform: [{ translateX: pan.x }, { translateY: pan.y }],
+      }}
+      {...panResponder.panHandlers}
+    >
+      {isVideoMuted ? (
+        <View style={style}>
+          <View style={theme.icon.md}>
+            <VideoSlash color={theme.light.static_white} />
+          </View>
+        </View>
+      ) : (
+        <VideoRenderer
+          mirror={isCameraOnFrontFacingMode}
+          mediaStream={localParticipant.videoStream}
+          style={style}
+          zOrder={zOrder}
+        />
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  floatingContainer: {
+    position: 'absolute',
+    height: LOCAL_VIDEO_VIEW_STYLE.height,
+    width: LOCAL_VIDEO_VIEW_STYLE.width,
+    right: theme.spacing.lg * 2,
+    top: theme.margin.md,
+    borderRadius: LOCAL_VIDEO_VIEW_STYLE.borderRadius,
+    zIndex: 1,
+    overflow: 'hidden',
+    backgroundColor: theme.light.disabled,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fullScreenContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/NetworkQualityIndicator.tsx

@@ -0,0 +1,72 @@
+import { StyleSheet, View } from 'react-native';
+import { Path, Svg } from 'react-native-svg';
+import { theme } from '../theme';
+import { SfuModels } from '@stream-io/video-client';
+
+/**
+ * Props to be passed for the NetworkQualityIndicator component.
+ */
+export type NetworkQualityIndicatorType = {
+  connectionQuality: SfuModels.ConnectionQuality;
+};
+
+const connectionQualitySignalColors: Record<
+  SfuModels.ConnectionQuality,
+  string[]
+> = {
+  0: [
+    theme.light.static_white,
+    theme.light.static_white,
+    theme.light.static_white,
+  ],
+  1: [theme.light.error, theme.light.static_white, theme.light.static_white],
+  2: [theme.light.primary, theme.light.primary, theme.light.static_white],
+  3: [theme.light.primary, theme.light.primary, theme.light.primary],
+};
+
+export const NetworkQualityIndicator = ({
+  connectionQuality,
+}: NetworkQualityIndicatorType) => {
+  if (!connectionQuality) return null;
+
+  const connectionQualityColors =
+    connectionQualitySignalColors[connectionQuality];
+
+  return (
+    <View style={[styles.container, theme.icon.lg]}>
+      <Svg viewBox="0 0 34 34" fill={'none'}>
+        <Path
+          d="M 9.97559 22.3379 L 9.97559 19.616"
+          stroke={connectionQualityColors[0]}
+          strokeWidth={3}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill={connectionQualityColors[0]}
+        />
+        <Path
+          d="M 16.7808 22.3379 L 16.7808 15.5331"
+          stroke={connectionQualityColors[1]}
+          strokeWidth={3}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill={connectionQualityColors[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]}
+        />
+      </Svg>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.light.static_overlay,
+    borderRadius: theme.rounded.xs,
+  },
+});