@stream-io/video-react-native-sdk 0.0.1-alpha.185 → 0.0.1-alpha.187

package/dist/src/icons/Cross.d.ts

@@ -1,5 +1,6 @@
+import { SvgProps } from 'react-native-svg';
 type Props = {
     color: string;
-};
-export declare const Cross: ({ color }: Props) => JSX.Element;
+} & Pick<SvgProps, 'style'>;
+export declare const Cross: ({ color, style }: Props) => JSX.Element;
 export {};

package/dist/src/icons/Cross.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cross = void 0;
+const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = require("react-native-svg");
-const Cross = ({ color }) => (<react_native_svg_1.Svg viewBox="0 0 12 13">
+const Cross = ({ color, style }) => (<react_native_svg_1.Svg viewBox="0 0 12 13" style={style}>
     <react_native_svg_1.Path d="M 0.322153 11.8408 C 0.700083 12.2188 1.34168 12.21 1.71083 11.8408 L 5.99989 7.56055 L 10.2802 11.8408 C 10.6493 12.21 11.2909 12.2188 11.6688 11.8408 C 12.0468 11.4629 12.038 10.8213 11.6688 10.4521 L 7.38856 6.16309 L 11.6688 1.88281 C 12.038 1.51367 12.0468 0.87207 11.6688 0.494141 C 11.2909 0.116211 10.6493 0.125 10.2802 0.494141 L 5.99989 4.77441 L 1.71083 0.485352 C 1.34168 0.125 0.700083 0.116211 0.322153 0.494141 C -0.0557764 0.87207 -0.0469874 1.51367 0.322153 1.88281 L 4.60243 6.16309 L 0.322153 10.4521 C -0.0469874 10.8213 -0.0557764 11.4629 0.322153 11.8408 Z" fill={color}/>
   </react_native_svg_1.Svg>);
 exports.Cross = Cross;

package/dist/src/icons/Cross.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";;;AAAA,uDAA6C;AAMtC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACzC,CAAC,sBAAG,CAAC,OAAO,CAAC,WAAW,CACtB;IAAA,CAAC,uBAAI,CACH,CAAC,CAAC,okBAAokB,CACtkB,IAAI,CAAC,CAAC,KAAK,CAAC,EAEhB;EAAA,EAAE,sBAAG,CAAC,CACP,CAAC;AAPW,QAAA,KAAK,SAOhB"}
+{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAuD;AAMhD,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CAChD,CAAC,sBAAG,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACpC;IAAA,CAAC,uBAAI,CACH,CAAC,CAAC,okBAAokB,CACtkB,IAAI,CAAC,CAAC,KAAK,CAAC,EAEhB;EAAA,EAAE,sBAAG,CAAC,CACP,CAAC;AAPW,QAAA,KAAK,SAOhB"}

package/dist/src/icons/index.d.ts

@@ -11,7 +11,6 @@ export * from './Participants';
 export * from './ThreeDots';
 export * from './Pin';
 export * from './Spotlight';
-export * from './VideoOff';
 export * from './Cross';
 export * from './ScreenShare';
 export * from './ArrowRight';

package/dist/src/icons/index.js

@@ -27,7 +27,6 @@ __exportStar(require("./Participants"), exports);
 __exportStar(require("./ThreeDots"), exports);
 __exportStar(require("./Pin"), exports);
 __exportStar(require("./Spotlight"), exports);
-__exportStar(require("./VideoOff"), exports);
 __exportStar(require("./Cross"), exports);
 __exportStar(require("./ScreenShare"), exports);
 __exportStar(require("./ArrowRight"), exports);

package/dist/src/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icons/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B;AAC/B,wCAAsB;AACtB,2CAAyB;AACzB,0CAAwB;AACxB,8CAA4B;AAC5B,6CAA2B;AAC3B,0CAAwB;AACxB,+CAA6B;AAC7B,yCAAuB;AACvB,iDAA+B;AAC/B,8CAA4B;AAC5B,wCAAsB;AACtB,8CAA4B;AAC5B,6CAA2B;AAC3B,0CAAwB;AACxB,gDAA8B;AAC9B,+CAA6B;AAC7B,6CAA2B;AAC3B,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icons/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B;AAC/B,wCAAsB;AACtB,2CAAyB;AACzB,0CAAwB;AACxB,8CAA4B;AAC5B,6CAA2B;AAC3B,0CAAwB;AACxB,+CAA6B;AAC7B,yCAAuB;AACvB,iDAA+B;AAC/B,8CAA4B;AAC5B,wCAAsB;AACtB,8CAA4B;AAC5B,0CAAwB;AACxB,gDAA8B;AAC9B,+CAA6B;AAC7B,6CAA2B;AAC3B,kDAAgC"}

package/package.json

@@ -83,5 +83,5 @@
     "typedoc-plugin-markdown": "^3.15.3",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.1-alpha.185"
+  "version": "0.0.1-alpha.187"
 }

