enhance: long press + to start audio record

deps/shui/src/logseq/shui/hooks.cljs

@@ -85,3 +85,50 @@
          (m/ap (set-value! (m/?> flow)))))
       deps)
      value)))
+
+(defn- is-touch-event? [e]
+  (exists? (.-touches e)))
+
+(defn- prevent-default [e]
+  (when (and (is-touch-event? e)
+             (< (.-length (.-touches e)) 2)
+             (.-preventDefault e))
+    (.preventDefault e)))
+
+(defn use-long-press
+  [{:keys [on-click on-long-press prevent-default? delay]
+    :or {prevent-default? true
+         delay 300}}]
+  (let [[long-press-triggered set-long-press-triggered] (use-state false)
+        timeout-ref (use-ref nil)
+        target-ref (use-ref nil)
+        start (use-callback
+               (fn [e]
+                 (when (and prevent-default? (.-target e))
+                   (.addEventListener (.-target e) "touchend" prevent-default #js {:passive false})
+                   (set! (.-current target-ref) (.-target e)))
+                 (set! (.-current timeout-ref)
+                       (js/setTimeout
+                        (fn []
+                          (on-long-press e)
+                          (set-long-press-triggered true))
+                        delay)))
+               [on-long-press delay prevent-default?])
+
+        clear (use-callback
+               (fn [_e should-trigger-click]
+                 (when (.-current timeout-ref)
+                   (js/clearTimeout (.-current timeout-ref)))
+                 (when (and (or (nil? should-trigger-click) should-trigger-click)
+                            (not long-press-triggered))
+                   (on-click))
+                 (set-long-press-triggered false)
+                 (when (and prevent-default? (.-current target-ref))
+                   (.removeEventListener (.-current target-ref) "touchend" prevent-default)))
+               [prevent-default? on-click long-press-triggered])]
+
+    {:onMouseDown #(start %)
+     :onTouchStart #(start %)
+     :onMouseUp #(clear % true)
+     :onMouseLeave #(clear % false)
+     :onTouchEnd #(clear % true)}))

src/main/mobile/components/recorder.cljs

@@ -111,19 +111,20 @@
                                  (.start w1)
                                  (.start w2)))
            (.on "record-end" (fn [^js blob]
-                               (stop)
                                (when (true? (rum/deref *save?))
                                  (save-asset-audio! blob @*locale))
                                (mobile-state/close-popup!)))
            (.on "record-progress" (gfun/throttle
                                    (fn [time]
-                                     (if (>= time (* audio-length-limit 60 1000))
-                                       (.click (js/document.getElementById "recording-button"))
-                                       (try
-                                         (let [t (ms-to-time-format time)]
-                                           (set! (. (rum/deref *timer-ref) -textContent) t))
-                                         (catch js/Error e
-                                           (js/console.warn "WARN: bad progress time:" e)))))
+                                     (when @*recorder
+                                       (if (>= time (* audio-length-limit 60 1000))
+                                         (.click (js/document.getElementById "recording-button"))
+                                         (try
+                                           (let [t (ms-to-time-format time)]
+                                             (when-let [node (rum/deref *timer-ref)]
+                                               (set! (. node -textContent) t)))
+                                           (catch js/Error e
+                                             (js/console.warn "WARN: bad progress time:" e))))))
                                    33))
            (.on "record-beat" (fn [value]
                                 (let [value' (cond
@@ -209,7 +210,7 @@
                                    :default-height 300}}))
 
 (defn record!
-  []
+  [& {:keys [save-to-today?]}]
   (let [editing-id (state/get-edit-input-id)
         quick-add? (mobile-state/quick-add-open?)]
     (set-last-edit-block! nil)
@@ -217,7 +218,7 @@
       (p/do!
        (editor-handler/save-current-block!)
        (let [block (db-model/query-block-by-uuid (:block/uuid (state/get-edit-block)))]
-         (if quick-add?
+         (if (or quick-add? save-to-today?)
            (p/do!
             (state/clear-edit!)
             (init/keyboard-hide)

src/main/mobile/components/ui_silk.cljs

@@ -1,7 +1,9 @@
 (ns mobile.components.ui-silk
   "Mobile top header and bottom tabs"
   (:require [frontend.handler.editor :as editor-handler]
+            [frontend.state :as state]
             [frontend.util :as util]
+            [logseq.shui.hooks :as hooks]
             [logseq.shui.ui :as shui]
             [mobile.state :as mobile-state]
             [rum.core :as rum]))
@@ -34,25 +36,30 @@
       {:class (when (= current-tab "home") "active")
        :data-tab "home"}
       (shui/button {:variant :icon}
-        (shui/tabler-icon "home" {:size 24}))
+                   (shui/tabler-icon "home" {:size 24}))
       [:small "Journals"]]
      [:span.as-item
       {:class (when (= current-tab "search") "active")
        :data-tab "search"}
       (shui/button {:variant :icon}
-        (shui/tabler-icon "search" {:size 24}))
+                   (shui/tabler-icon "search" {:size 24}))
       [:small "Search"]]
      [:span.as-item
       (shui/button
-        {:variant :icon
-         :on-click (fn [^js e]
-                     (util/stop e)
-                     (editor-handler/show-quick-add))}
-        (shui/tabler-icon "plus" {:size 24}))
+       (merge
+        {:variant :icon}
+        (hooks/use-long-press
+         {:on-click (fn [^js e]
+                      (util/stop e)
+                      (editor-handler/show-quick-add))
+          :on-long-press (fn [_e]
+                           (state/pub-event! [:mobile/start-audio-record]))
+          :delay 500}))
+       (shui/tabler-icon "plus" {:size 24}))
       [:small "Quick add"]]
      [:span.as-item
       {:class (when (= current-tab "settings") "active")
        :data-tab "settings"}
       (shui/button {:variant :icon}
-        (shui/tabler-icon "settings" {:size 24}))
+                   (shui/tabler-icon "settings" {:size 24}))
       [:small "Settings"]]]))

src/main/mobile/events.cljs

@@ -2,6 +2,7 @@
   "Mobile events"
   (:require [frontend.components.quick-add :as quick-add]
             [frontend.handler.events :as events]
+            [mobile.components.recorder :as recorder]
             [mobile.state :as mobile-state]))
 
 (defmethod events/handle :dialog/mobile-quick-add [_]
@@ -9,3 +10,6 @@
                             :content-fn (fn []
                                           (quick-add/quick-add))
                             :opts {:id :ls-quick-add}}))
+
+(defmethod events/handle :mobile/start-audio-record [_]
+  (recorder/record! {:save-to-today? true}))