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

feat: implement audio message component #15594

Merged
merged 1 commit into from
May 4, 2023

Conversation

briansztamfater
Copy link
Member

@briansztamfater briansztamfater commented Apr 6, 2023

fixes: #13530 #15536

Summary

Audio message component implementation

Screenshots

Testing notes

In #13530, these items were listed to be resolved. Those not checked should be worked separately in follow up issues / PRs.

  • Check the [play] button is not frozen after coming back from background or sleep mode
  • Check audio is able to be played from the pinned messages
  • Check banner UI for pinned audio
Should be implemented separately:
  • Check after the call incoming the [play] button should turn from 'play' to 'pause'
  • Check the max seconds for audio = 2:00 min (worked here fix: calibrate duration calculation of recorded audio #15543)
  • Check audio into 'Jump to' page
  • Check audio into Activity Center in reply
  • Check audio into push notification

Platforms

  • Android
  • iOS

Areas that maybe impacted

Functional
  • 1-1 chats
  • public chats
  • group chats

Steps to test

  • Open Status
  • Open a chat with audio messages
  • Or send audio
  • Verify correct UI and behavior of the audio message component

status: ready

@briansztamfater briansztamfater self-assigned this Apr 6, 2023
@briansztamfater briansztamfater marked this pull request as draft April 6, 2023 12:49
@status-im-auto
Copy link
Member

status-im-auto commented Apr 6, 2023

Jenkins Builds

Click to see older builds (91)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 954cb4b #1 2023-04-06 12:56:24 ~6 min tests 📄log
✔️ 954cb4b #1 2023-04-06 12:57:43 ~8 min android 🤖apk 📲
✔️ 954cb4b #1 2023-04-06 12:58:10 ~8 min android-e2e 🤖apk 📲
✔️ 954cb4b #1 2023-04-06 12:58:46 ~9 min ios 📱ipa 📲
53009c3 #2 2023-04-07 03:12:40 ~4 min tests 📄log
✔️ 53009c3 #2 2023-04-07 03:15:18 ~7 min ios 📱ipa 📲
✔️ 53009c3 #2 2023-04-07 03:16:07 ~8 min android 🤖apk 📲
✔️ 53009c3 #2 2023-04-07 03:16:16 ~8 min android-e2e 🤖apk 📲
b2b740b #4 2023-04-10 21:24:02 ~3 min tests 📄log
✔️ b2b740b #4 2023-04-10 21:28:16 ~7 min ios 📱ipa 📲
✔️ b2b740b #4 2023-04-10 21:28:39 ~8 min android 🤖apk 📲
✔️ b2b740b #4 2023-04-10 21:28:45 ~8 min android-e2e 🤖apk 📲
9294492 #5 2023-04-11 13:23:14 ~4 min tests 📄log
✔️ 9294492 #5 2023-04-11 13:26:08 ~6 min ios 📱ipa 📲
✔️ 9294492 #5 2023-04-11 13:28:06 ~8 min android 🤖apk 📲
✔️ 9294492 #5 2023-04-11 13:28:31 ~9 min android-e2e 🤖apk 📲
✔️ 97d5aec #7 2023-04-12 23:44:08 ~5 min android 🤖apk 📲
✔️ 97d5aec #7 2023-04-12 23:44:48 ~6 min android-e2e 🤖apk 📲
✔️ 97d5aec #7 2023-04-12 23:45:13 ~6 min tests 📄log
✔️ 97d5aec #7 2023-04-12 23:45:22 ~6 min ios 📱ipa 📲
✔️ 6c12394 #8 2023-04-13 17:07:58 ~5 min android 🤖apk 📲
✔️ 6c12394 #8 2023-04-13 17:08:40 ~6 min android-e2e 🤖apk 📲
✔️ 6c12394 #8 2023-04-13 17:09:02 ~6 min tests 📄log
✔️ 6c12394 #8 2023-04-13 17:11:11 ~8 min ios 📱ipa 📲
✔️ 6c7767d #9 2023-04-14 19:05:44 ~5 min tests 📄log
✔️ 6c7767d #9 2023-04-14 19:06:13 ~6 min android 🤖apk 📲
✔️ 6c7767d #9 2023-04-14 19:06:14 ~6 min android-e2e 🤖apk 📲
✔️ 1adb486 #11 2023-04-18 05:48:27 ~5 min tests 📄log
✔️ 1adb486 #11 2023-04-18 05:49:07 ~6 min ios 📱ipa 📲
✔️ 1adb486 #11 2023-04-18 05:49:30 ~6 min android 🤖apk 📲
✔️ 1adb486 #11 2023-04-18 05:49:33 ~7 min android-e2e 🤖apk 📲
✔️ e019b95 #13 2023-04-19 16:56:37 ~6 min tests 📄log
✔️ e019b95 #13 2023-04-19 16:56:50 ~6 min android-e2e 🤖apk 📲
✔️ e019b95 #13 2023-04-19 16:56:58 ~6 min android 🤖apk 📲
✔️ e019b95 #13 2023-04-19 16:58:44 ~8 min ios 📱ipa 📲
✔️ 19cdc72 #15 2023-04-19 17:28:05 ~5 min android 🤖apk 📲
✔️ 19cdc72 #15 2023-04-19 17:28:44 ~6 min tests 📄log
✔️ 19cdc72 #15 2023-04-19 17:29:01 ~6 min android-e2e 🤖apk 📲
✔️ 19cdc72 #15 2023-04-19 17:31:21 ~8 min ios 📱ipa 📲
✔️ f437926 #16 2023-04-20 16:51:16 ~6 min android 🤖apk 📲
✔️ f437926 #16 2023-04-20 16:51:34 ~6 min android-e2e 🤖apk 📲
✔️ f437926 #16 2023-04-20 16:52:16 ~7 min tests 📄log
✔️ f437926 #16 2023-04-20 16:53:10 ~8 min ios 📱ipa 📲
4570164 #18 2023-04-24 04:23:31 ~3 min tests 📄log
✔️ 4570164 #18 2023-04-24 04:25:40 ~5 min android 🤖apk 📲
✔️ 4570164 #18 2023-04-24 04:25:58 ~5 min android-e2e 🤖apk 📲
✔️ 4570164 #18 2023-04-24 04:26:24 ~6 min ios 📱ipa 📲
fd80f28 #19 2023-04-24 15:37:49 ~2 min tests 📄log
✔️ fd80f28 #19 2023-04-24 15:41:03 ~6 min android-e2e 🤖apk 📲
✔️ fd80f28 #19 2023-04-24 15:41:04 ~6 min android 🤖apk 📲
✔️ fd80f28 #19 2023-04-24 15:41:12 ~6 min ios 📱ipa 📲
✔️ cc636f7 #20 2023-04-24 17:01:10 ~5 min android-e2e 🤖apk 📲
✔️ cc636f7 #20 2023-04-24 17:01:33 ~5 min android 🤖apk 📲
✔️ cc636f7 #20 2023-04-24 17:02:04 ~6 min tests 📄log
✔️ cc636f7 #20 2023-04-24 17:02:52 ~7 min ios 📱ipa 📲
✔️ 3ca1704 #21 2023-04-24 17:21:13 ~6 min android-e2e 🤖apk 📲
✔️ 3ca1704 #21 2023-04-24 17:22:15 ~7 min ios 📱ipa 📲
✔️ 3ca1704 #21 2023-04-24 17:22:24 ~7 min android 🤖apk 📲
✔️ 3ca1704 #21 2023-04-24 17:23:47 ~8 min tests 📄log
✔️ 436381e #22 2023-04-25 01:04:47 ~5 min tests 📄log
✔️ 436381e #22 2023-04-25 01:05:08 ~6 min android-e2e 🤖apk 📲
✔️ 436381e #22 2023-04-25 01:05:10 ~6 min android 🤖apk 📲
✔️ 436381e #22 2023-04-25 01:07:04 ~8 min ios 📱ipa 📲
aeaa855 #23 2023-04-25 15:31:01 ~12 sec android-e2e 📄log
aeaa855 #23 2023-04-25 15:31:05 ~12 sec android 📄log
aeaa855 #23 2023-04-25 15:31:06 ~12 sec tests 📄log
aeaa855 #23 2023-04-25 15:31:06 ~12 sec ios 📄log
7c4f809 #24 2023-04-25 15:40:45 ~12 sec android 📄log
7c4f809 #24 2023-04-25 15:40:45 ~12 sec android-e2e 📄log
7c4f809 #24 2023-04-25 15:40:46 ~12 sec tests 📄log
7c4f809 #24 2023-04-25 15:40:48 ~14 sec ios 📄log
✔️ 3fd7424 #25 2023-04-25 16:03:12 ~6 min tests 📄log
✔️ 3fd7424 #25 2023-04-25 16:03:30 ~6 min ios 📱ipa 📲
✔️ 3fd7424 #25 2023-04-25 16:03:44 ~6 min android 🤖apk 📲
✔️ 3fd7424 #25 2023-04-25 16:03:47 ~6 min android-e2e 🤖apk 📲
✔️ 29bfef7 #27 2023-04-25 17:55:21 ~5 min android 🤖apk 📲
✔️ 29bfef7 #27 2023-04-25 17:55:27 ~5 min tests 📄log
✔️ 29bfef7 #27 2023-04-25 17:55:40 ~6 min android-e2e 🤖apk 📲
✔️ 29bfef7 #27 2023-04-25 17:56:12 ~6 min ios 📱ipa 📲
✔️ c0d3995 #28 2023-04-25 18:11:57 ~5 min android-e2e 🤖apk 📲
✔️ c0d3995 #28 2023-04-25 18:12:44 ~6 min android 🤖apk 📲
✔️ c0d3995 #28 2023-04-25 18:12:52 ~6 min ios 📱ipa 📲
✔️ c0d3995 #28 2023-04-25 18:13:00 ~6 min tests 📄log
✔️ b88e2c7 #29 2023-05-01 18:36:41 ~5 min tests 📄log
✔️ b88e2c7 #29 2023-05-01 18:37:02 ~6 min android-e2e 🤖apk 📲
✔️ b88e2c7 #29 2023-05-01 18:37:02 ~6 min android 🤖apk 📲
✔️ b88e2c7 #29 2023-05-01 18:37:12 ~6 min ios 📱ipa 📲
✔️ 700636c #30 2023-05-01 19:04:16 ~5 min android-e2e 🤖apk 📲
✔️ 700636c #30 2023-05-01 19:04:28 ~5 min android 🤖apk 📲
✔️ 700636c #30 2023-05-01 19:04:58 ~5 min tests 📄log
✔️ 700636c #30 2023-05-01 19:05:19 ~6 min ios 📱ipa 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ d290a6f #31 2023-05-02 09:02:39 ~5 min android-e2e 🤖apk 📲
✔️ d290a6f #31 2023-05-02 09:03:35 ~6 min ios 📱ipa 📲
✔️ d290a6f #31 2023-05-02 09:04:17 ~6 min android 🤖apk 📲
✔️ d290a6f #31 2023-05-02 09:04:23 ~6 min tests 📄log
✔️ e5913cc #32 2023-05-04 13:55:34 ~6 min android 🤖apk 📲
✔️ e5913cc #32 2023-05-04 13:55:41 ~6 min android-e2e 🤖apk 📲
✔️ e5913cc #32 2023-05-04 13:55:54 ~6 min tests 📄log
✔️ e5913cc #32 2023-05-04 13:57:54 ~8 min ios 📱ipa 📲

@briansztamfater briansztamfater force-pushed the feat/audio-message-component branch 2 times, most recently from a19692f to 97d5aec Compare April 12, 2023 23:38
@briansztamfater briansztamfater force-pushed the feat/audio-message-component branch 4 times, most recently from f6bd97b to 4570164 Compare April 24, 2023 04:19
@briansztamfater briansztamfater force-pushed the feat/audio-message-component branch 4 times, most recently from 7c4f809 to 3fd7424 Compare April 25, 2023 15:56
@briansztamfater briansztamfater changed the title [WIP] feat: implement audio message component feat: implement audio message component Apr 25, 2023
@briansztamfater briansztamfater force-pushed the feat/audio-message-component branch from 3fd7424 to 9d844f9 Compare April 25, 2023 17:45
@briansztamfater briansztamfater marked this pull request as ready for review April 25, 2023 17:45
@briansztamfater briansztamfater force-pushed the feat/audio-message-component branch from 9d844f9 to 29bfef7 Compare April 25, 2023 17:49
[react-native.audio-toolkit :as audio]
[re-frame.core :as re-frame]))