package/src/components/ActiveCall.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   useCall,
   useHasOngoingScreenShare,
@@ -14,6 +14,7 @@ import { usePermissionRequest } from '../hooks/usePermissionRequest';
 import { CallParticipantsBadge } from './CallParticipantsBadge';
 import { verifyAndroidBluetoothPermissions } from '../utils/verifyAndroidBluetoothPermissions';
 import { CallingState } from '@stream-io/video-client';
+import { Z_INDEX } from '../constants';
 
 /**
  * Props to be passed for the ActiveCall component.
@@ -56,7 +57,6 @@ export const ActiveCall = (props: ActiveCallProps) => {
 };
 
 const InnerActiveCall = (props: ActiveCallProps) => {
-  const [height, setHeight] = useState(0);
   const { mode = 'grid', chatButton } = props;
   const hasScreenShare = useHasOngoingScreenShare();
 
@@ -64,38 +64,22 @@ const InnerActiveCall = (props: ActiveCallProps) => {
   usePublishMediaStreams();
   usePermissionRequest();
 
-  const onLayout: React.ComponentProps<typeof View>['onLayout'] = (event) => {
-    setHeight(
-      // we're saving the CallControlsView height and subtracting an amount of padding.
-      // this is done to get the CallParticipants(Screen)View neatly underneath the
-      // rounded corners of the CallControlsView.
-      Math.trunc(event.nativeEvent.layout.height - theme.spacing.lg * 2),
-    );
-  };
-
   const showSpotLightModeView = mode === 'spotlight' || hasScreenShare;
 
   return (
     <View style={styles.container}>
-      <View style={styles.iconGroup}>
-        <CallParticipantsBadge />
-      </View>
-
-      <View
-        style={[
-          styles.callParticipantsWrapper,
-          { paddingBottom: height + theme.padding.lg },
-        ]}
-      >
+      <CallParticipantsBadge style={styles.iconGroup} />
+      <View style={[styles.callParticipantsWrapper]}>
         {showSpotLightModeView ? (
           <CallParticipantsSpotlightView />
         ) : (
           <CallParticipantsView />
         )}
       </View>
-      <View onLayout={onLayout} style={styles.callControlsWrapper}>
-        <CallControlsView chatButton={chatButton} />
-      </View>
+      <CallControlsView
+        style={styles.callControlsWrapper}
+        chatButton={chatButton}
+      />
     </View>
   );
 };
@@ -106,17 +90,17 @@ const styles = StyleSheet.create({
     backgroundColor: theme.light.static_grey,
   },
   callParticipantsWrapper: { flex: 1 },
-  callControlsWrapper: { position: 'absolute', bottom: 0, left: 0, right: 0 },
-  svgContainerStyle: {
-    zIndex: 2,
-    marginRight: theme.margin.md,
-    marginTop: theme.margin.sm,
+  callControlsWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: theme.padding.md,
   },
   iconGroup: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignSelf: 'flex-end',
-    alignItems: 'center',
-    marginRight: theme.margin.md,
+    position: 'absolute',
+    top: theme.padding.md,
+    right: theme.padding.sm,
+    zIndex: Z_INDEX.IN_FRONT,
   },
 });

package/src/components/CallControlsView.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ViewProps } from 'react-native';
 import { useCallControls } from '../hooks/useCallControls';
 import { CameraSwitch, Chat, PhoneDown, Reaction } from '../icons';
 import { CallControlsButton } from './CallControlsButton';
@@ -14,15 +14,16 @@ import { ReactionModal } from './ReactionsModal';
 import { ToggleAudioButton } from './ToggleAudioButton';
 import { ToggleVideoButton } from './ToggleVideoButton';
 import { A11yButtons } from '../constants/A11yLabels';
+import { Z_INDEX } from '../constants';
 
 type ChatButtonType = {
   onPressHandler: () => void;
   unreadBadgeCountIndicator?: number;
 };
 
-export type CallControlsViewType = {
+export interface CallControlsViewType extends Pick<ViewProps, 'style'> {
   chatButton?: ChatButtonType;
-};
+}
 
 /**
  * Shows a list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
@@ -32,7 +33,10 @@ export type CallControlsViewType = {
  * | :--- |
  * | ![call-controls-view](https://user-images.githubusercontent.com/25864161/217349666-af0f3278-393e-449d-b30e-2d1b196abe5e.png) |
  */
