some refactor on audio loading

Author: briansztamfater

src/status_im/ui/screens/chat/message/audio.cljs

@@ -13,7 +13,8 @@
             [status-im.utils.utils :as utils]
             [taoensso.timbre :as log]
             [quo2.foundations.colors :as colors]
-            [quo2.core :as quo]))
+            [quo2.core :as quo]
+            [react-native.core :as rn]))
 
 (defonce player-ref (atom nil))
 (defonce current-player-message-id (atom nil))
@@ -101,10 +102,11 @@
 
 (defn download-audio-http
   [base64-uri on-success]
+  (println base64-uri)
   (-> (.config ReactNativeBlobUtil (clj->js {:trusty platform/ios?}))
       (.fetch "GET" (str base64-uri))
       (.then #(on-success (.base64 ^js %)))
-      (.catch #(log/error "could not fetch audio"))))
+      (.catch #(println "could not fetch audio" %))))
 
 (defn reload-player
   [{:keys [message-id state-ref] :as params} audio-url on-success]
@@ -154,10 +156,8 @@
     (when @player-ref
       (audio/toggle-playpause-player
        @player-ref
-       #(do
-          (update-state params))
-       #(do
-          (update-state params))
+       #(update-state params)
+       #(update-state params)
        #(update-state (merge params {:error (:message %)}))))))
 
 (defn- play-pause-button
@@ -174,43 +174,41 @@
      :accessibility-label :play-pause-audio-message-button
      :color               colors/white}]])
 
-(defview message-content
+(defn message-content
   [{:keys [audio audio-duration-ms message-id]}]
-  (letsubs [state          (reagent/atom nil)
-            progress       (reagent/atom 0)
-            seeking-audio? (reagent/atom false)]
-    {:component-did-mount    (fn []
-                               (update-state {:state-ref         state
-                                              :audio-duration-ms audio-duration-ms
-                                              :message-id        message-id
-                                              :unloaded?         true
-                                              :progress-ref      progress}))
-     :component-will-unmount (fn []
-                               (destroy-player {:state-ref state :message-id message-id})
-                               (when (= @current-player-message-id message-id)
-                                 (reset! current-active-state-ref-ref nil)
-                                 (reset! current-player-message-id nil))
-                               (reset! state nil))}
-
-    (let [base-params {:state-ref    state
-                       :message-id   message-id
-                       :progress-ref progress}]
-      (if (= (:general @state) :error)
-        [react/text
-         {:style {:typography    :main-medium
-                  :margin-bottom 16}} (:error-msg @state)]
-        [react/view {:style (style/container)}
-         [play-pause-button state #(play-pause base-params audio seeking-audio?)]
-         [quo/soundtrack
-          {:style                 style/slider-container
-           :audio-current-time-ms progress
-           :player-ref            player-ref
-           :seeking-audio?        seeking-audio?}]
-         [quo/text
-          {:style               style/timestamp
-           :accessibility-label :audio-duration-label
-           :weight              :medium
-           :size                :paragraph-2}
-          (let [duration-ms   (:duration @state)
-                duration-secs (quot duration-ms 1000)]
-            (gstring/format "%02d:%02d" (quot duration-secs 60) (mod duration-secs 60)))]]))))
+  [:f>
+   (fn []
+     (let [state          (reagent/atom nil)
+           progress       (reagent/atom 0)
+           seeking-audio? (reagent/atom false)
+           base-params    {:state-ref    state
+                           :message-id   message-id
+                           :progress-ref progress}
+           time-ms        (if (#{:playing :paused :seeking} (:general @state))
+                            @progress
+                            (:duration @state))
+           time-secs      (quot time-ms 1000)]
+       (rn/use-effect
+        (fn []
+          (update-state {:state-ref         state
+                         :audio-duration-ms audio-duration-ms
+                         :message-id        message-id
+                         :unloaded?         true
+                         :progress-ref      progress})))
+       (if (= (:general @state) :error)
+         [react/text
+          {:style {:typography    :main-medium
+                   :margin-bottom 16}} (:error-msg @state)]
+         [react/view {:style (style/container)}
+          [play-pause-button state #(play-pause base-params audio seeking-audio?)]
+          [quo/soundtrack
+           {:style                 style/slider-container
+            :audio-current-time-ms progress
+            :player-ref            player-ref
+            :seeking-audio?        seeking-audio?}]
+          [quo/text
+           {:style               style/timestamp
+            :accessibility-label :audio-duration-label
+            :weight              :medium
+            :size                :paragraph-2}
+           (gstring/format "%02d:%02d" (quot time-secs 60) (mod time-secs 60))]])))])