@stream-io/video-react-native-sdk 0.0.1-alpha.366 → 0.0.1-alpha.368

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

@@ -1 +0,0 @@
-{"version":3,"file":"Pin.js","sourceRoot":"","sources":["../../../src/icons/Pin.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAA6C;AAMtC,MAAM,GAAG,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACvC,CAAC,sBAAG,CAAC,OAAO,CAAC,WAAW,CACtB;IAAA,CAAC,uBAAI,CACH,IAAI,CAAC,CAAC,KAAK,CAAC,CACZ,QAAQ,CAAC,SAAS,CAClB,QAAQ,CAAC,SAAS,CAClB,CAAC,CAAC,wlCAAwlC,EAE9lC;EAAA,EAAE,sBAAG,CAAC,CACP,CAAC;AATW,QAAA,GAAG,OASd"}

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

@@ -1,5 +0,0 @@
-type Props = {
-    color: string;
-};
-export declare const VideoDisabled: ({ color }: Props) => JSX.Element;
-export {};

package/dist/src/icons/VideoDisabled.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoDisabled = void 0;
-const react_1 = __importDefault(require("react"));
-const react_native_svg_1 = require("react-native-svg");
-const VideoDisabled = ({ color }) => (<react_native_svg_1.Svg viewBox="0 0 24 24">
-    <react_native_svg_1.Path d="M 22.1126 16.2238 L 19.1546 13.6686 V 8.37994 L 22.1126 5.82471 L 22.1127 5.82476 L 22.1205 5.81781 C 22.4413 5.53481 22.6269 5.49515 22.686 5.49515 C 22.8267 5.49515 22.8809 5.53948 22.9048 5.56519 C 22.9344 5.59687 23 5.69295 23 5.91262 V 16.1359 C 23 16.3556 22.9344 16.4517 22.9048 16.4833 C 22.8809 16.5091 22.8267 16.5534 22.686 16.5534 C 22.634 16.5534 22.4383 16.5111 22.1205 16.2307 L 22.1206 16.2307 L 22.1126 16.2238 Z M 13.4493 18 H 3.28502 C 2.41817 18 1.87542 17.7686 1.55341 17.4618 C 1.23884 17.162 1 16.6616 1 15.835 V 6.23301 C 1 5.4144 1.24841 4.88792 1.58386 4.5637 C 1.92432 4.23463 2.47262 4 3.28502 4 H 13.5266 C 14.3853 4 14.898 4.23821 15.1995 4.54532 C 15.5041 4.85542 15.7343 5.37926 15.7343 6.23301 V 15.767 C 15.7343 16.6029 15.4949 17.126 15.1733 17.4423 C 14.8492 17.7609 14.3088 18 13.4493 18 Z" fill={'none'} stroke={color} strokeWidth={2}/>
-    <react_native_svg_1.Path d="M 5.79311 7.27924 C 5.38794 6.90692 4.73102 6.90692 4.32585 7.27924 C 3.92068 7.65156 3.92068 8.25521 4.32585 8.62753 L 6.90766 11 L 4.32586 13.3725 C 3.92069 13.7448 3.92069 14.3484 4.32586 14.7208 C 4.73103 15.0931 5.38795 15.0931 5.79312 14.7208 L 8.37492 12.3483 L 10.9567 14.7208 C 11.3619 15.0931 12.0188 15.0931 12.424 14.7208 C 12.8291 14.3484 12.8291 13.7448 12.424 13.3725 L 9.84217 11 L 12.424 8.62754 C 12.8291 8.25521 12.8291 7.65156 12.424 7.27924 C 12.0188 6.90692 11.3619 6.90692 10.9567 7.27924 L 8.37492 9.65171 L 5.79311 7.27924 Z" fill={color} fillRule="evenodd" clipRule="evenodd"/>
-  </react_native_svg_1.Svg>);
-exports.VideoDisabled = VideoDisabled;
-//# sourceMappingURL=VideoDisabled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"VideoDisabled.js","sourceRoot":"","sources":["../../../src/icons/VideoDisabled.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAA6C;AAMtC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACjD,CAAC,sBAAG,CAAC,OAAO,CAAC,WAAW,CACtB;IAAA,CAAC,uBAAI,CACH,CAAC,CAAC,4zBAA4zB,CAC9zB,IAAI,CAAC,CAAC,MAAM,CAAC,CACb,MAAM,CAAC,CAAC,KAAK,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CAAC,EAEjB;IAAA,CAAC,uBAAI,CACH,CAAC,CAAC,uiBAAuiB,CACziB,IAAI,CAAC,CAAC,KAAK,CAAC,CACZ,QAAQ,CAAC,SAAS,CAClB,QAAQ,CAAC,SAAS,EAEtB;EAAA,EAAE,sBAAG,CAAC,CACP,CAAC;AAfW,QAAA,aAAa,iBAexB"}

package/src/components/call/CallControls.tsx

@@ -1,195 +0,0 @@
-import React, { useState } from 'react';
-import {
-  LayoutChangeEvent,
-  LayoutRectangle,
-  StyleSheet,
-  Text,
-  View,
-  ViewProps,
-} from 'react-native';
-import { Chat, Reaction } from '../../icons';
-import { CallControlsButton } from '../utility/internal/CallControlsButton';
-import { theme } from '../../theme';
-import { OwnCapability } from '@stream-io/video-client';
-import { Restricted } from '@stream-io/video-react-bindings';
-import { ToggleAudioButton } from '../utility/internal/ToggleAudioButton';
-import { ToggleVideoButton } from '../utility/internal/ToggleVideoButton';
-import { ButtonTestIds, ComponentTestIds } from '../../constants/TestIds';
-import { Z_INDEX } from '../../constants';
-import { ToggleCameraFaceButton } from '../utility/internal/ToggleCameraFaceButton';
-import {
-  HangUpCallButton,
-  HangUpCallButtonProps,
-} from '../utility/internal/HangupCallButton';
-import { ReactionsPicker } from './ReactionsPicker';
-import { StreamVideoRN } from '../../utils';
-
-/**
- * The props for the Chat Button in the Call Controls.
- */
-type ChatButtonProps = {
-  /**
-   * Handler to be called when the chat button is pressed.
-   * @returns void
-   */
-  onPressHandler: () => void;
-  /**
-   * The unread message indicator to be displayed above on the Chat button.
-   */
-  unreadBadgeCountIndicator?: number;
-};
-
-/**
- * Props for the CallControls Component.
- */
-export interface CallControlsType extends Pick<ViewProps, 'style'> {
-  /**
-   * Chat Button Props to be passed as an object
-   */
-  chatButton?: ChatButtonProps;
-  /**
-   * Hang up call button props to be passed as an object
-   */
-  hangUpCallButton?: HangUpCallButtonProps;
-}
-
-/**
- * A list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
- * the user can trigger within an active call.
- */
-export const CallControls = ({
-  chatButton,
-  hangUpCallButton,
-  style,
-}: CallControlsType) => {
-  const [showReactionsPicker, setShowReactionsPicker] =
-    useState<boolean>(false);
-
-  const [reactionsButtonLayoutRectangle, setReactionsButtonLayoutRectangle] =
-    useState<LayoutRectangle>();
-
-  // This is for the reaction popup
-  const onReactionsButtonLayout = (event: LayoutChangeEvent) => {
-    const layout = event.nativeEvent.layout;
-    setReactionsButtonLayoutRectangle((prev) => {
-      if (
-        prev &&
-        prev.width === layout.width &&
-        prev.height === layout.height &&
-        prev.x === layout.x &&
-        prev.y === layout.y
-      ) {
-        return prev;
-      }
-      return layout;
-    });
-  };
-
-  return (
-    <View style={[styles.container, style]}>
-      <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
-        <CallControlsButton
-          testID={ButtonTestIds.REACTION}
-          onPress={() => {
-            setShowReactionsPicker(true);
-          }}
-          color={theme.light.static_white}
-          style={styles.button}
-          onLayout={onReactionsButtonLayout}
-        >
-          <Reaction color={theme.light.static_black} />
-        </CallControlsButton>
-      </Restricted>
-      {chatButton && (
-        <View>
-          <CallControlsButton
-            color={theme.light.static_white}
-            onPress={chatButton.onPressHandler}
-            svgContainerStyle={styles.svgContainerStyle}
-            style={styles.button}
-          >
-            <UnreadBadgeCountIndicator
-              count={chatButton.unreadBadgeCountIndicator}
-            />
-            <Chat color={theme.light.static_black} />
-          </CallControlsButton>
-        </View>
-      )}
-      <ToggleVideoButton />
-      <ToggleAudioButton />
-      <ToggleCameraFaceButton />
-      <HangUpCallButton onPressHandler={hangUpCallButton?.onPressHandler} />
-
-      {showReactionsPicker && (
-        <ReactionsPicker
-          reactions={StreamVideoRN.getConfig().supportedReactions}
-          reactionsButtonLayoutRectangle={reactionsButtonLayoutRectangle}
-          onRequestedClose={() => {
-            setShowReactionsPicker(false);
-          }}
-        />
-      )}
-    </View>
-  );
-};
-
-const UnreadBadgeCountIndicator = ({
-  count,
-}: {
-  count: ChatButtonProps['unreadBadgeCountIndicator'];
-}) => {
-  // Don't show badge if count is 0 or undefined
-  if (!count) {
-    return null;
-  }
-
-  return (
-    <View
-      testID={ComponentTestIds.CHAT_UNREAD_BADGE_COUNT_INDICATOR}
-      style={styles.chatBadge}
-    >
-      <Text style={styles.chatBadgeText}>{count}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: theme.padding.sm,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    zIndex: Z_INDEX.IN_FRONT,
-    backgroundColor: theme.light.static_black,
-  },
-  button: {
-    // For iOS
-    shadowOffset: {
-      width: 0,
-      height: 6,
-    },
-    shadowOpacity: 0.37,
-    shadowRadius: 7.49,
-
-    // For android
-    elevation: 6,
-  },
-  svgContainerStyle: {
-    paddingTop: theme.padding.xs,
-  },
-  chatBadge: {
-    backgroundColor: theme.light.error,
-    borderRadius: theme.rounded.xl,
-    position: 'absolute',
-    left: 15,
-    bottom: 20,
-    zIndex: Z_INDEX.IN_FRONT,
-    height: 30,
-    width: 30,
-    justifyContent: 'center',
-  },
-  chatBadgeText: {
-    color: theme.light.static_white,
-    textAlign: 'center',
-    ...theme.fonts.bodyBold,
-  },
-});

