Skip to content

Commit bd3c724

Browse files
briansztamfaterbriansztamfater
committed
feat: record audio complete flow
Signed-off-by: Brian Sztamfater <brian@status.im>
1 parent 206730a commit bd3c724

29 files changed

Lines changed: 1434 additions & 651 deletions

‎resources/images/icons2/12x12/thumb-dark@2x.android.png‎

370 Bytes
Loading

‎resources/images/icons2/12x12/thumb-dark@2x.ios.png‎

534 Bytes
Loading

‎resources/images/icons2/12x12/thumb-dark@3x.android.png‎

472 Bytes
Loading

‎resources/images/icons2/12x12/thumb-dark@3x.ios.png‎

696 Bytes
Loading

‎resources/images/icons2/12x12/thumb-light@2x.android.png‎

370 Bytes
Loading

‎resources/images/icons2/12x12/thumb-light@2x.ios.png‎

455 Bytes
Loading

‎resources/images/icons2/12x12/thumb-light@3x.android.png‎

443 Bytes
Loading

‎resources/images/icons2/12x12/thumb-light@3x.ios.png‎

601 Bytes
Loading

‎src/quo2/components/record_audio/record_audio/__tests__/record_audio_component_spec.cljs‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
(ns quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec
2+
(:require [quo2.components.record-audio.record-audio.view :as record-audio]
3+
[status-im.audio.core :as audio]
4+
[test-helpers.component :as h]))
5+
6+
(h/describe "record audio component"
7+
(h/before-each
8+
(fn []
9+
(h/use-fake-timers)))
10+
11+
(h/after-each
12+
(fn []
13+
(h/clear-all-timers)
14+
(h/use-real-timers)))
15+
16+
(h/test "renders record-audio"
17+
(h/render [record-audio/record-audio])
18+
(-> (h/expect (h/get-by-test-id "record-audio"))
19+
(.toBeTruthy)))
20+
21+
(h/test "record-audio on-start-recording works"
22+
(let [event (js/jest.fn)]
23+
(h/render [record-audio/record-audio {:on-start-recording event}])
24+
(h/fire-event
25+
:on-start-should-set-responder
26+
(h/get-by-test-id "record-audio")
27+
{:nativeEvent {:locationX 70
28+
:locationY 70}})
29+
(-> (h/expect event)
30+
(.toHaveBeenCalledTimes 1))))
31+
32+
(h/test "record-audio on-reviewing-audio works"
33+
(let [event (js/jest.fn)]
34+
(h/render [record-audio/record-audio {:on-reviewing-audio event}])
35+
(with-redefs [audio/start-recording (fn [_ on-start _]
36+
(on-start))]
37+
(h/fire-event
38+
:on-start-should-set-responder
39+
(h/get-by-test-id "record-audio")
40+
{:nativeEvent {:locationX 70
41+
:locationY 70}})
42+
(h/advance-timers-by-time 500)
43+
(h/fire-event
44+
:on-responder-release
45+
(h/get-by-test-id "record-audio")
46+
{:nativeEvent {:locationX 70
47+
:locationY 70}})
48+
(-> (h/expect event)
49+
(.toHaveBeenCalledTimes 1)))))
50+
51+
(h/test "record-audio on-send works after reviewing audio"
52+
(let [event (js/jest.fn)]
53+
(h/render [record-audio/record-audio {:on-send event}])
54+
(with-redefs [audio/start-recording (fn [_ on-start _]
55+
(on-start))
56+
audio/get-recorder-file-path (fn [] "audio-file-path")]
57+
(h/fire-event
58+
:on-start-should-set-responder
59+
(h/get-by-test-id "record-audio")
60+
{:nativeEvent {:locationX 70
61+
:locationY 70}})
62+
(h/advance-timers-by-time 500)
63+
(h/fire-event
64+
:on-responder-release
65+
(h/get-by-test-id "record-audio")
66+
{:nativeEvent {:locationX 70
67+
:locationY 70}})
68+
(h/fire-event
69+
:on-responder-release
70+
(h/get-by-test-id "record-audio")
71+
{:nativeEvent {:locationX 80
72+
:locationY 80}})
73+
(-> (js/expect event)
74+
(.toHaveBeenCalledTimes 1))
75+
(-> (js/expect event)
76+
(.toHaveBeenCalledWith "audio-file-path")))))
77+
78+
(h/test "record-audio on-send works after sliding to the send button"
79+
(let [event (js/jest.fn)]
80+
(h/render [record-audio/record-audio {:on-send event}])
81+
(with-redefs [audio/start-recording (fn [_ on-start _]
82+
(on-start))
83+
audio/stop-recording (fn [_ on-stop _]
84+
(on-stop))
85+
audio/get-recorder-file-path (fn [] "audio-file-path")]
86+
(h/fire-event
87+
:on-start-should-set-responder
88+
(h/get-by-test-id "record-audio")
89+
{:nativeEvent {:locationX 70
90+
:locationY 70}})
91+
(h/advance-timers-by-time 500)
92+
(h/fire-event
93+
:on-responder-move
94+
(h/get-by-test-id "record-audio")
95+
{:nativeEvent {:locationX 80
96+
:locationY -30
97+
:pageX 80
98+
:pageY -30}})
99+
(h/fire-event
100+
:on-responder-release
101+
(h/get-by-test-id "record-audio")
102+
{:nativeEvent {:locationX 40
103+
:locationY 80}})
104+
(-> (js/expect event)
105+
(.toHaveBeenCalledTimes 1))
106+
(-> (js/expect event)
107+
(.toHaveBeenCalledWith "audio-file-path")))))
108+
109+
(h/test "record-audio on-cancel works after reviewing audio"
110+
(let [event (js/jest.fn)]
111+
(h/render [record-audio/record-audio {:on-cancel event}])
112+
(with-redefs [audio/start-recording (fn [_ on-start _]
113+
(on-start))]
114+
(h/fire-event
115+
:on-start-should-set-responder
116+
(h/get-by-test-id "record-audio")
117+
{:nativeEvent {:locationX 70
118+
:locationY 70}})
119+
(h/advance-timers-by-time 500)
120+
(h/fire-event
121+
:on-responder-release
122+
(h/get-by-test-id "record-audio")
123+
{:nativeEvent {:locationX 70
124+
:locationY 70}})
125+
(h/fire-event
126+
:on-responder-release
127+
(h/get-by-test-id "record-audio")
128+
{:nativeEvent {:locationX 40
129+
:locationY 80}})
130+
(-> (js/expect event)
131+
(.toHaveBeenCalledTimes 1)))))
132+
133+
(h/test "cord-audio on-cancel works after sliding to the cancel button"
134+
(let [event (js/jest.fn)]
135+
(h/render [record-audio/record-audio {:on-cancel event}])
136+
(with-redefs [audio/start-recording (fn [_ on-start _]
137+
(on-start))
138+
audio/stop-recording (fn [_ on-stop _]
139+
(on-stop))]
140+
(h/fire-event
141+
:on-start-should-set-responder
142+
(h/get-by-test-id "record-audio")
143+
{:nativeEvent {:locationX 70
144+
:locationY 70}})
145+
(h/advance-timers-by-time 500)
146+
(h/fire-event
147+
:on-responder-move
148+
(h/get-by-test-id "record-audio")
149+
{:nativeEvent {:locationX -30
150+
:locationY 80
151+
:pageX -30
152+
:pageY 80}})
153+
(h/fire-event
154+
:on-responder-release
155+
(h/get-by-test-id "record-audio")
156+
{:nativeEvent {:locationX -10
157+
:locationY 70}})
158+
(-> (js/expect event)
159+
(.toHaveBeenCalledTimes 1))))))

