chore: update compressImage interface

Author: bang9

.yarn/releases/yarn-1.19.0.cjs

@@ -95215,7 +95215,7 @@ RequestSigner.prototype.sign = function() {
     this.request.headers.Authorization = this.authHeader()
   }
 
-  this.request.path = this.formatPath()
+  this.request.uri = this.formatPath()
 
   return this.request
 }
@@ -132736,7 +132736,7 @@ OAuth.prototype.onRequest = function (_oauth) {
     case 'query':
       var href = self.request.uri.href += (query ? '&' : '?') + self.concatParams(oa, '&')
       self.request.uri = url.parse(href)
-      self.request.path = self.request.uri.path
+      self.request.uri = self.request.uri.path
       break
 
     case 'body':
@@ -136105,7 +136105,7 @@ Request.prototype.enableUnixSocket = function () {
   // Apply unix properties to request
   this.socketPath = host
   this.uri.pathname = path
-  this.uri.path = path
+  this.uri.uri = path
   this.uri.host = host
   this.uri.hostname = host
   this.uri.isUnix = true

packages/uikit-react-native/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -44,7 +44,12 @@ const ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {
   const key = useRetry(imageNotFound);
 
   return (
-    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+    <View
+      style={[
+        styles.bubbleContainer,
+        { backgroundColor: imageNotFound ? colors.onBackground04 : colors.ui.message[variant].enabled.background },
+      ]}
+    >
       <View style={style}>
         <Image
           key={key}

packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx

@@ -100,7 +100,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
   userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
-  imageCompression?: ImageCompressionConfigInterface;
+  imageCompression?: Partial<ImageCompressionConfigInterface>;
 }>;
 
 const SendbirdUIKitContainer = ({

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -101,14 +101,14 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({
-                    path: mediaFile.uri,
+                    uri: mediaFile.uri,
                     maxWidth: imageCompressionConfig.width,
                     maxHeight: imageCompressionConfig.height,
                     compressionRate: imageCompressionConfig.compressionRate,
                   });
 
                   if (compressed) {
-                    mediaFile.uri = compressed.path;
+                    mediaFile.uri = compressed.uri;
                     mediaFile.size = compressed.size;
                   }
                 });
@@ -151,14 +151,14 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({
-                    path: mediaFile.uri,
+                    uri: mediaFile.uri,
                     maxWidth: imageCompressionConfig.width,
                     maxHeight: imageCompressionConfig.height,
                     compressionRate: imageCompressionConfig.compressionRate,
                   });
 
                   if (compressed) {
-                    mediaFile.uri = compressed.path;
+                    mediaFile.uri = compressed.uri;
                     mediaFile.size = compressed.size;
                   }
                 });
@@ -184,14 +184,14 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({
-                    path: documentFile.uri,
+                    uri: documentFile.uri,
                     maxWidth: imageCompressionConfig.width,
                     maxHeight: imageCompressionConfig.height,
                     compressionRate: imageCompressionConfig.compressionRate,
                   });
 
                   if (compressed) {
-                    documentFile.uri = compressed.path;
+                    documentFile.uri = compressed.uri;
                     documentFile.size = compressed.size;
                   }
                 });

packages/uikit-react-native/src/platform/createMediaService.expo.tsx

@@ -36,16 +36,16 @@ const createExpoMediaService = ({
         return null;
       }
     },
-    async compressImage({ maxWidth, maxHeight, compressionRate = 1, path }) {
-      const originSize = await SBUUtils.getImageSize(path);
+    async compressImage({ maxWidth, maxHeight, compressionRate = 1, uri }) {
+      const originSize = await SBUUtils.getImageSize(uri);
       const resizingSize = getDownscaleSize(originSize, { width: maxWidth, height: maxHeight });
 
-      const { uri } = await imageManipulator.manipulateAsync(path, [{ resize: resizingSize }], {
+      const { uri: compressedURI } = await imageManipulator.manipulateAsync(uri, [{ resize: resizingSize }], {
         compress: Math.min(Math.max(0, compressionRate), 1),
       });
       const { size = 0 } = await fsModule.getInfoAsync(uri);
 
-      return { path: uri, size };
+      return { uri: compressedURI, size };
     },
   };
 };

packages/uikit-react-native/src/platform/createMediaService.native.tsx

@@ -36,22 +36,22 @@ const createNativeMediaService = ({
         return null;
       }
     },
-    async compressImage({ path, maxWidth, maxHeight, compressionRate = 1 }) {
-      const originSize = await SBUUtils.getImageSize(path);
+    async compressImage({ uri, maxWidth, maxHeight, compressionRate = 1 }) {
+      const originSize = await SBUUtils.getImageSize(uri);
       const { width, height } = getDownscaleSize(originSize, { width: maxWidth, height: maxHeight });
       const extension = (() => {
-        return { 'png': 'PNG', 'jpeg': 'JPEG', 'jpg': 'JPEG' }[getFileExtension(path)] ?? 'JPEG';
+        return { 'png': 'PNG', 'jpeg': 'JPEG', 'jpg': 'JPEG' }[getFileExtension(uri)] ?? 'JPEG';
       })() as 'PNG' | 'JPEG';
 
-      const { path: resizedPath, size: resizedSize } = await imageResizerModule.default.createResizedImage(
-        path,
+      const { size: resizedSize, uri: compressedURI } = await imageResizerModule.default.createResizedImage(
+        uri,
         width,
         height,
         extension,
         Math.min(Math.max(0, compressionRate), 1) * 100,
       );
 
-      return { path: resizedPath, size: resizedSize };
+      return { uri: compressedURI, size: resizedSize };
     },
   };
 };

packages/uikit-react-native/src/platform/types.ts

@@ -69,9 +69,9 @@ interface GetVideoThumbnailOptions {
 
 interface CompressImageOptions {
   /**
-   * A path of image file to compress
+   * A uri of image file to compress
    * */
-  path: string;
+  uri: string;
 
   /**
    * A resize width, apply only to downscale
@@ -91,7 +91,7 @@ interface CompressImageOptions {
 }
 
 type GetVideoThumbnailResult = Promise<{ path: string } | null>;
-type CompressImageResult = Promise<{ path: string; size: number } | null>;
+type CompressImageResult = Promise<{ uri: string; size: number } | null>;
 
 export interface MediaServiceInterface {
   VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;