status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: audio recording bugs while scroll in chat 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-05-22 13:44:51 -03:00
parent 446d71063c
commit a3ce2aa578
No known key found for this signature in database
GPG Key ID: 59EB921E0706B48F
6 changed files with 116 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/quo2/components/record_audio/record_audio/__tests__/record_audio_component_spec.cljs
View File

@ -26,9 +26,10 @@
(h/fire-event
:on-start-should-set-responder
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0
:identifier 0}})
(-> (h/expect event)
(.toHaveBeenCalledTimes 1))))
@ -43,16 +44,18 @@
(h/fire-event
:on-start-should-set-responder
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500)
(h/fire-event
:on-responder-release
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 200}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250)
(-> (h/expect event)
(.toHaveBeenCalledTimes 1)))))
@ -69,29 +72,33 @@
(h/fire-event
:on-start-should-set-responder
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500)
(h/fire-event
:on-responder-release
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 200}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 200
:identifier 0}})
(h/fire-event
:on-start-should-set-responder
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500)
(h/fire-event
:on-responder-release
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 80
:locationY 80
:timestamp 200}})
{:nativeEvent {:locationX 80
:locationY 80
:timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250)
(-> (js/expect event)
(.toHaveBeenCalledTimes 1))
@ -112,23 +119,26 @@
(h/fire-event
:on-start-should-set-responder
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500)
(h/fire-event
:on-responder-move
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 80
:locationY -30
:pageX 80
:pageY -30}})
{:nativeEvent {:locationX 80
:locationY -30
:pageX 80
:pageY -30
:identifier 0}})
(h/fire-event
:on-responder-release
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 40
:locationY 80
:timestamp 200}})
{:nativeEvent {:locationX 40
:locationY 80
:timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250)
(-> (js/expect event)
(.toHaveBeenCalledTimes 1))
@ -146,22 +156,25 @@
(h/fire-event
:on-start-should-set-responder
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500)
(h/fire-event
:on-responder-release
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 200}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 200
:identifier 0}})
(h/fire-event
:on-responder-release
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 40
:locationY 80
:timestamp 200}})
{:nativeEvent {:locationX 40
:locationY 80
:timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250)
(-> (js/expect event)
(.toHaveBeenCalledTimes 1)))))
@ -178,23 +191,26 @@
(h/fire-event
:on-start-should-set-responder
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0}})
{:nativeEvent {:locationX 70
:locationY 70
:timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500)
(h/fire-event
:on-responder-move
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX -30
:locationY 80
:pageX -30
:pageY 80}})
{:nativeEvent {:locationX -30
:locationY 80
:pageX -30
:pageY 80
:identifier 0}})
(h/fire-event
:on-responder-release
(h/get-by-test-id "record-audio")
{:nativeEvent {:locationX -10
:locationY 70
:timestamp 200}})
{:nativeEvent {:locationX -10
:locationY 70
:timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250)
(-> (js/expect event)
(.toHaveBeenCalledTimes 1))))))

60
src/quo2/components/record_audio/record_audio/view.cljs
View File

