stream-chat-react-native-core 9.0.0-beta.11 → 9.0.0-beta.13

package/src/icons/reorder.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const DotGrid = ({ fill, height, pathFill, size, stroke, width }: IconProps) => {
+  const color = pathFill ?? fill ?? stroke ?? 'black';
+
+  return (
+    <Svg fill='none' height={height ?? size} viewBox='0 0 20 20' width={width ?? size}>
+      <Path
+        d='M8.875 15.3125C8.875 16.2445 8.11948 17 7.1875 17C6.25552 17 5.5 16.2445 5.5 15.3125C5.5 14.3805 6.25552 13.625 7.1875 13.625C8.11948 13.625 8.875 14.3805 8.875 15.3125ZM14.5 15.3125C14.5 16.2445 13.7445 17 12.8125 17C11.8805 17 11.125 16.2445 11.125 15.3125C11.125 14.3805 11.8805 13.625 12.8125 13.625C13.7445 13.625 14.5 14.3805 14.5 15.3125ZM8.875 10C8.875 10.932 8.11948 11.6875 7.1875 11.6875C6.25552 11.6875 5.5 10.932 5.5 10C5.5 9.06802 6.25552 8.3125 7.1875 8.3125C8.11948 8.3125 8.875 9.06802 8.875 10ZM14.5 10C14.5 10.932 13.7445 11.6875 12.8125 11.6875C11.8805 11.6875 11.125 10.932 11.125 10C11.125 9.06802 11.8805 8.3125 12.8125 8.3125C13.7445 8.3125 14.5 9.06802 14.5 10ZM8.875 4.6875C8.875 5.61948 8.11948 6.375 7.1875 6.375C6.25552 6.375 5.5 5.61948 5.5 4.6875C5.5 3.75552 6.25552 3 7.1875 3C8.11948 3 8.875 3.75552 8.875 4.6875ZM14.5 4.6875C14.5 5.61948 13.7445 6.375 12.8125 6.375C11.8805 6.375 11.125 5.61948 11.125 4.6875C11.125 3.75552 11.8805 3 12.8125 3C13.7445 3 14.5 3.75552 14.5 4.6875Z'
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icons/reply.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const CurveLineLeftUp = (props: IconProps) => (
+  <Svg viewBox='0 0 20 20' fill='none' {...props}>
+    <Path
+      d='M17.5812 15.525C16.2953 14.1555 12.9195 11.25 8.12265 11.25V15L1.87265 8.75L8.12265 2.5V6.25C12.2476 6.25 17.5359 10.1914 18.1226 15.2766C18.1308 15.3424 18.1177 15.4091 18.0854 15.4671C18.0531 15.525 18.0031 15.5712 17.9428 15.5988C17.8825 15.6265 17.815 15.6343 17.75 15.621C17.685 15.6077 17.6259 15.5741 17.5812 15.525Z'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...props}
+    />
+  </Svg>
+);
+
+export const ArrowShareLeft = (props: IconProps) => <CurveLineLeftUp {...props} />;

package/src/icons/save.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Bookmark = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={'0 0 20 20'}
+      width={width ?? size}
+      {...rest}
+    >
+      <Path
+        d='M15 17.5L10 14.375L5 17.5V3.75C5 3.58424 5.06585 3.42527 5.18306 3.30806C5.30027 3.19085 5.45924 3.125 5.625 3.125H14.375C14.5408 3.125 14.6997 3.19085 14.8169 3.30806C14.9342 3.42527 15 3.58424 15 3.75V17.5Z'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+      />
+    </Svg>
+  );
+};

package/src/icons/search.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Search = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      fill='none'
+      height={height ?? size}
+      viewBox='0 0 20 20'
+      width={width ?? size}
+      {...rest}
+      testID={'search-icon'}
+    >
+      <Path
+        d='M13.1695 13.1695L17.5 17.5M15 8.75C15 12.2018 12.2018 15 8.75 15C5.29822 15 2.5 12.2018 2.5 8.75C2.5 5.29822 5.29822 2.5 8.75 2.5C12.2018 2.5 15 5.29822 15 8.75Z'
+        fill='none'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+      />
+    </Svg>
+  );
+};

