Measuring the proper sizes of images in chat #15675

alwx · 2023-04-18T08:38:37Z

Fixes #15654

Platforms

Android
iOS

Areas that maybe impacted

Functional

1-1 chats
public chats
group chats

status: ready

status-im-auto · 2023-04-18T08:44:35Z

Jenkins Builds

Click to see older builds (4)

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`f49efb2`	#1	2023-04-18 08:44:34	~5 min	`android-e2e`	🤖`apk` 📲
✔️	`f49efb2`	#1	2023-04-18 08:45:03	~6 min	`tests`	📄`log`
✔️	`f49efb2`	#1	2023-04-18 08:45:56	~7 min	`android`	🤖`apk` 📲
✔️	`f49efb2`	#1	2023-04-18 08:46:26	~7 min	`ios`	📱`ipa` 📲

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`995180c`	#2	2023-04-18 10:07:04	~5 min	`android-e2e`	🤖`apk` 📲
✔️	`995180c`	#2	2023-04-18 10:07:51	~6 min	`android`	🤖`apk` 📲
✔️	`995180c`	#2	2023-04-18 10:08:03	~6 min	`tests`	📄`log`
✔️	`995180c`	#2	2023-04-18 10:09:49	~8 min	`ios`	📱`ipa` 📲

✔️	`f3122e3`	#3	2023-04-18 11:54:24	~6 min	`android-e2e`	🤖`apk` 📲
✔️	`f3122e3`	#3	2023-04-18 11:54:37	~6 min	`tests`	📄`log`
✔️	`f3122e3`	#3	2023-04-18 11:55:30	~7 min	`android`	🤖`apk` 📲
✔️	`f3122e3`	#3	2023-04-18 11:56:33	~8 min	`ios`	📱`ipa` 📲

siddarthkay · 2023-04-18T08:53:21Z

src/status_im2/contexts/chat/messages/link_preview/view.cljs