‎src/quo2/components/record_audio/record_audio/buttons/delete_button.cljs‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
(ns quo2.components.record-audio.record-audio.buttons.delete-button
2+
(:require [quo2.components.icon :as icons]
3+
[quo2.components.record-audio.record-audio.style :as style]
4+
[quo2.foundations.colors :as colors]
5+
[react-native.reanimated :as reanimated]
6+
[react-native.core :refer [use-effect]]
7+
[quo2.components.record-audio.record-audio.helpers :refer
8+
[animate-linear-with-delay
9+
animate-easing-with-delay
10+
animate-linear
11+
set-value]]))
12+
13+
(defn delete-button
14+
[recording? ready-to-delete? reviewing-audio?]
15+
[:f>
16+
(fn []
17+
(let [opacity (reanimated/use-shared-value 0)
18+
translate-x (reanimated/use-shared-value 20)
19+
scale (reanimated/use-shared-value 1)
20+
connector-opacity (reanimated/use-shared-value 0)
21+
connector-width (reanimated/use-shared-value 24)
22+
connector-height (reanimated/use-shared-value 12)
23+
border-radius-first-half (reanimated/use-shared-value 8)
24+
border-radius-second-half (reanimated/use-shared-value 8)
25+
start-x-animation (fn []
26+
(animate-linear-with-delay translate-x 12 50 133.33)
27+
(animate-easing-with-delay connector-opacity 1 0 93.33)
28+
(animate-easing-with-delay connector-width 56 83.33 80)
29+
(animate-easing-with-delay connector-height 56 83.33 80)
30+
(animate-easing-with-delay border-radius-first-half 28 83.33 80)
31+
(animate-easing-with-delay border-radius-second-half 28 83.33 80))
32+
reset-x-animation (fn []
33+
(animate-linear translate-x 0 100)
34+
(set-value connector-opacity 0)
35+
(set-value connector-width 24)
36+
(set-value connector-height 12)
37+
(set-value border-radius-first-half 8)
38+
(set-value border-radius-second-half 16))
39+
fade-in-animation (fn []
40+
(animate-linear translate-x 0 200)
41+
(animate-linear opacity 1 200))
42+
fade-out-animation (fn []
43+
(animate-linear
44+
translate-x
45+
(if @reviewing-audio? 35 20)
46+
200)
47+
(if @reviewing-audio?
48+
(animate-linear scale 0.75 200)
49+
(animate-linear opacity 0 200))
50+
(set-value connector-opacity 0)
51+
(set-value connector-width 24)
52+
(set-value connector-height 12)
53+
(set-value border-radius-first-half 8)
54+
(set-value border-radius-second-half 16))
55+
fade-out-reset-animation (fn []
56+
(animate-linear opacity 0 200)
57+
(animate-linear-with-delay translate-x 20 0 200)
58+
(animate-linear-with-delay scale 1 0 200))]
59+
(use-effect (fn []
60+
(if @recording?
61+
(fade-in-animation)
62+
(fade-out-animation)))
63+
[@recording?])
64+
(use-effect (fn []
65+
(when-not @reviewing-audio?
66+
(fade-out-reset-animation)))
67+
[@reviewing-audio?])
68+
(use-effect (fn []
69+
(cond
70+
@ready-to-delete?
71+
(start-x-animation)
72+
@recording?
73+
(reset-x-animation)))
74+
[@ready-to-delete?])
75+
[:<>
76+
[reanimated/view {:style (style/delete-button-container opacity)}
77+
[reanimated/view
78+
{:style (style/delete-button-connector connector-opacity
79+
connector-width
80+
connector-height
81+
border-radius-first-half
82+
border-radius-second-half)}]]
83+
[reanimated/view
84+
{:style (style/delete-button scale translate-x opacity)
85+
:pointer-events :none}
86+
[icons/icon :i/delete
87+
{:color colors/white
88+
:size 20}]]]))])

0 commit comments

Comments
 (0)