package/src/components/participants/ParticipantsInfoBadge.tsx

@@ -1,70 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import {
-  Pressable,
-  PressableProps,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import { Participants } from '../../icons';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { theme } from '../../theme';
-import { ButtonTestIds } from '../../constants/TestIds';
-import { Z_INDEX } from '../../constants';
-import { ParticipantsInfoList } from './ParticipantsInfoList';
-
-export type ParticipantsInfoBadgeProps = Pick<PressableProps, 'style'>;
-
-/**
- * Badge that shows the number of participants in the call.
- * When pressed, it opens the ParticipantsInfoList.
- * @param style
- */
-export const ParticipantsInfoBadge = ({
-  style,
-}: ParticipantsInfoBadgeProps) => {
-  const { useParticipantCount } = useCallStateHooks();
-  const participantCount = useParticipantCount();
-  const [isCallParticipantsVisible, setIsCallParticipantsVisible] =
-    useState<boolean>(false);
-
-  const onOpenCallParticipantsInfo = useCallback(() => {
-    setIsCallParticipantsVisible(true);
-  }, [setIsCallParticipantsVisible]);
-
-  return (
-    <Pressable
-      onPress={onOpenCallParticipantsInfo}
-      testID={ButtonTestIds.PARTICIPANTS_INFO}
-      style={style}
-    >
-      <View style={styles.badge}>
-        <Text style={styles.badgeText}>{participantCount}</Text>
-      </View>
-      <View style={theme.icon.md}>
-        <Participants color={theme.light.static_white} />
-      </View>
-      <ParticipantsInfoList
-        isCallParticipantsInfoVisible={isCallParticipantsVisible}
-        setIsCallParticipantsInfoVisible={setIsCallParticipantsVisible}
-      />
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  badge: {
-    backgroundColor: theme.light.text_low_emphasis,
-    borderRadius: theme.rounded.xl,
-    paddingVertical: theme.padding.xs,
-    paddingHorizontal: theme.padding.sm,
-    zIndex: Z_INDEX.IN_FRONT,
-    top: theme.spacing.sm,
-    left: theme.spacing.xl,
-  },
-  badgeText: {
-    color: theme.light.static_white,
-    textAlign: 'center',
-    ...theme.fonts.caption,
-  },
-});

package/src/components/participants/ParticipantsInfoList.tsx

@@ -1,319 +0,0 @@
-import {
-  OwnCapability,
-  SfuModels,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
-import {
-  Restricted,
-  useCall,
-  useCallStateHooks,
-  useConnectedUser,
-  useI18n,
-} from '@stream-io/video-react-bindings';
-import {
-  Alert,
-  FlatList,
-  Modal,
-  Pressable,
-  SafeAreaView,
-  Share,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {
-  ArrowRight,
-  Cross,
-  MicOff,
-  ScreenShare,
-  VideoSlash,
-} from '../../icons';
-import React, { useCallback, useState } from 'react';
-import { generateParticipantTitle } from '../../utils';
-import { ParticipantActions } from './internal/ParticipantActions';
-import { Avatar } from '../utility/Avatar';
-import { theme } from '../../theme';
-import { ButtonTestIds, ComponentTestIds } from '../../constants/TestIds';
-import { Z_INDEX } from '../../constants';
-import { palette } from '../../theme/constants';
-
-export interface ParticipantsInfoListProps {
-  /**
-   * Boolean that decides whether the CallParticipantsInfo modal should be open or not.
-   */
-  isCallParticipantsInfoVisible: boolean;
-  /**
-   * SetState function to set the value of the boolean field `isCallParticipantsVisible` depending upon whether the CallParticipantsInfo modal should be open or not.
-   */
-  setIsCallParticipantsInfoVisible: React.Dispatch<
-    React.SetStateAction<boolean>
-  >;
-}
-
-/**
- * A component that shows a list of participants in the call and their information.
- * their mute states, video states, screen share states, etc.
- * Mute all participants, invite participants, etc.
- **/
-export const ParticipantsInfoList = ({
-  isCallParticipantsInfoVisible,
-  setIsCallParticipantsInfoVisible,
-}: ParticipantsInfoListProps) => {
-  const { useParticipants } = useCallStateHooks();
-  const participants = useParticipants();
-  const { t } = useI18n();
-  const [selectedParticipant, setSelectedParticipant] = useState<
-    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 {
-      await call?.muteAllUsers('audio');
-      Alert.alert('Users Muted Successfully');
-    } catch (error) {
-      console.log('Error muting users', error);
-    }
-  };
-
-  const onCloseCallParticipantsVisible = () => {
-    setIsCallParticipantsInfoVisible(false);
-  };
-
-  const renderItem = useCallback(
-    ({ item }: { item: StreamVideoParticipant }) => {
-      return (
-        <ParticipantInfoItem
-          key={item.sessionId}
-          participant={item}
-          setSelectedParticipant={setSelectedParticipant}
-        />
-      );
-    },
-    [],
-  );
-
-  return (
-    <Modal
-      testID={ComponentTestIds.PARTICIPANTS_INFO}
-      animationType="fade"
-      transparent
-      visible={isCallParticipantsInfoVisible}
-      onRequestClose={onCloseCallParticipantsVisible}
-    >
-      <>
-        {/*independent background, needed due to desired opacity only
-         on background, exc. modal content*/}
-        <SafeAreaView style={styles.backDropBackground}>
-          <View style={styles.content}>
-            <View style={styles.header}>
-              <View style={styles.leftHeaderElement} />
-              <Text style={styles.headerText}>
-                {t('Participants ({{ numberOfParticipants }})', {
-                  numberOfParticipants: participants.length,
-                })}
-              </Text>
-              <Pressable
-                onPress={onCloseCallParticipantsVisible}
-                testID={ButtonTestIds.EXIT_PARTICIPANTS_INFO}
-                style={styles.closePressable}
-              >
-                <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}>{t('Invite')}</Text>
-              </Pressable>
-              <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
-                <Pressable
-                  style={styles.button}
-                  onPress={muteAllParticipantsHandler}
-                >
-                  <Text style={styles.buttonText}>{t('Mute All')}</Text>
-                </Pressable>
-              </Restricted>
-            </View>
-          </View>
-        </SafeAreaView>
-
-        <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} />
-            <ParticipantActions
-              participant={selectedParticipant}
-              setSelectedParticipant={setSelectedParticipant}
-            />
-          </>
-        </Modal>
-      </>
-    </Modal>
-  );
-};
-
-type ParticipantInfoType = {
-  participant: StreamVideoParticipant;
-  setSelectedParticipant: React.Dispatch<
-    React.SetStateAction<StreamVideoParticipant | undefined>
-  >;
-};
-
-const ParticipantInfoItem = (props: ParticipantInfoType) => {
-  const { participant, setSelectedParticipant } = props;
-  const connectedUser = useConnectedUser();
-  const participantIsLocalParticipant =
-    participant.userId === connectedUser?.id;
-
-  const optionsOpenHandler = useCallback(() => {
-    if (!participantIsLocalParticipant) {
-      setSelectedParticipant(participant);
-    }
-  }, [participant, setSelectedParticipant, participantIsLocalParticipant]);
-
-  if (!participant) {
-    return null;
-  }
-  const { publishedTracks } = participant;
-  const isAudioMuted = !publishedTracks.includes(SfuModels.TrackType.AUDIO);
-  const isVideoMuted = !publishedTracks.includes(SfuModels.TrackType.VIDEO);
-  const isScreenSharing = publishedTracks.includes(
-    SfuModels.TrackType.SCREEN_SHARE,
-  );
-
-  return (
-    <Pressable style={styles.participant} onPress={optionsOpenHandler}>
-      <View style={styles.participantInfo}>
-        <Avatar size={theme.avatar.xs} participant={participant} />
-
-        <Text style={styles.name} numberOfLines={1}>
-          {(participant.name || generateParticipantTitle(participant.userId)) +
-            (participantIsLocalParticipant ? ' (You)' : '')}
-        </Text>
-      </View>
-
-      <View style={styles.icons}>
-        {isScreenSharing && (
-          <View style={[styles.svgContainerStyle, theme.icon.md]}>
-            <ScreenShare color={theme.dark.info} />
-          </View>
-        )}
-        {isAudioMuted && (
-          <View style={[styles.svgContainerStyle, theme.icon.sm]}>
-            <MicOff color={theme.dark.error} />
-          </View>
-        )}
-        {isVideoMuted && (
-          <View style={[styles.svgContainerStyle, theme.icon.sm]}>
-            <VideoSlash color={theme.dark.error} />
-          </View>
-        )}
-        {!participantIsLocalParticipant && (
-          <View style={[styles.svgContainerStyle, theme.icon.sm]}>
-            <ArrowRight color={theme.dark.text_high_emphasis} />
-          </View>
-        )}
-      </View>
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  backDropBackground: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: theme.dark.overlay,
-    zIndex: Z_INDEX.IN_BACK,
-  },
-  content: {
-    zIndex: Z_INDEX.IN_FRONT,
-    backgroundColor: theme.dark.bars,
-    borderRadius: theme.rounded.md,
-    marginHorizontal: theme.margin.md,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: theme.padding.md,
-  },
-  leftHeaderElement: {
-    marginLeft: theme.margin.md,
-  },
-  headerText: {
-    ...theme.fonts.bodyBold,
-    color: theme.dark.text_high_emphasis,
-  },
-  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,
-  },
-  button: {
-    flex: 1,
-    backgroundColor: theme.dark.primary,
-    borderRadius: theme.rounded.lg,
-    padding: theme.padding.sm,
-    marginHorizontal: theme.margin.sm,
-  },
-  buttonText: {
-    textAlign: 'center',
-    color: theme.dark.static_white,
-    ...theme.fonts.subtitleBold,
-  },
-  participant: {
-    paddingHorizontal: theme.padding.sm,
-    paddingVertical: theme.padding.xs,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderBottomColor: theme.dark.borders,
-    borderBottomWidth: 1,
-  },
-  participantInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexShrink: 1,
-  },
-  name: {
-    marginLeft: theme.margin.sm,
-    color: theme.dark.text_high_emphasis,
-    flexShrink: 1,
-    ...theme.fonts.subtitleBold,
-  },
-  icons: {
-    flexDirection: 'row',
-  },
-  svgContainerStyle: {
-    marginLeft: theme.margin.sm,
-  },
-  modal: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.dark.overlay,
-  },
-});