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

package/src/theme/constants.ts

@@ -0,0 +1,51 @@
+const ref = {
+  palette: {
+    green50: '#F6FEF9',
+    green100: '#E9F1FF',
+    green200: '#A6F2C6',
+    green300: '#79ECA9',
+    green400: '#4CE68C',
+    green500: '#20E070',
+    green600: '#19B359',
+    green700: '#138643',
+    green800: '#0D592C',
+    green900: '#062D16',
+    green950: '#041B0D',
+    blue50: '#F5FAFF',
+    blue100: '#E0F0FF',
+    blue200: '#CCDFFF',
+    blue300: '#669FFF',
+    blue400: '#337EFF',
+    blue500: '#005FFF',
+    blue600: '#004CCC',
+    blue700: '#003999',
+    blue800: '#002666',
+    blue900: '#00163D',
+    blue950: '#000D24',
+    red50: '#FFF5F5',
+    red100: '#FFE5E7',
+    red200: '#FF999F',
+    red300: '#FF666E',
+    red400: '#FF3742',
+    red500: '#FF000E',
+    red600: '#CC000B',
+    red700: '#990008',
+    red800: '#660006',
+    red900: '#330003',
+    red950: '#1F0002',
+    grey50: '#FFFFFF',
+    grey100: '#F7F7F8',
+    grey200: '#E9EAED',
+    grey300: '#DBDDE1',
+    grey400: '#B4B7BB',
+    grey500: '#72767E',
+    grey600: '#4C525C',
+    grey700: '#272A30',
+    grey800: '#1C1E22',
+    grey900: '#121416',
+    grey950: '#080707',
+  },
+};
+
+const { palette } = ref;
+export { palette };

package/src/theme/fonts.ts

@@ -0,0 +1,65 @@
+import { Platform } from 'react-native';
+import { FontStyle, FontTypes } from './types';
+
+export const fonts: Record<FontTypes, FontStyle> = Platform.select({
+  ios: {
+    heading4: {
+      fontSize: 34,
+      fontWeight: '400',
+    },
+    heading5: {
+      fontSize: 24,
+      fontWeight: '400',
+    },
+    heading6: {
+      fontSize: 20,
+      fontWeight: '500',
+    },
+    subtitle: {
+      fontSize: 16,
+      fontWeight: '400',
+    },
+    subtitleBold: {
+      fontSize: 16,
+      fontWeight: '500',
+    },
+    bodyBold: {
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    caption: {
+      fontSize: 10,
+      fontWeight: '400',
+    },
+  },
+  default: {
+    heading4: {
+      fontSize: 34,
+      fontWeight: '400',
+    },
+    heading5: {
+      fontSize: 24,
+      fontWeight: '400',
+    },
+    heading6: {
+      fontSize: 20,
+      fontWeight: '500',
+    },
+    subtitle: {
+      fontSize: 16,
+      fontWeight: '400',
+    },
+    subtitleBold: {
+      fontSize: 16,
+      fontWeight: '500',
+    },
+    bodyBold: {
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    caption: {
+      fontSize: 10,
+      fontWeight: '400',
+    },
+  },
+});

package/src/theme/icon.ts

@@ -0,0 +1,9 @@
+import { IconScheme } from './types';
+
+export const icon: IconScheme = {
+  xs: { height: 15, width: 15 },
+  sm: { height: 20, width: 20 },
+  md: { height: 25, width: 25 },
+  lg: { height: 30, width: 30 },
+  xl: { height: 35, width: 35 },
+};

package/src/theme/index.ts

@@ -0,0 +1,25 @@
+import { colors } from './colors';
+import { fonts } from './fonts';
+import { padding } from './padding';
+import { margin } from './margin';
+import { Theme } from './types';
+import { icon } from './icon';
+import { button } from './button';
+import { avatar } from './avatar';
+import { spacing } from './spacing';
+import { rounded } from './rounded';
+
+const { light, dark } = colors;
+
+export const theme: Theme = {
+  light,
+  dark,
+  fonts,
+  padding,
+  margin,
+  icon,
+  button,
+  avatar,
+  spacing,
+  rounded,
+};

package/src/theme/margin.ts

@@ -0,0 +1,9 @@
+import { MarginScheme } from './types';
+
+export const margin: MarginScheme = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+};

package/src/theme/padding.ts

@@ -0,0 +1,9 @@
+import { PaddingScheme } from './types';
+
+export const padding: PaddingScheme = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+};

