finish styling, pending moving to quo2 and polish functionality

Author: briansztamfater

src/quo2/components/record_audio/soundtrack/view.cljs

@@ -10,14 +10,16 @@
 (def ^:private thumb-dark (js/require "../resources/images/icons2/12x12/thumb-dark.png"))
 
 (defn soundtrack
-  [{:keys [audio-current-time-ms player-ref seeking-audio?]}]
+  [{:keys [audio-current-time-ms player-ref style seeking-audio?]}]
   [:f>
    (fn []
      (let [audio-duration-ms (audio/get-player-duration @player-ref)]
        [:<>
         [slider/slider
          {:test-ID                  "soundtrack"
-          :style                    (style/player-slider-container)
+          :style                    (merge
+                                     (style/player-slider-container)
+                                     (or style {}))
           :minimum-value            0
           :maximum-value            audio-duration-ms
           :value                    @audio-current-time-ms

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

@@ -20,28 +20,6 @@
 (defonce current-active-state-ref-ref (atom nil))
 (defonce progress-timer (atom nil))
 
-(defn start-stop-progress-timer
-  [{:keys [state-ref progress-ref progress-anim]} start?]
-  (when @progress-timer
-    (utils/clear-interval @progress-timer)
-    (when-not start?
-      (reset! progress-timer nil)))
-  (when start?
-    (when @progress-timer
-      (utils/clear-interval @progress-timer))
-    (reset! progress-timer
-      (utils/set-interval
-       #(when (and @state-ref (not (:slider-seeking @state-ref)))
-          (let [ct (audio/get-player-current-time @player-ref)]
-            (reset! progress-ref ct)
-            (when ct
-              (anim/start (anim/timing progress-anim
-                                       {:toValue         @progress-ref
-                                        :duration        100
-                                        :easing          (.-linear ^js anim/easing)
-                                        :useNativeDriver true})))))
-       100))))
-
 (defn update-state
   [{:keys [state-ref progress-ref progress-anim message-id seek-to-ms audio-duration-ms
            slider-new-state-seeking? unloaded? error]}]
@@ -90,16 +68,7 @@
 
     ; update progress UI on slider release
     (when (and (some? slider-new-state-seeking?) (not slider-new-state-seeking?) (some? seek-to-ms))
-      (reset! (:progress-ref new-state) seek-to-ms))
-
-    ; update progres anim value to follow the slider
-    (when (and slider-seeking (some? seek-to-ms))
-      (anim/set-value (:progress-anim new-state) seek-to-ms))
-
-    ; on unload, reset values
-    (when unloaded?
-      (reset! (:progress-ref new-state) 0)
-      (anim/set-value (:progress-anim new-state) 0))))
+      (reset! (:progress-ref new-state) seek-to-ms))))
 
 (defn destroy-player
   [{:keys [message-id reloading?]}]
@@ -162,32 +131,32 @@
        (update-state params)))))
 
 (defn play-pause
-  [{:keys [message-id state-ref] :as params} audio]
+  [{:keys [message-id state-ref] :as params} audio seeking-audio?]
   (if (not= message-id @current-player-message-id)
     ;; player has audio from another message, we need to reload
     (reload-player params
                    audio
                    ;; on-success: audio is loaded, do we have an existing value to seek to?
-                   #(if-some [seek-time (:seek-to-ms @state-ref)]
-                      ;; check seek time against real audio duration and play
-                      (let [checked-seek-time (min (audio/get-player-duration @player-ref) seek-time)]
-                        (seek params
-                              checked-seek-time
-                              true
-                              (fn [] (play-pause params audio))))
-
-                      ;; nothing to seek to, play
-                      (play-pause params audio)))
+                   (fn []
+                     (reset! seeking-audio? false)
+                     (if-some [seek-time (:seek-to-ms @state-ref)]
+                       ;; check seek time against real audio duration and play
+                       (let [checked-seek-time (min (audio/get-player-duration @player-ref) seek-time)]
+                         (seek params
+                               checked-seek-time
+                               true
+                               (fn [] (play-pause params audio))))
+
+                       ;; nothing to seek to, play
+                       (play-pause params audio))))
 
     ;; loaded audio corresponds to current message we can play
     (when @player-ref
       (audio/toggle-playpause-player
        @player-ref
        #(do
-          (start-stop-progress-timer params true)
           (update-state params))
        #(do
-          (start-stop-progress-timer params false)
           (update-state params))
        #(update-state (merge params {:error (:message %)}))))))
 