-export const CallControlsView = ({ chatButton }: CallControlsViewType) => {
+export const CallControlsView = ({
+  chatButton,
+  style,
+}: CallControlsViewType) => {
   const [isReactionModalActive, setIsReactionModalActive] =
     useState<boolean>(false);
 
@@ -61,7 +65,7 @@ export const CallControlsView = ({ chatButton }: CallControlsViewType) => {
   }, [setIsReactionModalActive]);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, style]}>
       <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
         <CallControlsButton
           onPress={onOpenReactionsModalHandler}
@@ -139,13 +143,8 @@ const UnreadBadeCountIndicator = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    paddingVertical: theme.padding.lg,
-    paddingHorizontal: theme.padding.md,
-    borderTopLeftRadius: theme.rounded.lg,
-    borderTopRightRadius: theme.rounded.lg,
-    backgroundColor: theme.light.controls_bg,
-    zIndex: 2,
+    justifyContent: 'space-between',
+    zIndex: Z_INDEX.IN_FRONT,
   },
   button: {
     // For iOS
@@ -168,7 +167,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 15,
     bottom: 20,
-    zIndex: 2,
+    zIndex: Z_INDEX.IN_FRONT,
     height: 30,
     width: 30,
     justifyContent: 'center',

package/src/components/CallParticipantsBadge.tsx

@@ -1,12 +1,14 @@
 import React, { useCallback, useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View, ViewProps } from 'react-native';
 import { Participants } from '../icons';
 import { useParticipantCount } from '@stream-io/video-react-bindings';
 import { theme } from '../theme';
 import { CallParticipantsInfoView } from './CallParticipantsInfoView';
 import { A11yButtons } from '../constants/A11yLabels';
+import { Z_INDEX } from '../constants';
 
-export const CallParticipantsBadge = () => {
+export interface ICallParticipantsBadge extends Pick<ViewProps, 'style'> {}
+export const CallParticipantsBadge = ({ style }: ICallParticipantsBadge) => {
   const participantCount = useParticipantCount();
   const [isCallParticipantsViewVisible, setIsCallParticipantsViewVisible] =
     useState<boolean>(false);
@@ -17,14 +19,14 @@ export const CallParticipantsBadge = () => {
 
   return (
     <Pressable
-      style={styles.participantIcon}
       onPress={onOpenCallParticipantsInfoView}
       accessibilityLabel={A11yButtons.PARTICIPANTS_INFO}
+      style={[styles.container, style]}
     >
       <View style={styles.badge}>
         <Text style={styles.badgeText}>{participantCount}</Text>
       </View>
-      <View style={[styles.svgContainerStyle, theme.icon.md]}>
+      <View style={theme.icon.md}>
         <Participants color={theme.light.static_white} />
       </View>
       <CallParticipantsInfoView
@@ -36,22 +38,19 @@ export const CallParticipantsBadge = () => {
 };
 
 const styles = StyleSheet.create({
-  participantIcon: {
-    zIndex: 2,
-  },
-  svgContainerStyle: {},
+  container: { padding: theme.padding.sm },
   badge: {
     backgroundColor: theme.light.text_low_emphasis,
     borderRadius: theme.rounded.xl,
-    padding: theme.padding.xs,
-    position: 'relative',
-    left: theme.spacing.lg,
-    top: theme.spacing.lg,
-    zIndex: 2,
+    paddingVertical: theme.padding.xs,
+    paddingHorizontal: theme.padding.sm,
+    position: 'absolute',
+    right: 0,
+    top: -theme.spacing.sm,
+    zIndex: Z_INDEX.IN_FRONT,
   },
   badgeText: {
     color: theme.light.static_white,
-    textAlign: 'center',
     ...theme.fonts.caption,
   },
 });

package/src/components/CallParticipantsInfoView.tsx

@@ -15,6 +15,7 @@ import {
   FlatList,
   Modal,
   Pressable,
+  Share,
   StyleSheet,
   Text,
   View,
@@ -26,6 +27,8 @@ import { CallParticipantOptions } from './CallParticipantsOptions';
 import { Avatar } from './Avatar';
 import { theme } from '../theme';
 import { A11yButtons } from '../constants/A11yLabels';
+import { Z_INDEX } from '../constants';
+import { palette } from '../theme/constants';
 
 type CallParticipantInfoViewType = {
   participant: StreamVideoParticipant;
@@ -83,17 +86,17 @@ const CallParticipantInfoItem = (props: CallParticipantInfoViewType) => {
       <View style={styles.icons}>
         {isScreenSharing && (
           <View style={[styles.svgContainerStyle, theme.icon.md]}>
-            <ScreenShare color={theme.light.info} />
+            <ScreenShare color={theme.dark.info} />
           </View>
         )}
         {isAudioMuted && (
           <View style={[styles.svgContainerStyle, theme.icon.sm]}>
-            <MicOff color={theme.light.error} />
+            <MicOff color={theme.dark.error} />
           </View>
         )}
         {isVideoMuted && (
           <View style={[styles.svgContainerStyle, theme.icon.sm]}>
-            <VideoSlash color={theme.light.error} />
+            <VideoSlash color={theme.dark.error} />
           </View>
         )}
         {!participantIsLocalParticipant && (
@@ -105,7 +108,7 @@ const CallParticipantInfoItem = (props: CallParticipantInfoViewType) => {
             ]}
           >
             <View style={[styles.svgContainerStyle, theme.icon.sm]}>
-              <ArrowRight color={theme.light.text_high_emphasis} />
+              <ArrowRight color={theme.dark.text_high_emphasis} />
             </View>
           </Restricted>
         )}
@@ -145,6 +148,17 @@ export const CallParticipantsInfoView = ({
     StreamVideoParticipant | undefined
   >(undefined);
   const call = useCall();
+  const inviteHandler = async () => {
+    try {
+      await Share.share({
+        url: `https://stream-calls-dogfood.vercel.app/join/${call?.id}`,
+        title: 'Stream Calls | Join Call',
+        message: `Join me on the call using this link https://stream-calls-dogfood.vercel.app/join/${call?.id}`,
+      });
+    } catch (error: any) {
+      console.log(error.message);
+    }
+  };
 
   const muteAllParticipantsHandler = async () => {
     try {
@@ -174,12 +188,15 @@ export const CallParticipantsInfoView = ({
 
   return (
     <Modal
-      animationType="slide"
-      transparent={true}
+      animationType="fade"
+      transparent
       visible={isCallParticipantsViewVisible}
       onRequestClose={onCloseCallParticipantsViewVisible}
     >
-      <View style={styles.container}>
+      <>
+        {/*independent background, needed due to desired opacity only
+         on background, exc. modal content*/}
+        <View style={styles.backDropBackground} />
         <View style={styles.content}>
           <View style={styles.header}>
             <View style={styles.leftHeaderElement} />
@@ -187,14 +204,18 @@ export const CallParticipantsInfoView = ({
               Participants ({participants.length})
             </Text>
             <Pressable
-              style={[styles.closeIcon, theme.icon.sm]}
               onPress={onCloseCallParticipantsViewVisible}
               accessibilityLabel={A11yButtons.EXIT_PARTICIPANTS_INFO}
+              style={styles.closePressable}
             >
-              <Cross color={theme.light.primary} />
+              <Cross color={theme.dark.primary} style={theme.icon.xs} />
             </Pressable>
           </View>
+          <FlatList data={participants} renderItem={renderItem} />
           <View style={styles.buttonGroup}>
+            <Pressable style={styles.button} onPress={inviteHandler}>
+              <Text style={styles.buttonText}>Invite</Text>
+            </Pressable>
             <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
               <Pressable
                 style={styles.button}
@@ -204,61 +225,77 @@ export const CallParticipantsInfoView = ({
               </Pressable>
             </Restricted>
           </View>
-          <FlatList data={participants} renderItem={renderItem} />
-          {selectedParticipant && (
-            <View style={[StyleSheet.absoluteFill, styles.modal]}>
-              <CallParticipantOptions
-                participant={selectedParticipant}
-                setSelectedParticipant={setSelectedParticipant}
-              />
-            </View>
-          )}
         </View>
-      </View>
+        <Modal
+          animationType="fade"
+          transparent
+          visible={!!selectedParticipant}
+          onRequestClose={() => setSelectedParticipant(undefined)}
+        >
+          <>
+            {/*independent background, needed due to desired opacity only
+         on background, exc. modal content*/}
+            <View style={styles.backDropBackground} />
+            <CallParticipantOptions
+              participant={selectedParticipant}
+              setSelectedParticipant={setSelectedParticipant}
+            />
+          </>
+        </Modal>
+      </>
     </Modal>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
+  backDropBackground: {
+    opacity: 0.75,
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: theme.dark.static_white,
+    zIndex: Z_INDEX.IN_BACK,
   },
   content: {
-    flex: 1,
-    backgroundColor: theme.light.bars,
+    zIndex: Z_INDEX.IN_FRONT,
+    backgroundColor: theme.dark.bars,
     borderRadius: theme.rounded.md,
     marginVertical: theme.margin.lg,
     marginHorizontal: theme.margin.md,
   },
   header: {
-    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingVertical: theme.padding.md,
-    width: '100%',
   },
   leftHeaderElement: {
     marginLeft: theme.margin.md,
   },
   headerText: {
     ...theme.fonts.bodyBold,
-    color: theme.light.text_high_emphasis,
+    color: theme.dark.text_high_emphasis,
   },
-  closeIcon: {
+  closePressable: {
+    padding: theme.padding.sm,
+    borderRadius: theme.rounded.xs,
     marginRight: theme.margin.md,
+    backgroundColor: palette.grey800,
+  },
+  buttonGroup: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: theme.padding.md,
+    paddingHorizontal: theme.padding.xs,
   },
-  buttonGroup: {},
   button: {
-    backgroundColor: theme.light.primary,
+    flex: 1,
+    backgroundColor: theme.dark.primary,
     borderRadius: theme.rounded.lg,
-    padding: theme.padding.md,
-    margin: theme.margin.lg,
+    padding: theme.padding.sm,
+    marginHorizontal: theme.margin.sm,
   },
   buttonText: {
     textAlign: 'center',
-    color: theme.light.static_white,
+    color: theme.dark.static_white,
     ...theme.fonts.subtitleBold,
   },
   participant: {
@@ -267,12 +304,12 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    borderBottomColor: theme.light.borders,
+    borderBottomColor: theme.dark.borders,
     borderBottomWidth: 1,
   },
   name: {
     marginLeft: theme.margin.sm,
-    color: theme.light.text_high_emphasis,
+    color: theme.dark.text_high_emphasis,
     ...theme.fonts.subtitleBold,
   },
   icons: {
@@ -287,6 +324,6 @@ const styles = StyleSheet.create({
   modal: {
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: theme.light.overlay,
+    backgroundColor: theme.dark.overlay,
   },
 });