Skip to content

Commit c0d3995

Browse files
briansztamfaterbriansztamfater
committed
refactor functional component
1 parent 29bfef7 commit c0d3995

File tree

1 file changed

+70
-67
lines changed
  • src/status_im2/contexts/chat/messages/content/audio

1 file changed

+70
-67
lines changed

‎src/status_im2/contexts/chat/messages/content/audio/view.cljs

+70-67
Original file line numberDiff line numberDiff line change
@@ -129,73 +129,76 @@
129129
#(play-pause-player params)))
130130
(play-pause-player params))))))))
131131

132-
(defn audio-message
133-
[{:keys [audio-duration-ms message-id]}
132+
(defn f-audio-message
133+
[player-state progress seeking-audio? {:keys [audio-duration-ms message-id]}
134134
{:keys [in-pinned-view?]}]
135+
(let [player-key (get-player-key message-id in-pinned-view?)
136+
player (@active-players player-key)
137+
duration (if (and player (not (#{:preparing :not-loaded :error} @player-state)))
138+
(audio/get-player-duration player)
139+
audio-duration-ms)
140+
time-secs (quot
141+
(if (or @seeking-audio? (#{:playing :seeking} @player-state))
142+
(if (<= @progress 1) (* duration @progress) @progress)
143+
duration)
144+
1000)]
145+
(rn/use-effect (fn [] #(destroy-player player-key)))
146+
(rn/use-effect
147+
(fn []
148+
(when (and (some? @current-player-key)
149+
(not= @current-player-key player-key)
150+
(= @player-state :playing))
151+
(play-pause-player {:player-key player-key
152+
:player-state player-state
153+
:progress-ref progress
154+
:message-id message-id
155+
:audio-duration-ms duration
156+
:seeking-audio? seeking-audio?
157+
:user-interaction? false})))
158+
[@current-player-key])
159+
(if (= @player-state :error)
160+
[quo/text
161+
{:style style/error-label
162+
:accessibility-label :audio-error-label
163+
:weight :medium
164+
:size :paragraph-2}
165+
(i18n/label :error-loading-audio)]
166+
[rn/view
167+
{:accessibility-label :audio-message-container
168+
:style (style/container)}
169+
[rn/touchable-opacity
170+
{:accessibility-label :play-pause-audio-message-button
171+
:on-press #(play-pause-player {:player-key player-key
172+
:player-state player-state
173+
:progress-ref progress
174+
:message-id message-id
175+
:audio-duration-ms duration
176+
:seeking-audio? seeking-audio?
177+
:user-interaction? true})
178+
:style (style/play-pause-container)}
179+
[quo/icon
180+
(case @player-state
181+
:preparing :i/loading
182+
:playing :i/pause-audio
183+
:i/play-audio)
184+
{:size 20
185+
:color colors/white}]]
186+
[:f> quo/soundtrack
187+
{:style style/slider-container
188+
:audio-current-time-ms progress
189+
:player-ref (@active-players player-key)
190+
:seeking-audio? seeking-audio?}]
191+
[quo/text
192+
{:style style/timestamp
193+
:accessibility-label :audio-duration-label
194+
:weight :medium
195+
:size :paragraph-2}
196+
(gstring/format "%02d:%02d" (quot time-secs 60) (mod time-secs 60))]])))
197+
198+
(defn audio-message
199+
[message context]
135200
(let [player-state (reagent/atom :not-loaded)
136201
progress (reagent/atom 0)
137-
seeking-audio? (reagent/atom false)
138-
player-key (get-player-key message-id in-pinned-view?)]
139-
[:f>
140-
(fn []
141-
(let [player (@active-players player-key)
142-
duration (if (and player (not (#{:preparing :not-loaded :error} @player-state)))
143-
(audio/get-player-duration player)
144-
audio-duration-ms)
145-
time-secs (quot
146-
(if (or @seeking-audio? (#{:playing :seeking} @player-state))
147-
(if (<= @progress 1) (* duration @progress) @progress)
148-
duration)
149-
1000)]
150-
(rn/use-effect (fn [] #(destroy-player player-key)))
151-
(rn/use-effect
152-
(fn []
153-
(when (and (some? @current-player-key)
154-
(not= @current-player-key player-key)
155-
(= @player-state :playing))
156-
(play-pause-player {:player-key player-key
157-
:player-state player-state
158-
:progress-ref progress
159-
:message-id message-id
160-
:audio-duration-ms duration
161-
:seeking-audio? seeking-audio?
162-
:user-interaction? false})))
163-
[@current-player-key])
164-
(if (= @player-state :error)
165-
[quo/text
166-
{:style style/error-label
167-
:accessibility-label :audio-error-label
168-
:weight :medium
169-
:size :paragraph-2}
170-
(i18n/label :error-loading-audio)]
171-
[rn/view
172-
{:accessibility-label :audio-message-container
173-
:style (style/container)}
174-
[rn/touchable-opacity
175-
{:accessibility-label :play-pause-audio-message-button
176-
:on-press #(play-pause-player {:player-key player-key
177-
:player-state player-state
178-
:progress-ref progress
179-
:message-id message-id
180-
:audio-duration-ms duration
181-
:seeking-audio? seeking-audio?
182-
:user-interaction? true})
183-
:style (style/play-pause-container)}
184-
[quo/icon
185-
(case @player-state
186-
:preparing :i/loading
187-
:playing :i/pause-audio
188-
:i/play-audio)
189-
{:size 20
190-
:color colors/white}]]
191-
[:f> quo/soundtrack
192-
{:style style/slider-container
193-
:audio-current-time-ms progress
194-
:player-ref (@active-players player-key)
195-
:seeking-audio? seeking-audio?}]
196-
[quo/text
197-
{:style style/timestamp
198-
:accessibility-label :audio-duration-label
199-
:weight :medium
200-
:size :paragraph-2}
201-
(gstring/format "%02d:%02d" (quot time-secs 60) (mod time-secs 60))]])))]))
202+
seeking-audio? (reagent/atom false)]
203+
(fn []
204+
[:f> f-audio-message player-state progress seeking-audio? message context])))

0 commit comments

Comments
 (0)