Merge branch 'develop' into fix/expo-app-ui-bugs

Author: isekovanic

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -11,6 +11,7 @@ import {
   useTheme,
   useTranslationContext,
   useTypingString,
+  PortalWhileClosingView,
 } from 'stream-chat-react-native';
 import { useStateStore } from 'stream-chat-react-native';
 
@@ -161,7 +162,12 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
         onAlsoSentToChannelHeaderPress={onAlsoSentToChannelHeaderPress}
         messageId={targetedMessageIdFromParams}
       >
-        <ThreadHeader thread={thread} />
+        <PortalWhileClosingView
+          portalHostName='overlay-header'
+          portalName='channel-header'
+        >
+          <ThreadHeader thread={thread} />
+        </PortalWhileClosingView>
         <Thread
           onThreadDismount={onThreadDismount}
           shouldUseFlashList={messageListImplementation === 'flashlist'}

package/expo-package/src/native/StreamShimmerViewNativeComponent.ts

@@ -1,10 +1,11 @@
 import type { ColorValue, HostComponent, ViewProps } from 'react-native';
 
-import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 export interface NativeProps extends ViewProps {
   baseColor?: ColorValue;
+  duration?: WithDefault<Int32, 1200>;
   enabled?: WithDefault<boolean, true>;
   gradientColor?: ColorValue;
 }

package/native-package/src/native/StreamShimmerViewNativeComponent.ts

@@ -1,10 +1,11 @@
 import type { ColorValue, HostComponent, ViewProps } from 'react-native';
 
-import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 export interface NativeProps extends ViewProps {
   baseColor?: ColorValue;
+  duration?: WithDefault<Int32, 1200>;
   enabled?: WithDefault<boolean, true>;
   gradientColor?: ColorValue;
 }

package/shared-native/android/StreamShimmerFrameLayout.kt

@@ -28,6 +28,7 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
   attrs: AttributeSet? = null,
 ) : FrameLayout(context, attrs) {
   private var baseColor: Int = DEFAULT_BASE_COLOR
+  private var durationMs: Long = DEFAULT_DURATION_MS
   private var gradientColor: Int = DEFAULT_GRADIENT_COLOR
   private var enabled: Boolean = true
 
@@ -40,6 +41,7 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
 
   private var shimmerShader: LinearGradient? = null
   private var shimmerTranslateX: Float = 0f
+  private var animatedDurationMs: Long = 0L
   private var animatedViewWidth: Float = 0f
   private var animator: ValueAnimator? = null
 
@@ -61,6 +63,14 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
     invalidate()
   }
 