package/src/icons/send.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const SendRight = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={'0 0 20 20'}
+      width={width ?? size}
+      {...rest}
+      testID='send-right'
+    >
+      <Path
+        d='M11.2498 10H6.24982M6.24982 10L3.7881 2.71328C3.74537 2.59349 3.7402 2.4635 3.7733 2.34069C3.80639 2.21788 3.87616 2.10808 3.9733 2.02597C4.07044 1.94386 4.19032 1.89335 4.31693 1.88117C4.44353 1.86899 4.57084 1.89573 4.68185 1.95781L17.8069 9.4461C17.9045 9.50015 17.986 9.57937 18.0427 9.67555C18.0994 9.77172 18.1293 9.88133 18.1293 9.99297C18.1293 10.1046 18.0994 10.2142 18.0427 10.3104C17.986 10.4066 17.9045 10.4858 17.8069 10.5398L4.68185 18.0469C4.57051 18.1096 4.4426 18.1367 4.31537 18.1245C4.18815 18.1123 4.06772 18.0614 3.97032 17.9787C3.87292 17.8959 3.80323 17.7853 3.77065 17.6617C3.73807 17.5381 3.74416 17.4075 3.7881 17.2875L6.24982 10Z'
+        fill='none'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+      />
+    </Svg>
+  );
+};

package/src/icons/share.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Share = ({ height, width, ...rest }: IconProps) => (
+  <Svg fill={'none'} height={height} viewBox={'0 0 20 20'} width={width} {...rest}>
+    <Path
+      d='M11.6477 5.72656L7.10234 8.64844M7.10234 11.3516L11.6477 14.2734M7.5 10C7.5 11.3807 6.38071 12.5 5 12.5C3.61929 12.5 2.5 11.3807 2.5 10C2.5 8.61929 3.61929 7.5 5 7.5C6.38071 7.5 7.5 8.61929 7.5 10ZM16.25 15.625C16.25 17.0057 15.1307 18.125 13.75 18.125C12.3693 18.125 11.25 17.0057 11.25 15.625C11.25 14.2443 12.3693 13.125 13.75 13.125C15.1307 13.125 16.25 14.2443 16.25 15.625ZM16.25 4.375C16.25 5.75571 15.1307 6.875 13.75 6.875C12.3693 6.875 11.25 5.75571 11.25 4.375C11.25 2.99429 12.3693 1.875 13.75 1.875C15.1307 1.875 16.25 2.99429 16.25 4.375Z'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...rest}
+    />
+  </Svg>
+);

