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

package/src/components/participants/internal/ParticipantActions.tsx

@@ -1,289 +0,0 @@
-import {
-  OwnCapability,
-  SfuModels,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
-import {
-  Cross,
-  Mic,
-  MicOff,
-  Pin,
-  ScreenShare,
-  Video,
-  VideoDisabled,
-  VideoSlash,
-} from '../../../icons';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { generateParticipantTitle } from '../../../utils';
-import React, { useCallback } from 'react';
-import { Avatar } from '../../utility/Avatar';
-import { theme } from '../../../theme';
-import {
-  useCall,
-  useHasPermissions,
-  useI18n,
-} from '@stream-io/video-react-bindings';
-import { palette } from '../../../theme/constants';
-
-type CallParticipantOptionType = {
-  title: string;
-  icon?: JSX.Element;
-  onPressHandler: () => void;
-};
-
-type ParticipantActionsType = {
-  participant: StreamVideoParticipant | undefined;
-  setSelectedParticipant: React.Dispatch<
-    React.SetStateAction<StreamVideoParticipant | undefined>
-  >;
-};
-
-export const ParticipantActions = (props: ParticipantActionsType) => {
-  const { participant, setSelectedParticipant } = props;
-  const call = useCall();
-  const { t } = useI18n();
-  const userHasMuteUsersCapability = useHasPermissions(
-    OwnCapability.MUTE_USERS,
-  );
-  const userHasUpdateCallPermissionsCapability = useHasPermissions(
-    OwnCapability.UPDATE_CALL_PERMISSIONS,
-  );
-  const userHasBlockUserCapability = useHasPermissions(
-    OwnCapability.BLOCK_USERS,
-  );
-  const onCloseParticipantOptions = useCallback(() => {
-    setSelectedParticipant(undefined);
-  }, [setSelectedParticipant]);
-
-  if (!participant) {
-    return null;
-  }
-
-  const grantPermission = async (permission: string) => {
-    await call?.updateUserPermissions({
-      user_id: participant.userId,
-      grant_permissions: [permission],
-    });
-  };
-
-  const revokePermission = async (permission: string) => {
-    await call?.updateUserPermissions({
-      user_id: participant.userId,
-      revoke_permissions: [permission],
-    });
-  };
-
-  const muteUser = async (mediaType: 'audio' | 'video') => {
-    await call?.muteUser(participant.userId, mediaType);
-  };
-
-  const muteUserAudio = async () => {
-    await muteUser('audio');
-  };
-
-  const muteUserVideo = async () => {
-    await muteUser('video');
-  };
-
-  const blockUser = async () => {
-    await call?.blockUser(participant.userId);
-  };
-
-  const toggleParticipantPinnedAt = () => {
-    if (participant.pin) {
-      call?.unpin(participant.sessionId);
-    } else {
-      call?.pin(participant.sessionId);
-    }
-  };
-
-  const participantPublishesVideo = participant.publishedTracks.includes(
-    SfuModels.TrackType.VIDEO,
-  );
-  const participantPublishesAudio = participant.publishedTracks.includes(
-    SfuModels.TrackType.AUDIO,
-  );
-
-  const muteUserVideoOption = participantPublishesVideo
-    ? {
-        icon: <VideoSlash color={theme.dark.text_high_emphasis} />,
-        title: 'Mute Video',
-        onPressHandler: muteUserVideo,
-      }
-    : null;
-
-  const muteUserAudioOption = participantPublishesAudio
-    ? {
-        icon: <MicOff color={theme.dark.text_high_emphasis} />,
-        title: 'Mute Audio',
-        onPressHandler: muteUserAudio,
-      }
-    : null;
-  const muteUserCapabilities: (CallParticipantOptionType | null)[] =
-    userHasMuteUsersCapability
-      ? [muteUserVideoOption, muteUserAudioOption]
-      : [];
-
-  const updateCallPermissionsCapabilities: (CallParticipantOptionType | null)[] =
-    userHasUpdateCallPermissionsCapability
-      ? [
-          {
-            icon: <VideoDisabled color={theme.dark.text_high_emphasis} />,
-            title: 'Disable Video',
-            onPressHandler: async () =>
-              await revokePermission(OwnCapability.SEND_VIDEO),
-          },
-          {
-            icon: <MicOff color={theme.dark.text_high_emphasis} />,
-            title: 'Disable Audio',
-            onPressHandler: async () =>
-              await revokePermission(OwnCapability.SEND_AUDIO),
-          },
-          {
-            icon: <Mic color={theme.dark.text_high_emphasis} />,
-            title: 'Allow Audio',
-            onPressHandler: async () =>
-              await grantPermission(OwnCapability.SEND_AUDIO),
-          },
-          {
-            icon: <Video color={theme.dark.text_high_emphasis} />,
-            title: 'Allow Video',
-            onPressHandler: async () =>
-              await grantPermission(OwnCapability.SEND_VIDEO),
-          },
-          {
-            icon: <ScreenShare color={theme.dark.text_high_emphasis} />,
-            title: 'Allow Screen Sharing',
-            onPressHandler: async () =>
-              await grantPermission(OwnCapability.SCREENSHARE),
-          },
-          {
-            icon: <Cross color={theme.dark.text_high_emphasis} />,
-            title: 'Disable Screen Sharing',
-            onPressHandler: async () =>
-              await revokePermission(OwnCapability.SCREENSHARE),
-          },
-        ]
-      : [];
-
-  const blockCapabilities: (CallParticipantOptionType | null)[] =
-    userHasBlockUserCapability
-      ? [
-          {
-            icon: <Cross color={theme.dark.text_high_emphasis} />,
-            title: 'Block',
-            onPressHandler: blockUser,
-          },
-        ]
-      : [];
-
-  const isLocalPinningAllowed = !participant.pin || participant.pin.isLocalPin;
-  const pinParticipant: CallParticipantOptionType | null = isLocalPinningAllowed
-    ? {
-        icon: <Pin color={theme.dark.text_high_emphasis} />,
-        title: participant.pin ? 'Unpin' : 'Pin',
-        onPressHandler: toggleParticipantPinnedAt,
-      }
-    : null;
-
-  const options: (CallParticipantOptionType | null)[] = [
-    pinParticipant,
-    ...blockCapabilities,
-    ...muteUserCapabilities,
-    ...updateCallPermissionsCapabilities,
-  ];
-
-  const showYouLabel = participant.isLocalParticipant;
-
-  return (
-    <View style={styles.outerContainer}>
-      <View style={styles.modalContainer}>
-        <View style={styles.participantInfo}>
-          <View style={styles.userInfo}>
-            <Avatar size={theme.avatar.xs} participant={participant} />
-            <Text style={styles.name}>
-              {generateParticipantTitle(participant.userId) +
-                (showYouLabel ? ` ${t('You')}` : '')}
-            </Text>
-          </View>
-          <Pressable
-            style={styles.closePressable}
-            onPress={onCloseParticipantOptions}
-          >
-            <Cross color={theme.dark.primary} style={theme.icon.xs} />
-          </Pressable>
-        </View>
-        {options.map((option, index) => {
-          if (!option) {
-            return null;
-          }
-          const applyBottomPadding =
-            index < options.length - 1 ? styles.borderBottom : null;
-
-          const onPressHandler = () => {
-            option?.onPressHandler();
-            onCloseParticipantOptions();
-          };
-
-          return (
-            <Pressable
-              style={[applyBottomPadding, styles.option]}
-              key={option.title}
-              onPress={onPressHandler}
-            >
-              <View style={theme.icon.sm}>{option.icon}</View>
-              <Text style={styles.title}>{option.title}</Text>
-            </Pressable>
-          );
-        })}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  outerContainer: {
-    justifyContent: 'center',
-    flex: 1,
-  },
-  modalContainer: {
-    backgroundColor: theme.dark.bars,
-    borderRadius: theme.rounded.md,
-    marginHorizontal: theme.margin.xl,
-  },
-  participantInfo: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    padding: theme.padding.md,
-  },
-  userInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  name: {
-    marginLeft: theme.margin.sm,
-    ...theme.fonts.subtitleBold,
-    color: theme.dark.text_high_emphasis,
-  },
-  option: {
-    paddingHorizontal: theme.padding.lg,
-    paddingVertical: theme.padding.md,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  title: {
-    marginLeft: theme.margin.md,
-    color: theme.dark.text_high_emphasis,
-    ...theme.fonts.subtitle,
-  },
-  borderBottom: {
-    borderBottomColor: theme.dark.borders,
-    borderBottomWidth: 1,
-  },
-  closePressable: {
-    padding: theme.padding.sm,
-    borderRadius: theme.rounded.xs,
-    backgroundColor: palette.grey800,
-  },
-});

package/src/icons/ArrowRight.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-
-type Props = {
-  color: string;
-};
-
-export const ArrowRight = ({ color }: Props) => (
-  <Svg viewBox="0 0 8 15">
-    <Path
-      clipRule="evenodd"
-      fillRule="evenodd"
-      d="M 0.553016 2.50028 L 5.3299 7.5 L 0.553016 12.4997 C 0.111957 12.9585 0.111957 13.6972 0.553016 14.1559 C 0.994074 14.6147 1.71173 14.6147 2.14531 14.1559 L 7.66975 8.37864 C 7.9015 8.1376 8.01363 7.8188 7.99868 7.5 C 8.01363 7.1812 7.9015 6.8624 7.66975 6.62136 L 2.14531 0.84407 C 1.70425 0.385308 0.986598 0.385308 0.553016 0.84407 C 0.111957 1.30283 0.111957 2.04152 0.553016 2.50028 Z"
-      fill={color}
-    />
-  </Svg>
-);

package/src/icons/Cross.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Svg, Path, SvgProps } from 'react-native-svg';
-
-type Props = {
-  color: string;
-} & Pick<SvgProps, 'style'>;
-
-export const Cross = ({ color, style }: Props) => (
-  <Svg viewBox="0 0 12 13" style={style}>
-    <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}
-    />
-  </Svg>
-);