+  fun setDuration(duration: Int) {
+    val normalizedDurationMs =
+      if (duration > 0) duration.toLong() else DEFAULT_DURATION_MS
+    if (durationMs == normalizedDurationMs) return
+    durationMs = normalizedDurationMs
+    updateAnimatorState()
+  }
+
   fun setShimmerEnabled(enabled: Boolean) {
     if (this.enabled == enabled) return
     this.enabled = enabled
@@ -190,16 +200,17 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
   private fun startShimmer() {
     val viewWidth = width.toFloat()
     if (viewWidth <= 0f) return
-    // Keep the existing animator if the same-sized shimmer is already active.
-    if (animator != null && animatedViewWidth == viewWidth) return
+    // Keep the existing animator only when size and duration still match the current request.
+    if (animator != null && animatedViewWidth == viewWidth && animatedDurationMs == durationMs) return
 
     stopShimmer()
 
     // Animate from fully offscreen left to fully offscreen right so the strip enters/exits cleanly.
     val shimmerWidth = (viewWidth * SHIMMER_STRIP_WIDTH_RATIO).coerceAtLeast(1f)
     animatedViewWidth = viewWidth
+    animatedDurationMs = durationMs
     animator = ValueAnimator.ofFloat(-shimmerWidth, viewWidth).apply {
-      duration = SHIMMER_DURATION_MS
+      duration = durationMs
       repeatCount = ValueAnimator.INFINITE
       interpolator = LinearInterpolator()
       addUpdateListener {
@@ -213,6 +224,7 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
   private fun stopShimmer() {
     animator?.cancel()
     animator = null
+    animatedDurationMs = 0L
     animatedViewWidth = 0f
   }
 
@@ -237,8 +249,8 @@ class StreamShimmerFrameLayout @JvmOverloads constructor(
 
   companion object {
     private const val DEFAULT_BASE_COLOR = 0x00FFFFFF
+    private const val DEFAULT_DURATION_MS = 1200L
     private const val DEFAULT_GRADIENT_COLOR = 0x59FFFFFF
-    private const val SHIMMER_DURATION_MS = 1200L
     private const val SHIMMER_STRIP_WIDTH_RATIO = 1.25f
     private const val EDGE_HIGHLIGHT_ALPHA_FACTOR = 0.1f
     private const val SOFT_HIGHLIGHT_ALPHA_FACTOR = 0.24f

package/shared-native/android/StreamShimmerViewManager.kt

@@ -63,6 +63,10 @@ class StreamShimmerViewManager : ViewGroupManager<StreamShimmerFrameLayout>(),
     view.setBaseColor(color ?: DEFAULT_BASE_COLOR)
   }
 
+  override fun setDuration(view: StreamShimmerFrameLayout, duration: Int) {
+    view.setDuration(duration)
+  }
+
   override fun setGradientColor(view: StreamShimmerFrameLayout, color: Int?) {
     view.setGradientColor(color ?: DEFAULT_GRADIENT_COLOR)
   }

package/shared-native/ios/StreamShimmerView.swift

@@ -13,8 +13,8 @@ public final class StreamShimmerView: UIView {
   private static let midHighlightAlpha: CGFloat = 0.48
   private static let innerHighlightAlpha: CGFloat = 0.72
   private static let defaultHighlightAlpha: CGFloat = 0.35
+  private static let defaultShimmerDuration: CFTimeInterval = 1.2
   private static let shimmerStripWidthRatio: CGFloat = 1.25
-  private static let shimmerDuration: CFTimeInterval = 1.2
   private static let shimmerAnimationKey = "stream_shimmer_translate_x"
 
   private let baseLayer = CALayer()
@@ -23,6 +23,8 @@ public final class StreamShimmerView: UIView {
   private var baseColor: UIColor = UIColor(white: 1, alpha: 0)
   private var gradientColor: UIColor = UIColor(white: 1, alpha: defaultHighlightAlpha)
   private var enabled = false
+  private var shimmerDuration: CFTimeInterval = defaultShimmerDuration
+  private var lastAnimatedDuration: CFTimeInterval = 0
   private var lastAnimatedSize: CGSize = .zero
   private var isAppActive = true
 
@@ -74,16 +76,19 @@ public final class StreamShimmerView: UIView {
   public func apply(
     baseColor: UIColor,
     gradientColor: UIColor,
+    durationMilliseconds: Double,
     enabled: Bool
   ) {
     self.baseColor = baseColor
     self.gradientColor = gradientColor
+    shimmerDuration = Self.normalizedDuration(milliseconds: durationMilliseconds)
     self.enabled = enabled
     updateLayersForCurrentState()
   }
 
   public func stopAnimation() {
     shimmerLayer.removeAnimation(forKey: Self.shimmerAnimationKey)
+    lastAnimatedDuration = 0
     lastAnimatedSize = .zero
   }
 
@@ -172,7 +177,10 @@ public final class StreamShimmerView: UIView {
     }
 
     // If an animation already exists for the same size, keep it running instead of restarting.
-    if shimmerLayer.animation(forKey: Self.shimmerAnimationKey) != nil, lastAnimatedSize == bounds.size {
+    if shimmerLayer.animation(forKey: Self.shimmerAnimationKey) != nil,
+      lastAnimatedSize == bounds.size,
+      lastAnimatedDuration == shimmerDuration
+    {
       return
     }
 
@@ -183,14 +191,20 @@ public final class StreamShimmerView: UIView {
     let animation = CABasicAnimation(keyPath: "transform.translation.x")
     animation.fromValue = 0
     animation.toValue = bounds.width + shimmerWidth
-    animation.duration = Self.shimmerDuration
+    animation.duration = shimmerDuration
     animation.repeatCount = .infinity
     animation.timingFunction = CAMediaTimingFunction(name: .linear)
     animation.isRemovedOnCompletion = true
     shimmerLayer.add(animation, forKey: Self.shimmerAnimationKey)
+    lastAnimatedDuration = shimmerDuration
     lastAnimatedSize = bounds.size
   }
 
+  private static func normalizedDuration(milliseconds: Double) -> CFTimeInterval {
+    guard milliseconds > 0 else { return defaultShimmerDuration }
+    return milliseconds / 1000
+  }
+
   private func color(_ color: UIColor, alphaFactor: CGFloat) -> UIColor {
     // Preserve the resolved color channels and shape only alpha for smooth highlight falloff.
     let resolvedColor = color.resolvedColor(with: traitCollection)

package/shared-native/ios/StreamShimmerViewComponentView.mm

@@ -85,6 +85,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
 
   [_shimmerView applyWithBaseColor:baseColor
                      gradientColor:gradientColor
+               durationMilliseconds:newProps.duration
                            enabled:newProps.enabled];
 
   [super updateProps:props oldProps:oldProps];

package/src/components/Attachment/Attachment.tsx

@@ -13,7 +13,9 @@ import {
 
 import { AudioAttachment as AudioAttachmentDefault } from './Audio';
 
+import { UnsupportedAttachment as UnsupportedAttachmentDefault } from './UnsupportedAttachment';
 import { URLPreview as URLPreviewDefault } from './UrlPreview';
+import { URLPreviewCompact as URLPreviewCompactDefault } from './UrlPreview/URLPreviewCompact';
 
 import { FileAttachment as FileAttachmentDefault } from '../../components/Attachment/FileAttachment';
 import { Gallery as GalleryDefault } from '../../components/Attachment/Gallery';
@@ -43,7 +45,10 @@ export type AttachmentPropsWithContext = Pick<
   | 'Giphy'
   | 'isAttachmentEqual'
   | 'UrlPreview'
+  | 'URLPreviewCompact'
   | 'myMessageTheme'
+  | 'urlPreviewType'
+  | 'UnsupportedAttachment'
 > &
   Pick<MessageContextValue, 'message'> & {
     /**
@@ -64,8 +69,11 @@ const AttachmentWithContext = (props: AttachmentPropsWithContext) => {
     Gallery,
     Giphy,
     UrlPreview,
+    URLPreviewCompact,
     index,
     message,
+    urlPreviewType,
+    UnsupportedAttachment,
   } = props;
   const audioAttachmentStyles = useAudioAttachmentStyles();
 
@@ -74,6 +82,9 @@ const AttachmentWithContext = (props: AttachmentPropsWithContext) => {
   }
 
   if (attachment.og_scrape_url || attachment.title_link) {
+    if (urlPreviewType === 'compact') {
+      return <URLPreviewCompact attachment={attachment} />;
+    }
     return <UrlPreview attachment={attachment} />;
   }
 
@@ -109,8 +120,7 @@ const AttachmentWithContext = (props: AttachmentPropsWithContext) => {
     return <FileAttachment attachment={attachment} />;
   }
 
-  // TODO: Handle custom attachments
-  return <UrlPreview attachment={attachment} />;
+  return <UnsupportedAttachment attachment={attachment} />;
 };
 
 const areEqual = (prevProps: AttachmentPropsWithContext, nextProps: AttachmentPropsWithContext) => {
@@ -162,6 +172,9 @@ export const Attachment = (props: AttachmentProps) => {
     Giphy: PropGiphy,
     myMessageTheme: PropMyMessageTheme,
     UrlPreview: PropUrlPreview,
+    URLPreviewCompact: PropURLPreviewCompact,
+    urlPreviewType: PropUrlPreviewType,
+    UnsupportedAttachment: PropUnsupportedAttachment,
   } = props;
 
   const {
@@ -172,6 +185,9 @@ export const Attachment = (props: AttachmentProps) => {
     isAttachmentEqual,
     myMessageTheme: ContextMyMessageTheme,
     UrlPreview: ContextUrlPreview,
+    URLPreviewCompact: ContextURLPreviewCompact,
+    urlPreviewType: ContextUrlPreviewType,
+    UnsupportedAttachment: ContextUnsupportedAttachment,
   } = useMessagesContext();
 
   const { message } = useMessageContext();
@@ -186,6 +202,11 @@ export const Attachment = (props: AttachmentProps) => {
   const Giphy = PropGiphy || ContextGiphy || GiphyDefault;
   const UrlPreview = PropUrlPreview || ContextUrlPreview || URLPreviewDefault;
   const myMessageTheme = PropMyMessageTheme || ContextMyMessageTheme;
+  const URLPreviewCompact =
+    PropURLPreviewCompact || ContextURLPreviewCompact || URLPreviewCompactDefault;
+  const urlPreviewType = PropUrlPreviewType || ContextUrlPreviewType;
+  const UnsupportedAttachment =
+    PropUnsupportedAttachment || ContextUnsupportedAttachment || UnsupportedAttachmentDefault;
 
   return (
     <MemoizedAttachment
@@ -199,6 +220,9 @@ export const Attachment = (props: AttachmentProps) => {
         isAttachmentEqual,
         myMessageTheme,
         UrlPreview,
+        URLPreviewCompact,
+        urlPreviewType,
+        UnsupportedAttachment,
       }}
     />
   );

package/src/components/Attachment/FileAttachment.tsx

@@ -3,10 +3,10 @@ import { Pressable, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-na
 
 import type { Attachment } from 'stream-chat';
 
-import { FilePreview } from './FilePreview';
 import { openUrlSafely } from './utils/openUrlSafely';
 
-import { FileIcon as FileIconDefault, FileIconProps } from '../../components/Attachment/FileIcon';
+import { FileIconProps } from '../../components/Attachment/FileIcon';
+
 import {
   MessageContextValue,
   useMessageContext,
@@ -21,7 +21,7 @@ export type FileAttachmentPropsWithContext = Pick<
   MessageContextValue,
   'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
-  Pick<MessagesContextValue, 'additionalPressableProps'> & {
+  Pick<MessagesContextValue, 'additionalPressableProps' | 'FilePreview'> & {
     /** The attachment to render */
     attachment: Attachment;
     attachmentIconSize?: FileIconProps['size'];
@@ -41,6 +41,7 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
     additionalPressableProps,
     attachment,
     attachmentIconSize,
+    FilePreview,
     onLongPress,
     onPress,
     onPressIn,
@@ -98,14 +99,17 @@ export type FileAttachmentProps = Partial<Omit<FileAttachmentPropsWithContext, '
   Pick<FileAttachmentPropsWithContext, 'attachment'>;
 
 export const FileAttachment = (props: FileAttachmentProps) => {
+  const { FilePreview: PropFilePreview } = props;
   const { onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
-  const { additionalPressableProps, FileAttachmentIcon = FileIconDefault } = useMessagesContext();
+  const { additionalPressableProps, FilePreview: ContextFilePreview } = useMessagesContext();
+
+  const FilePreview = PropFilePreview || ContextFilePreview;
 
   return (
     <FileAttachmentWithContext
       {...{
         additionalPressableProps,
-        FileAttachmentIcon,
+        FilePreview,
         onLongPress,
         onPress,
         onPressIn,

package/src/components/Attachment/FilePreview.tsx

@@ -30,12 +30,14 @@ export type FilePreviewProps = Partial<Pick<MessagesContextValue, 'FileAttachmen
 export const FilePreview = (props: FilePreviewProps) => {
   const {
     attachment,
+    FileAttachmentIcon: PropFileAttachmentIcon,
     attachmentIconSize,
     styles: stylesProp = {},
     titleNumberOfLines = 2,
     indicator,
   } = props;
-  const { FileAttachmentIcon = FileIconDefault } = useMessagesContext();
+  const { FileAttachmentIcon: ContextFileAttachmentIcon } = useMessagesContext();
+  const FileAttachmentIcon = PropFileAttachmentIcon || ContextFileAttachmentIcon || FileIconDefault;
 
   const styles = useStyles();