[3369] video thumbnails UI components gallery

[MarinTolic]

🎯 Goal

closes #3369

🛠 Implementation details

Implemented the ability to display video items in the previously used image attachment gallery.

🎨 UI Changes

Gallery Offline

Before	After

Gallery Online

Before	After

Video Reproduction

Before	After

🧪 Testing

Functionality Test

1. Upload or find a video, preferably more than one
2. Open it/ them in the gallery
3. Play videos, page through and share them to check that all functionalities work as expected

Customizability Test

Patch A:

1. Apply the patch below
2. Open a video in the gallery and expand the media overview (bottom sheet)
3. Confirm that the customized parameters have been applied.

Customizability Patch

Index: stream-chat-android-ui-components/src/main/res/values/styles.xml
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/stream-chat-android-ui-components/src/main/res/values/styles.xml b/stream-chat-android-ui-components/src/main/res/values/styles.xml
--- a/stream-chat-android-ui-components/src/main/res/values/styles.xml	(revision e3b1137a180305fb4b785e393283a80a315ef9c9)
+++ b/stream-chat-android-ui-components/src/main/res/values/styles.xml	(date 1666095213068)
@@ -846,27 +846,29 @@
 
     <style name="StreamUi.AttachmentGallery.VideoAttachments">
         <item name="streamUiAttachmentGalleryViewMediaPlayVideoButtonIcon">@drawable/stream_ui_ic_play</item>
-        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconElevation">3dp</item>
-        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconPaddingTop">2dp</item>
-        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconPaddingBottom">2dp</item>
-        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconPaddingStart">3dp</item>
-        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconPaddingEnd">2dp</item>
-        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconCornerRadius">24dp</item>
-        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconBackgroundColor">@color/stream_ui_literal_white</item>
+        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconElevation">0dp</item>
+        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconPaddingTop">10dp</item>
+        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconPaddingBottom">10dp</item>
+        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconPaddingStart">10dp</item>
+        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconPaddingEnd">10dp</item>
+        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconCornerRadius">3dp</item>
+        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconBackgroundColor">@color/stream_ui_black_50</item>
         <item name="streamUiAttachmentGalleryViewMediaPlayIconWidth">45dp</item>
         <item name="streamUiAttachmentGalleryViewMediaPlayIconHeight">45dp</item>
-        <item name="streamUiAttachmentGalleryViewMediaImagePlaceholder">@drawable/stream_ui_picture_placeholder</item>
+        <item name="streamUiAttachmentGalleryViewMediaPlayVideoIconTint">@color/stream_ui_literal_white</item>
+        <item name="streamUiAttachmentGalleryViewMediaImagePlaceholder">@drawable/stream_ic_notification</item>
     </style>
 
     <style name="StreamUi.MediaAttachmentGridView">
-        <item name="streamUiMediaAttachmentGridViewPlayVideoButtonIcon">@drawable/stream_ui_ic_play</item>
+        <item name="streamUiMediaAttachmentGridViewPlayVideoButtonIcon">@drawable/stream_ui_ic_filled_right_arrow</item>
         <item name="streamUiMediaAttachmentGridViewPlayVideoIconElevation">3dp</item>
         <item name="streamUiMediaAttachmentGridViewPlayVideoIconPaddingTop">2dp</item>
         <item name="streamUiMediaAttachmentGridViewPlayVideoIconPaddingBottom">2dp</item>
         <item name="streamUiMediaAttachmentGridViewPlayVideoIconPaddingStart">3dp</item>
         <item name="streamUiMediaAttachmentGridViewPlayVideoIconPaddingEnd">2dp</item>
         <item name="streamUiMediaAttachmentGridViewPlayVideoIconCornerRadius">24dp</item>
-        <item name="streamUiMediaAttachmentGridViewPlayVideoIconBackgroundColor">@color/stream_ui_literal_white</item>
+        <item name="streamUiMediaAttachmentGridViewPlayVideoIconBackgroundColor">@color/stream_ui_black_50</item>
+        <item name="streamUiMediaAttachmentGridViewPlayVideoIconTint">@color/stream_ui_accent_blue</item>
         <item name="streamUiMediaAttachmentGridViewImagePlaceholder">@drawable/stream_ui_picture_placeholder</item>
     </style>
 

Test B:

1. Apply the patch below
2. Enter a channel with a video or send one to a channel
3. Reply to the video
4. Check that the video thumbnail isn't being displayed in the original message, reply to the message or the gallery

Patch that disables thumbnails

Index: stream-chat-android-ui-components-sample/src/main/kotlin/io/getstream/chat/ui/sample/application/App.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/stream-chat-android-ui-components-sample/src/main/kotlin/io/getstream/chat/ui/sample/application/App.kt b/stream-chat-android-ui-components-sample/src/main/kotlin/io/getstream/chat/ui/sample/application/App.kt
--- a/stream-chat-android-ui-components-sample/src/main/kotlin/io/getstream/chat/ui/sample/application/App.kt	(revision 9f3ecede5170c18057bc3e250c133765c34ed8e7)
+++ b/stream-chat-android-ui-components-sample/src/main/kotlin/io/getstream/chat/ui/sample/application/App.kt	(date 1666096933672)
@@ -19,6 +19,7 @@
 import android.app.Application
 import io.getstream.chat.android.client.utils.internal.toggle.ToggleService
 import io.getstream.chat.android.core.internal.InternalStreamChatApi
+import io.getstream.chat.android.ui.ChatUI
 import io.getstream.chat.ui.sample.data.user.SampleUser
 import io.getstream.chat.ui.sample.data.user.UserRepository
 
@@ -33,6 +34,7 @@
         initializeToggleService()
         chatInitializer.init(getApiKey())
         instance = this
+        ChatUI.videoThumbnailsEnabled = false
         DebugMetricsHelper.init()
         ApplicationConfigurator.configureApp(this)
     }

☑️Contributor Checklist

General

• Assigned a person / code owner group (required)
• Thread with the PR link started in a respective Slack channel (#android-chat-core or #android-chat-ui) (required)
• PR targets the develop branch
• PR is linked to the GitHub issue it resolves

Code & documentation

• Changelog is updated with client-facing changes
• New code is covered by unit tests
• Comparison screenshots added for visual changes
• Affected documentation updated (KDocs, docusaurus, tutorial)

☑️Reviewer Checklist

• UI Components sample runs & works
• Compose sample runs & works
• UI Changes correct (before & after images)
• Bugs validated (bugfixes)
• New feature tested and works
• Release notes and docs clearly describe changes
• All code we touched has new or updated KDocs

🎉 GIF

[bychkovdmitry]

LGTM