package/src/icons/stop-fill.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Stop = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = fill ?? pathFill ?? stroke ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={'0 0 20 20'}
+      width={width ?? size}
+      {...rest}
+    >
+      <Path
+        d='M14.375 4.375H5.625C4.93464 4.375 4.375 4.93464 4.375 5.625V14.375C4.375 15.0654 4.93464 15.625 5.625 15.625H14.375C15.0654 15.625 15.625 15.0654 15.625 14.375V5.625C15.625 4.93464 15.0654 4.375 14.375 4.375Z'
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icons/thread.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const ThreadReply = ({
+  fill,
+  height,
+  pathFill,
+  size,
+  stroke,
+  width,
+  ...rest
+}: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M7.49978 8.75022H12.4998M7.49978 11.2502H12.4998M6.24431 16.4932C7.81972 17.405 9.67297 17.7127 11.4585 17.359C13.2441 17.0053 14.84 16.0143 15.9489 14.5708C17.0578 13.1273 17.6038 11.3298 17.4852 9.51341C17.3667 7.69704 16.5916 5.98577 15.3045 4.69866C14.0174 3.41156 12.3061 2.63646 10.4897 2.51789C8.67333 2.39932 6.87582 2.94537 5.43231 4.05422C3.9888 5.16308 2.99781 6.75906 2.64412 8.54461C2.29042 10.3302 2.59815 12.1834 3.50993 13.7588L2.53259 16.6768C2.49586 16.7869 2.49053 16.9051 2.5172 17.0181C2.54386 17.131 2.60146 17.2344 2.68355 17.3165C2.76563 17.3985 2.86895 17.4561 2.98194 17.4828C3.09492 17.5095 3.21309 17.5041 3.32321 17.4674L6.24431 16.4932Z'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/unlock.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Unlock = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={'0 0 20 20'}
+      width={width ?? size}
+      {...rest}
+    >
+      <Path
+        d='M3.875 16.125H16.125V7.625H3.875V16.125ZM17.625 16.25C17.625 17.0094 17.0094 17.625 16.25 17.625H3.75C2.99061 17.625 2.375 17.0094 2.375 16.25V7.5C2.375 6.74061 2.99061 6.125 3.75 6.125H16.25C17.0094 6.125 17.625 6.74061 17.625 7.5V16.25Z'
+        fill={color}
+      />
+      <Path
+        d='M10 12.8125C10.5178 12.8125 10.9375 12.3928 10.9375 11.875C10.9375 11.3572 10.5178 10.9375 10 10.9375C9.48223 10.9375 9.0625 11.3572 9.0625 11.875C9.0625 12.3928 9.48223 12.8125 10 12.8125Z'
+        fill={color}
+      />
+      <Path
+        d='M6.125 6.875V4.375C6.125 3.34729 6.53306 2.36147 7.25977 1.63477C7.98647 0.908062 8.97229 0.5 10 0.5C11.8574 0.5 13.4973 1.81391 13.8604 3.60059C13.9428 4.0065 13.6803 4.40287 13.2744 4.48535C12.8685 4.56782 12.4721 4.30533 12.3896 3.89941C12.173 2.83297 11.166 2 10 2C9.37011 2 8.76571 2.24991 8.32031 2.69531C7.87491 3.14071 7.625 3.74511 7.625 4.375V6.875C7.625 7.28921 7.28921 7.625 6.875 7.625C6.46079 7.625 6.125 7.28921 6.125 6.875Z'
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icons/unpin.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Unpin = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg fill='none' height={height ?? size} viewBox='0 0 20 20' width={width ?? size} {...rest}>
+      <Path
+        d='M7.52271 12.4773L3.75006 16.25M3.75006 3.12498L16.2501 16.875M14.4532 11.1828L17.9415 7.68279C18.0586 7.56559 18.1244 7.40668 18.1244 7.24099C18.1244 7.0753 18.0586 6.9164 17.9415 6.7992L13.2032 2.05779C13.086 1.94067 12.9271 1.87488 12.7614 1.87488C12.5957 1.87488 12.4368 1.94067 12.3196 2.05779L9.09615 5.28904M6.58756 6.24998C5.74537 6.18435 4.57271 6.3531 3.35943 7.33201C3.29077 7.38697 3.23447 7.45581 3.19424 7.53402C3.154 7.61224 3.13072 7.69806 3.12593 7.78589C3.12114 7.87371 3.13493 7.96156 3.16642 8.04369C3.19791 8.12581 3.24637 8.20037 3.30865 8.26248L11.7383 16.6914C11.8015 16.7541 11.8773 16.8025 11.9606 16.8336C12.044 16.8646 12.133 16.8775 12.2218 16.8713C12.3105 16.8652 12.3969 16.8402 12.4752 16.798C12.5535 16.7558 12.6219 16.6973 12.6758 16.6265C13.0829 16.0851 13.6344 15.1898 13.779 14.1594'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+      />
+    </Svg>
+  );
+};

