@stream-io/video-react-native-sdk 1.3.7 → 1.4.0

package/src/icons/Reaction.tsx

@@ -7,7 +7,7 @@ type Props = {
 };
 
 export const Reaction = ({ color }: Props) => (
-  <Svg viewBox="0 0 22 20">
+  <Svg viewBox="0 0 22 20" width={22} height={20}>
     <Path
       fill={color}
       d="M 5.50033 8.16667 C 5.50033 7.40583 6.11449 6.79167 6.87533 6.79167 C 7.63616 6.79167 8.25033 7.40583 8.25033 8.16667 C 8.25033 8.9275 7.63616 9.54167 6.87533 9.54167 C 6.11449 9.54167 5.50033 8.9275 5.50033 8.16667 Z M 10.0837 15.5 C 12.2195 15.5 14.0345 14.1617 14.7678 12.2917 H 5.39949 C 6.13283 14.1617 7.94783 15.5 10.0837 15.5 Z M 13.292 9.54167 C 14.0528 9.54167 14.667 8.9275 14.667 8.16667 C 14.667 7.40583 14.0528 6.79167 13.292 6.79167 C 12.5312 6.79167 11.917 7.40583 11.917 8.16667 C 11.917 8.9275 12.5312 9.54167 13.292 9.54167 Z M 19.2503 0.375 H 17.417 V 2.20833 H 15.5837 V 4.04167 H 17.417 V 5.875 H 19.2503 V 4.04167 H 21.0837 V 2.20833 H 19.2503 V 0.375 Z M 17.417 10.4583 C 17.417 14.51 14.1353 17.7917 10.0837 17.7917 C 6.03199 17.7917 2.75033 14.51 2.75033 10.4583 C 2.75033 6.40667 6.03199 3.125 10.0837 3.125 C 11.422 3.125 12.6687 3.49167 13.7503 4.115 V 2.06167 C 12.6228 1.56667 11.3853 1.29167 10.0745 1.29167 C 5.01449 1.29167 0.916992 5.39833 0.916992 10.4583 C 0.916992 15.5183 5.01449 19.625 10.0745 19.625 C 15.1437 19.625 19.2503 15.5183 19.2503 10.4583 C 19.2503 9.49583 19.0945 8.57917 18.8195 7.70833 H 16.867 C 17.2153 8.56083 17.417 9.48667 17.417 10.4583 Z"

package/src/icons/ScreenShare.tsx

@@ -5,14 +5,20 @@ import { IconTestIds } from '../constants/TestIds';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const ScreenShare = ({ color }: Props) => {
+export const ScreenShare = ({ color, size }: Props) => {
   return (
-    <Svg viewBox="0 0 36 36" testID={IconTestIds.SCREEN_SHARE}>
+    <Svg
+      viewBox={'0 0 24 24'}
+      width={size}
+      height={size}
+      testID={IconTestIds.SCREEN_SHARE}
+    >
       <Path
         fill={color}
-        d="m25.407 1.718-14.814-.014a2.959 2.959 0 0 0-2.948 2.963v26.666a2.959 2.959 0 0 0 2.948 2.963h14.814a2.972 2.972 0 0 0 2.963-2.963V4.667a2.96 2.96 0 0 0-2.963-2.949Zm0 26.652H10.593V7.63h14.814v20.74Zm-6.222-8.563V22.4l4.741-4.43-4.74-4.414v2.518c-4.608.637-6.445 3.793-7.112 6.963 1.645-2.222 3.822-3.23 7.111-3.23Z"
+        d="M18.2964 1.01L8.29636 1C7.19636 1 6.29636 1.9 6.29636 3V6C6.29636 6.55 6.74636 7 7.29636 7C7.84636 7 8.29636 6.55 8.29636 6V5H18.2964V19H8.29636V18C8.29636 17.45 7.84636 17 7.29636 17C6.74636 17 6.29636 17.45 6.29636 18V21C6.29636 22.1 7.19636 23 8.29636 23H18.2964C19.3964 23 20.2964 22.1 20.2964 21V3C20.2964 1.9 19.3964 1.01 18.2964 1.01ZM11.2964 15C11.8464 15 12.2964 14.55 12.2964 14V9C12.2964 8.45 11.8464 8 11.2964 8H6.29636C5.74636 8 5.29636 8.45 5.29636 9C5.29636 9.55 5.74636 10 6.29636 10H8.88636L3.99636 14.89C3.60636 15.28 3.60636 15.91 3.99636 16.3C4.38636 16.69 5.01636 16.69 5.40636 16.3L10.2964 11.41V14C10.2964 14.55 10.7464 15 11.2964 15Z"
       />
     </Svg>
   );

package/src/icons/StopScreenShare.tsx

@@ -4,11 +4,12 @@ import { ColorValue } from 'react-native/types';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const StopScreenShare = ({ color }: Props) => {
+export const StopScreenShare = ({ color, size }: Props) => {
   return (
-    <Svg viewBox="0 0 25 25">
+    <Svg viewBox="0 0 25 25" width={size} height={size}>
       <Path
         fill={color}
         d="M21.478 19.1H3.47803V5H21.478V19.1ZM21.478 3H3.47803C2.37803 3 1.47803 3.9 1.47803 5V19C1.47803 20.1 2.37803 21 3.47803 21H21.478C22.578 21 23.478 20.1 23.478 19V5C23.478 3.9 22.578 3 21.478 3Z"

package/src/icons/Video.tsx

@@ -4,12 +4,13 @@ import { ColorValue } from 'react-native/types';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const Video = ({ color }: Props) => (
-  <Svg viewBox="0 0 29 19">
+export const Video = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 26 26'} width={size} height={size}>
     <Path
-      d="M4.725 18.635h11.741c2.411 0 3.795-1.35 3.795-3.717V3.958c0-2.366-1.295-3.716-3.705-3.716H4.726C2.403.242.93 1.592.93 3.958v11.038c0 2.355 1.395 3.639 3.794 3.639Zm17.177-5.603 3.817 3.281c.457.402.948.659 1.417.659.904 0 1.518-.648 1.518-1.63V3.59c0-.982-.614-1.63-1.518-1.63-.48 0-.96.257-1.417.659L21.902 5.9v7.132Z"
+      d="M19.8333 12.25V8.16667C19.8333 7.525 19.3083 7 18.6667 7H4.66667C4.025 7 3.5 7.525 3.5 8.16667V19.8333C3.5 20.475 4.025 21 4.66667 21H18.6667C19.3083 21 19.8333 20.475 19.8333 19.8333V15.75L22.505 18.4217C23.24 19.1567 24.5 18.6317 24.5 17.5933V10.395C24.5 9.35667 23.24 8.83167 22.505 9.56667L19.8333 12.25Z"
       fill={color}
     />
   </Svg>

package/src/icons/VideoSlash.tsx

@@ -5,12 +5,18 @@ import { IconTestIds } from '../constants/TestIds';
 
 type Props = {
   color: ColorValue;
+  size: number;
 };
 
-export const VideoSlash = ({ color }: Props) => (
-  <Svg viewBox="0 0 30 25" testID={IconTestIds.MUTED_VIDEO}>
+export const VideoSlash = ({ color, size }: Props) => (
+  <Svg
+    viewBox={'0 0 25 25'}
+    width={size}
+    height={size}
+    testID={IconTestIds.MUTED_VIDEO}
+  >
     <Path
-      d="M22.4886 24.1679C22.8345 24.5139 23.4037 24.5139 23.7497 24.1679C24.0845 23.8219 24.0957 23.2639 23.7497 22.9067L1.81892 0.998256C1.4841 0.652274 0.903739 0.652274 0.557757 0.998256C0.222935 1.34424 0.222935 1.9246 0.557757 2.25942L22.4886 24.1679ZM17.5555 3.35317H6.14927L21.1604 18.3643C21.2274 18.0407 21.2609 17.6166 21.2609 17.2259V7.06968C21.2609 4.70361 19.9662 3.35317 17.5555 3.35317ZM22.9015 16.1433L26.7073 19.4246C27.1761 19.8264 27.656 20.0831 28.1359 20.0831C29.0399 20.0831 29.6537 19.4358 29.6537 18.4536V6.70138C29.6537 5.71924 29.0399 5.07192 28.1359 5.07192C27.656 5.07192 27.1761 5.32861 26.7073 5.7304L22.9015 9.01165V16.1433ZM5.72517 21.746H18.0801L2.13142 5.79736C2.00865 6.10986 1.94169 6.61209 1.94169 7.10317V18.0853C1.94169 20.4402 3.31445 21.746 5.72517 21.746Z"
+      d="M21.7912 15.27V9.97999C21.7912 9.08999 20.7112 8.63999 20.0812 9.26999L17.7912 11.57V8.06999C17.7912 7.51999 17.3412 7.06999 16.7912 7.06999H11.1812L20.0912 15.98C20.7112 16.61 21.7912 16.16 21.7912 15.27ZM3.50124 3.62999C3.11124 4.01999 3.11124 4.64999 3.50124 5.03999L5.52124 7.06999H4.79124C4.24124 7.06999 3.79124 7.51999 3.79124 8.06999V18.07C3.79124 18.62 4.24124 19.07 4.79124 19.07H16.7912C17.0012 19.07 17.1812 18.99 17.3412 18.89L19.8212 21.37C20.2112 21.76 20.8412 21.76 21.2312 21.37C21.6212 20.98 21.6212 20.35 21.2312 19.96L4.91124 3.62999C4.52124 3.23999 3.89124 3.23999 3.50124 3.62999Z"
       fill={color}
     />
   </Svg>

package/src/icons/index.tsx

@@ -6,8 +6,6 @@ export * from './PhoneDown';
 export * from './Settings';
 export * from './Video';
 export * from './VideoSlash';
-export * from './Chat';
-export * from './Participants';
 export * from './ThreeDots';
 export * from './PinVertical';
 export * from './Spotlight';
@@ -21,3 +19,4 @@ export * from './StartStreamIcon';
 export * from './StopScreenShare';
 export * from './EndStreamIcon';
 export * from './LeaveStreamIcon';
+export * from './IconWrapper';

package/src/theme/colors.ts

@@ -1,49 +1,34 @@
 import { palette } from './constants';
+import { ColorScheme } from './types';
 
-const opacityToHex = (opacity: number) => {
-  return Math.round(opacity * 255)
-    .toString(16)
-    .padStart(2, '0');
-};
+const colors: ColorScheme = {
+  primary: palette.primary100,
+  secondary: palette.neutral90,
+  success: palette.success100,
+  warning: palette.warning100,
+
+  buttonPrimary: palette.primary100,
+  buttonSecondary: palette.neutral90,
+  buttonSuccess: palette.success100,
+  buttonWarning: palette.warning100,
+  buttonDisabled: palette.primary180,
+
+  iconPrimary: palette.neutral0,
+  iconSecondary: palette.primary100,
+  iconSuccess: palette.success100,
+  iconWarning: palette.warning100,
+
+  sheetPrimary: palette.neutral120,
+  sheetSecondary: palette.neutral110,
+  sheetTertiary: palette.neutral90,
+  sheetOverlay: palette.overlay,
 
-const colors = {
-  primary: palette.blue500,
-  error: palette.red400,
-  info: palette.green500,
-  static_black: palette.grey950,
-  static_white: palette.grey50,
-  static_overlay: palette.grey950 + opacityToHex(0.85),
-  static_grey: palette.grey700,
-  disabled: palette.grey600,
-  text_low_emphasis: palette.grey500,
-  text_high_emphasis: palette.grey950,
-  controls_bg: palette.grey50,
-  borders: palette.grey300,
-  overlay: palette.grey950 + opacityToHex(0.4),
-  overlay_dark: palette.grey950 + opacityToHex(0.6),
-  bars: palette.grey50,
-  content_bg: palette.grey950 + opacityToHex(0.05),
-  dark_gray: palette.grey800,
+  textPrimary: palette.neutral0,
+  textSecondary: palette.neutral30,
 };
 
-const darkThemeColors = {
-  primary: palette.blue500,
-  error: palette.red400,
-  info: palette.green500,
-  static_black: palette.grey950,
-  static_white: palette.grey50,
-  static_overlay: palette.grey950 + opacityToHex(0.85),
-  static_grey: palette.grey700,
-  disabled: palette.grey600,
-  text_low_emphasis: palette.grey500,
-  text_high_emphasis: palette.grey50,
-  controls_bg: palette.grey900,
-  borders: palette.grey700,
-  overlay: palette.grey950 + opacityToHex(0.4),
-  overlay_dark: palette.grey50 + opacityToHex(0.6),
-  bars: palette.grey900,
-  content_bg: palette.grey950 + opacityToHex(0.05),
-  dark_gray: palette.grey800,
+const colorPalette = {
+  colors,
 };
 
-export { colors, darkThemeColors };
+export { colorPalette, colors };

package/src/theme/constants.ts

@@ -1,49 +1,56 @@
 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',
+    primary100: '#005fff',
+    primary150: '#123d82',
+    primary180: '#1b2c43',
+    primary20: '#ccdfff',
+    primary70: '#4c8fff',
+
+    secondary100: '#69e5f6',
+    secondary140: '#448592',
+    secondary180: '#263942',
+    secondary20: '#f0fcfe',
+    secondary60: '#a5effa',
+
+    tertiary100: '#b38af8',
+    tertiary170: '#4b446b',
+    tertiary190: '#2d3042',
+    tertiary20: '#f7f3fe',
+    tertiary60: '#d1b9fb',
+
+    success100: '#00e2a1',
+    success150: '#12715c',
+    success190: '#1d2f34',
+    success20: '#e5fcf6',
+    success60: '#66eec7',
+
+    warning100: '#dc433b',
+    warning150: '#7d3535',
+    warning190: '#31292f',
+    warning20: '#f8d9d8',
+    warning70: '#e77b76',
+
+    caution100: '#ffd646',
+    caution150: '#786c38',
+    caution180: '#353830',
+    caution20: '#fffbec',
+    caution60: '#ffe690',
+
+    neutral0: '#eff0f1',
+    neutral10: '#e3e4e5',
+    neutral100: '#0d1721',
+    neutral110: '#101213',
+    neutral120: '#000000',
+    neutral20: '#caccce',
+    neutral30: '#b0b4b7',
+    neutral40: '#979ca0',
+    neutral50: '#7e8389',
+    neutral60: '#656b72',
+    neutral70: '#4c535b',
+    neutral80: '#323b44',
+    neutral90: '#19232d',
+
+    overlay: '#0c0d0ea6',
   },
 };
 

package/src/theme/index.ts

@@ -1,9 +1,2 @@
-import { colors, darkThemeColors } from './colors';
-import { Theme } from './types';
-
-export const colorPallet: Theme = {
-  light: colors,
-  dark: darkThemeColors,
-};
-
 export * from './theme';
+export * from './colors';

package/src/theme/theme.ts

@@ -1,32 +1,38 @@
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native/types';
 import { colors } from './colors';
-import { ColorScheme, FontStyle, FontTypes } from './types';
+import {
+  ColorScheme,
+  DimensionType,
+  FontStyle,
+  FontTypes,
+  Insets,
+} from './types';
+import { ColorValue } from 'react-native';
 
 export type Theme = {
   variants: {
-    buttonSizes: {
-      xs: number;
-      sm: number;
-      md: number;
-      lg: number;
-      xl: number;
-    };
-    iconSizes: {
-      xs: number;
-      sm: number;
-      md: number;
-      lg: number;
-      xl: number;
-    };
-    avatarSizes: {
-      xs: number;
-      sm: number;
-      md: number;
-      lg: number;
-      xl: number;
-    };
+    buttonSizes: DimensionType;
+    roundButtonSizes: DimensionType;
+    iconSizes: DimensionType;
+    avatarSizes: DimensionType;
+    fontSizes: DimensionType;
+    spacingSizes: DimensionType;
+    borderRadiusSizes: DimensionType;
+    insets: Insets;
   };
   typefaces: Record<FontTypes, FontStyle>;
+  defaults: {
+    color: ColorValue;
+    backgroundColor: ColorValue;
+    margin: number;
+    padding: number;
+    fontSize: number;
+    iconSize: number;
+    fontWeight: TextStyle['fontWeight'];
+    borderRadius: ViewStyle['borderRadius'];
+    borderColor: ColorValue;
+    borderWidth: ViewStyle['borderWidth'];
+  };
   colors: ColorScheme;
   avatar: {
     container: ViewStyle;
@@ -171,15 +177,6 @@ export type Theme = {
     buttonGroup: ViewStyle;
     deviceControlButtons: ViewStyle;
   };
-  callTopView: {
-    container: ViewStyle;
-    content: ViewStyle;
-    backIconContainer: ViewStyle;
-    leftElement: ViewStyle;
-    centerElement: ViewStyle;
-    rightElement: ViewStyle;
-    title: TextStyle;
-  };
   userInfo: {
     container: ViewStyle;
     avatarGroup: ViewStyle;
@@ -279,10 +276,27 @@ export type Theme = {
     buttonIcon: ViewStyle;
     buttonText: TextStyle;
   };
+
+  // Index signature for additional dynamic properties
+  [component: string]: any;
 };
 
 export const defaultTheme: Theme = {
   variants: {
+    roundButtonSizes: {
+      xs: 16,
+      sm: 24,
+      md: 36,
+      lg: 44,
+      xl: 56,
+    },
+    borderRadiusSizes: {
+      xs: 4,
+      sm: 8,
+      md: 16,
+      lg: 24,
+      xl: 32,
+    },
     buttonSizes: {
       xs: 40,
       sm: 50,
@@ -304,6 +318,26 @@ export const defaultTheme: Theme = {
       lg: 160,
       xl: 180,
     },
+    spacingSizes: {
+      xs: 4,
+      sm: 8,
+      md: 16,
+      lg: 24,
+      xl: 32,
+    },
+    fontSizes: {
+      xs: 8,
+      sm: 12,
+      md: 16,
+      lg: 20,
+      xl: 24,
+    },
+    insets: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
   },
   typefaces: {
     heading4: {
@@ -335,6 +369,18 @@ export const defaultTheme: Theme = {
       fontWeight: '400',
     },
   },
+  defaults: {
+    color: colors.primary,
+    backgroundColor: colors.sheetPrimary,
+    margin: 10,
+    padding: 10,
+    fontSize: 16,
+    fontWeight: '500',
+    borderRadius: 32,
+    iconSize: 28,
+    borderColor: colors.buttonPrimary,
+    borderWidth: 1,
+  },
   colors: colors,
   avatar: {
     container: {},
@@ -483,15 +529,6 @@ export const defaultTheme: Theme = {
     deviceControlButtons: {},
   },
   ringingCallContent: { container: {} },
-  callTopView: {
-    container: {},
-    content: {},
-    backIconContainer: {},
-    leftElement: {},
-    centerElement: {},
-    rightElement: {},
-    title: {},
-  },
   userInfo: {
     container: {},
     avatarGroup: {},

package/src/theme/types.ts

@@ -1,30 +1,39 @@
 import { ColorValue, TextStyle } from 'react-native';
 
-// TODO: check if this is used somewhere and remove if not
+/**
+ * ColorScheme defines the complete color palette for the application's theme.
+ * It provides a centralized type definition for maintaining consistent colors
+ * across different UI components and contexts.
+ */
 export type ColorScheme = {
   primary: ColorValue;
-  error: ColorValue;
-  info: ColorValue;
-  static_black: ColorValue;
-  static_white: ColorValue;
-  static_overlay: ColorValue;
-  static_grey: ColorValue;
-  disabled: ColorValue;
-  text_low_emphasis: ColorValue;
-  text_high_emphasis: ColorValue;
-  controls_bg: ColorValue;
-  borders: ColorValue;
-  overlay: ColorValue;
-  overlay_dark: ColorValue;
-  bars: ColorValue;
-  content_bg: ColorValue;
-  dark_gray: ColorValue;
+  secondary: ColorValue;
+  success: ColorValue;
+  warning: ColorValue;
+
+  buttonPrimary: ColorValue;
+  buttonSecondary: ColorValue;
+  buttonSuccess: ColorValue;
+  buttonWarning: ColorValue;
+  buttonDisabled: ColorValue;
+
+  iconPrimary: ColorValue;
+  iconSecondary: ColorValue;
+  iconSuccess: ColorValue;
+  iconWarning: ColorValue;
+
+  sheetPrimary: ColorValue;
+  sheetSecondary: ColorValue;
+  sheetTertiary: ColorValue;
+  sheetOverlay: ColorValue;
+
+  textPrimary: ColorValue;
+  textSecondary: ColorValue;
+
   // allow any other color
   [key: string]: ColorValue;
 };
 
-export type ColorType = Record<'light' | 'dark', ColorScheme>;
-
 export type FontTypes =
   | 'heading4'
   | 'heading5'
@@ -38,6 +47,48 @@ export type FontStyle = {
   fontWeight: TextStyle['fontWeight'];
 };
 
-export type FontsScheme = Record<FontTypes, FontStyle>;
+/**
+ * DimensionType defines a set of standardized size values for component scaling.
+ * Each property represents a size tier from extra small (xs) to extra large (xl).
+ *
+ * @property xs - Extra small size (typically used for minimal spacing or compact elements)
+ * @property sm - Small size (used for tight but readable spacing)
+ * @property md - Medium size (default size for most components)
+ * @property lg - Large size (used for emphasized or prominent elements)
+ * @property xl - Extra large size (used for maximum emphasis or touch targets)
+ *
+ * Common use cases:
+ * - Padding and margin values
+ * - Icon sizes
+ * - Button dimensions
+ * - Component spacing
+ */
+export type DimensionType = {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+};
 
-export type Theme = ColorType;
+/**
+ * Insets represent spacing measurements for the four edges of a component or screen.
+ *
+ * @property top - Distance from the upper edge (e.g., status bar, notch)
+ * @property right - Distance from the right edge (e.g., curved screen edges)
+ * @property bottom - Distance from the bottom edge (e.g., home indicator, navigation bar)
+ * @property left - Distance from the left edge (e.g., curved screen edges)
+ *
+ * Common use cases:
+ * - Safe area padding to avoid device UI elements
+ * - Component internal padding
+ * - Layout margin spacing
+ */
+export type Insets = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};
+
+export type FontsScheme = Record<FontTypes, FontStyle>;

package/src/translations/en.json

@@ -11,7 +11,7 @@
   "End Stream": "End Stream",
   "Leave Stream": "Leave Stream",
   "Live": "Live",
-  "Before Joining": "Before Joining",
+  "Before joining": "Before joining",
   "Setup your audio and video": "Setup your audio and video",
   "Setup your audio": "Setup your audio",
   "You are first to Join the call.": "You are first to Join the call.",
@@ -23,5 +23,9 @@
   "{{ numberOfParticipants }} participant(s) are in the call.": "{{ numberOfParticipants }} participant(s) are in the call.",
   "You are about to join a call with id {{ callId }}.": "You are about to join a call with id {{ callId }}.",
   "Preparing call": "Preparing call",
-  "You have left the call": "You have left the call"
-}
+  "You have left the call": "You have left the call",
+  "You are about to join a call.": "You are about to join a call.",
+  "Currently there are no other participants in the call.": "Currently there are no other participants in the call.",
+  "There is {{numberOfParticipants}} more person in the call.": "There is {{numberOfParticipants}} more person in the call.",
+  "There are {{numberOfParticipants}} more people in the call.": "There are {{numberOfParticipants}} more people in the call."
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = '1.3.7';
+export const version = '1.4.0';