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 (h/fire-event
:on-start-should-set-responder :on-start-should-set-responder
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 0}}) :timestamp 0
:identifier 0}})
(-> (h/expect event) (-> (h/expect event)
(.toHaveBeenCalledTimes 1)))) (.toHaveBeenCalledTimes 1))))
@ -43,16 +44,18 @@
(h/fire-event (h/fire-event
:on-start-should-set-responder :on-start-should-set-responder
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 0}}) :timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500) (h/advance-timers-by-time 500)
(h/fire-event (h/fire-event
:on-responder-release :on-responder-release
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 200}}) :timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250) (h/advance-timers-by-time 250)
(-> (h/expect event) (-> (h/expect event)
(.toHaveBeenCalledTimes 1))))) (.toHaveBeenCalledTimes 1)))))
@ -69,29 +72,33 @@
(h/fire-event (h/fire-event
:on-start-should-set-responder :on-start-should-set-responder
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 0}}) :timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500) (h/advance-timers-by-time 500)
(h/fire-event (h/fire-event
:on-responder-release :on-responder-release
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 200}}) :timestamp 200
:identifier 0}})
(h/fire-event (h/fire-event
:on-start-should-set-responder :on-start-should-set-responder
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 0}}) :timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500) (h/advance-timers-by-time 500)
(h/fire-event (h/fire-event
:on-responder-release :on-responder-release
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 80 {:nativeEvent {:locationX 80
:locationY 80 :locationY 80
:timestamp 200}}) :timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250) (h/advance-timers-by-time 250)
(-> (js/expect event) (-> (js/expect event)
(.toHaveBeenCalledTimes 1)) (.toHaveBeenCalledTimes 1))
@ -112,23 +119,26 @@
(h/fire-event (h/fire-event
:on-start-should-set-responder :on-start-should-set-responder
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 0}}) :timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500) (h/advance-timers-by-time 500)
(h/fire-event (h/fire-event
:on-responder-move :on-responder-move
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 80 {:nativeEvent {:locationX 80
:locationY -30 :locationY -30
:pageX 80 :pageX 80
:pageY -30}}) :pageY -30
:identifier 0}})
(h/fire-event (h/fire-event
:on-responder-release :on-responder-release
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 40 {:nativeEvent {:locationX 40
:locationY 80 :locationY 80
:timestamp 200}}) :timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250) (h/advance-timers-by-time 250)
(-> (js/expect event) (-> (js/expect event)
(.toHaveBeenCalledTimes 1)) (.toHaveBeenCalledTimes 1))
@ -146,22 +156,25 @@
(h/fire-event (h/fire-event
:on-start-should-set-responder :on-start-should-set-responder
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 0}}) :timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500) (h/advance-timers-by-time 500)
(h/fire-event (h/fire-event
:on-responder-release :on-responder-release
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 200}}) :timestamp 200
:identifier 0}})
(h/fire-event (h/fire-event
:on-responder-release :on-responder-release
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 40 {:nativeEvent {:locationX 40
:locationY 80 :locationY 80
:timestamp 200}}) :timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250) (h/advance-timers-by-time 250)
(-> (js/expect event) (-> (js/expect event)
(.toHaveBeenCalledTimes 1))))) (.toHaveBeenCalledTimes 1)))))
@ -178,23 +191,26 @@
(h/fire-event (h/fire-event
:on-start-should-set-responder :on-start-should-set-responder
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX 70 {:nativeEvent {:locationX 70
:locationY 70 :locationY 70
:timestamp 0}}) :timestamp 0
:identifier 0}})
(h/advance-timers-by-time 500) (h/advance-timers-by-time 500)
(h/fire-event (h/fire-event
:on-responder-move :on-responder-move
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX -30 {:nativeEvent {:locationX -30
:locationY 80 :locationY 80
:pageX -30 :pageX -30
:pageY 80}}) :pageY 80
:identifier 0}})
(h/fire-event (h/fire-event
:on-responder-release :on-responder-release
(h/get-by-test-id "record-audio") (h/get-by-test-id "record-audio")
{:nativeEvent {:locationX -10 {:nativeEvent {:locationX -10
:locationY 70 :locationY 70
:timestamp 200}}) :timestamp 200
:identifier 0}})
(h/advance-timers-by-time 250) (h/advance-timers-by-time 250)
(-> (js/expect event) (-> (js/expect event)
(.toHaveBeenCalledTimes 1)))))) (.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 [{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio
record-audio-permission-granted record-audio-permission-granted
on-request-record-audio-permission on-check-audio-permissions on-request-record-audio-permission on-check-audio-permissions
audio-file]}] audio-file on-lock]}]
[:f> [:f>
;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each ;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each
;; time parent component ;; time parent component
@ -172,6 +172,7 @@
output-file (atom audio-file) output-file (atom audio-file)
reached-max-duration? (atom false) reached-max-duration? (atom false)
touch-timestamp (atom nil) touch-timestamp (atom nil)
touch-identifier (atom nil)
disabled? (atom false) disabled? (atom false)
app-state-listener (atom nil) app-state-listener (atom nil)
rec-options rec-options
@ -260,6 +261,7 @@
#(log/debug "[record-audio] new recorder - on meter") #(log/debug "[record-audio] new recorder - on meter")
#(log/debug "[record-audio] new recorder - on ended"))] #(log/debug "[record-audio] new recorder - on ended"))]
(reset! touch-timestamp (oops/oget e "nativeEvent.timestamp")) (reset! touch-timestamp (oops/oget e "nativeEvent.timestamp"))
(reset! touch-identifier (oops/oget e "nativeEvent.identifier"))
(when-not @reviewing-audio? (when-not @reviewing-audio?
(if record-audio-permission-granted (if record-audio-permission-granted
(do (do
@ -321,6 +323,7 @@
location-y (oops/oget e "nativeEvent.locationY") location-y (oops/oget e "nativeEvent.locationY")
page-x (oops/oget e "nativeEvent.pageX") page-x (oops/oget e "nativeEvent.pageX")
page-y (oops/oget e "nativeEvent.pageY") page-y (oops/oget e "nativeEvent.pageY")
identifier (oops/oget e "nativeEvent.identifier")
moved-to-send-button? (touch-inside-area? moved-to-send-button? (touch-inside-area?
{:location-x location-x {:location-x location-x
:location-y location-y :location-y location-y
@ -360,31 +363,32 @@
record-button-area-big) record-button-area-big)
(not= location-x page-x) (not= location-x page-x)
(not= location-y page-y))] (not= location-y page-y))]
(cond (when (= identifier @touch-identifier)
(and (cond
(or (and
(and moved-to-record-button? @ready-to-lock?) (or
(and (not @locked?) moved-to-lock-button? @record-button-at-initial-position?)) (and moved-to-record-button? @ready-to-lock?)
(not @ready-to-delete?) (and (not @locked?) moved-to-lock-button? @record-button-at-initial-position?))
(not @ready-to-send?) (not @ready-to-delete?)
@recording?) (not @ready-to-send?)
(reset! ready-to-lock? moved-to-lock-button?) @recording?)
(and (reset! ready-to-lock? moved-to-lock-button?)
(or (and
(and moved-to-record-button? @ready-to-delete?) (or
(and moved-to-delete-button? @record-button-at-initial-position?)) (and moved-to-record-button? @ready-to-delete?)
(not @ready-to-lock?) (and moved-to-delete-button? @record-button-at-initial-position?))
(not @ready-to-send?) (not @ready-to-lock?)
@recording?) (not @ready-to-send?)
(reset! ready-to-delete? moved-to-delete-button?) @recording?)
(and (reset! ready-to-delete? moved-to-delete-button?)
(or (and
(and moved-to-record-button? @ready-to-send?) (or
(and moved-to-send-button? @record-button-at-initial-position?)) (and moved-to-record-button? @ready-to-send?)
(not @ready-to-lock?) (and moved-to-send-button? @record-button-at-initial-position?))
(not @ready-to-delete?) (not @ready-to-lock?)
@recording?) (not @ready-to-delete?)
(reset! ready-to-send? moved-to-send-button?))))) @recording?)
(reset! ready-to-send? moved-to-send-button?))))))
on-responder-release on-responder-release
(fn [^js e] (fn [^js e]
(when (and (when (and
@ -439,7 +443,9 @@
(and @ready-to-lock? (not @record-button-is-animating?)) (and @ready-to-lock? (not @record-button-is-animating?))
(do (do
(reset! locked? true) (reset! locked? true)
(reset! ready-to-lock? false)) (reset! ready-to-lock? false)
(when on-lock
(on-lock)))
(and (not @reviewing-audio?) (and (not @reviewing-audio?)
(or on-record-button? (or on-record-button?
(and (not @ready-to-delete?) (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))] (let [current-chat-id (or chat-id (:current-chat-id db))]
{:db (assoc-in db [:chat/inputs current-chat-id :audio] audio)})) {: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 (rf/defn select-mention
{:events [:chat.ui/select-mention]} {:events [:chat.ui/select-mention]}
[{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match public-key] :as user}] [{: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] :on-init (fn [reset-fn]
(reset! record-reset-fn reset-fn)) (reset! record-reset-fn reset-fn))
:on-start-recording (fn [] :on-start-recording (fn []
(rf/dispatch [:chat.ui/set-recording true])
(reset! recording? true) (reset! recording? true)
(reset! gesture-enabled? false) (reset! gesture-enabled? false)
(reanimated/animate container-opacity 1)) (reanimated/animate container-opacity 1))
:audio-file audio :audio-file audio
:on-lock (fn []
(rf/dispatch [:chat.ui/set-recording false]))
:on-reviewing-audio (fn [file] :on-reviewing-audio (fn [file]
(rf/dispatch [:chat.ui/set-recording false])
(rf/dispatch [:chat.ui/set-input-audio file])) (rf/dispatch [:chat.ui/set-input-audio file]))
:on-send (fn [{:keys [file-path duration]}] :on-send (fn [{:keys [file-path duration]}]
(rf/dispatch [:chat.ui/set-recording false])
(reset! recording? false) (reset! recording? false)
(reset! gesture-enabled? true) (reset! gesture-enabled? true)
(rf/dispatch [:chat/send-audio file-path duration]) (rf/dispatch [:chat/send-audio file-path duration])
@ -94,6 +99,7 @@
(rf/dispatch [:chat.ui/set-input-audio nil])) (rf/dispatch [:chat.ui/set-input-audio nil]))
:on-cancel (fn [] :on-cancel (fn []
(when @recording? (when @recording?
(rf/dispatch [:chat.ui/set-recording false])
(reset! recording? false) (reset! recording? false)
(reset! gesture-enabled? true) (reset! gesture-enabled? true)
(if-not @focused? (if-not @focused?

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

@ -105,8 +105,9 @@
(defn messages-list-content (defn messages-list-content
[{:keys [chat-id] :as chat} insets keyboard-shown] [{:keys [chat-id] :as chat} insets keyboard-shown]
(fn [] (fn []
(let [context (rf/sub [:chats/current-chat-message-list-view-context]) (let [context (rf/sub [:chats/current-chat-message-list-view-context])
messages (rf/sub [:chats/raw-chat-messages-stream chat-id])] messages (rf/sub [:chats/raw-chat-messages-stream chat-id])
recording? (rf/sub [:chats/recording?])]
[rn/view [rn/view
{:style {:flex 1}} {:style {:flex 1}}
;; NOTE: DO NOT use anonymous functions for handlers ;; NOTE: DO NOT use anonymous functions for handlers
@ -137,7 +138,8 @@
;; TODO https://github.com/facebook/react-native/issues/30034 ;; TODO https://github.com/facebook/react-native/issues/30034
:inverted (when platform/ios? true) :inverted (when platform/ios? true)
:style (when platform/android? {:scaleY -1}) :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 ;; 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. ;; 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 :chats/mention-suggestions :chats/mention-suggestions)
(reg-root-key-sub :chat/inputs-with-mentions :chat/inputs-with-mentions) (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-home-list :chats-home-list)
(reg-root-key-sub :chats/recording? :chats/recording?)
;;lightbox ;;lightbox
(reg-root-key-sub :lightbox/exit-signal :lightbox/exit-signal) (reg-root-key-sub :lightbox/exit-signal :lightbox/exit-signal)