package/src/theme/rounded.ts

@@ -0,0 +1,9 @@
+import { RoundedScheme } from './types';
+
+export const rounded: RoundedScheme = {
+  xs: 5,
+  sm: 10,
+  md: 15,
+  lg: 20,
+  xl: 30,
+};

package/src/theme/spacing.ts

@@ -0,0 +1,9 @@
+import { SpacingScheme } from './types';
+
+export const spacing: SpacingScheme = {
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 10,
+  xl: 12,
+};

package/src/theme/types.ts

@@ -0,0 +1,64 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export type ColorScheme = {
+  primary: string;
+  error: string;
+  info: string;
+  static_black: string;
+  static_white: string;
+  static_overlay: string;
+  static_grey: string;
+  disabled: string;
+  text_low_emphasis: string;
+  text_high_emphasis: string;
+  controls_bg: string;
+  borders: string;
+  overlay: string;
+  overlay_dark: string;
+  bars: string;
+  content_bg: string;
+};
+
+export type ColorType = Record<'light' | 'dark', ColorScheme>;
+
+export type FontTypes =
+  | 'heading4'
+  | 'heading5'
+  | 'heading6'
+  | 'subtitle'
+  | 'subtitleBold'
+  | 'caption'
+  | 'bodyBold';
+export type FontStyle = {
+  fontSize: TextStyle['fontSize'];
+  fontWeight: TextStyle['fontWeight'];
+};
+
+export type FontsScheme = Record<FontTypes, FontStyle>;
+
+type SizingTypes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type PaddingScheme = Record<SizingTypes, number>;
+
+export type MarginScheme = Record<SizingTypes, number>;
+
+export type IconScheme = Record<SizingTypes, StyleProp<ViewStyle>>;
+
+export type ButtonScheme = Record<SizingTypes, StyleProp<ViewStyle>>;
+
+export type AvatarScheme = Record<SizingTypes, number>;
+
+export type SpacingScheme = Record<SizingTypes, number>;
+
+export type RoundedScheme = Record<SizingTypes, number>;
+
+export type Theme = ColorType & {
+  fonts: FontsScheme;
+  padding: PaddingScheme;
+  margin: MarginScheme;
+  icon: IconScheme;
+  button: ButtonScheme;
+  avatar: AvatarScheme;
+  spacing: SpacingScheme;
+  rounded: RoundedScheme;
+};

package/src/utils/StreamVideoRN.ts

@@ -0,0 +1,35 @@
+import { StreamReaction } from '@stream-io/video-client';
+import { defaultEmojiReactions } from '../constants';
+
+type StreamReactionType = StreamReaction & {
+  icon: string | JSX.Element;
+};
+
+type StreamVideoConfig = {
+  /**
+   * Reactions that are to be supported in the app.
+   *
+   * Note: This is an array of reactions that is rendered in the Reaction list.
+   */
+  supportedReactions: StreamReactionType[];
+};
+
+const DEFAULT_STREAM_VIDEO_CONFIG = {
+  supportedReactions: defaultEmojiReactions,
+};
+
+export class StreamVideoRN {
+  /**
+   * Global config for StreamVideoRN.
+   */
+  static config: StreamVideoConfig = DEFAULT_STREAM_VIDEO_CONFIG;
+
+  /**
+   * Set global config for StreamVideoRN allows you to set wished CDN hosts for resizing images.
+   * This function accepts an config object that will be merged with the default config.
+   * @example StreamVideoRN.setConfig({ onOpenCallParticipantsInfoView: () => {} });
+   */
+  static setConfig(config: Partial<StreamVideoConfig>) {
+    this.config = { ...this.config, ...config };
+  }
+}

package/src/utils/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useAppStateListener';
+export * from './useDebouncedValue';
+export * from './usePrevious';

