Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3369] Video thumbnails UI components (MessageList) #4158

Merged
merged 32 commits into from
Oct 18, 2022

Conversation

MarinTolic
Copy link
Contributor

@MarinTolic MarinTolic commented Sep 14, 2022

🎯 Goal

This PR implements the Message List part of the video thumbnails effort, the gallery part will arrive in a separate PR.

🛠 Implementation details

Reworked the image attachment ViewHolder and its child elements in order to display both image and video attachments.

🎨 UI Changes

Before After
Screenshot_1665158372 Screenshot_1665158218

🧪 Testing

Test A:

  1. Launch the XML app
  2. Go to a channel
  3. test sending mixed attachments in patterns such as: single image, single video, single other attachment, multiple images, multiple videos, multiple other attachments, mixed image and video attachments and mixed various attachments.

Expectation: Everything should be rendered correctly with images and video being rendered as previewable attachments while other types will be rendered as file attachments.

Test B:

  1. Apply given patch
  2. Launch the XML app
  3. Observe that the style of the media attachments has now changes, pay special attention to the play button
  4. Feel free to customize this further yourself.
Provide the patch summary here
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 de1d49bceccd2bc6d21e13dd245e42f391a286a1)
+++ b/stream-chat-android-ui-components/src/main/res/values/styles.xml	(date 1665159510998)
@@ -507,16 +507,18 @@
     <style name="StreamUi.MessageList.MediaAttachment" parent="StreamUi">
         <item name="streamUiMediaAttachmentProgressIcon">@drawable/stream_ui_rotating_indeterminate_progress_gradient</item>
         <item name="streamUiMediaAttachmentPlaceHolderIcon">@drawable/stream_ui_picture_placeholder</item>
-        <item name="streamUiMediaAttachmentMediaPreviewBackgroundColor">@color/stream_ui_message_list_image_attachment_background</item>
+        <item name="streamUiMediaAttachmentPlaceHolderIconTint">@color/stream_ui_literal_white</item>
+        <item name="streamUiMediaAttachmentMediaPreviewBackgroundColor">@color/stream_ui_black_50</item>
         <item name="streamUiMediaAttachmentMoreCountOverlayColor">@color/stream_ui_overlay</item>
         <item name="streamUiMediaAttachmentPlayVideoIcon">@drawable/stream_ui_ic_play</item>
-        <item name="streamUiMediaAttachmentPlayVideoIconElevation">3dp</item>
-        <item name="streamUiMediaAttachmentPlayVideoIconPaddingTop">2dp</item>
-        <item name="streamUiMediaAttachmentPlayVideoIconPaddingBottom">2dp</item>
-        <item name="streamUiMediaAttachmentPlayVideoIconPaddingStart">3dp</item>
-        <item name="streamUiMediaAttachmentPlayVideoIconPaddingEnd">2dp</item>
-        <item name="streamUiMediaAttachmentPlayVideoIconCornerRadius">24dp</item>
-        <item name="streamUiMediaAttachmentPlayVideoIconBackgroundColor">@color/stream_ui_literal_white</item>
+        <item name="streamUiMediaAttachmentPlayVideoIconTint">@color/stream_ui_white</item>
+        <item name="streamUiMediaAttachmentPlayVideoIconElevation">0dp</item>
+        <item name="streamUiMediaAttachmentPlayVideoIconPaddingTop">4dp</item>
+        <item name="streamUiMediaAttachmentPlayVideoIconPaddingBottom">4dp</item>
+        <item name="streamUiMediaAttachmentPlayVideoIconPaddingStart">5dp</item>
+        <item name="streamUiMediaAttachmentPlayVideoIconPaddingEnd">4dp</item>
+        <item name="streamUiMediaAttachmentPlayVideoIconCornerRadius">5dp</item>
+        <item name="streamUiMediaAttachmentPlayVideoIconBackgroundColor">@color/stream_ui_black_50</item>
 
         <item name="streamUiMediaAttachmentMoreCountTextSize">@dimen/stream_ui_message_image_attachment_more_count_text_size</item>
         <item name="streamUiMediaAttachmentMoreCountTextColor">@color/stream_ui_literal_white</item>

☑️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

gif

@MarinTolic MarinTolic changed the title Feature/3369 video thumbnails UI components [3369] Video thumbnails UI components Oct 7, 2022
…e to the inability to gain the relevant information at every possible point
…e to the inability to gain the relevant information at every possible point
@MarinTolic MarinTolic changed the title [3369] Video thumbnails UI components [3369] Video thumbnails UI components [MessageList] Oct 7, 2022
@MarinTolic MarinTolic changed the title [3369] Video thumbnails UI components [MessageList] [3369] Video thumbnails UI components (MessageList) Oct 7, 2022
@MarinTolic MarinTolic marked this pull request as ready for review October 7, 2022 17:09
@MarinTolic MarinTolic requested a review from a team as a code owner October 7, 2022 17:09
@MarinTolic MarinTolic requested a review from a team October 7, 2022 17:09
…droid into feature/3369-video-thumbnails-ui-components

� Conflicts:
�	stream-chat-android-ui-components/src/main/kotlin/io/getstream/chat/android/ui/message/list/options/message/MessageOptionsDialogFragment.kt
Copy link
Contributor

@TGazica TGazica left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

☑️Reviewer Checklist

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

Works and looks good, left a few comments regarding formatting and kdocs, nothing major.

MarinTolic and others added 9 commits October 17, 2022 13:08
Co-authored-by: Tomislav Gazica <[email protected]>
…-components' into feature/3369-video-thumbnails-ui-components
…-components' into feature/3369-video-thumbnails-ui-components
…droid into feature/3369-video-thumbnails-ui-components

� Conflicts:
�	CHANGELOG.md
�	stream-chat-android-ui-components/src/main/kotlin/io/getstream/chat/android/ui/TransformStyle.kt
…droid into feature/3369-video-thumbnails-ui-components

� Conflicts:
�	CHANGELOG.md
@MarinTolic MarinTolic enabled auto-merge (squash) October 18, 2022 10:09
@MarinTolic MarinTolic merged commit 1a873a3 into develop Oct 18, 2022
@MarinTolic MarinTolic deleted the feature/3369-video-thumbnails-ui-components branch October 18, 2022 10:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Previews of videos are not visible in messageList on Android, but on iOS yes
2 participants