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

package/src/components/ToggleVideoButton.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 { muteStatusColor } from '../utils';
+import { Alert, StyleSheet } from 'react-native';
+import { theme } from '../theme';
+import { Video, VideoSlash } from '../icons';
+import { useCallControls, usePermissionNotification } from '../hooks';
+import { useCallback, useEffect, useState } from 'react';
+
+export const ToggleVideoButton = () => {
+  const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
+  const { toggleVideoMuted, isVideoPublished } = useCallControls();
+
+  const isVideoMuted = !isVideoPublished;
+
+  const userHasSendVideoCapability = useHasPermissions(
+    OwnCapability.SEND_VIDEO,
+  );
+  const call = useCall();
+
+  useEffect(() => {
+    if (userHasSendVideoCapability) {
+      setIsAwaitingApproval(false);
+    }
+  }, [userHasSendVideoCapability]);
+
+  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],
+  );
+
+  usePermissionNotification({
+    permission: OwnCapability.SEND_VIDEO,
+    messageApproved: 'You can now share your video.',
+    messageRevoked: 'You can no longer share your video.',
+  });
+
+  const handleToggleVideoButton = async () => {
+    if (userHasSendVideoCapability) {
+      await toggleVideoMuted();
+      return;
+    }
+    if (!isAwaitingApproval) {
+      await handleRequestPermission(OwnCapability.SEND_VIDEO);
+    } else {
+      Alert.alert('Awaiting for an approval to share your video.');
+    }
+  };
+
+  return (
+    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
+      <CallControlsButton
+        onPress={handleToggleVideoButton}
+        color={muteStatusColor(isVideoMuted)}
+        style={!isVideoMuted ? styles.button : null}
+      >
+        {isVideoMuted ? (
+          <VideoSlash color={theme.light.static_white} />
+        ) : (
+          <Video 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,
+  },
+});

package/src/components/UserInfoView.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Image, Platform, StyleSheet, Text, View } from 'react-native';
+import { generateCallTitle } from '../utils';
+import {
+  useCallMembers,
+  useConnectedUser,
+} from '@stream-io/video-react-bindings';
+import { UserResponse } from '@stream-io/video-client';
+import { theme } from '../theme';
+
+enum AvatarModes {
+  small = 'sm',
+  medium = 'md',
+  large = 'lg',
+}
+
+export type UserInfoViewType = {
+  /**
+   * Whether to include the current user in the list of members to show.
+   * @default false.
+   */
+  includeSelf?: boolean;
+
+  /**
+   * The maximum number of members to show.
+   * @default 3.
+   */
+  totalMembersToShow?: number;
+};
+
+export const UserInfoView = ({
+  includeSelf = false,
+  totalMembersToShow = 3,
+}: UserInfoViewType) => {
+  const connectedUser = useConnectedUser();
+  const members = useCallMembers();
+
+  // take the first N members to show their avatars
+  const membersToShow: UserResponse[] = (members || [])
+    .slice(0, totalMembersToShow)
+    .map(({ user }) => user)
+    .filter((user) => user.id !== connectedUser?.id ?? includeSelf);
+  if (
+    includeSelf &&
+    !membersToShow.find((user) => user.id === connectedUser?.id)
+  ) {
+    // if the current user is not in the initial batch of members,
+    // add it to the beginning of the list
+    const self = members.find(({ user }) => user.id === connectedUser?.id);
+    if (self) {
+      membersToShow.splice(0, 1, self.user);
+    }
+  }
+
+  const memberUserIds = membersToShow.map(
+    (memberToShow) => memberToShow.name ?? memberToShow.id,
+  );
+
+  const callTitle = generateCallTitle(memberUserIds, totalMembersToShow);
+
+  const avatarSizeModes: { [key: number]: AvatarModes } = {
+    1: AvatarModes.large,
+    2: AvatarModes.medium,
+    3: AvatarModes.small,
+  };
+
+  const mode = avatarSizeModes[memberUserIds.length] || AvatarModes.small;
+
+  const avatarStyles = {
+    height: theme.avatar[mode],
+    width: theme.avatar[mode],
+    borderRadius: theme.avatar[mode] / 2,
+  };
+
+  const fontStyleByMembersCount =
+    memberUserIds.length > 1 ? theme.fonts.heading5 : theme.fonts.heading4;
+
+  return (
+    <View style={styles.userInfo}>
+      <View style={styles.avatarGroup}>
+        {membersToShow.map((memberToShow) => {
+          return (
+            <Image
+              key={memberToShow.id}
+              style={[avatarStyles]}
+              // FIXME: use real avatar from coordinator this is temporary
+              source={{
+                uri: memberToShow.image,
+              }}
+            />
+          );
+        })}
+      </View>
+      <Text style={[styles.name, fontStyleByMembersCount]}>{callTitle}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  userInfo: {
+    paddingHorizontal:
+      Platform.OS === 'android' ? theme.padding.xl * 4 : theme.padding.xl * 2,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  avatarGroup: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    flexWrap: 'wrap',
+  },
+  name: {
+    color: theme.light.static_white,
+    textAlign: 'center',
+    marginTop: theme.margin.xl,
+  },
+});