+                                                                                  true)]
+                                              (reset! measured-width width)
+                                              (reset! measured-height height)))
+                     :style               (style/image {:width  @measured-width


Are there any safeguards in place if actual width and actual height are greater than our viewport?

Good point, Should we default to a factor of the screen dimensions ?
Like for example the max or the undefined value to be %25 width and height of the screen

for small images and images with weird aspect ratios we will face scaling issues. I think better is to use object-fit css, something along the lines of this : https://stackoverflow.com/a/34713809 but then again I am not 100% sure of this solution either.

Will have to spend some time on this to get an optimal state.. @ibrkhalil

There is already a safeguard, this is how the style for link-preview-loader is defined:

(defn image [{:keys [height width] :as dimensions}] (merge (if (and (pos? height) (pos? width)) (scale-dimensions dimensions) {:height 170}) {:overflow :hidden :border-radius 12}))

It uses the function scale-dimension which scales the pic and takes the screen width into the consideration (see status-im2.contexts.chat.messages.link-preview.style/scale-dimensions)

siddarthkay

Looks good to me.

status-im-auto · 2023-04-18T11:35:51Z

93% of end-end tests have passed

Total executed tests: 29
Failed tests: 2
Passed tests: 27

IDs of failed tests: 702850,702838

Failed tests (2)

Click to expand

Rerun failed tests

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_decline, id: 702850

Device 2: Find `Button` by `accessibility id`: `tab-recent`
Device 2: Tap on found: Button

medium/test_activity_center.py:142: in test_activity_center_contact_request_decline
    self.errors.verify_no_errors()
base_test_case.py:184: in verify_no_errors
    pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
 Username is not shown on 'Add contact' page after entering valid public key

[[Blocked by 15500]]

Device sessions

Device 1:

Device 2:

Class TestCommunityMultipleDeviceMerged:

1. test_community_message_send_check_timestamps_sender_username, id: 702838

Device 2: Verifying that 'hello' is under today
Device 2: Looking for a message by text: hello

critical/test_public_chat_browsing.py:418: in test_community_message_send_check_timestamps_sender_username
    channel.verify_message_is_under_today_text(message, self.errors)
../views/chat_view.py:923: in verify_message_is_under_today_text
    message_element.wait_for_visibility_of_element()
../views/base_element.py:135: in wait_for_visibility_of_element
    raise TimeoutException(
 Device 2: ChatElementByText by xpath:`//*[starts-with(@text,'hello')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` is not found on the screen after wait_for_visibility_of_element

[[blocked by 14797]]

Device sessions

Device 1:

Device 2:

Passed tests (27)

Click to expand

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestActivityMultipleDevicePR:

1. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_activity_center_admin_notification_accept_swipe, id: 702958
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_navigation_jump_to, id: 702936
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_activity_center_mentions, id: 702957
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_text_message_delete_push_disappear, id: 702733
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_1_1_chat_edit_message, id: 702855
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_1_1_chat_message_reaction, id: 702730
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_1_1_chat_pin_messages, id: 702731
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_1_1_chat_push_emoji, id: 702813
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
9. test_1_1_chat_delete_via_long_press_relogin, id: 702784
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestCommunityMultipleDeviceMerged:

1. test_community_emoji_send_copy_paste_reply, id: 702840
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_community_mentions_push_notification, id: 702786
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_community_contact_block_unblock_offline, id: 702894
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_community_leave, id: 702845
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_community_unread_messages_badge, id: 702841
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_community_message_delete, id: 702839
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_community_message_edit, id: 702843
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
2. test_group_chat_join_send_text_messages_push, id: 702807
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
3. test_group_chat_offline_pn, id: 702808
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

Class TestCommunityOneDeviceMerged:

1. test_community_navigate_to_channel_when_relaunch, id: 702846
Device sessions Device 1: Steps, video, logs
2. test_community_copy_and_paste_message_in_chat_input, id: 702742
Device sessions Device 1: Steps, video, logs

qoqobolo · 2023-04-18T14:05:06Z

Thanks for your work @alwx!
PR is tested and can be merged.

* Measuring the proper sizes of images * Style fix

alwx added 2 commits April 18, 2023 10:34

Measuring the proper sizes of images

cd76fa0

Style fix

f49efb2

alwx requested review from flexsurfer, ibrkhalil and siddarthkay April 18, 2023 08:38

ibrkhalil requested a review from OmarBasem April 18, 2023 08:40

ibrkhalil assigned alwx Apr 18, 2023

ibrkhalil approved these changes Apr 18, 2023

View reviewed changes

ibrkhalil added the request-manual-qa label Apr 18, 2023

siddarthkay reviewed Apr 18, 2023

View reviewed changes

alwx requested a review from siddarthkay April 18, 2023 10:01

Merge branch 'develop' into bugfix/15654

995180c

siddarthkay approved these changes Apr 18, 2023

View reviewed changes

qoqobolo self-assigned this Apr 18, 2023

Merge branch 'develop' into bugfix/15654

f3122e3

qoqobolo added the Tested - OK label Apr 18, 2023

alwx merged commit a0f2481 into develop Apr 18, 2023

alwx deleted the bugfix/15654 branch April 18, 2023 14:56

ibrkhalil pushed a commit that referenced this pull request Apr 20, 2023

Measuring the proper sizes of images in chat (#15675)

bcafe3d

* Measuring the proper sizes of images * Style fix

alwx added a commit that referenced this pull request Apr 28, 2023

Measuring the proper sizes of images in chat (#15675)

ab38c13

* Measuring the proper sizes of images * Style fix

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Measuring the proper sizes of images in chat #15675

Measuring the proper sizes of images in chat #15675

alwx commented Apr 18, 2023

status-im-auto commented Apr 18, 2023 •

edited

Loading

siddarthkay Apr 18, 2023

ibrkhalil Apr 18, 2023 •

edited

Loading

siddarthkay Apr 18, 2023 •

edited

Loading

alwx Apr 18, 2023

siddarthkay left a comment

status-im-auto commented Apr 18, 2023

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestCommunityMultipleDeviceMerged:

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestActivityMultipleDevicePR:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestCommunityMultipleDeviceMerged:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityOneDeviceMerged:

qoqobolo commented Apr 18, 2023

Measuring the proper sizes of images in chat #15675

Measuring the proper sizes of images in chat #15675

Conversation

alwx commented Apr 18, 2023

Platforms

Areas that maybe impacted

Functional

status-im-auto commented Apr 18, 2023 • edited Loading

Jenkins Builds

siddarthkay Apr 18, 2023

Choose a reason for hiding this comment

ibrkhalil Apr 18, 2023 • edited Loading

Choose a reason for hiding this comment

siddarthkay Apr 18, 2023 • edited Loading

Choose a reason for hiding this comment

alwx Apr 18, 2023

Choose a reason for hiding this comment

siddarthkay left a comment

Choose a reason for hiding this comment

status-im-auto commented Apr 18, 2023

93% of end-end tests have passed

Failed tests (2)

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestCommunityMultipleDeviceMerged:

Passed tests (27)

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestActivityMultipleDevicePR:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestCommunityMultipleDeviceMerged:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityOneDeviceMerged:

qoqobolo commented Apr 18, 2023

status-im-auto commented Apr 18, 2023 •

edited

Loading

ibrkhalil Apr 18, 2023 •

edited

Loading

siddarthkay Apr 18, 2023 •

edited

Loading