(defonce message
Copy link
Contributor

Choose a reason for hiding this comment

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

@briansztamfater, defonce is unnecessary in pure maps, since they never change.

(defn audio-message
[message context]
(let [player-state (reagent/atom :not-loaded)
progress (reagent/atom 0)
Copy link
Contributor

Choose a reason for hiding this comment

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

@briansztamfater, I see progress is passed along in this file to other functions and it's named as progress-ref, even though it's not a ref. Refs are non-reactive and usually start as (atom nil). If that makes sense, could you rename all instances of progress-ref to just progress, for example? I was confused by the suffix ref when it's a reactive state :)

#(update-state player-state :error)))))
(update-state player-state :preparing))

(defn play-pause-player
Copy link
Contributor

Choose a reason for hiding this comment

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

I see you tried to separate some of the state management outside the f-audio-message component, but still @briansztamfater, I'd just like to share some thoughts or suggestions.

  1. A very good chunk of this namespace is not concerned or doesn't need to know about hiccup, reagent, etc, it's just raw timers and manipulation of atoms. In my experience in other React projects, this is a perfect candidate for a separate hook with good unit tests.
  2. HTTP effects should happen at re-frame's event layer, ideally.
  3. If we so desire to reduce usages of use-effect, we can also extract the whole state management into re-frame. Of course this is not a trivial task since the code is already written in the style of hooks, but it could lead to the best results.

But to summarize, I think the effectful part should exist as a separate hook, even outside this file, for example in content/audio/hooks.cljs and unit tested.

Copy link
Member Author

Choose a reason for hiding this comment

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

@ilmotta As always, thanks for your valuable feedback, and agree with them. As I have another ongoing time consuming task and given that manual testing went fine, I wanted to merge this PR, and created an issue to keep track of this suggestion 👍 #15816
Will make sure to address it as soon as possible!

Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you for taking the time to create the issue @briansztamfater. I would have done the same, priorities first :)

Copy link
Contributor

@ilmotta ilmotta left a comment

Choose a reason for hiding this comment

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

Nicely done @briansztamfater 🚀! I left some comments I feel are important, but they're not blockers.

@briansztamfater briansztamfater force-pushed the feat/audio-message-component branch from c0d3995 to b88e2c7 Compare May 1, 2023 18:30
@churik churik force-pushed the feat/audio-message-component branch from 700636c to d290a6f Compare May 2, 2023 08:57
@status-im-auto
Copy link
Member

93% of end-end tests have passed

Total executed tests: 30
Failed tests: 2
Passed tests: 28
IDs of failed tests: 702808,702838 

Failed tests (2)

Click to expand
  • Rerun failed tests

  • Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_offline_pn, id: 702808

    Device 3: Looking for a message by text: message from old member
    Device 3: Looking for a message by text: message from new member

    critical/chats/test_group_chat.py:258: in test_group_chat_offline_pn
        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))]))
     message from new member PN was not fetched from offline
    



    Device sessions

    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:410: in test_community_message_send_check_timestamps_sender_username
        channel.verify_message_is_under_today_text(message, self.errors)
    ../views/chat_view.py:927: 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

    Passed tests (28)

    Click to expand

    Class TestCommunityOneDeviceMerged:

    1. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    2. test_community_copy_and_paste_message_in_chat_input, id: 702742
    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_activity_center_contact_request_decline, id: 702850
    Device sessions

    2. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
    Device sessions

    Class TestActivityMultipleDevicePR:

    1. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
    Device sessions

    2. test_activity_center_admin_notification_accept_swipe, id: 702958
    Device sessions

    3. test_navigation_jump_to, id: 702936
    Device sessions

    4. test_activity_center_mentions, id: 702957
    Device sessions

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_pin_messages, id: 702732
    Device sessions

    2. test_group_chat_join_send_text_messages_push, id: 702807
    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_emoji_send_copy_paste_reply, id: 702840
    Device sessions

    2. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
    Device sessions

    3. test_community_mentions_push_notification, id: 702786
    Device sessions

    4. test_community_contact_block_unblock_offline, id: 702894
    Device sessions

    5. test_community_leave, id: 702845
    Device sessions

    6. test_community_unread_messages_badge, id: 702841
    Device sessions

    7. test_community_message_delete, id: 702839
    Device sessions

    8. test_community_mark_all_messages_as_read, id: 703086
    Device sessions

    9. test_community_message_edit, id: 702843
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_text_message_delete_push_disappear, id: 702733
    Device sessions

    2. test_1_1_chat_edit_message, id: 702855
    Device sessions

    3. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    4. test_1_1_chat_message_reaction, id: 702730
    Device sessions

    5. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
    Device sessions

    6. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
    Device sessions

    7. test_1_1_chat_pin_messages, id: 702731
    Device sessions

    8. test_1_1_chat_push_emoji, id: 702813
    Device sessions

    9. test_1_1_chat_delete_via_long_press_relogin, id: 702784
    Device sessions

    @qoqobolo qoqobolo self-assigned this May 2, 2023
    @qoqobolo
    Copy link
    Contributor

    qoqobolo commented May 3, 2023

    LGTM, @briansztamfater thanks for your work!

    Signed-off-by: Brian Sztamfater <[email protected]>
    @briansztamfater briansztamfater force-pushed the feat/audio-message-component branch from d290a6f to e5913cc Compare May 4, 2023 13:49
    @briansztamfater briansztamfater merged commit e5913cc into develop May 4, 2023
    @briansztamfater briansztamfater deleted the feat/audio-message-component branch May 4, 2023 13:56
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    No open projects
    Archived in project
    Development

    Successfully merging this pull request may close these issues.

    UI Component - Audio
    5 participants