progress on styling

Author: briansztamfater

Diff for: resources/images/icons2/20x20/[email protected]

@@ -53,6 +53,7 @@
     quo2.components.profile.select-profile.view
     quo2.components.reactions.reaction
     quo2.components.record-audio.record-audio.view
+    quo2.components.record-audio.soundtrack.view
     quo2.components.selectors.disclaimer.view
     quo2.components.selectors.filter.view
     quo2.components.selectors.selectors
@@ -171,6 +172,7 @@
 
 ;;;; RECORD AUDIO
 (def record-audio quo2.components.record-audio.record-audio.view/record-audio)
+(def soundtrack quo2.components.record-audio.soundtrack.view/soundtrack)
 
 ;;;; SETTINGS
 (def privacy-option quo2.components.settings.privacy-option/card)

Diff for: resources/images/icons2/20x20/[email protected]

@@ -2,7 +2,6 @@
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require ["react-native-blob-util" :default ReactNativeBlobUtil]
             [goog.string :as gstring]
-            [quo.design-system.colors :as colors]
             [reagent.core :as reagent]
             [react-native.audio-toolkit :as audio]
             [status-im.ui.components.animation :as anim]
@@ -12,7 +11,9 @@
             [status-im.ui.screens.chat.styles.message.audio :as style]
             [status-im.utils.platform :as platform]
             [status-im.utils.utils :as utils]
-            [taoensso.timbre :as log]))
+            [taoensso.timbre :as log]
+            [quo2.foundations.colors :as colors]
+            [quo2.core :as quo]))
 
 (defonce player-ref (atom nil))
 (defonce current-player-message-id (atom nil))
@@ -192,18 +193,17 @@
 
 (defn- play-pause-button
   [state-ref on-press]
-  (let [color colors/blue]
-    (if (= (:general @state-ref) :preparing)
-      [react/view {:style (style/play-pause-container true)}
-       [react/small-loading-indicator color]]
-      [react/touchable-highlight {:on-press on-press}
-       [icons/icon
-        (case (:general @state-ref)
-          :playing :main-icons/pause
-          :main-icons/play)
-        {:container-style     (style/play-pause-container false)
-         :accessibility-label :play-pause-audio-message-button
-         :color               color}]])))
+  [react/touchable-opacity
+   {:on-press on-press
+    :style    (style/play-pause-container)}
+   [quo/icon
+    (case (:general @state-ref)
+      :preparing :i/loading
+      :playing :i/play-audio
+      :i/pause-audio)
+    {:size                20
+     :accessibility-label :play-pause-audio-message-button
+     :color               colors/white}]])
 
 (defview message-content
   [{:keys [audio audio-duration-ms message-id]}]
@@ -233,27 +233,27 @@
         [react/text
          {:style {:typography    :main-medium
                   :margin-bottom 16}} (:error-msg @state)]
-        [react/view (style/container width)
+        [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
-           [slider/animated-slider
-            (merge (style/slider)
-                   {:minimum-value       0
-                    :maximum-value       (:duration @state)
-                    :value               progress-anim
-                    :on-value-change     #(seek base-params % false nil)
-                    :on-sliding-start    #(seek (merge base-params {:slider-new-state-seeking? true})
-                                                %
-                                                true
-                                                nil)
-                    :on-sliding-complete #(seek (merge base-params {:slider-new-state-seeking? false})
-                                                %
-                                                true
-                                                nil)})]]]
+           [quo/soundtrack
+            {:audio-current-time-ms (:progress-ref base-params)
+             :player-ref            player-ref
+             :seeking-audio?        (:slider-seeking @state)}]]]
 
          [react/view style/times-container
-          [react/text {:style (style/timestamp)}
+          [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

Diff for: resources/images/icons2/20x20/[email protected]

@@ -1,7 +1,9 @@
 (ns status-im.ui.screens.chat.styles.message.audio
-  (:require [quo.design-system.colors :as colors]
+  (:require [quo.design-system.colors :as colors-old]
             [status-im.ui.screens.chat.styles.message.message :as message.style]
-            [status-im.utils.platform :as platform]))
+            [status-im.utils.platform :as platform]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]))
 
 (defn container
   [window-width]
@@ -23,17 +25,18 @@
   {:style                    (merge {:margin-left 12
                                      :height      34}
                                     (when platform/ios? {:margin-bottom 4}))
-   :thumb-tint-color         colors/white
-   :minimum-track-tint-color colors/white
-   :maximum-track-tint-color colors/white-transparent})
+   :thumb-tint-color         colors-old/white
+   :minimum-track-tint-color colors-old/white
+   :maximum-track-tint-color colors-old/white-transparent})
 
 (defn play-pause-container
-  [loading?]
-  {:background-color colors/white-persist
-   :width            28
-   :height           28
-   :padding          (if loading? 4 2)
-   :border-radius    15})
+  []
+  {:background-color (get-in colors/customization [:blue (if (theme/dark?) 60 50)])
+   :width            32
+   :height           32
+   :border-radius    16
+   :align-items      :center
+   :justify-content  :center})
 
 (def times-container
   {:flex-direction  :row
@@ -42,4 +45,4 @@
 (defn timestamp
   []
   (merge (message.style/audio-message-timestamp-text)
-         {:margin-left 40}))
+         {:margin-left 40}))

Diff for: resources/images/icons2/20x20/[email protected]

@@ -291,9 +291,7 @@
 ;; AUDIO
 (defn audio
   [message]
-  [rn/view {:style (style/message-view message) :accessibility-label :audio-message}
-   [rn/view {:style (style/message-view-content)}
-    [message.audio/message-content message]]])
+  [message.audio/message-content message])
 
 (defn contact-request-status-pending
   []

Diff for: src/quo2/core.cljs

@@ -133,7 +133,7 @@
               [not-implemented/not-implemented [old-message/sticker message-data]]
 
               constants/content-type-audio
-              [not-implemented/not-implemented [old-message/audio message-data]]
+              [old-message/audio message-data]
 
               constants/content-type-image
               [image/image-message 0 message-data context on-long-press]