package/src/icons/user-add.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const UserAdd = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M15.625 10.625H19.375M17.5 8.75V12.5M8.4375 12.5C11.0263 12.5 13.125 10.4013 13.125 7.8125C13.125 5.22367 11.0263 3.125 8.4375 3.125C5.84867 3.125 3.75 5.22367 3.75 7.8125C3.75 10.4013 5.84867 12.5 8.4375 12.5ZM8.4375 12.5C5.74688 12.5 3.48047 13.7148 1.875 15.625M8.4375 12.5C11.1281 12.5 13.3945 13.7148 15 15.625'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/user-remove.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const UserDelete = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...rest}>
+      <Path
+        d='M15.625 10.625H19.375M8.4375 12.5C11.0263 12.5 13.125 10.4013 13.125 7.8125C13.125 5.22367 11.0263 3.125 8.4375 3.125C5.84867 3.125 3.75 5.22367 3.75 7.8125C3.75 10.4013 5.84867 12.5 8.4375 12.5ZM8.4375 12.5C5.74688 12.5 3.48047 13.7148 1.875 15.625M8.4375 12.5C11.1281 12.5 13.3945 13.7148 15 15.625'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/users.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const PeopleIcon = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={`0 0 20 20`}
+      width={width ?? size}
+      {...rest}
+    >
+      <Path
+        d='M0.799316 15.625C1.42361 14.6651 2.27775 13.8764 3.28421 13.3304C4.29067 12.7844 5.41757 12.4984 6.5626 12.4984C7.70763 12.4984 8.83452 12.7844 9.84098 13.3304C10.8474 13.8764 11.7016 14.6651 12.3259 15.625M19.2009 15.625C18.5768 14.6651 17.7226 13.8764 16.7161 13.3306C15.7096 12.7849 14.5826 12.4993 13.4376 12.5C14.0359 12.4995 14.6267 12.3668 15.1677 12.1115C15.7088 11.8562 16.1868 11.4845 16.5676 11.023C16.9483 10.5615 17.2225 10.0216 17.3704 9.44192C17.5183 8.86221 17.5364 8.25698 17.4233 7.66948C17.3102 7.08199 17.0687 6.52672 16.7161 6.04337C16.3635 5.56002 15.9085 5.16051 15.3836 4.87339C14.8587 4.58627 14.2769 4.41862 13.6797 4.38244C13.0825 4.34625 12.4847 4.44242 11.929 4.66406M10.6251 8.4375C10.6251 10.6812 8.80626 12.5 6.5626 12.5C4.31894 12.5 2.5001 10.6812 2.5001 8.4375C2.5001 6.19384 4.31894 4.375 6.5626 4.375C8.80626 4.375 10.6251 6.19384 10.6251 8.4375Z'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/utils/base.tsx

@@ -9,13 +9,13 @@ export type IconProps = Partial<SvgProps> &
   };
 
 export const RootSvg = (props: IconProps) => {
-  const { children, height = 24, viewBox = '0 0 24 24', width = 24 } = props;
+  const { children, height, size, viewBox = '0 0 24 24', width } = props;
   return (
     <Svg
       {...{
-        height,
+        height: height ?? size ?? 24,
         viewBox,
-        width,
+        width: width ?? size ?? 24,
       }}
       {...props}
     >

package/src/icons/video-fill.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Recorder = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => {
+  const color = pathFill ?? fill ?? stroke ?? 'black';
+
+  return (
+    <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...props}>
+      <G clipPath='url(#clip0_recorder)'>
+        <Path
+          d='M15 5.625V14.375C15 14.7065 14.8683 15.0245 14.6339 15.2589C14.3995 15.4933 14.0815 15.625 13.75 15.625H2.5C2.16848 15.625 1.85054 15.4933 1.61612 15.2589C1.3817 15.0245 1.25 14.7065 1.25 14.375V5.625C1.25 5.29348 1.3817 4.97554 1.61612 4.74112C1.85054 4.5067 2.16848 4.375 2.5 4.375H13.75C14.0815 4.375 14.3995 4.5067 14.6339 4.74112C14.8683 4.97554 15 5.29348 15 5.625ZM19.5312 5.64453C19.4431 5.62295 19.3513 5.62029 19.2621 5.63672C19.1728 5.65315 19.088 5.68829 19.0133 5.73984L16.3891 7.48906C16.3463 7.51762 16.3112 7.55631 16.2869 7.6017C16.2626 7.64708 16.25 7.69776 16.25 7.74922V12.2508C16.25 12.3022 16.2626 12.3529 16.2869 12.3983C16.3112 12.4437 16.3463 12.4824 16.3891 12.5109L19.0281 14.2703C19.1269 14.3362 19.2424 14.3726 19.3611 14.3752C19.4798 14.3779 19.5968 14.3466 19.6984 14.2852C19.7924 14.2254 19.8695 14.1425 19.9223 14.0444C19.9751 13.9464 20.0019 13.8364 20 13.725V6.25C20.0001 6.11139 19.9541 5.97668 19.8692 5.86708C19.7843 5.75747 19.6655 5.67918 19.5312 5.64453Z'
+          fill={color}
+        />
+      </G>
+      <Defs>
+        <ClipPath id='clip0_recorder'>
+          <Rect x='1' y='4' width='19' height='12' fill='white' />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};

package/src/icons/video.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const VideoIcon = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={`0 0 20 20`}
+      width={width ?? size}
+      {...rest}
+    >
+      <Path
+        d='M15.625 8.75L19.375 6.25V13.75L15.625 11.25M2.5 5H15C15.3452 5 15.625 5.27982 15.625 5.625V14.375C15.625 14.7202 15.3452 15 15 15H2.5C2.15482 15 1.875 14.7202 1.875 14.375V5.625C1.875 5.27982 2.15482 5 2.5 5Z'
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+};

package/src/icons/voice.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Mic = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={'0 0 20 20'}
+      width={width ?? size}
+      {...rest}
+    >
+      <Path
+        d='M10 15.625V18.75M10 15.625C11.4918 15.625 12.9226 15.0324 13.9775 13.9775C15.0324 12.9226 15.625 11.4918 15.625 10M10 15.625C8.50816 15.625 7.07742 15.0324 6.02252 13.9775C4.96763 12.9226 4.375 11.4918 4.375 10M10 1.875C11.7259 1.875 13.125 3.27411 13.125 5V10C13.125 11.7259 11.7259 13.125 10 13.125C8.27411 13.125 6.875 11.7259 6.875 10V5C6.875 3.27411 8.27411 1.875 10 1.875Z'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+      />
+    </Svg>
+  );
+};