@@ -199,64 +168,49 @@
    [quo/icon
     (case (:general @state-ref)
       :preparing :i/loading
-      :playing :i/play-audio
-      :i/pause-audio)
+      :playing   :i/pause-audio
+      :i/play-audio)
     {:size                20
      :accessibility-label :play-pause-audio-message-button
      :color               colors/white}]])
 
 (defview message-content
   [{:keys [audio audio-duration-ms message-id]}]
-  (letsubs [state         (reagent/atom nil)
-            progress      (reagent/atom 0)
-            progress-anim (anim/create-value 0)
-            width         [:dimensions/window-width]]
+  (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
-                                              :progress-anim     progress-anim}))
+                                              :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
-                       :progress-anim progress-anim}]
+    (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 {:width 295
-                             :height 56
-                             :border-radius 12
-                             :border-width 1
-                             :padding 12
-                             :align-items :center
-                             :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80)
-                             :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)}}
-         [react/view style/play-pause-slider-container
-          [play-pause-button state #(play-pause base-params audio)]
-          [react/view style/slider-container
-           [quo/soundtrack
-            {:audio-current-time-ms (:progress-ref base-params)
-             :player-ref            player-ref
-             :seeking-audio?        (:slider-seeking @state)}]]]
-
-         [react/view style/times-container
-          [quo/text {:style               (style/timestamp)
-                     :accessibility-label :audio-duration-label
-                     :weight              :regular
-                     :size                :paragraph-1}
-           (let [time (cond
-                        (or (:slider-seeking @state) (> (:seek-to-ms @state) 0)) (:seek-to-ms @state)
-                        (#{:playing :paused :seeking} (:general @state))         @progress
-                        :else                                                    (:duration @state))
-                 s    (quot time 1000)]
-             (gstring/format "%02d:%02d" (quot s 60) (mod s 60)))]]]))))
+        [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)))]]))))

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

@@ -6,28 +6,27 @@
             [quo2.theme :as theme]))
 
 (defn container
-  [window-width]
-  {:width           (* window-width 0.60)
-   :flex-direction  :column
-   :justify-content :space-between})
+  []
+  {:width            295
+   :height           56
+   :border-radius    12
+   :border-width     1
+   :padding          12
+   :flex-direction   :row
+   :align-items      :center
+   :justify-content  :space-between
+   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80)
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)})
 
 (def play-pause-slider-container
   {:flex-direction :row
    :align-items    :center})
 
 (def slider-container
-  {:flex-direction :column
-   :align-items    :stretch
-   :flex-grow      1})
-
-(defn slider
-  []
-  {:style                    (merge {:margin-left 12
-                                     :height      34}
-                                    (when platform/ios? {:margin-bottom 4}))
-   :thumb-tint-color         colors-old/white
-   :minimum-track-tint-color colors-old/white
-   :maximum-track-tint-color colors-old/white-transparent})
+  {:position :absolute
+   :left     60
+   :right    71
+   :bottom   nil})
 
 (defn play-pause-container
   []
@@ -38,11 +37,5 @@
    :align-items      :center
    :justify-content  :center})
 
-(def times-container
-  {:flex-direction  :row
-   :justify-content :space-between})
-
-(defn timestamp
-  []
-  (merge (message.style/audio-message-timestamp-text)
-         {:margin-left 40}))
+(def timestamp
+  {:margin-left 4})