@ -143,7 +143,7 @@
[{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio
record-audio-permission-granted
on-request-record-audio-permission on-check-audio-permissions
audio-file]}]
audio-file on-lock]}]
[:f>
;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each
;; time parent component
@ -172,6 +172,7 @@
output-file (atom audio-file)
reached-max-duration? (atom false)
touch-timestamp (atom nil)
touch-identifier (atom nil)
disabled? (atom false)
app-state-listener (atom nil)
rec-options
@ -260,6 +261,7 @@
#(log/debug "[record-audio] new recorder - on meter")
#(log/debug "[record-audio] new recorder - on ended"))]
(reset! touch-timestamp (oops/oget e "nativeEvent.timestamp"))
(reset! touch-identifier (oops/oget e "nativeEvent.identifier"))
(when-not @reviewing-audio?
(if record-audio-permission-granted
(do
@ -321,6 +323,7 @@
location-y (oops/oget e "nativeEvent.locationY")
page-x (oops/oget e "nativeEvent.pageX")
page-y (oops/oget e "nativeEvent.pageY")
identifier (oops/oget e "nativeEvent.identifier")
moved-to-send-button? (touch-inside-area?
{:location-x location-x
:location-y location-y
@ -360,31 +363,32 @@
record-button-area-big)
(not= location-x page-x)
(not= location-y page-y))]
(cond
(and
(or
(and moved-to-record-button? @ready-to-lock?)
(and (not @locked?) moved-to-lock-button? @record-button-at-initial-position?))
(not @ready-to-delete?)
(not @ready-to-send?)
@recording?)
(reset! ready-to-lock? moved-to-lock-button?)
(and
(or
(and moved-to-record-button? @ready-to-delete?)
(and moved-to-delete-button? @record-button-at-initial-position?))
(not @ready-to-lock?)
(not @ready-to-send?)
@recording?)
(reset! ready-to-delete? moved-to-delete-button?)
(and
(or
(and moved-to-record-button? @ready-to-send?)
(and moved-to-send-button? @record-button-at-initial-position?))
(not @ready-to-lock?)
(not @ready-to-delete?)
@recording?)
(reset! ready-to-send? moved-to-send-button?)))))
(when (= identifier @touch-identifier)
(cond
(and
(or
(and moved-to-record-button? @ready-to-lock?)
(and (not @locked?) moved-to-lock-button? @record-button-at-initial-position?))
(not @ready-to-delete?)
(not @ready-to-send?)
@recording?)
(reset! ready-to-lock? moved-to-lock-button?)
(and
(or
(and moved-to-record-button? @ready-to-delete?)
(and moved-to-delete-button? @record-button-at-initial-position?))
(not @ready-to-lock?)
(not @ready-to-send?)
@recording?)
(reset! ready-to-delete? moved-to-delete-button?)
(and
(or
(and moved-to-record-button? @ready-to-send?)
(and moved-to-send-button? @record-button-at-initial-position?))
(not @ready-to-lock?)
(not @ready-to-delete?)
@recording?)
(reset! ready-to-send? moved-to-send-button?))))))
on-responder-release
(fn [^js e]
(when (and
@ -439,7 +443,9 @@
(and @ready-to-lock? (not @record-button-is-animating?))
(do
(reset! locked? true)
(reset! ready-to-lock? false))
(reset! ready-to-lock? false)
(when on-lock
(on-lock)))
(and (not @reviewing-audio?)
(or on-record-button?
(and (not @ready-to-delete?)

5
src/status_im/chat/models/input.cljs
View File

@ -66,6 +66,11 @@
(let [current-chat-id (or chat-id (:current-chat-id db))]
{:db (assoc-in db [:chat/inputs current-chat-id :audio] audio)}))
(rf/defn set-recording
{:events [:chat.ui/set-recording]}
[{db :db} recording?]
{:db (assoc db :chats/recording? recording?)})
(rf/defn select-mention
{:events [:chat.ui/select-mention]}
[{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match public-key] :as user}]

6
src/status_im2/contexts/chat/composer/actions/view.cljs
View File

@ -76,13 +76,18 @@
:on-init (fn [reset-fn]
(reset! record-reset-fn reset-fn))
:on-start-recording (fn []
(rf/dispatch [:chat.ui/set-recording true])
(reset! recording? true)
(reset! gesture-enabled? false)
(reanimated/animate container-opacity 1))
:audio-file audio
:on-lock (fn []
(rf/dispatch [:chat.ui/set-recording false]))
:on-reviewing-audio (fn [file]
(rf/dispatch [:chat.ui/set-recording false])
(rf/dispatch [:chat.ui/set-input-audio file]))
:on-send (fn [{:keys [file-path duration]}]
(rf/dispatch [:chat.ui/set-recording false])
(reset! recording? false)
(reset! gesture-enabled? true)
(rf/dispatch [:chat/send-audio file-path duration])
@ -94,6 +99,7 @@
(rf/dispatch [:chat.ui/set-input-audio nil]))
:on-cancel (fn []
(when @recording?
(rf/dispatch [:chat.ui/set-recording false])
(reset! recording? false)
(reset! gesture-enabled? true)
(if-not @focused?

8
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -105,8 +105,9 @@
(defn messages-list-content
[{:keys [chat-id] :as chat} insets keyboard-shown]
(fn []
(let [context (rf/sub [:chats/current-chat-message-list-view-context])
messages (rf/sub [:chats/raw-chat-messages-stream chat-id])]
(let [context (rf/sub [:chats/current-chat-message-list-view-context])
messages (rf/sub [:chats/raw-chat-messages-stream chat-id])
recording? (rf/sub [:chats/recording?])]
[rn/view
{:style {:flex 1}}
;; NOTE: DO NOT use anonymous functions for handlers
@ -137,7 +138,8 @@
;; TODO https://github.com/facebook/react-native/issues/30034
:inverted (when platform/ios? true)
:style (when platform/android? {:scaleY -1})
:on-layout on-messages-view-layout}]])))
:on-layout on-messages-view-layout
:scroll-enabled (not recording?)}]])))
;; This should be replaced with keyboard hook. It has to do with flat-list probably. The keyboard-shown
;; value updates in the parent component, but does not get passed to the children.

1
src/status_im2/subs/root.cljs
View File

@ -119,6 +119,7 @@
(reg-root-key-sub :chats/mention-suggestions :chats/mention-suggestions)
(reg-root-key-sub :chat/inputs-with-mentions :chat/inputs-with-mentions)
(reg-root-key-sub :chats-home-list :chats-home-list)
(reg-root-key-sub :chats/recording? :chats/recording?)
;;lightbox
(reg-root-key-sub :lightbox/exit-signal :lightbox/exit-signal)