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

package/src/components/CallParticipantsOptions.tsx

@@ -3,13 +3,22 @@ import {
   SfuModels,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
-import { Cross, VideoDisabled } from '../icons';
+import {
+  Cross,
+  Mic,
+  MicOff,
+  ScreenShare,
+  Video,
+  VideoDisabled,
+  VideoSlash,
+} from '../icons';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { generateParticipantTitle } from '../utils';
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Avatar } from './Avatar';
 import { theme } from '../theme';
 import { useCall, useHasPermissions } from '@stream-io/video-react-bindings';
+import { palette } from '../theme/constants';
 
 type CallParticipantOptionType = {
   title: string;
@@ -18,7 +27,7 @@ type CallParticipantOptionType = {
 };
 
 type CallParticipantOptionsType = {
-  participant: StreamVideoParticipant;
+  participant: StreamVideoParticipant | undefined;
   setSelectedParticipant: React.Dispatch<
     React.SetStateAction<StreamVideoParticipant | undefined>
   >;
@@ -27,6 +36,22 @@ type CallParticipantOptionsType = {
 export const CallParticipantOptions = (props: CallParticipantOptionsType) => {
   const { participant, setSelectedParticipant } = props;
   const call = useCall();
+  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({
@@ -58,70 +83,68 @@ export const CallParticipantOptions = (props: CallParticipantOptionsType) => {
     await call?.blockUser(participant.userId);
   };
 
-  const userHasMuteUsersCapability = useHasPermissions(
-    OwnCapability.MUTE_USERS,
-  );
-  const userHasUpdateCallPermissionsCapability = useHasPermissions(
-    OwnCapability.UPDATE_CALL_PERMISSIONS,
-  );
-  const userHasBlockUserCapability = useHasPermissions(
-    OwnCapability.BLOCK_USERS,
-  );
-  const participantCanPublishVideo = participant.publishedTracks.includes(
+  const participantPublishesVideo = participant.publishedTracks.includes(
     SfuModels.TrackType.VIDEO,
   );
-  const participantCanPublishAudio = participant.publishedTracks.includes(
+  const participantPublishesAudio = participant.publishedTracks.includes(
     SfuModels.TrackType.AUDIO,
   );
 
-  const callMediaStreamMutePermissions: (CallParticipantOptionType | null)[] =
+  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
-      ? [
-          participantCanPublishVideo
-            ? {
-                title: 'Mute Video',
-                onPressHandler: muteUserVideo,
-              }
-            : null,
-          participantCanPublishAudio
-            ? {
-                title: 'Mute Audio',
-                onPressHandler: muteUserAudio,
-              }
-            : null,
-        ]
+      ? [muteUserVideoOption, muteUserAudioOption]
       : [];
 
-  const callMediaStreamPermissions: (CallParticipantOptionType | null)[] =
+  const updateCallPermissionsCapabilities: (CallParticipantOptionType | null)[] =
     userHasUpdateCallPermissionsCapability
       ? [
           {
-            icon: <VideoDisabled color={theme.light.text_high_emphasis} />,
+            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),
@@ -129,120 +152,114 @@ export const CallParticipantOptions = (props: CallParticipantOptionsType) => {
         ]
       : [];
 
-  const options: (CallParticipantOptionType | null)[] = [
+  const blockCapabilities: (CallParticipantOptionType | null)[] =
     userHasBlockUserCapability
-      ? {
-          title: 'Block',
-          onPressHandler: blockUser,
-        }
-      : null,
-    ...callMediaStreamMutePermissions,
-    ...callMediaStreamPermissions,
-  ];
+      ? [
+          {
+            icon: <Cross color={theme.dark.text_high_emphasis} />,
+            title: 'Block',
+            onPressHandler: blockUser,
+          },
+        ]
+      : [];
 
-  const onCloseParticipantOptions = useCallback(() => {
-    setSelectedParticipant(undefined);
-  }, [setSelectedParticipant]);
+  const options: (CallParticipantOptionType | null)[] = [
+    ...blockCapabilities,
+    ...muteUserCapabilities,
+    ...updateCallPermissionsCapabilities,
+  ];
 
   const showYouLabel = participant.isLocalParticipant;
 
   return (
-    <View style={styles.container}>
-      <View style={styles.menu}>
+    <View style={styles.outerContainer}>
+      <View style={styles.modalContainer}>
         <View style={styles.participantInfo}>
           <View style={styles.userInfo}>
             <Avatar radius={theme.avatar.xs} participant={participant} />
-
             <Text style={styles.name}>
               {generateParticipantTitle(participant.userId) +
                 (showYouLabel ? ' (You)' : '')}
             </Text>
           </View>
-
           <Pressable
-            style={[styles.svgContainerStyle, theme.icon.sm]}
+            style={styles.closePressable}
             onPress={onCloseParticipantOptions}
           >
-            <Cross color={theme.light.primary} />
+            <Cross color={theme.dark.primary} style={theme.icon.xs} />
           </Pressable>
         </View>
-        <View style={styles.options}>
-          {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={[styles.svgContainerStyle, theme.icon.sm]}>
-                  {option.icon}
-                </View>
-                <Text style={styles.title}>{option.title}</Text>
-              </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({
-  container: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
+  outerContainer: {
     justifyContent: 'center',
-    paddingHorizontal: theme.padding.xl,
+    flex: 1,
   },
-  menu: {
-    backgroundColor: theme.light.bars,
+  modalContainer: {
+    backgroundColor: theme.dark.bars,
     borderRadius: theme.rounded.md,
+    marginHorizontal: theme.margin.xl,
   },
   participantInfo: {
-    display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'space-between',
+    alignItems: 'flex-start',
     padding: theme.padding.md,
   },
   userInfo: {
-    display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
   },
   name: {
     marginLeft: theme.margin.sm,
     ...theme.fonts.subtitleBold,
-    color: theme.light.text_high_emphasis,
+    color: theme.dark.text_high_emphasis,
   },
-  svgContainerStyle: {},
-  options: {},
   option: {
-    paddingHorizontal: theme.padding.md,
-    paddingVertical: theme.padding.sm,
-    display: 'flex',
+    paddingHorizontal: theme.padding.lg,
+    paddingVertical: theme.padding.md,
     flexDirection: 'row',
     alignItems: 'center',
   },
   title: {
     marginLeft: theme.margin.md,
-    color: theme.light.text_high_emphasis,
+    color: theme.dark.text_high_emphasis,
     ...theme.fonts.subtitle,
   },
   borderBottom: {
-    borderBottomColor: theme.light.borders,
+    borderBottomColor: theme.dark.borders,
     borderBottomWidth: 1,
   },
+  closePressable: {
+    padding: theme.padding.sm,
+    borderRadius: theme.rounded.xs,
+    backgroundColor: palette.grey800,
+  },
 });

package/src/components/CallParticipantsView.tsx

@@ -17,7 +17,7 @@ export const CallParticipantsView = () => {
 
   return (
     <View style={styles.container}>
-      <LocalVideoView layout={'floating'} zOrder={2} />
+      <LocalVideoView layout={'floating'} />
       <CallParticipantsList participants={remoteParticipants} />
     </View>
   );

package/src/components/LobbyView.tsx

@@ -217,7 +217,6 @@ const styles = StyleSheet.create({
     padding: theme.padding.sm,
     borderRadius: theme.rounded.xs,
     backgroundColor: theme.light.static_overlay,
-    zIndex: 10,
   },
   avatar: {
     height: theme.avatar.sm,

package/src/components/LocalVideoView.tsx

@@ -13,8 +13,9 @@ import { SfuModels } from '@stream-io/video-client';
 import { useStreamVideoStoreValue } from '../contexts';
 import { theme } from '../theme';
 import { VideoSlash } from '../icons';
-import { LOCAL_VIDEO_VIEW_STYLE } from '../constants';
 import { A11yComponents } from '../constants/A11yLabels';
+import { Avatar } from './Avatar';
+import { LOCAL_VIDEO_VIEW_STYLE, Z_INDEX } from '../constants';
 
 /**
  * Props to be passed for the LocalVideoView component.
@@ -52,7 +53,7 @@ export interface LocalVideoViewProps {
  * |![local-video-view-1](https://user-images.githubusercontent.com/25864161/217491433-60848d95-1a14-422e-b4e1-7540f3ba30b4.png)|![local-video-view-2](https://user-images.githubusercontent.com/25864161/217491438-75bad10c-8850-49f5-b3bd-af22995e11c2.png)|
  */
 export const LocalVideoView = (props: LocalVideoViewProps) => {
-  const { layout = 'floating', zOrder = 1 } = props;
+  const { layout = 'floating', zOrder = Z_INDEX.IN_MIDDLE } = props;
   const containerStyle =
     layout === 'floating'
       ? styles.floatingContainer
@@ -75,13 +76,22 @@ export const LocalVideoView = (props: LocalVideoViewProps) => {
     }),
   ).current;
 
-  if (!localParticipant) return null;
+  if (!localParticipant) {
+    return null;
+  }
 
   const isVideoMuted = !localParticipant.publishedTracks.includes(
     SfuModels.TrackType.VIDEO,
   );
 
   if (layout === 'fullscreen') {
+    if (isVideoMuted) {
+      return (
+        <View style={styles.avatarContainer}>
+          <Avatar participant={localParticipant} />
+        </View>
+      );
+    }
     return (
       <VideoRenderer
         mirror={isCameraOnFrontFacingMode}
@@ -96,7 +106,8 @@ export const LocalVideoView = (props: LocalVideoViewProps) => {
     <Animated.View
       accessibilityLabel={A11yComponents.LOCAL_PARTICIPANT}
       style={{
-        zIndex: 5,
+        // Needed to make the view is on top and draggable
+        zIndex: Z_INDEX.IN_MIDDLE,
         transform: [{ translateX: pan.x }, { translateY: pan.y }],
       }}
       {...panResponder.panHandlers}
@@ -125,9 +136,9 @@ const styles = StyleSheet.create({
     height: LOCAL_VIDEO_VIEW_STYLE.height,
     width: LOCAL_VIDEO_VIEW_STYLE.width,
     right: theme.spacing.lg * 2,
-    top: theme.margin.md,
+    top: theme.margin.xl * 2,
     borderRadius: LOCAL_VIDEO_VIEW_STYLE.borderRadius,
-    zIndex: 1,
+    zIndex: Z_INDEX.IN_MIDDLE,
     overflow: 'hidden',
     backgroundColor: theme.light.disabled,
     justifyContent: 'center',
@@ -138,4 +149,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  avatarContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

package/src/components/OutgoingCallView.tsx

@@ -10,6 +10,7 @@ import { useLocalVideoStream } from '../hooks/useLocalVideoStream';
 import { theme } from '../theme';
 import { useCall, useCallCallingState } from '@stream-io/video-react-bindings';
 import { CallingState } from '@stream-io/video-client';
+import { Z_INDEX } from '../constants';
 
 export const OutgoingCallView = () => {
   const { isAudioMuted, isVideoMuted, toggleAudioState, toggleVideoState } =
@@ -92,7 +93,7 @@ const Background = () => {
     <View style={styles.background}>
       <VideoRenderer
         mediaStream={localVideoStream}
-        zOrder={1}
+        zOrder={Z_INDEX.IN_BACK}
         style={StyleSheet.absoluteFill}
         mirror
       />
@@ -102,8 +103,7 @@ const Background = () => {
 
 const styles = StyleSheet.create({
   container: {
-    zIndex: 1,
-    display: 'flex',
+    zIndex: Z_INDEX.IN_MIDDLE,
     flexDirection: 'column',
     justifyContent: 'space-between',
     paddingVertical: 2 * theme.margin.xl,

package/src/components/ParticipantView.tsx

@@ -16,6 +16,7 @@ import { palette } from '../theme/constants';
 import { ParticipantReaction } from './ParticipantReaction';
 import { useCall } from '@stream-io/video-react-bindings';
 import { NetworkQualityIndicator } from './NetworkQualityIndicator';
+import { Z_INDEX } from '../constants';
 
 /**
  * Props to be passed for the ParticipantView component.
@@ -78,7 +79,9 @@ export const ParticipantView = (props: ParticipantViewProps) => {
    * Additionally makes sure that when this view becomes visible again, the layout to subscribe is known
    */
   useEffect(() => {
-    if (!call) return;
+    if (!call) {
+      return;
+    }
     if (isVisible) {
       if (participant.viewportVisibilityState !== VisibilityState.VISIBLE) {
         call.state.updateParticipant(participant.sessionId, (p) => ({
@@ -114,7 +117,9 @@ export const ParticipantView = (props: ParticipantViewProps) => {
   useEffect(() => {
     // NOTE: We only want to update the subscription if the pendingVideoLayoutRef is set
     const updateIsNeeded = pendingVideoLayoutRef.current;
-    if (!updateIsNeeded || !call || !isPublishingVideoTrack) return;
+    if (!updateIsNeeded || !call || !isPublishingVideoTrack) {
+      return;
+    }
 
     // NOTE: When the view is not visible, we want to subscribe to audio only.
     // We unsubscribe their video by setting the dimension to undefined
@@ -216,7 +221,7 @@ export const ParticipantView = (props: ParticipantViewProps) => {
       </View>
       {canShowVideo ? (
         <VideoRenderer
-          zOrder={1}
+          zOrder={Z_INDEX.IN_BACK}
           mirror={mirror}
           mediaStream={videoStream as MediaStream}
           objectFit={isScreenSharing ? 'contain' : 'cover'}
@@ -270,7 +275,7 @@ const styles = StyleSheet.create({
   },
   topView: {
     alignSelf: 'flex-end',
-    zIndex: 10,
+    zIndex: Z_INDEX.IN_FRONT,
   },
   videoRenderer: {
     ...StyleSheet.absoluteFillObject,

package/src/constants/index.ts

@@ -26,3 +26,9 @@ export const defaultEmojiReactions = [
     icon: '🎉',
   },
 ];
+
+export const Z_INDEX = {
+  IN_BACK: 0,
+  IN_MIDDLE: 1,
+  IN_FRONT: 2,
+};

package/src/icons/Cross.tsx

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

package/src/icons/index.tsx

@@ -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/VideoOff.d.ts

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

package/dist/src/icons/VideoOff.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoOff = void 0;
-const react_native_svg_1 = require("react-native-svg");
-const VideoOff = ({ color }) => (<react_native_svg_1.Svg viewBox="0 0 24 24" fill={color}>
-    <react_native_svg_1.Path fill={color} 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"/>
-    <react_native_svg_1.Path fill={color} fillRule="evenodd" clipRule="evenodd" 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"/>
-  </react_native_svg_1.Svg>);
-exports.VideoOff = VideoOff;
-//# sourceMappingURL=VideoOff.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"VideoOff.js","sourceRoot":"","sources":["../../../src/icons/VideoOff.tsx"],"names":[],"mappings":";;;AAAA,uDAA6C;AAMtC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CAC5C,CAAC,sBAAG,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CACnC;IAAA,CAAC,uBAAI,CACH,IAAI,CAAC,CAAC,KAAK,CAAC,CACZ,CAAC,CAAC,4zBAA4zB,EAEh0B;IAAA,CAAC,uBAAI,CACH,IAAI,CAAC,CAAC,KAAK,CAAC,CACZ,QAAQ,CAAC,SAAS,CAClB,QAAQ,CAAC,SAAS,CAClB,CAAC,CAAC,uiBAAuiB,EAE7iB;EAAA,EAAE,sBAAG,CAAC,CACP,CAAC;AAbW,QAAA,QAAQ,YAanB"}

package/src/icons/VideoOff.tsx

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