package/src/icons/xmark-1.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const Cross = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      fill={'none'}
+      height={height ?? size}
+      viewBox={'0 0 20 20'}
+      width={width ?? size}
+      {...rest}
+    >
+      <Path
+        d='M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+      />
+    </Svg>
+  );
+};

package/src/icons/xmark.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const NewClose = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => {
+  const color = stroke ?? pathFill ?? fill ?? 'black';
+
+  return (
+    <Svg
+      height={height ?? size}
+      viewBox={'-2.5 -2.5 25 25'}
+      width={width ?? size}
+      fill='none'
+      {...rest}
+    >
+      <Path
+        d='M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+      />
+    </Svg>
+  );
+};

package/src/index.ts

@@ -16,6 +16,7 @@ export * from './types/types';
 export * from './utils/patchMessageTextCommand';
 export * from './utils/i18n/Streami18n';
 export * from './utils/setupCommandUIMiddlewares';
+export * from './utils/createGenerateVideoThumbnails';
 export * from './utils/utils';
 
 export { default as enTranslations } from './i18n/en.json';

package/src/middlewares/attachments.ts

@@ -1,7 +1,9 @@
 import {
   Attachment,
+  AttachmentPreUploadMiddleware,
   FileReference,
   isLocalImageAttachment,
+  isLocalVideoAttachment,
   LocalAttachment,
   MessageComposer,
   MessageComposerMiddlewareState,
@@ -100,3 +102,35 @@ export const createDraftAttachmentsCompositionMiddleware = (
   },
   id: 'stream-io/message-composer-middleware/draft-attachments',
 });
+
+const createVideoAttachmentPreviewMiddleware = (): AttachmentPreUploadMiddleware => ({
+  id: 'stream-io/message-composer-ui-middleware/video-attachment-preview',
+  handlers: {
+    prepare: ({ next, forward, state }) => {
+      const { attachment } = state;
+
+      if (!attachment || !isLocalVideoAttachment(attachment)) {
+        return forward();
+      }
+
+      return next({
+        ...state,
+        attachment: {
+          ...attachment,
+          localMetadata: {
+            ...attachment.localMetadata,
+            previewUri: attachment.thumb_url,
+          },
+        },
+      });
+    },
+  },
+});
+
+export const setupVideoAttachmentPreviewMiddleware = (messageComposer: MessageComposer) => {
+  messageComposer.attachmentManager.preUploadMiddlewareExecutor.insert({
+    middleware: [createVideoAttachmentPreviewMiddleware()],
+    position: { after: 'stream-io/attachment-manager-middleware/file-upload-config-check' },
+    unique: true,
+  });
+};

package/src/state-store/__tests__/audio-player.test.ts

@@ -60,7 +60,7 @@ describe('AudioPlayer', () => {
     (NativeHandlers as { Sound: unknown }).Sound = undefined;
   });
 
