[3369] Video thumbnails UI components (MessageList)

CHANGELOG.md

@@ -70,12 +70,20 @@
 - Improved how system bar colors are handled on the attachment gallery screen. [#4269](https://github.com/GetStream/stream-chat-android/pull/4269)
 
 ### ✅ Added
+- Added the function `MessageListItemViewHolderFactory.createMediaAttachmentsViewHolder()` which returns a `ViewHolder` capable of previewing both image and video attachments. [#4158](https://github.com/GetStream/stream-chat-android/pull/4158)
 - Added `UserAvatarView` and `ChannelAvatarView` to replace `AvatarView` to keep consistency with the Compose UI SDK. [#4165](https://github.com/GetStream/stream-chat-android/pull/4165)
+- Added the ability to turn off video previews (thumbnails) via `ChatUI.videoThumbnailsEnabled`. Video previews are a paid feature and as such you can turn them off. They are on by default and the pricing can be found [here](https://getstream.io/chat/pricing/). [#4158](https://github.com/GetStream/stream-chat-android/pull/4158)
+- Added a new function `MessageListItemViewHolderFactory.createMediaAttachmentsViewHolder()` which returns a `ViewHolder` capable of previewing both images and videos. [#4158](https://github.com/GetStream/stream-chat-android/pull/4158)
+- Added a style class called `MediaAttachmentViewStyle`. The new style controls how previews of both image and video attachments are displayed inside the message list. [#4158](https://github.com/GetStream/stream-chat-android/pull/4158)
 
 ### ⚠️ Changed
+- 🚨 Breaking change: The function `MessageListItemViewHolderFactory.createImageAttachmentsViewHolder()` has been removed in favor of the function `MessageListItemViewHolderFactory.createMediaAttachmentsViewHolder()` which returns a `ViewHolder` capable of previewing both images and videos. [#4158](https://github.com/GetStream/stream-chat-android/pull/4158)
+- 🚨 Breaking change: `ImageAttachmentViewStyle` has been removed and replaced by `MediaAttachmentViewStyle`. The new style controls how previews of both image and video attachments are displayed inside the message list. [#4158](https://github.com/GetStream/stream-chat-android/pull/4158)
 
 ### ❌ Removed
 - Removed `AvatarView` in favor of `UserAvatarView` and `ChannelAvatarView` to keep consistency with the Compose UI SDK. [#4165](https://github.com/GetStream/stream-chat-android/pull/4165)
+- The function `MessageListItemViewHolderFactory.createImageAttachmentsViewHolder()` has been removed in favor of the function `MessageListItemViewHolderFactory.createMediaAttachmentsViewHolder()` which returns a `ViewHolder` capable of previewing both images and videos. [#4158](https://github.com/GetStream/stream-chat-android/pull/4158)
+- `ImageAttachmentViewStyle` has been removed and replaced by `MediaAttachmentViewStyle`. The new style controls how previews of both image and video attachments are displayed inside the message list. [#4158](https://github.com/GetStream/stream-chat-android/pull/4158)
 
 ## stream-chat-android-compose
 ### 🐞 Fixed

stream-chat-android-ui-components/api/stream-chat-android-ui-components.api

@@ -640,6 +640,7 @@ public final class io/getstream/chat/android/ui/ChatUI {
 	public final fun getQuotedAttachmentFactoryManager ()Lio/getstream/chat/android/ui/message/list/adapter/viewholder/attachment/QuotedAttachmentFactoryManager;
 	public final fun getStyle ()Lio/getstream/chat/android/ui/common/style/ChatStyle;
 	public final fun getSupportedReactions ()Lio/getstream/chat/android/ui/SupportedReactions;
+	public final fun getVideoThumbnailsEnabled ()Z
 	public final fun setAttachmentFactoryManager (Lio/getstream/chat/android/ui/message/list/adapter/viewholder/attachment/AttachmentFactoryManager;)V
 	public final fun setAttachmentPreviewFactoryManager (Lio/getstream/chat/android/ui/message/composer/attachment/AttachmentPreviewFactoryManager;)V
 	public final fun setChannelNameFormatter (Lio/getstream/chat/android/ui/common/ChannelNameFormatter;)V
@@ -654,6 +655,7 @@ public final class io/getstream/chat/android/ui/ChatUI {
 	public final fun setQuotedAttachmentFactoryManager (Lio/getstream/chat/android/ui/message/list/adapter/viewholder/attachment/QuotedAttachmentFactoryManager;)V
 	public final fun setStyle (Lio/getstream/chat/android/ui/common/style/ChatStyle;)V
 	public final fun setSupportedReactions (Lio/getstream/chat/android/ui/SupportedReactions;)V
+	public final fun setVideoThumbnailsEnabled (Z)V
 }
 
 public final class io/getstream/chat/android/ui/CurrentUserProvider$Companion {
@@ -3243,8 +3245,8 @@ public class io/getstream/chat/android/ui/message/list/adapter/MessageListItemVi
 	protected final fun createErrorMessageItemViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
 	protected final fun createGiphyAttachmentViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
 	protected final fun createGiphyMessageItemViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
-	protected final fun createImageAttachmentsViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
 	protected final fun createLinkAttachmentsViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
+	protected final fun createMediaAttachmentsViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
 	protected final fun createMessageDeletedViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
 	protected final fun createPlainTextViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
 	protected final fun createSystemMessageItemViewHolder (Landroid/view/ViewGroup;)Lio/getstream/chat/android/ui/message/list/adapter/BaseMessageItemViewHolder;
@@ -3266,6 +3268,7 @@ public final class io/getstream/chat/android/ui/message/list/adapter/MessageList
 	public static final field INSTANCE Lio/getstream/chat/android/ui/message/list/adapter/MessageListItemViewType;
 	public static final field LINK_ATTACHMENTS I
 	public static final field LOADING_INDICATOR I
+	public static final field MEDIA_ATTACHMENT I
 	public static final field MESSAGE_DELETED I
 	public static final field PLAIN_TEXT I
 	public static final field SYSTEM_MESSAGE I
@@ -3308,20 +3311,40 @@ public final class io/getstream/chat/android/ui/message/list/adapter/view/GiphyM
 public final class io/getstream/chat/android/ui/message/list/adapter/view/GiphyMediaAttachmentViewStyle$Companion {
 }
 
-public final class io/getstream/chat/android/ui/message/list/adapter/view/ImageAttachmentViewStyle {
-	public fun <init> (Landroid/graphics/drawable/Drawable;Landroid/graphics/drawable/Drawable;IILio/getstream/chat/android/ui/common/style/TextStyle;)V
+public final class io/getstream/chat/android/ui/message/list/adapter/view/MediaAttachmentViewStyle {
+	public fun <init> (Landroid/graphics/drawable/Drawable;Landroid/graphics/drawable/Drawable;Ljava/lang/Integer;IILio/getstream/chat/android/ui/common/style/TextStyle;Landroid/graphics/drawable/Drawable;Ljava/lang/Integer;IFIIIIF)V
 	public final fun component1 ()Landroid/graphics/drawable/Drawable;
+	public final fun component10 ()F
+	public final fun component11 ()I
+	public final fun component12 ()I
+	public final fun component13 ()I
+	public final fun component14 ()I
+	public final fun component15 ()F
 	public final fun component2 ()Landroid/graphics/drawable/Drawable;
-	public final fun component3 ()I
+	public final fun component3 ()Ljava/lang/Integer;
 	public final fun component4 ()I
-	public final fun component5 ()Lio/getstream/chat/android/ui/common/style/TextStyle;
-	public final fun copy (Landroid/graphics/drawable/Drawable;Landroid/graphics/drawable/Drawable;IILio/getstream/chat/android/ui/common/style/TextStyle;)Lio/getstream/chat/android/ui/message/list/adapter/view/ImageAttachmentViewStyle;
-	public static synthetic fun copy$default (Lio/getstream/chat/android/ui/message/list/adapter/view/ImageAttachmentViewStyle;Landroid/graphics/drawable/Drawable;Landroid/graphics/drawable/Drawable;IILio/getstream/chat/android/ui/common/style/TextStyle;ILjava/lang/Object;)Lio/getstream/chat/android/ui/message/list/adapter/view/ImageAttachmentViewStyle;
+	public final fun component5 ()I
+	public final fun component6 ()Lio/getstream/chat/android/ui/common/style/TextStyle;
+	public final fun component7 ()Landroid/graphics/drawable/Drawable;
+	public final fun component8 ()Ljava/lang/Integer;
+	public final fun component9 ()I
+	public final fun copy (Landroid/graphics/drawable/Drawable;Landroid/graphics/drawable/Drawable;Ljava/lang/Integer;IILio/getstream/chat/android/ui/common/style/TextStyle;Landroid/graphics/drawable/Drawable;Ljava/lang/Integer;IFIIIIF)Lio/getstream/chat/android/ui/message/list/adapter/view/MediaAttachmentViewStyle;
+	public static synthetic fun copy$default (Lio/getstream/chat/android/ui/message/list/adapter/view/MediaAttachmentViewStyle;Landroid/graphics/drawable/Drawable;Landroid/graphics/drawable/Drawable;Ljava/lang/Integer;IILio/getstream/chat/android/ui/common/style/TextStyle;Landroid/graphics/drawable/Drawable;Ljava/lang/Integer;IFIIIIFILjava/lang/Object;)Lio/getstream/chat/android/ui/message/list/adapter/view/MediaAttachmentViewStyle;
 	public fun equals (Ljava/lang/Object;)Z
-	public final fun getImageBackgroundColor ()I
+	public final fun getMediaPreviewBackgroundColor ()I
 	public final fun getMoreCountOverlayColor ()I
 	public final fun getMoreCountTextStyle ()Lio/getstream/chat/android/ui/common/style/TextStyle;
 	public final fun getPlaceholderIcon ()Landroid/graphics/drawable/Drawable;
+	public final fun getPlaceholderIconTint ()Ljava/lang/Integer;
+	public final fun getPlayVideoIcon ()Landroid/graphics/drawable/Drawable;
+	public final fun getPlayVideoIconBackgroundColor ()I
+	public final fun getPlayVideoIconCornerRadius ()F
+	public final fun getPlayVideoIconElevation ()F
+	public final fun getPlayVideoIconPaddingBottom ()I
+	public final fun getPlayVideoIconPaddingEnd ()I
+	public final fun getPlayVideoIconPaddingStart ()I
+	public final fun getPlayVideoIconPaddingTop ()I
+	public final fun getPlayVideoIconTint ()Ljava/lang/Integer;
 	public final fun getProgressIcon ()Landroid/graphics/drawable/Drawable;
 	public fun hashCode ()I
 	public fun toString ()Ljava/lang/String;

stream-chat-android-ui-components/src/main/kotlin/com/getstream/sdk/chat/images/ViewExtensions.kt

@@ -45,7 +45,7 @@ public fun ImageView.load(
 @InternalStreamChatApi
 public fun ImageView.load(
     data: Any?,
-    placeholderDrawable: Drawable,
+    placeholderDrawable: Drawable?,
     transformation: ImageTransformation = ImageTransformation.None,
     onStart: () -> Unit = {},
     onComplete: () -> Unit = {},

stream-chat-android-ui-components/src/main/kotlin/io/getstream/chat/android/ui/ChatUI.kt

@@ -127,4 +127,9 @@ public object ChatUI {
      * Provides the currently logged in user.
      */
     public var currentUserProvider: CurrentUserProvider = CurrentUserProvider.defaultCurrentUserProvider()
+
+    /**
+     * Whether thumbnails for video attachments will be displayed in previews.
+     */
+    public var videoThumbnailsEnabled: Boolean = true
 }

stream-chat-android-ui-components/src/main/kotlin/io/getstream/chat/android/ui/TransformStyle.kt

@@ -31,7 +31,7 @@ import io.getstream.chat.android.ui.message.list.MessageListItemStyle
 import io.getstream.chat.android.ui.message.list.MessageListViewStyle
 import io.getstream.chat.android.ui.message.list.MessageReplyStyle
 import io.getstream.chat.android.ui.message.list.ScrollButtonViewStyle
-import io.getstream.chat.android.ui.message.list.adapter.view.ImageAttachmentViewStyle
+import io.getstream.chat.android.ui.message.list.adapter.view.MediaAttachmentViewStyle
 import io.getstream.chat.android.ui.message.list.header.MessageListHeaderViewStyle
 import io.getstream.chat.android.ui.message.list.reactions.edit.EditReactionsViewStyle
 import io.getstream.chat.android.ui.message.list.reactions.user.SingleReactionViewStyle
@@ -54,7 +54,7 @@ public object TransformStyle {
     public var singleReactionViewStyleTransformer: StyleTransformer<SingleReactionViewStyle> = noopTransformer()
     public var channelActionsDialogStyleTransformer: StyleTransformer<ChannelActionsDialogViewStyle> = noopTransformer()
     public var giphyViewHolderStyleTransformer: StyleTransformer<GiphyViewHolderStyle> = noopTransformer()
-    public var imageAttachmentStyleTransformer: StyleTransformer<ImageAttachmentViewStyle> = noopTransformer()
+    public var imageAttachmentStyleTransformer: StyleTransformer<MediaAttachmentViewStyle> = noopTransformer()
     public var messageReplyStyleTransformer: StyleTransformer<MessageReplyStyle> = noopTransformer()
     public var fileAttachmentStyleTransformer: StyleTransformer<FileAttachmentViewStyle> = noopTransformer()
     public var suggestionListStyleTransformer: StyleTransformer<SuggestionListViewStyle> = noopTransformer()

stream-chat-android-ui-components/src/main/kotlin/io/getstream/chat/android/ui/message/list/adapter/MessageListItemViewHolderFactory.kt

@@ -29,9 +29,9 @@ import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.FILE_ATTACHMENTS
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.GIPHY
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.GIPHY_ATTACHMENT
-import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.IMAGE_ATTACHMENT
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.LINK_ATTACHMENTS
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.LOADING_INDICATOR
+import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.MEDIA_ATTACHMENT
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.MESSAGE_DELETED
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.PLAIN_TEXT
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.SYSTEM_MESSAGE
@@ -47,8 +47,8 @@ import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.Err
 import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.FileAttachmentsViewHolder
 import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.GiphyAttachmentViewHolder
 import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.GiphyViewHolder
-import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.ImageAttachmentViewHolder
 import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.LinkAttachmentsViewHolder
+import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.MediaAttachmentsViewHolder
 import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.MessageDeletedViewHolder
 import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.MessagePlainTextViewHolder
 import io.getstream.chat.android.ui.message.list.adapter.viewholder.internal.SystemMessageViewHolder
@@ -167,7 +167,7 @@ public open class MessageListItemViewHolderFactory {
             LINK_ATTACHMENTS -> createLinkAttachmentsViewHolder(parentView)
             GIPHY_ATTACHMENT -> createGiphyAttachmentViewHolder(parentView)
             FILE_ATTACHMENTS -> createFileAttachmentsViewHolder(parentView)
-            IMAGE_ATTACHMENT -> createImageAttachmentsViewHolder(parentView)
+            MEDIA_ATTACHMENT -> createMediaAttachmentsViewHolder(parentView)
             else -> throw IllegalArgumentException("Unhandled MessageList view type: $viewType")
         }
     }
@@ -208,16 +208,16 @@ public open class MessageListItemViewHolderFactory {
     }
 
     /**
-     * Creates a ViewHolder for messages containing image attachments and no other type
+     * Creates a ViewHolder for messages containing image and/ or video attachments and no other type
      * of attachments.
      *
      * @param parentView The parent container.
-     * @return The [BaseMessageItemViewHolder] that displays messages with image attachments.
+     * @return The [BaseMessageItemViewHolder] that displays messages with image and/or video attachments.
      */
-    protected fun createImageAttachmentsViewHolder(
+    protected fun createMediaAttachmentsViewHolder(
         parentView: ViewGroup,
     ): BaseMessageItemViewHolder<out MessageListItem> {
-        return ImageAttachmentViewHolder(
+        return MediaAttachmentsViewHolder(
             parentView,
             decoratorProvider.decorators,
             listenerContainer,

stream-chat-android-ui-components/src/main/kotlin/io/getstream/chat/android/ui/message/list/adapter/MessageListItemViewType.kt

@@ -38,4 +38,5 @@ public object MessageListItemViewType {
     public const val IMAGE_ATTACHMENT: Int = OFFSET + 13
     public const val FILE_ATTACHMENTS: Int = OFFSET + 14
     public const val LINK_ATTACHMENTS: Int = OFFSET + 15
+    public const val MEDIA_ATTACHMENT: Int = OFFSET + 16
 }

stream-chat-android-ui-components/src/main/kotlin/io/getstream/chat/android/ui/message/list/adapter/internal/MessageListItemViewTypeMapper.kt

@@ -29,16 +29,17 @@ import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.FILE_ATTACHMENTS
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.GIPHY
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.GIPHY_ATTACHMENT
-import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.IMAGE_ATTACHMENT
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.LINK_ATTACHMENTS
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.LOADING_INDICATOR
+import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.MEDIA_ATTACHMENT
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.MESSAGE_DELETED
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.PLAIN_TEXT
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.SYSTEM_MESSAGE
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.THREAD_PLACEHOLDER
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.THREAD_SEPARATOR
 import io.getstream.chat.android.ui.message.list.adapter.MessageListItemViewType.TYPING_INDICATOR
 import io.getstream.chat.android.ui.message.list.adapter.viewholder.attachment.AttachmentFactoryManager
+import io.getstream.chat.android.uiutils.constant.AttachmentType
 import io.getstream.chat.android.uiutils.extension.hasLink
 import io.getstream.chat.android.uiutils.extension.isUploading
 
@@ -82,19 +83,19 @@ internal object MessageListItemViewTypeMapper {
             message.isGiphyEphemeral() -> GIPHY
             containsGiphy -> GIPHY_ATTACHMENT
             containsOnlyLinks -> LINK_ATTACHMENTS
-            message.isImageAttachment() -> IMAGE_ATTACHMENT
+            message.isMediaAttachment() -> MEDIA_ATTACHMENT
             hasAttachments -> FILE_ATTACHMENTS
             else -> PLAIN_TEXT
         }
     }
 
     /**
-     * Checks if the message contains only image attachments (Can also optionally contain links).
+     * Checks if the message contains only image or video attachments (Can also optionally contain links).
      */
-    private fun Message.isImageAttachment(): Boolean {
+    private fun Message.isMediaAttachment(): Boolean {
         return attachments.isNotEmpty() &&
-            attachments.any { it.isImage() } &&
-            attachments.all { it.isImage() || it.hasLink() } &&
+            attachments.any { it.isImage() || it.type == AttachmentType.VIDEO } &&
+            attachments.all { it.isImage() || it.type == AttachmentType.VIDEO || it.hasLink() } &&
             attachments.none { it.isUploading() }
     }