package/src/components/VideoRenderer.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { MediaStream, RTCView } from 'react-native-webrtc';
+
+/**
+ * Props to be passed for the VideoRenderer component.
+ */
+export interface VideoRendererProps {
+  /**
+   * The stream that should be rendered.
+   */
+  mediaStream: MediaStream;
+  /**
+   * Indicates whether the video should be
+   * mirrored during rendering. Commonly, applications choose to mirror the
+   * user-facing camera.
+   *
+   * @defaultValue
+   * The default is `false`
+   */
+  mirror?: boolean;
+  /**
+   * Similarly to the CSS property z-index, specifies the z-order of this
+   * `RTCView` in the stacking space of all `RTCView`s. When `RTCView`s overlap,
+   * `zOrder` determines which one covers the other. An `RTCView` with a larger
+   * `zOrder` generally covers an RTCView with a lower one.
+   *
+   * Non-overlapping `RTCView`s may safely share a z-order (because one does not
+   * have to cover the other).
+   *
+   * The support for `zOrder` is platform-dependent and/or
+   * implementation-specific. Thus, specifying a value for `zOrder` is to be
+   * thought of as giving a hint rather than as imposing a requirement. For
+   * example, video renderers such as `RTCView` are commonly implemented using
+   * OpenGL and OpenGL views may have different numbers of layers in their
+   * stacking space. android has three: a layer bellow the window (aka
+   * default), a layer bellow the window again but above the previous layer
+   * (aka media overlay), and above the window. Consequently, it is advisable
+   * to limit the number of utilized layers in the stacking space to the
+   * minimum sufficient for the desired display. For example, a video call
+   * application usually needs a maximum of two `zOrder` values: 0 for the
+   * remote one or more videos which appear in the background, and 1 for the local
+   * one or more videos which appear above the remote one or more videos.
+   */
+  zOrder?: number;
+  /**
+   * In the fashion of
+   * https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth
+   * and https://www.w3.org/TR/html5/rendering.html#video-object-fit,
+   * resembles the CSS style object-fit.
+   *
+   * @defaultValue
+   * The default is `cover`
+   */
+  objectFit?: 'contain' | 'cover';
+  /**
+   * Style to override the default style of the `RTCView`.
+   * @defaultValue
+   * The default is `{ flex: 1 }`
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Lower level component, that represents only the video part (wrapper around the WebRTC)
+ * //Todo: SG: add photo's with all states
+ */
+export const VideoRenderer = (props: VideoRendererProps) => {
+  const {
+    mediaStream,
+    mirror = false,
+    style = { flex: 1 },
+    zOrder = undefined,
+    objectFit = 'cover',
+  } = props;
+  return (
+    <RTCView
+      streamURL={mediaStream?.toURL()}
+      mirror={mirror}
+      style={style}
+      objectFit={objectFit}
+      zOrder={zOrder}
+    />
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export * from './ActiveCall';
+export * from './IncomingCallView';
+export * from './OutgoingCallView';
+export * from './Avatar';
+export * from './VideoRenderer';
+export * from './LocalVideoView';
+export * from './ParticipantView';
+export * from './CallParticipantsView';
+export * from './CallControlsView';
+export * from './CallParticipantsInfoView';
+export * from './LobbyView';
+export * from './ReactionsModal';

package/src/constants/A11yLabels.ts

@@ -0,0 +1,24 @@
+export enum A11yIcons {
+  MUTED_VIDEO = 'muted-video-icon',
+  HANG_UP_CALL = 'hang-up-call-icon',
+  SCREEN_SHARE = 'screen-share-icon',
+}
+
+export enum A11yComponents {
+  PARTICIPANT_AVATAR = 'participant-avatar',
+  CALL_PARTICIPANTS_LIST = 'call-participants-list',
+  LOCAL_PARTICIPANT = 'local-participant',
+  PARTICIPANT_MEDIA_STREAM = 'participant-media-stream',
+}
+
+export enum A11yButtons {
+  PARTICIPANTS_INFO = 'participants-info-button',
+}
+
+export enum A11yValues {
+  PARTICIPANTS_IS_SPEAKING = 'participant-is-speaking',
+}
+
+export enum A11yImages {
+  AVATAR = 'avatar-image',
+}

package/src/constants/index.ts

@@ -0,0 +1,28 @@
+import { theme } from '../theme';
+
+export const LOCAL_VIDEO_VIEW_STYLE = {
+  height: 140,
+  width: 80,
+  borderRadius: theme.rounded.sm,
+};
+
+export const defaultEmojiReactions = [
+  {
+    type: 'reaction',
+    emoji_code: ':like:',
+    custom: {},
+    icon: '👍',
+  },
+  {
+    type: 'raised-hand',
+    emoji_code: ':raise-hand:',
+    custom: {},
+    icon: '✋',
+  },
+  {
+    type: 'reaction',
+    emoji_code: ':fireworks:',
+    custom: {},
+    icon: '🎉',
+  },
+];

package/src/contexts/StreamVideoContext/createStoreContext.tsx

@@ -0,0 +1,117 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export default function createStoreContext<PassedStoreType extends object>(
+  initialState: PassedStoreType,
+) {
+  type SetStateFuncType = (
+    partialStateOrFunc:
+      | Partial<StoreType>
+      | ((prevState: StoreType) => Partial<PassedStoreType>),
+  ) => void;
+
+  // returns unsubscribe function
+  type SubscribeFunc = (callback: () => void) => () => void;
+
+  type StoreType = PassedStoreType & { isStoreInitialized: boolean };
+
+  function useStoreData(): {
+    getSnapshot: () => StoreType;
+    setState: SetStateFuncType;
+    subscribe: SubscribeFunc;
+  } {
+    const storeRef = useRef<StoreType>({
+      ...initialState,
+      isStoreInitialized: false,
+    });
+
+    const getSnapshot = useRef(() => storeRef.current).current;
+
+    const subscribersRef = useRef<(() => void)[]>([]);
+
+    const setState = useRef<SetStateFuncType>((partialStateOrFunc) => {
+      if (typeof partialStateOrFunc === 'function') {
+        const value = partialStateOrFunc(storeRef.current);
+        storeRef.current = {
+          ...storeRef.current,
+          ...value,
+        };
+      } else {
+        storeRef.current = { ...storeRef.current, ...partialStateOrFunc };
+      }
+      subscribersRef.current.forEach((callback) => callback());
+    }).current;
+
+    const subscribe = useRef((callback: () => void) => {
+      subscribersRef.current.push(callback);
+      return () => subscribersRef.current.filter((cb) => cb !== callback);
+    }).current;
+
+    return {
+      getSnapshot,
+      setState,
+      subscribe,
+    };
+  }
+
+  type HookReturnType = ReturnType<typeof useStoreData>;
+
+  const StoreContext = createContext<HookReturnType | null>(null);
+
+  function Provider(props: React.PropsWithChildren<{}>) {
+    const value = useStoreData();
+    return (
+      <StoreContext.Provider value={value}>
+        {props.children}
+      </StoreContext.Provider>
+    );
+  }
+
+  /**
+   * @param selector
+   * @returns
+   *
+   * @category Client State
+   */
+  function useStoreValue<SelectorOutput extends StoreType[keyof StoreType]>(
+    selector: (store: StoreType) => SelectorOutput,
+  ): SelectorOutput {
+    const store = useContext(StoreContext);
+    if (!store) {
+      throw new Error('Store not found');
+    }
+
+    const [state, setState] = useState(selector(store.getSnapshot()));
+    useEffect(
+      () => store.subscribe(() => setState(selector(store.getSnapshot()))),
+      [selector, store],
+    );
+
+    return state;
+  }
+
+  /**
+   *
+   * @returns
+   *
+   * @category Client State
+   */
+  function useStoreSetState() {
+    const store = useContext(StoreContext);
+    if (!store) {
+      throw new Error('Store not found');
+    }
+    return store.setState;
+  }
+
+  return {
+    Provider,
+    useStoreValue,
+    useStoreSetState,
+  };
+}

package/src/contexts/StreamVideoContext/index.tsx

@@ -0,0 +1,37 @@
+import createStoreContext from './createStoreContext';
+
+export type MediaDeviceInfo = {
+  deviceId: string;
+  facing?: 'environment' | 'front';
+  groupId: string;
+  kind: 'videoinput' | 'audioinput';
+  label: string;
+};
+
+/**
+ * Exclude types from documentation site, but we should still add doc comments
+ * @internal
+ */
+export interface SDKStreamVideoStore {
+  isCameraOnFrontFacingMode: boolean;
+  isVideoMuted: boolean;
+  isAudioMuted: boolean;
+  currentAudioDevice?: MediaDeviceInfo;
+  currentVideoDevice?: MediaDeviceInfo;
+  audioDevices: MediaDeviceInfo[];
+  videoDevices: MediaDeviceInfo[];
+}
+
+export const {
+  Provider: StreamVideoStoreProvider,
+  useStoreValue: useStreamVideoStoreValue,
+  useStoreSetState: useStreamVideoStoreSetState,
+} = createStoreContext<SDKStreamVideoStore>({
+  isCameraOnFrontFacingMode: false,
+  isVideoMuted: false,
+  isAudioMuted: false,
+  videoDevices: [],
+  audioDevices: [],
+  currentVideoDevice: undefined,
+  currentAudioDevice: undefined,
+});

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './StreamVideoContext';

package/src/hooks/index.ts

@@ -0,0 +1,10 @@
+export * from './useCallControls';
+export * from './useCallCycleEffect';
+export * from './useMutingState';
+export * from './useLocalVideoStream';
+export * from './useCallKeep';
+export * from './useIncallManager';
+export * from './usePublishMediaStreams';
+export * from './usePermissionRequest';
+export * from './usePermissionNotification';
+export * from './useCreateStreamVideoClient';