package/src/utils/hooks/useAppStateListener.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
+
+export const useAppStateListener = (
+  onForeground?: () => void,
+  onBackground?: () => void,
+) => {
+  const appStateRef = useRef(AppState.currentState);
+  const onForegroundRef = useRef(onForeground);
+  const onBackgroundRef = useRef(onBackground);
+
+  // setting refs to avoid passing the functions as dependencies to useEffect
+  onForegroundRef.current = onForeground;
+  onBackgroundRef.current = onBackground;
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      const prevAppState = appStateRef.current;
+      if (
+        prevAppState.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        onForegroundRef.current?.();
+      } else if (
+        prevAppState === 'active' &&
+        nextAppState.match(/inactive|background/)
+      ) {
+        onBackgroundRef.current?.();
+      }
+      appStateRef.current = nextAppState;
+    };
+    const subscription = AppState.addEventListener(
+      'change',
+      handleAppStateChange,
+    );
+
+    return () => {
+      // Following if-else logic is to support RN >= 0.65 and RN < 0.65 versions.
+      // https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#:~:text=EventEmitter%23removeSubscription%20is%20now%20deprecated.%20(cb6cbd12f8%20by%20%40yungsters)
+      if (subscription?.remove) {
+        subscription.remove();
+      } else {
+        // @ts-ignore
+        AppState.removeEventListener('change', handleAppStateChange);
+      }
+    };
+  }, []);
+};

package/src/utils/hooks/useDebouncedValue.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * this is a custom hook that takes a value and a delay and returns a debounced value
+ * @param {T} value
+ * @param {number} delay
+ * @returns {T}
+ */
+export function useDebouncedValue<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/utils/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const usePrevious = (value: any) => {
+  const valueRef = useRef(value);
+
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+
+  return valueRef.current;
+};

package/src/utils/index.ts

@@ -0,0 +1,45 @@
+import { theme } from '../theme';
+
+// Utility to join strings with commas and 'and'
+export const generateCallTitle = (
+  memberUserIds: string[],
+  totalMembersToShow?: number,
+) => {
+  const supportedAmountOfMemberUserIds = memberUserIds.slice(
+    0,
+    totalMembersToShow,
+  );
+  if (
+    totalMembersToShow &&
+    supportedAmountOfMemberUserIds.length < totalMembersToShow
+  ) {
+    return supportedAmountOfMemberUserIds.join(' and ');
+  }
+
+  const allMembersExceptLast = supportedAmountOfMemberUserIds.slice(0, -1);
+  const lastMember = supportedAmountOfMemberUserIds.slice(-1)[0];
+  return `${allMembersExceptLast.join(', ')}, and ${lastMember}`;
+};
+
+// Utility to truncate long strings
+export const generateParticipantTitle = (memberUserId: string) => {
+  return memberUserId.length > 15
+    ? memberUserId.slice(0, 15) + '...'
+    : memberUserId;
+};
+
+// Utility to get initials of a name
+export const getInitialsOfName = (name: string) => {
+  const names = name.split(' ');
+  let initials = names[0].substring(0, 1).toUpperCase();
+  if (names.length > 1) {
+    initials += names[names.length - 1].substring(0, 1).toUpperCase();
+  }
+  return initials;
+};
+
+export const muteStatusColor = (status: boolean) => {
+  return status ? theme.light.overlay_dark : theme.light.static_white;
+};
+
+export * from './StreamVideoRN';

package/src/utils/verifyAndroidBluetoothPermissions.ts

@@ -0,0 +1,31 @@
+import { Platform, PermissionsAndroid } from 'react-native';
+
+export const verifyAndroidBluetoothPermissions = async () => {
+  const shouldCheckForPermissions = Number(Platform.Version) >= 31;
+  if (!shouldCheckForPermissions) return true;
+  const getCheckPermissionPromise = () => {
+    return PermissionsAndroid.check(
+      PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,
+    );
+  };
+  const hasPermission = await getCheckPermissionPromise();
+  if (!hasPermission) {
+    const getRequestPermissionPromise = async () => {
+      const result = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,
+        {
+          buttonNegative: 'Deny',
+          buttonNeutral: 'Ask Me Later',
+          buttonPositive: 'Allow',
+          message:
+            'Permissions are required to route audio to bluetooth devices.',
+          title: 'Bluetooth connect Access',
+        },
+      ).then((status) => status === PermissionsAndroid.RESULTS.GRANTED);
+      return result;
+    };
+    const granted = await getRequestPermissionPromise();
+    return granted;
+  }
+  return true;
+};