-  it('initializes native playback through Sound.initializeSound', async () => {
+  it('initializes native playback through Sound.initializeaudio', async () => {
     const playerRef = createMockNativePlayerRef();
     const initializeSound = jest.fn().mockResolvedValue(playerRef);
     (NativeHandlers as { Sound: unknown }).Sound = {

package/src/utils/createGenerateVideoThumbnails.ts

@@ -0,0 +1,45 @@
+export type GenerateVideoThumbnailResult = {
+  error?: string | null;
+  uri?: string | null;
+};
+
+export const createGenerateVideoThumbnails = ({
+  createVideoThumbnails,
+}: {
+  createVideoThumbnails: (uris: string[]) => Promise<GenerateVideoThumbnailResult[]>;
+}) => {
+  return async (uris: string[]): Promise<Record<string, GenerateVideoThumbnailResult>> => {
+    if (!uris.length) {
+      return {};
+    }
+
+    const uniqueUris: string[] = [];
+    const seenUris = new Set<string>();
+
+    uris.forEach((uri) => {
+      if (!seenUris.has(uri)) {
+        seenUris.add(uri);
+        uniqueUris.push(uri);
+      }
+    });
+
+    const uniqueResults = await createVideoThumbnails(uniqueUris);
+
+    return uniqueUris.reduce<Record<string, GenerateVideoThumbnailResult>>(
+      (resultMap, uri, index) => {
+        const result = uniqueResults[index] ?? {
+          error: 'Thumbnail generation returned no result',
+          uri: null,
+        };
+
+        if (result.error) {
+          console.warn(`Failed to generate thumbnail for ${uri}: ${result.error}`);
+        }
+
+        resultMap[uri] = result;
+        return resultMap;
+      },
+      {},
+    );
+  };
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.11"
+  "version": "9.0.0-beta.13"
 }

package/lib/commonjs/icons/Archive.js

@@ -1,26 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Archive = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _this = this,
-  _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Archive.tsx";
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var Archive = exports.Archive = function Archive(props) {
-  return (0, _jsxRuntime.jsx)(_reactNativeSvg.default, Object.assign({
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props, {
-    children: (0, _jsxRuntime.jsx)(_reactNativeSvg.Path, Object.assign({
-      d: "M8.33341 9.79167H11.6667M16.8751 14.2083V6.45833H3.12508V14.2083C3.12508 15.1417 3.12508 15.6085 3.30674 15.965C3.46652 16.2786 3.72149 16.5336 4.0351 16.6933C4.39161 16.875 4.85833 16.875 5.79175 16.875H14.2084C15.1418 16.875 15.6086 16.875 15.9651 16.6933C16.2787 16.5336 16.5337 16.2786 16.6934 15.965C16.8751 15.6085 16.8751 15.1417 16.8751 14.2083ZM2.29175 3.125H17.7084V6.45833H2.29175V3.125Z",
-      strokeWidth: 1.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, props))
-  }));
-};
-//# sourceMappingURL=Archive.js.map

package/lib/commonjs/icons/Archive.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeSvg","_interopRequireWildcard","_jsxRuntime","_this","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Archive","exports","props","jsx","assign","viewBox","fill","children","Path","d","strokeWidth","strokeLinecap","strokeLinejoin"],"sourceRoot":"../../../src","sources":["icons/Archive.tsx"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAC,uBAAA,CAAAF,OAAA;AAA6C,IAAAG,WAAA,GAAAH,OAAA;AAAA,IAAAI,KAAA;EAAAC,YAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAItC,IAAMW,OAA4B,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAA/BA,OAA4BA,CAAIE,KAAK;EAAA,OAChD,IAAAzB,WAAA,CAAA0B,GAAA,EAAC5B,eAAA,CAAAW,OAAG,EAAAM,MAAA,CAAAY,MAAA;IAACC,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC;EAAM,GAAKJ,KAAK;IAAAK,QAAA,EAC5C,IAAA9B,WAAA,CAAA0B,GAAA,EAAC5B,eAAA,CAAAiC,IAAI,EAAAhB,MAAA,CAAAY,MAAA;MACHK,CAAC,EAAC,gZAAgZ;MAClZC,WAAW,EAAE,GAAI;MACjBC,aAAa,EAAC,OAAO;MACrBC,cAAc,EAAC;IAAO,GAClBV,KAAK,CACV;EAAC,EACC,CAAC;AAAA,CACP","ignoreList":[]}