package/src/icons/Pin.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-
-type Props = {
-  color: string;
-};
-
-export const Pin = ({ color }: Props) => (
-  <Svg viewBox="0 0 24 24">
-    <Path
-      fill={color}
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M 16.041 0.293372 C 15.7956 0.0479219 15.4405 -0.0529382 15.1027 0.0268118 C 14.7649 0.106562 14.4924 0.355552 14.3826 0.684852 L 13.7492 2.58516 L 8.0804 8.25401 C 5.69213 7.71299 2.39999 9.68517 0.293348 11.7918 C -0.0977825 12.1829 -0.0977825 12.8171 0.293348 13.2082 L 4.8344 17.7493 L 1.70985 20.8738 C 1.31872 21.265 1.31872 21.8991 1.70985 22.2902 C 2.10098 22.6814 2.73513 22.6814 3.12626 22.2902 L 6.2508 19.1657 L 10.7918 23.7067 C 11.1829 24.0978 11.8171 24.0978 12.2082 23.7067 C 14.3148 21.6 16.287 18.3079 15.746 15.9196 L 21.4148 10.2508 L 23.3151 9.61735 C 23.6444 9.50758 23.8934 9.23514 23.9732 8.89731 C 24.0529 8.55948 23.9521 8.20444 23.7066 7.95899 L 16.041 0.293372 Z M 15.5748 3.4429 L 15.7705 2.85567 L 21.1443 8.2295 L 20.5571 8.42525 C 20.4096 8.47441 20.2756 8.55725 20.1656 8.6672 L 13.9164 14.9164 C 13.6481 15.1847 13.5545 15.5814 13.6744 15.9413 C 14.1518 17.3733 12.8573 19.8847 11.4693 21.5514 L 2.44861 12.5307 C 4.11529 11.1427 6.62666 9.84822 8.0587 10.3256 C 8.4186 10.4455 8.8153 10.3519 9.0836 10.0836 L 15.3328 3.83438 C 15.4427 3.72444 15.5256 3.59041 15.5748 3.4429 Z"
-    />
-  </Svg>
-);

package/src/icons/VideoDisabled.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-
-type Props = {
-  color: string;
-};
-
-export const VideoDisabled = ({ color }: Props) => (
-  <Svg viewBox="0 0 24 24">
-    <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}
-    />
-    <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"
-    />
-  </Svg>
-);